From bee53867838e7046cbd152267df1359f564e5de7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Babi=C4=8D?= <peter@peterbabic.dev>
Date: Wed, 13 Jan 2021 13:22:14 +0100
Subject: [PATCH] implement completed levels saving

---
 cypress/integration/spec.js | 67 ++++++++++++++++++++++++++-----------
 src/App.svelte              | 18 ++++++++--
 src/Triangle.svelte         |  6 ++++
 src/store.js                | 10 ++++++
 4 files changed, 79 insertions(+), 22 deletions(-)
 create mode 100644 src/store.js

diff --git a/cypress/integration/spec.js b/cypress/integration/spec.js
index 250c419..bea1284 100644
--- a/cypress/integration/spec.js
+++ b/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]")
+      )
   })
 })
diff --git a/src/App.svelte b/src/App.svelte
index 482ef4f..7d4d68d 100644
--- a/src/App.svelte
+++ b/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>
diff --git a/src/Triangle.svelte b/src/Triangle.svelte
index 0efedd3..3d4feea 100644
--- a/src/Triangle.svelte
+++ b/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
       }
diff --git a/src/store.js b/src/store.js
new file mode 100644
index 0000000..63e9cfc
--- /dev/null
+++ b/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))
+)