changed code -> Highscore with cookies implemented, am done

changed index -> minor navbar tweaks changed style -> minor tweaks
4 years ago · cab3bad62e
parent 8941a5c535
commit cab3bad62e
3 changed files with 41 additions and 5 deletions
--- a/code.js
+++ b/code.js
@ -25,11 +25,27 @@ let scoreO = 0;
 let scoreCounterO = 100;
 let gameOver = false;
 let winner;
+let highScore;
+let allowHSCookies;
+let saveChoiceCookie;
 let somethingIsSelected = false;

 document.getElementById("scoreCounter").innerText = "Score counter: 100";
 document.getElementById("scoreX").innerText = "Score X: 0";
 document.getElementById("scoreO").innerText = "Score O: 0";
+if(getCookie("saveChoiceAllowed") !== "true") {
+    allowHSCookies = confirm("Do you allow the use of Cookies to store the local Highscore? \nNote, that existing Cookies will not be deleted");
+    saveChoiceCookie = confirm("Do you allow a Cookie to save that answer?");
+    if (saveChoiceCookie) {
+        document.cookie = "cookiesAllowed=" + allowHSCookies + "; expires=Thu, 5 Dec 2030 12:00:00 UTC";
+        document.cookie = "saveChoiceAllowed=" + saveChoiceCookie + "; expires=Thu, 5 Dec 2030 12:00:00 UTC";
+    }
+}
+allowHSCookies = getCookie("cookiesAllowed");
+if(allowHSCookies){
+    highScore = getCookie("highScore");
+}
+document.getElementById("highScore").innerText = "Highscore: " + highScore;
 for(let i = 0; i < 64; i++){
    fieldId = i.toString();
    document.getElementById("field"+fieldId).selected = 0;                                                              //Sorgt dafür dass alle Felder die selected variable haben und diese 0 ist
@ -429,6 +445,13 @@ function checkWinCondition(){
                document.getElementById("field"+fieldId).style.backgroundColor = "rgb(33,157,35, 0.3)"
            }
        }
+        if(allowHSCookies && parseInt(highScore) < scoreX){
+            document.cookie = "highScore=" + scoreX + "; expires=Thu, 5 Dec 2030 12:00:00 UTC";
+        } else if(allowHSCookies && parseInt(highScore) < scoreO){
+            document.cookie = "highScore=" + scoreO + "; expires=Thu, 5 Dec 2030 12:00:00 UTC";
+        }
+        highScore = getCookie("highScore");
+        document.getElementById("highScore").innerText = "Highscore: " + highScore;
    }
 }
 function score (field){
@ -457,3 +480,18 @@ function score (field){
    document.getElementById("scoreO").innerText = "Score O: " + scoreO;
    document.getElementById("scoreX").innerText = "Score X: " + scoreX;
 }
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for(let i = 0; i <ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) === 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
--- a/index.html
+++ b/index.html
@ -7,15 +7,13 @@
 </head>
 <body>
 <ul>
-    <li><a class="active" href="#index">Play</a></li>
-    <li><a href="#HighScore">HighScore</a></li>
+    <li id = highScore>yeet</li>
    <li id="turnTotal">yeet</li>
    <li id="turnPlayer">yeet</li>
    <li id="scoreCounter">yeet</li>
    <li id="scoreX">yeet</li>
    <li id="scoreO">yeet</li>
    <li><a href="index.html">Reset</a></li>
-    <li style="float:right"><a href="#Nickname">Nickname</a></li>
 </ul>
    <table id="gameTable" class="game">
        <tr id="row0" class="game rows">
--- a/style.css
+++ b/style.css
@ -5,7 +5,7 @@ ul {
    overflow: hidden;
    background-color: #333;
    height: auto;
-    width: 1000px;
+    min-width: 600px;
    position: absolute;
    top: 5%;
 }
@ -19,7 +19,7 @@ li:last-child {
    border-right: none;
 }

-li a, #turnTotal, #turnPlayer, #scoreCounter, #scoreO, #scoreX {
+li a, #turnTotal, #turnPlayer, #scoreCounter, #scoreO, #scoreX, #highScore {
    display: block;
    color: white;
    text-align: center;