implement completed levels saving

cypress/integration/spec.js

@@ -1,37 +1,52 @@
 /// <reference types="cypress" />
 
 describe("game should", () => {
-  it("do undo and restart level 1", () => {
+  it("work as expected", () => {
+    cy.clearLocalStorage("completedLevels")
     cy.visit("/")
-    cy.get(".level").contains("0").click()
-    cy.get(".level").first().should("be.visible").click()
 
+    cy.log("TEST multiple dest positions")
+    cy.get(".level").contains("1").as("level1").click()
+    cy.get("[data-cy=victory]").as("victory").should("not.be.visible")
     cy.get(".div0.hole").should("be.visible")
     cy.get(".div2.pole").should("be.visible")
     cy.get(".div5.pole").should("be.visible").click()
     cy.get(".div5.pick").should("be.visible")
+    cy.get(".div3.dest").should("be.visible")
     cy.get(".div0.dest").should("be.visible").click()
+
+    cy.log("TEST jump over")
     cy.get(".div2.hole").should("be.visible")
     cy.get(".div5.hole").should("be.visible")
     cy.get(".div0.pole").should("be.visible").click()
     cy.get(".div1.pole").should("be.visible")
     cy.get(".div3.dest").should("be.visible").click()
+
+    cy.log("TEST undo")
     cy.get(".div3.pole").should("be.visible")
-    cy.get(".div0.hole").should("be.visible")
     cy.get(".div1.hole").should("be.visible")
+    cy.get(".div0.hole").should("be.visible")
     cy.get(".undo").click()
-    cy.get(".div3.pole").should("be.visible")
+    cy.get(".div3.hole").should("be.visible")
     cy.get(".div1.pole").should("be.visible")
-    cy.get(".div0.hole").should("be.visible")
-    cy.get(".restart").click()
+    cy.get(".div0.pole").should("be.visible")
+
+    cy.log("TEST level 1 victory")
+    cy.get(".div0.pole").should("be.visible").click()
+    cy.get(".div3.dest").should("be.visible").click()
+    cy.get(".div4.pole").should("be.visible")
+    cy.get(".div3.pole").should("be.visible").click()
+    cy.get(".div5.dest").should("be.visible").click()
+    cy.get(".div4.hole").should("be.visible")
+    cy.get("@victory").should("be.visible")
+
+    cy.log("TEST level 1 restart")
+    cy.get(".restart").as("restart").click()
     cy.get(".div2.pole").should("be.visible")
-  })
 
-  it("lose level 7", () => {
-    cy.visit("/")
-    cy.get(".level").contains("7").click()
+    cy.log("TEST level picker")
+    cy.get(".level").contains("7").as("level7").click()
     cy.get("[data-cy=gameover]").as("gameover").should("not.be.visible")
-
     cy.get(".div3.pole").click()
     cy.get(".div0.dest").click()
     cy.get(".div5.pole").click()
@@ -40,24 +55,23 @@ describe("game should", () => {
     cy.get(".div4.dest").click()
     cy.get(".div11.pole").click()
     cy.get(".div13.dest").click()
+
+    cy.log("TEST multiple destinations present")
     cy.get(".div14.pole").click()
     cy.get(".div5.dest").should("be.visible")
     cy.get(".div12.dest").click()
+
+    cy.log("TEST gameover")
     cy.get(".div6.pole").click()
     cy.get(".div1.dest").click()
     cy.get(".div0.pole").click()
     cy.get(".div3.dest").click()
     cy.get(".div2.pole").click()
     cy.get(".div7.dest").click()
-
     cy.get("@gameover").should("be.be.visible")
-  })
-
-  it("win level 7", () => {
-    cy.visit("/")
-    cy.get("[data-cy=victory]").as("victory").should("not.be.visible")
-    cy.get(".level").contains("10").click()
 
+    cy.log("TEST level 10 victory")
+    cy.get(".level").contains("10").as("level10").click()
     cy.get(".div11.pole").click()
     cy.get(".div4.dest").click()
     cy.get(".div9.pole").click()
@@ -84,7 +98,20 @@ describe("game should", () => {
     cy.get(".div11.dest").click()
     cy.get(".div10.pole").click()
     cy.get(".div12.dest").click()
-
     cy.get("@victory").should("be.visible")
+
+    cy.log("TEST localStorage completedLevels")
+    cy.get("@level1").should("have.class", "completed")
+    cy.get("@level7").should("not.have.class", "completed")
+    cy.get("@level10").should("have.class", "completed")
+    cy.visit("/")
+    cy.get("@level1").should("have.class", "completed")
+    cy.get("@level7").should("not.have.class", "completed")
+    cy.get("@level10").should("have.class", "completed")
+    cy.get("@restart")
+      .click()
+      .should(() =>
+        expect(localStorage.getItem("completedLevels")).to.eq("[0,9]")
+      )
   })
 })

src/App.svelte

@@ -1,6 +1,7 @@
 <script>
   import Triangle from "./Triangle.svelte"
   import { levels } from "./levels.js"
+  import { completed } from "./store.js"
 
   let level = 0
   $: variant = levels[level].variant
@@ -15,6 +16,17 @@
   .level {
     cursor: pointer;
     margin-right: 10px;
+    color: hsl(219, 28%, 88%);
+  }
+
+  .active {
+    font-weight: bold;
+    color: hsl(220, 17%, 32%);
+  }
+
+  .completed {
+    background-color: hsl(220, 16%, 36%);
+    color: hsl(218, 27%, 94%);
   }
 
   :global(body) {
@@ -27,10 +39,12 @@
 <main>
   <Triangle {side} {variant} />
 
-  {#each levels as _, value}
+  {#each levels as _, i}
     <button
       class="level"
       on:click={changeLevel}
-      {value}>{value + 1}</button>
+      value={i}
+      class:completed={$completed.includes(i)}
+      class:active={level == i}>{i + 1}</button>
   {/each}
 </main>

src/Triangle.svelte

@@ -53,6 +53,7 @@
 </script>
 
 <script>
+  import { completed } from "./store.js"
   import { levels, colors } from "./levels.js"
   import { crossfade, scale } from "svelte/transition"
 
@@ -205,6 +206,11 @@
 
       if (moveStack.length == maxSteps) {
         victory = true
+        const iLevel = levels.findIndex(
+          v => v.side == side && v.variant == variant
+        )
+
+        completed.update(arr => [...arr, iLevel])
 
         return
       }

src/store.js

@@ -0,0 +1,10 @@
+import { writable } from "svelte/store"
+
+const itemName = "completedLevels"
+const retrieved = localStorage.getItem(itemName)
+const parsed = JSON.parse(retrieved)
+export const completed = writable(parsed === null ? [] : parsed)
+
+completed.subscribe(value =>
+  localStorage.setItem(itemName, JSON.stringify(value))
+)