Added Save/Load state feature

gpchecklist.html

@@ -17,17 +17,6 @@
             let CHALLENGE=4;
             let CLEAR_COUNTER=0;
             let SONG_COUNT=0;
-            function toggle(tier,index){
-                var itemClasses=document.getElementById(`tier${tier}_item${index}`).classList;
-                itemClasses.toggle("itemcomplete");
-                if(itemClasses.contains("itemcomplete")){
-                    CLEAR_COUNTER++;
-                }else{
-                    CLEAR_COUNTER--;
-                }
-                var clearCounter=document.getElementById(`clearCounter`);
-                clearCounter.innerHTML=CLEAR_COUNTER;
-            };
             tiers=[
                 {
                     tier:10.95,
@@ -379,6 +368,7 @@
                 },
             ]
             document.body.innerHTML="";
+            document.body.innerHTML+=`<div class="clearCounter"><div id="clearCounter">0</div><sub>Clears</sub><div id="pct"><div id="pctnumber">0</div>%</div></div>`;
             for(tier of tiers){
                 document.body.innerHTML+=`
                     <div class="container">
@@ -389,11 +379,30 @@
                             <img class="border${it.diff??DIFFICULT}" src=${it.art} width=64px height=64px>
                             ${it.title}
                         </div>`;
+                    let savedIt=localStorage.getItem(`tier${tier.tier}_item${i}`);
+                    if(savedIt==="On"){
+                        toggle(`${tier.tier}`,i);
+                    }
                     SONG_COUNT++;
                 });
                 document.body.innerHTML+=`</div>`;
             }
-            document.body.innerHTML+=`<div class="clearCounter"><div id="clearCounter">0</div><sub>Clears</sub><br><br><div id="pct">0%</div></div>`;
+            var pctNumber=document.getElementById(`pctnumber`);
+            pctNumber.innerHTML=Math.floor(CLEAR_COUNTER/SONG_COUNT*100);
+            function toggle(tier,index){
+                var itemClasses=document.getElementById(`tier${tier}_item${index}`).classList;
+                itemClasses.toggle("itemcomplete");
+                if(itemClasses.contains("itemcomplete")){
+                    CLEAR_COUNTER++;
+                }else{
+                    CLEAR_COUNTER--;
+                }
+                var clearCounter=document.getElementById(`clearCounter`);
+                clearCounter.innerHTML=CLEAR_COUNTER;
+                var pctNumber=document.getElementById(`pctnumber`);
+                pctNumber.innerHTML=Math.floor(CLEAR_COUNTER/SONG_COUNT*100);
+                localStorage.setItem(`tier${tier}_item${index}`,itemClasses.contains("itemcomplete")?"On":"Off");
+            };
         </script>
         <style>
             body{
@@ -443,10 +452,11 @@
             .clearCounter{
                 position:fixed;
                 right:0px;
-                bottom:24px;
+                bottom:10px;
                 font-size:64px;
                 padding-right:8px;
                 color:antiquewhite;
+                text-align:center;
             }
             .clearCounter sub{
                 position:relative;
@@ -455,11 +465,16 @@
                 font-size:24px;
                 color:antiquewhite;
             }
-            .clearCounter br{
-                font-size:24px;
-            }
             .clearCounter #pct{
+                position:fixed;
+                right:0px;
+                top:8px;
                 font-size:24px;
+                padding-right:8px;
+                color:antiquewhite;
+            }
+            .clearCounter #pctnumber{
+                display:inline;
             }
         </style>
     </body>