insert nord colors

cypress/integration/spec.js

@@ -3,43 +3,43 @@
 describe("game should", () => {
   it("be able to restart itself", () => {
     cy.visit("/")
-    cy.get(".div0.gray").should("be.visible")
-    cy.get(".div1.red").should("be.visible")
-    cy.get(".div2.red").should("be.visible").click()
-    cy.get(".div0.blue").should("be.visible").click()
-    cy.get(".div0.red").should("be.visible")
-    cy.get(".div1.gray").should("be.visible")
-    cy.get(".div2.gray").should("be.visible")
+    cy.get(".div0.hole").should("be.visible")
+    cy.get(".div1.pole").should("be.visible")
+    cy.get(".div2.pole").should("be.visible").click()
+    cy.get(".div0.dest").should("be.visible").click()
+    cy.get(".div0.pole").should("be.visible")
+    cy.get(".div1.hole").should("be.visible")
+    cy.get(".div2.hole").should("be.visible")
     cy.get(".restart").click()
-    cy.get(".div2.red").should("be.visible")
+    cy.get(".div2.pole").should("be.visible")
   })
 
   it("display game over", () => {
     cy.visit("/")
     cy.get("[data-cy=game-over]").as("game-over").should("not.be.visible")
 
-    cy.get(".div2.red").click()
-    cy.get(".div0.blue").click()
-    cy.get(".div11.red").click()
-    cy.get(".div2.blue").click()
-    cy.get(".div4.red").click()
-    cy.get(".div11.blue").click()
-    cy.get(".div3.red").click()
-    cy.get(".div1.blue").click()
-    cy.get(".div0.red").click()
-    cy.get(".div2.blue").click()
-    cy.get(".div8.red").click()
-    cy.get(".div6.blue").click()
-    cy.get(".div12.red").click()
-    cy.get(".div7.blue").click()
-    cy.get(".div13.red").click()
-    cy.get(".div8.blue").click()
-    cy.get(".div7.red").click()
-    cy.get(".div5.blue").click()
-    cy.get(".div5.red").click()
-    cy.get(".div12.blue").click()
-    cy.get(".div14.red").click()
-    cy.get(".div11.blue").click()
+    cy.get(".div2.pole").click()
+    cy.get(".div0.dest").click()
+    cy.get(".div11.pole").click()
+    cy.get(".div2.dest").click()
+    cy.get(".div4.pole").click()
+    cy.get(".div11.dest").click()
+    cy.get(".div3.pole").click()
+    cy.get(".div1.dest").click()
+    cy.get(".div0.pole").click()
+    cy.get(".div2.dest").click()
+    cy.get(".div8.pole").click()
+    cy.get(".div6.dest").click()
+    cy.get(".div12.pole").click()
+    cy.get(".div7.dest").click()
+    cy.get(".div13.pole").click()
+    cy.get(".div8.dest").click()
+    cy.get(".div7.pole").click()
+    cy.get(".div5.dest").click()
+    cy.get(".div5.pole").click()
+    cy.get(".div12.dest").click()
+    cy.get(".div14.pole").click()
+    cy.get(".div11.dest").click()
 
     cy.get("@game-over").should("be.be.visible")
   })

src/App.svelte

@@ -198,7 +198,7 @@
 
   .triangle {
     width: 600px;
-    height: 450px;
+    height: 520px;
     display: grid;
     grid-template-columns: repeat(9, 1fr);
     grid-template-rows: repeat(5, 1fr);
@@ -214,24 +214,30 @@
     color: white;
   }
 
-  .red {
+  .pole {
     cursor: pointer;
-    background-color: red;
+    background-color: #8fbcbb;
   }
 
-  .gray {
+  .hole {
     cursor: default;
-    background-color: gray;
+    background-color: #d8dee9;
   }
 
-  .green {
+  .pick {
     cursor: pointer;
-    background-color: green;
+    background-color: #a3be8c;
   }
 
-  .blue {
+  .dest {
     cursor: pointer;
-    background-color: blue;
+    background-color: #81a1c1;
+  }
+
+  :global(body) {
+    background-color: #eceff4;
+    margin: 0;
+    padding: 15px;
   }
 
   .restart {
@@ -258,28 +264,28 @@
         <div
           in:receive={{ key: i }}
           out:send={{ key: i }}
-          class="circle div{i} gray"
+          class="circle div{i} hole"
           on:click={() => change(i)} />
       {/if}
       {#if circles[i] == pole}
         <div
           in:receive={{ key: i }}
           out:send={{ key: i }}
-          class="circle div{i} red"
+          class="circle div{i} pole"
           on:click={() => change(i)} />
       {/if}
       {#if circles[i] == pick}
         <div
           in:receive={{ key: i }}
           out:send={{ key: i }}
-          class="circle div{i} green"
+          class="circle div{i} pick"
           on:click={() => change(i)} />
       {/if}
       {#if circles[i] == dest}
         <div
           in:receive={{ key: i }}
           out:send={{ key: i }}
-          class="circle div{i} blue"
+          class="circle div{i} dest"
           on:click={() => change(i)} />
       {/if}
     {/each}