Add feedback

3 files changed, 119 insertions, 121 deletions

diff --git a/src/App.svelte b/src/App.svelte
index 046dff2..dc81785 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,7 +2,7 @@
   import AutoComplete from "simple-svelte-autocomplete";
   import France from './assets/France.svelte'
   import JSConfetti from 'js-confetti'
-  import departementNames from './assets/départements.json'
+  import departements from './assets/départements.json'
   import listDep from './assets/listDeps.json'
 	import { onMount } from 'svelte';
   import './rainbow.css';
@@ -11,7 +11,7 @@
   const jsConfetti = new JSConfetti()
   const autoCompleteItems = listDep.map(code => ({
       "code": code,
-      "name": departementNames[code]
+      "name": departements[code]['name']
     })
   );
 
@@ -28,6 +28,7 @@
   let winCount = 0;
   let guessCount = 0;
   let canImprove = true;
+  let feedbackString = "";
 
   function addClassGuess(dep, className) {
     if(["75", "92", "93", "94"].includes(dep)) {
@@ -75,15 +76,23 @@
   function validate() {
     guessCount += 1
     if(depSelected === listGuesses[currentDepGuessed] && codeSelected == listGuesses[currentDepGuessed]) {
+      feedbackString = ` 🎉 Bravo !`
       addClassGuess(listGuesses[currentDepGuessed], 'win')
       winCount += 1
       lossStreak = 0;
       winStreak += 1;
     } else if(depSelected === listGuesses[currentDepGuessed] || codeSelected == listGuesses[currentDepGuessed]) {
+      if(depSelected === listGuesses[currentDepGuessed]) {
+        feedbackString = `👏 Pas mal ! C'était le numéro ${listGuesses[currentDepGuessed]}`
+      } else {
+        feedbackString = `👏 Pas mal ! C'était ${departements[listGuesses[currentDepGuessed]]['det']} ${departements[listGuesses[currentDepGuessed]]['name']}`
+      }
       addClassGuess(listGuesses[currentDepGuessed], 'miss')
       winStreak = 0;
       lossStreak = 0;
     } else {
+      const code = listGuesses[currentDepGuessed];
+      feedbackString = `C'était ${departements[listGuesses[currentDepGuessed]]['det']} ${departements[code]['name']} (${code})`
       addClassGuess(listGuesses[currentDepGuessed], 'loss')
       lossStreak += 1;
       winStreak = 0;
@@ -146,6 +155,7 @@
   <h1>Départements Français</h1>
 
   {#if currentDepGuessed == -1}
+    <br/>
   {:else}
     <h3>Devine quel est ce département : </h3>
   {/if}
@@ -186,25 +196,16 @@
         valueFieldName="code" onChange={next}/>
   </div>
   <div class="response" in:receive out:send>
-    <button bind:this={sendButton} on:click={validate}>Devine !</button>
-    <span>{winCount} / {guessCount}</span>
+      <button bind:this={sendButton} on:click={validate}>Devine !</button>
+      <span>{winCount} / {guessCount}</span>
+  </div>
+  <div class="response" in:receive out:send>
+    <div>{feedbackString}</div>
   </div>
   {/if}
 </main>
 
 <style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
-  }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-  }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
-  }
   button {
     border: 1px solid black;
   }
@@ -223,9 +224,6 @@
   .response > * {
     margin: 10px;
   }
-  .read-the-docs {
-    color: #888;
-  }
   .guessCode {
     height: 45px;
   }
diff --git a/src/app.css b/src/app.css
index a523a50..39cdeb2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -42,7 +42,7 @@ h1 {
 }
 
 #app {
-  max-width: 85vh;
+  max-width: 78vh;
   margin: 0 auto;
   text-align: center;
   width: 100vw;
diff --git a/src/assets/départements.json b/src/assets/départements.json
index a6c29ea..8122810 100644
--- a/src/assets/départements.json
+++ b/src/assets/départements.json
@@ -1,103 +1,103 @@
 {
-  "01": "Ain",
-  "02": "Aisne",
-  "03": "Allier",
-  "04": "Alpes-de-Haute-Provence",
-  "05": "Hautes-Alpes",
-  "06": "Alpes-Maritimes",
-  "07": "Ardèche",
-  "08": "Ardennes",
-  "09": "Ariège",
-  "10": "Aube",
-  "11": "Aude",
-  "12": "Aveyron",
-  "13": "Bouches-du-Rhône",
-  "14": "Calvados",
-  "15": "Cantal",
-  "16": "Charente",
-  "17": "Charente-Maritime",
-  "18": "Cher",
-  "19": "Corrèze",
-  "21": "Côte-d'Or",
-  "22": "Côtes-d'Armor",
-  "23": "Creuse",
-  "24": "Dordogne",
-  "25": "Doubs",
-  "26": "Drôme",
-  "27": "Eure",
-  "28": "Eure-et-Loir",
-  "29": "Finistère",
-  "2a": "Corse-du-Sud",
-  "2b": "Haute-Corse",
-  "30": "Gard",
-  "31": "Haute-Garonne",
-  "32": "Gers",
-  "33": "Gironde",
-  "34": "Hérault",
-  "35": "Ille-et-Vilaine",
-  "36": "Indre",
-  "37": "Indre-et-Loire",
-  "38": "Isère",
-  "39": "Jura",
-  "40": "Landes",
-  "41": "Loir-et-Cher",
-  "42": "Loire",
-  "43": "Haute-Loire",
-  "44": "Loire-Atlantique",
-  "45": "Loiret",
-  "46": "Lot",
-  "47": "Lot-et-Garonne",
-  "48": "Lozère",
-  "49": "Maine-et-Loire",
-  "50": "Manche",
-  "51": "Marne",
-  "52": "Haute-Marne",
-  "53": "Mayenne",
-  "54": "Meurthe-et-Moselle",
-  "55": "Meuse",
-  "56": "Morbihan",
-  "57": "Moselle",
-  "58": "Nièvre",
-  "59": "Nord",
-  "60": "Oise",
-  "61": "Orne",
-  "62": "Pas-de-Calais",
-  "63": "Puy-de-Dôme",
-  "64": "Pyrénées-Atlantiques",
-  "65": "Hautes-Pyrénées",
-  "66": "Pyrénées-Orientales",
-  "67": "Bas-Rhin",
-  "68": "Haut-Rhin",
-  "69": "Rhône",
-  "70": "Haute-Saône",
-  "71": "Saône-et-Loire",
-  "72": "Sarthe",
-  "73": "Savoie",
-  "74": "Haute-Savoie",
-  "75": "Paris",
-  "76": "Seine-Maritime",
-  "77": "Seine-et-Marne",
-  "78": "Yvelines",
-  "79": "Deux-Sèvres",
-  "80": "Somme",
-  "81": "Tarn",
-  "82": "Tarn-et-Garonne",
-  "83": "Var",
-  "84": "Vaucluse",
-  "85": "Vendée",
-  "86": "Vienne",
-  "87": "Haute-Vienne",
-  "88": "Vosges",
-  "89": "Yonne",
-  "90": "Territoire de Belfort",
-  "91": "Essonne",
-  "92": "Hauts-de-Seine",
-  "93": "Seine-Saint-Denis",
-  "94": "Val-de-Marne",
-  "95": "Val-d'Oise",
-  "971": "Guadeloupe",
-  "972": "Martinique",
-  "973": "Guyane",
-  "974": "La Réunion",
-  "976": "Mayotte"
+  "01": {"det": "l'", "name": "Ain"},
+  "02": {"det": "l'", "name": "Aisne"},
+  "03": {"det": "l'", "name": "Allier"},
+  "04": {"det": "les", "name": "Alpes-de-Haute-Provence"},
+  "05": {"det": "les", "name": "Hautes-Alpes"},
+  "06": {"det": "les", "name": "Alpes-Maritimes"},
+  "07": {"det": "l'", "name": "Ardèche"},
+  "08": {"det": "les", "name": "Ardennes"},
+  "09": {"det": "l'", "name": "Ariège"},
+  "10": {"det": "l'", "name": "Aube"},
+  "11": {"det": "l'", "name": "Aude"},
+  "12": {"det": "l'", "name": "Aveyron"},
+  "13": {"det": "les", "name": "Bouches-du-Rhône"},
+  "14": {"det": "le", "name": "Calvados"},
+  "15": {"det": "le", "name": "Cantal"},
+  "16": {"det": "la", "name": "Charente"},
+  "17": {"det": "la", "name": "Charente-Maritime"},
+  "18": {"det": "le", "name": "Cher"},
+  "19": {"det": "la", "name": "Corrèze"},
+  "21": {"det": "la", "name": "Côte-d'Or"},
+  "22": {"det": "les", "name": "Côtes-d'Armor"},
+  "23": {"det": "la", "name": "Creuse"},
+  "24": {"det": "la", "name": "Dordogne"},
+  "25": {"det": "le", "name": "Doubs"},
+  "26": {"det": "le", "name": "Drôme"},
+  "27": {"det": "l'", "name": "Eure"},
+  "28": {"det": "l'", "name": "Eure-et-Loir"},
+  "29": {"det": "le", "name": "Finistère"},
+  "2a": {"det": "la", "name": "Corse-du-Sud"},
+  "2b": {"det": "la", "name": "Haute-Corse"},
+  "30": {"det": "le", "name": "Gard"},
+  "31": {"det": "la", "name": "Haute-Garonne"},
+  "32": {"det": "le", "name": "Gers"},
+  "33": {"det": "la", "name": "Gironde"},
+  "34": {"det": "l'", "name": "Hérault"},
+  "35": {"det": "l'", "name": "Ille-et-Vilaine"},
+  "36": {"det": "l'", "name": "Indre"},
+  "37": {"det": "l'", "name": "Indre-et-Loire"},
+  "38": {"det": "l'", "name": "Isère"},
+  "39": {"det": "le", "name": "Jura"},
+  "40": {"det": "les", "name": "Landes"},
+  "41": {"det": "le", "name": "Loir-et-Cher"},
+  "42": {"det": "la", "name": "Loire"},
+  "43": {"det": "la", "name": "Haute-Loire"},
+  "44": {"det": "la", "name": "Loire-Atlantique"},
+  "45": {"det": "le", "name": "Loiret"},
+  "46": {"det": "le", "name": "Lot"},
+  "47": {"det": "le", "name": "Lot-et-Garonne"},
+  "48": {"det": "la", "name": "Lozère"},
+  "49": {"det": "le", "name": "Maine-et-Loire"},
+  "50": {"det": "la", "name": "Manche"},
+  "51": {"det": "la", "name": "Marne"},
+  "52": {"det": "la", "name": "Haute-Marne"},
+  "53": {"det": "la", "name": "Mayenne"},
+  "54": {"det": "la", "name": "Meurthe-et-Moselle"},
+  "55": {"det": "la", "name": "Meuse"},
+  "56": {"det": "le", "name": "Morbihan"},
+  "57": {"det": "la", "name": "Moselle"},
+  "58": {"det": "la", "name": "Nièvre"},
+  "59": {"det": "le", "name": "Nord"},
+  "60": {"det": "l'", "name": "Oise"},
+  "61": {"det": "l'", "name": "Orne"},
+  "62": {"det": "le", "name": "Pas-de-Calais"},
+  "63": {"det": "le", "name": "Puy-de-Dôme"},
+  "64": {"det": "les", "name": "Pyrénées-Atlantiques"},
+  "65": {"det": "les", "name": "Hautes-Pyrénées"},
+  "66": {"det": "les", "name": "Pyrénées-Orientales"},
+  "67": {"det": "le", "name": "Bas-Rhin"},
+  "68": {"det": "le", "name": "Haut-Rhin"},
+  "69": {"det": "le", "name": "Rhône"},
+  "70": {"det": "la", "name": "Haute-Saône"},
+  "71": {"det": "la", "name": "Saône-et-Loire"},
+  "72": {"det": "la", "name": "Sarthe"},
+  "73": {"det": "la", "name": "Savoie"},
+  "74": {"det": "la", "name": "Haute-Savoie"},
+  "75": {"det": "", "name": "Paris"},
+  "76": {"det": "la", "name": "Seine-Maritime"},
+  "77": {"det": "la", "name": "Seine-et-Marne"},
+  "78": {"det": "les", "name": "Yvelines"},
+  "79": {"det": "les", "name": "Deux-Sèvres"},
+  "80": {"det": "la", "name": "Somme"},
+  "81": {"det": "le", "name": "Tarn"},
+  "82": {"det": "le", "name": "Tarn-et-Garonne"},
+  "83": {"det": "le", "name": "Var"},
+  "84": {"det": "le", "name": "Vaucluse"},
+  "85": {"det": "la", "name": "Vendée"},
+  "86": {"det": "la", "name": "Vienne"},
+  "87": {"det": "la", "name": "Haute-Vienne"},
+  "88": {"det": "les", "name": "Vosges"},
+  "89": {"det": "l'", "name": "Yonne"},
+  "90": {"det": "le", "name": "Territoire de Belfort"},
+  "91": {"det": "l'", "name": "Essonne"},
+  "92": {"det": "les", "name": "Hauts-de-Seine"},
+  "93": {"det": "la", "name": "Seine-Saint-Denis"},
+  "94": {"det": "le", "name": "Val-de-Marne"},
+  "95": {"det": "le", "name": "Val-d'Oise"},
+  "971": {"det": "la", "name": "Guadeloupe"},
+  "972": {"det": "la", "name": "Martinique"},
+  "973": {"det": "la", "name": "Guyane"},
+  "974": {"det": "", "name": "La Réunion"},
+  "976": {"det": "", "name": "Mayotte"}
 }