Add Cookie to store pokemon stats.

index.html

@@ -101,12 +101,31 @@ <h3>A Pokémon Wordle-like by <a href="https://www.fireblend.com">Fireblend</a><
 <a id="lang_fr_lnk" href="#">🇫🇷</a> |
 <a id="lang_de_lnk" href="#">🇩🇪</a>
 <br>Issues? <a href="cacheclear.html">Clear your cache!</a>
+<button id="show_stats_btn" style="position: fixed; top: 10px; right: 20px;">Show Stats</button>
 <script type="module">
-  import {getCookie} from "./scripts/utils.js";
+  import {getCookie,setCookie} from "./scripts/utils.js";
   import {setLanguage} from "./scripts/i18n.js";
   import {handleGuess, toggleHints, newGame, copyCurrentDay, handleLoad} from "./scripts/game.js";
-
+  import {showStats} from "./scripts/renderer.js";
+
   document.addEventListener('DOMContentLoaded', (event) => {
+    console.log("Dom content loaded..")
+    console.log(` ${document.cookie}`.split(";"));
+    let statsCookie = getCookie('Stats', false);
+
+    if (!statsCookie) {
+        let initialStats = {
+            wins: 0,
+            losses: 0,
+            guessesNo: [],
+            guesses: [],
+            averageNoGuesses: 0
+        };
+
+        let statsJSON = JSON.stringify(initialStats);
+        setCookie('Stats', statsJSON, 300, false);
+    }
+
     $.getJSON("data/pokedex.json", function (json) {
       pokedex = json
       let lang = getCookie('lang', false)
@@ -146,6 +165,9 @@ <h3>A Pokémon Wordle-like by <a href="https://www.fireblend.com">Fireblend</a><
   document.querySelector('#lang_de_lnk').addEventListener('click', () => {
     setLanguage('de', false)
   });
+  document.querySelector('#show_stats_btn').addEventListener('click', () => {
+      showStats();
+  });
 </script>
 
 </body>

scripts/game.js

@@ -59,11 +59,13 @@ export function copyCurrentDay(day, names) {
 }
 
 export function handleGuess(daily) {
+  console.log("4. Inside handle guess")
   const imgs = { '1': "imgs/correct.png", '2': "imgs/up.png", '3': "imgs/down.png", '4': "imgs/wrongpos.png", '5': "imgs/wrong.png" }
   let guess_name = getRevPkmnName(document.getElementById("guess").value)
   let secret_name = getRevPkmnName(getPokemonFromId(getCookie("secret_poke", daily).replace(/"/g, '')));
   let guess = pokedex[guess_name]
-
+  console.log("5. Guess,Secret.")
+  console.log(guess,secret_name)
   if (guess == null) {
     document.getElementById("error").style.display = "block";
     return
@@ -92,15 +94,18 @@ export function handleGuess(daily) {
   guesses = guesses == "" ? [] : JSON.parse(guesses)
 
   guesses.push(guess_info)
-
+  console.log(guesses)
+  console.log(`Total Guesses: ${guesses.length}`)
+
   if(guess_name == secret_name & daily){
     let streak = getCookie("streak", false)
     streak = streak == ""? 1 : parseInt(streak)+1
     setCookie("streak", streak, 300, false, true)
   }
 
-  setCookie("guessesv2", JSON.stringify(guesses), 100, daily)
+  setCookie("guessesv2", JSON.stringify(guesses), 100, daily);
   showState(daily)
+  console.log(`2. ${document.cookie}.split(";")`)
 }
 
 export function toggleHints(daily) {

scripts/renderer.js

@@ -102,6 +102,31 @@ export function showState(daily) {
             let title = getTitle(streak)
             document.getElementById("streak").innerHTML = "You've guessed <b>"+streak+" Pokémon</b> in a row!<br><b>Title: </b>"+title
         }
+        else{
+            // update wining stats for normal games
+            let statsCookie = getCookie('Stats', false);
+            let statsObject = statsCookie ? JSON.parse(statsCookie) : {};
+
+            statsObject.wins += 1;
+
+            // guesses graph
+            const MAX_ELEMENTS = 7;
+
+            if (statsObject.guesses.length >= MAX_ELEMENTS) {
+                statsObject.guesses.shift();
+                statsObject.guessesNo.shift();
+            }
+            statsObject.guesses.push(secret_name);
+            statsObject.guessesNo.push(guesses.length);
+
+            // average guesses
+            let sum = statsObject.guessesNo.reduce((acc, guessValue) => acc + guessValue, 0);
+            statsObject.averageNoGuesses = sum/statsObject.guessesNo.length
+
+            let updatedStats = JSON.stringify(statsObject);
+
+            setCookie('Stats', updatedStats, 300, false);
+        }
     }
     else if (guesses.length == attempts) {
         document.getElementById("secretpoke").innerHTML = secret_name
@@ -112,10 +137,28 @@ export function showState(daily) {
             setCookie("streak", 0, 300, false)
             document.getElementById("streak").innerHTML = "Streak Reset!<br><b>Title:</b> Novice Trainer"
         }
+        else{
+            // update losses for normal games
+            let statsCookie = getCookie('Stats', false);
+            let statsObject = statsCookie ? JSON.parse(statsCookie) : {};
+
+            statsObject.losses += 1
+            console.log(guesses);
+
+            let updatedStats = JSON.stringify(statsObject);
+            setCookie('Stats', updatedStats, 300, false);
+        }
     }
     document.getElementById("attempts").innerHTML = attempts - guesses.length
 }
 
+export function showStats() {
+    console.log("Show Stats button clicked");
+    // todo : add stats here.
+    //  a histogram of stats with y values as no. of guesses. x with pokemon
+    // (spike chartjs lib)
+}
+
 function createElement(initObj) {
     let element = document.createElement(initObj.Tag);
     for (let prop in initObj) {