feat: Proposer la désactivation des numéros de départements

1 files changed, 12 insertions, 5 deletions

diff --git a/src/App.svelte b/src/App.svelte
index e17eba3..a162915 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -22,6 +22,7 @@
   let depSelected = 1;
   let highlightedDep;
   let sendButton;
+  let guessNumber = true;
 
   let winStreak = 0;
   let lossStreak = 0;
@@ -82,13 +83,13 @@
 
   function validate() {
     guessCount += 1
-    if(depSelected === listGuesses[currentDepGuessed] && codeSelected == listGuesses[currentDepGuessed]) {
+    if(depSelected === listGuesses[currentDepGuessed] && (!guessNumber || codeSelected == listGuesses[currentDepGuessed])) {
       feedbackString = ` 🎉 Bravo !`
       addClassGuess(listGuesses[currentDepGuessed], 'win')
       winCount += 1
       lossStreak = 0;
       winStreak += 1;
-    } else if(depSelected === listGuesses[currentDepGuessed] || codeSelected == listGuesses[currentDepGuessed]) {
+    } else if(depSelected === listGuesses[currentDepGuessed] || (guessNumber && codeSelected == listGuesses[currentDepGuessed]) ) {
       if(depSelected === listGuesses[currentDepGuessed]) {
         feedbackString = `👏 Pas mal ! C'était le numéro ${listGuesses[currentDepGuessed]}`
       } else {
@@ -196,12 +197,12 @@
 </script>
 
 <main>
-  <h1>Départements Français</h1>
 
   {#if currentDepGuessed == -1}
+  <h1>Départements Français</h1>
     <br/>
   {:else}
-    <h3>Devine quel est ce département : </h3>
+    <h1>Quel est ce département ?</h1>
   {/if}
 
   <svelte:component this={france} bind:svg={fr_svg}/>
@@ -218,10 +219,13 @@
       {/if}
       </div>
     {/if}
+
+    <input type="checkbox" bind:checked={guessNumber} id="noNum"><label for="noNum">Devine les numéros</label><br>
     <button type="button" on:click={start}>{ guessCount > 0 ? "Recommencer" : "Démarrer" }</button>
   </div>
   {:else}
   <div class="response" in:receive out:send>
+    {#if guessNumber}
     <select class="guessCode" bind:value={codeSelected}>
       {#each listDep as dep}
       <option value={dep}>
@@ -229,6 +233,7 @@
       </option>
       {/each}
     </select>
+    {/if}
 
     <AutoComplete
         items={autoCompleteItems}
@@ -271,6 +276,8 @@
     margin: 10px;
   }
   .guessCode {
-    height: 45px;
+    height: 35px;
+    margin: 0;
+    margin-right: 5px;
   }
 </style>