Merge pull request #3 from mamadou-niakate/feature/rebuseInOtherLangage

Feature/rebuse in other langage

Author: metmetal

src/css/main.css

@@ -304,6 +304,16 @@ body,
   left: 30px;
 }
 
+.no-rebus {
+  background-color: #1542e642;
+  grid-column-start: 3;
+  align-self: center;
+  grid-row-start: 2;
+  font-size: 2em;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+}
+
 .rebus {
   background-color: #1542e642;
   grid-column-start: 3;

src/js/components/Rebus.js

@@ -19,9 +19,11 @@ export function Rebus(props, ...children) {
         const rebus = this.props.rebuses[this.props.current];
         /* If history API isn't available, we shouldn't revert to the more widely available `window.location.href`, 
         as it incurs a new HTTP request and thus results in an infinite loop (and breaks SPAs). */
+        const params = new URLSearchParams(window.location.search);
+        const lang = params.get('lang');
         if (window.history) {
           // Adds 'rebus' query parameter to end of URL. Should be endpoint-agnostic.
-          window.history.pushState('', '', `?rebus=${rebus.id}`);
+          window.history.pushState('', '', `?rebus=${rebus.id}&lang=${lang}`);
         }
         if (rebus.isAnswered) {
           this.$parent.querySelector('.change-button--next').focus();
@@ -30,11 +32,12 @@ export function Rebus(props, ...children) {
         }
       },
       render({ current, rebuses, animation }) {
-        const rebus = rebuses[current];
-        this.children = rebus.words.map((word, wordIndex) =>
-          Word({ word, wordIndex, current, rebuses, charInput: props.charInput })
-        );
-        return `
+        if (rebuses.length !== 0) {
+          const rebus = rebuses[current];
+          this.children = rebus.words.map((word, wordIndex) =>
+            Word({ word, wordIndex, current, rebuses, charInput: props.charInput })
+          );
+          return `
           <div class="rebus ${rebus.isAnswered ? 'rebus--answered' : ''} animation--${animation}">
             <div class="rebus__header">
               <span>${current + 1}/${rebuses.length}</span>
@@ -45,6 +48,18 @@ export function Rebus(props, ...children) {
             </div>
           </div>
         `;
+        }
+
+        return `
+        <div class="no-rebus">
+            <span>There are no rebuses yet for this language.</span>
+            <div>
+            <a href="${window.location.origin}">
+            <span>Return to home page</span>
+            </a>
+            </div>
+          </div>
+          `;
       }
     })
   );

src/js/frenchRebuses.js

@@ -1,5 +1,5 @@
-import { englishRebuses } from './englishRebuses';
-import { frenchRebuses } from './frenchRebuses';
+import { englishRebuses } from './rebusesLanguages/englishRebuses';
+import { frenchRebuses } from './rebusesLanguages/frenchRebuses';
 
 export function isRebusAnswered(id) {
   const answeredRebuses = window.localStorage.getItem('answeredRebuses');
@@ -33,7 +33,7 @@ export function getRebuses() {
       chosenRebuses = frenchRebuses;
       break;
     default:
-      chosenRebuses = englishRebuses;
+      chosenRebuses = [];
   }
   return chosenRebuses.map((rebus, index) => {
     const id = index + 1;

src/js/rebuses.js

@@ -0,0 +1,37 @@
+export const frenchRebuses = [
+  {
+    symbols: ['Re', '+', '🚌'],
+    words: ['Rebus'],
+    hint: 'Tu as résolu le premier maintenant'
+  },
+  {
+    symbols: ['🍲', '+', '🧓'],
+    words: ['Potager'],
+    hint: 'jardin de légumes et fruits'
+  },
+  {
+    symbols: ['🥬', '+', '🌹'],
+    words: ['Choufleur'],
+    hint: 'Légume vert'
+  },
+  {
+    symbols: ['🥖', '+', '🪣'],
+    words: ['Pinceau'],
+    hint: 'outil utilisé par les peintres'
+  },
+  {
+    symbols: ['🎲', '+', '🪚', '+', '👃'],
+    words: ['Dessiner'],
+    hint: 'action de faire un dessin'
+  },
+  {
+    symbols: ['🚌', '+', '🐟'],
+    words: ['Carton'],
+    hint: 'un contenant'
+  },
+  {
+    symbols: ['&', '+', '🥛', '+', '🧤'],
+    words: ['Elegant'],
+    hint: 'etre elegant'
+  }
+];