🎨 Format code + French addition ! (files)

HerIsDia · Jun 21, 2021 · ded164b · ded164b
1 parent 9ddd070
commit ded164b
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -30,12 +30,12 @@
 
   <body>
     <div>
-      <h1>Hello,</h1>
-      <p>You are <span id=a></span> <span id="poke"></span> today.</p>
-      <p class="footer">Made with <i class="fas fa-heart"></i> by <a href="https://diamant.dev" target="_blank" rel="noopener noreferrer">Diamant</a>. - <a id="tweet" href="#" hidden target="_blank">Share on twitter.</a></p>
+      <h1 id="hello"></h1>
+      <p id="you"></p>
+      <p class="footer"></p>
       </div>
     </div>
-    <div><img src="#" alt="" crossorigin="anonymous" /></div>
+    <div><img id="sprite" src="#" alt="" crossorigin="anonymous" /></div>
 
     <script src="src/index.ts"></script>
   </body>

diff --git a/src/getData.ts b/src/getData.ts
@@ -0,0 +1,13 @@
+const pokemonJS = require('pokemon.js');
+
+export const getData = async (difference: boolean) => {
+  const allPoke: [string] = await pokemonJS.getAll();
+  const actualPoke = await (difference
+    ? allPoke[Math.round(Math.random() * allPoke.length)]
+    : (localStorage.getItem('pokemon') as string));
+  const sprites: any = await pokemonJS.getSprites(actualPoke);
+  const type: [{ logo: string; name: string }] = await pokemonJS.getType(
+    actualPoke
+  );
+  return { actualPoke, sprites, type };
+};
diff --git a/src/index.ts b/src/index.ts
@@ -1,43 +1,86 @@
-const pokemonJS = require('pokemon.js');
+import { getData } from './getData';
 
-const dateNow = Date.now() - (Date.now() % 86400000);
+interface Data {
+  actualPoke: string;
+  sprites: any;
+  type: [
+    {
+      logo: string;
+      name: string;
+    }
+  ];
+}
 
-const lastDay = parseInt(localStorage.getItem('day') as string, 10) || 0;
+// Language checker
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const userLang: 'fr' | 'en' =
+  (urlParams.get('lang') || navigator.language.slice(0, 2)) == 'fr'
+    ? 'fr'
+    : 'en';
 
+// Date
+const dateNow = Date.now() - (Date.now() % 86400000);
+const lastDay = parseInt(localStorage.getItem('day') as string, 10) || 0;
 const difference = dateNow - lastDay >= 86400000;
+localStorage.setItem('day', `${difference ? dateNow : lastDay}`);
+
+// HTML Element
+const hello = document.querySelector('#hello') as HTMLHeadingElement;
+const you = document.querySelector('#you') as HTMLParagraphElement;
+const footer = document.querySelector('.footer') as HTMLParagraphElement;
+const img = document.querySelector('img') as HTMLImageElement;
+const icon = document.querySelector('.icon') as HTMLLinkElement;
+
+const language = (data: Data) => {
+  const language = {
+    fr: {
+      hello: `${
+        8 <= new Date().getHours() && new Date().getHours() <= 18
+          ? 'Bonjour,'
+          : 'Bonsoir,'
+      }`,
+      you: `Vous êtes un.e ${data.actualPoke} aujourd'hui.`,
+      footer: `Créée avec <i class="fas fa-heart"></i> par <a href="https://diamant.dev" target="_blank" rel="noopener noreferrer">Diamant</a>. - <a id="tweet" href="https://twitter.com/intent/tweet?text=Today, Je suis un.e ${data.actualPoke}, et vous? Regardez ici:&hashtags=WhatPokemonAreYouToday,Pokemon&url=https://wpart.diams.app" target="_blank">Partager sur twitter.</a>`,
+    },
+    en: {
+      hello: `Hello,`,
+      you: `You are ${
+        data.actualPoke.startsWith('a') ||
+        data.actualPoke.startsWith('e') ||
+        data.actualPoke.startsWith('i') ||
+        data.actualPoke.startsWith('o') ||
+        data.actualPoke.startsWith('u')
+          ? 'an'
+          : 'a'
+      } ${data.actualPoke} today.`,
+      footer: `Made with <i class="fas fa-heart"></i> by <a href="https://diamant.dev" target="_blank" rel="noopener noreferrer">Diamant</a>. - <a id="tweet" href="https://twitter.com/intent/tweet?text=Today, I'm ${
+        data.actualPoke.startsWith('a') ||
+        data.actualPoke.startsWith('e') ||
+        data.actualPoke.startsWith('i') ||
+        data.actualPoke.startsWith('o') ||
+        data.actualPoke.startsWith('u')
+          ? 'an'
+          : 'a'
+      } ${
+        data.actualPoke
+      }, and you? Check here:&hashtags=WhatPokemonAreYouToday,Pokemon&url=https://wpart.diams.app" target="_blank">Share on twitter.</a>`,
+    },
+  };
+  return language[userLang];
+};
+
+getData(difference).then((data) => {
+  localStorage.setItem('pokemon', data.actualPoke);
+  const languageText = language(data);
+
+  img.alt = data.actualPoke;
+  img.src = data.sprites.other['official-artwork'].front_default;
+  icon.href = data.sprites.front_default;
+
+  hello.innerHTML = languageText.hello;
+  you.innerHTML = languageText.you;
+  footer.innerHTML = languageText.footer;
 
-pokemonJS.getAll().then((pokemon: [string]) => {
-  const rdmPoke = difference
-    ? pokemon[Math.round(Math.random() * pokemon.length)]
-    : (localStorage.getItem('pokemon') as string);
-  const textToEdit = document.querySelector('#poke') as HTMLSpanElement;
-  textToEdit.innerText = rdmPoke;
-  localStorage.setItem('day', `${difference ? dateNow : lastDay}`);
-  localStorage.setItem('pokemon', rdmPoke);
-  pokemonJS.getSprites(rdmPoke).then((url: any) => {
-    const img = document.querySelector('img') as HTMLImageElement;
-    img.alt = rdmPoke;
-    img.src = url.other['official-artwork'].front_default;
-    const icon = document.querySelector('.icon') as HTMLLinkElement;
-    icon.href = url.front_default;
-    const a =
-      rdmPoke.startsWith('a') ||
-      rdmPoke.startsWith('e') ||
-      rdmPoke.startsWith('i') ||
-      rdmPoke.startsWith('o') ||
-      rdmPoke.startsWith('u')
-        ? 'an'
-        : 'a';
-    const shareURL = `https://twitter.com/intent/tweet?text=Today, I'm ${a} ${rdmPoke}, and you? Check here:&hashtags=WhatPokemonAreYouToday,Pokemon&url=https://wpart.diams.app`;
-    const aP = document.querySelector('#a') as HTMLSpanElement;
-    aP.innerText = a;
-    const tweetBtn = document.querySelector('#tweet') as HTMLLinkElement;
-    tweetBtn.href = shareURL;
-    tweetBtn.removeAttribute('hidden');
-    pokemonJS
-      .getType(rdmPoke)
-      .then((type: [{ logo: string; name: string }]) => {
-        document.body.classList.add('ready', type[0].name);
-      });
-  });
+  document.body.classList.add('ready', data.type[0].name);
 });