insert multiple colors

src/App.svelte

@@ -2,21 +2,25 @@
   import Triangle from "./Triangle.svelte"
   import { levels } from "./levels.js"
 
-  let level = 0
+  let level = 10
   $: variant = levels[level].variant
   $: side = levels[level].side
 
   const changeLevel = event => {
     level = event.target.value
   }
-
-  $: console.log(level)
 </script>
 
 <style>
   button {
     margin-right: 10px;
   }
+
+  :global(body) {
+    background-color: #eceff4;
+    margin: 0;
+    padding: 15px;
+  }
 </style>
 
 <main>

src/Triangle.svelte

@@ -5,11 +5,6 @@
   const adjcs = new Graph()
   const jumps = new Graph()
 
-  // 6/2 circles = 3 steps
-  // 10/2 circles = 7 steps
-  // 15/1 circles = 13 steps
-  // 21/1 circles = 19 steps
-  // 28/1 circles = ?? steps
   const C_MAX_CIRCLES = 21
   const C_POLE = 0
   const C_HOLE = 1
@@ -58,7 +53,7 @@
 </script>
 
 <script>
-  import { levels } from "./levels.js"
+  import { levels, colors } from "./levels.js"
   import { onMount } from "svelte"
   import { crossfade, scale } from "svelte/transition"
 
@@ -66,6 +61,7 @@
   export let variant = 0
 
   let circles = []
+  let circleColors = []
   let steps = 0
   let gameover
   let victory
@@ -78,14 +74,15 @@
 
   onMount(() => {
     restart()
-    // printSolutions(1)
   })
+
   $: if (variant || side) {
     restart()
   }
 
   const restart = () => {
     circles = []
+    circleColors = []
     steps = 0
     gameover = false
     victory = false
@@ -102,10 +99,22 @@
 
     currentVariant.holes.forEach(hole => (circles[hole] = C_HOLE))
     const numHoles = circles.filter(c => c == C_HOLE).length
-
     maxSteps = numCircles - (numHoles + 1)
+
+    for (let i = 0, j = 0; i < numCircles; i++) {
+      circleColors[i] = getColor(j)
+
+      if (circles[i] != C_HOLE) {
+        j++
+      }
+    }
+
+    // printSolutions(1)
   }
 
+  const getColor = i => colors[i % colors.length]
+  const getDestColor = _ => circleColors[circles.indexOf(C_PICK)]
+
   const commonBetween = (source, destination) => {
     const common = adjcs.adjacencyList[source].filter(common =>
       adjcs.adjacencyList[destination].includes(common)
@@ -182,6 +191,7 @@
     if (circles[curr] == C_DEST) {
       jumpOver(circles, prev, curr)
       clearDests()
+      circleColors[curr] = circleColors[prev]
       steps++
 
       if (steps == maxSteps) {
@@ -260,131 +270,157 @@
 
 <style>
   .div0 {
-    grid-area: 1 / 7 / 2 / 8;
+    grid-area: 1 / 5 / 2 / 6;
   }
   .div1 {
-    grid-area: 2 / 6 / 3 / 7;
+    grid-area: 2 / 4 / 3 / 5;
   }
   .div2 {
-    grid-area: 2 / 8 / 3 / 9;
+    grid-area: 2 / 6 / 3 / 7;
   }
   .div3 {
-    grid-area: 3 / 5 / 4 / 6;
+    grid-area: 3 / 3 / 4 / 4;
   }
   .div4 {
-    grid-area: 3 / 7 / 4 / 8;
+    grid-area: 3 / 5 / 4 / 6;
   }
   .div5 {
-    grid-area: 3 / 9 / 4 / 10;
+    grid-area: 3 / 7 / 4 / 8;
   }
   .div6 {
-    grid-area: 4 / 4 / 5 / 5;
+    grid-area: 4 / 2 / 5 / 3;
   }
   .div7 {
-    grid-area: 4 / 6 / 5 / 7;
+    grid-area: 4 / 4 / 5 / 5;
   }
   .div8 {
-    grid-area: 4 / 8 / 5 / 9;
+    grid-area: 4 / 6 / 5 / 7;
   }
   .div9 {
-    grid-area: 4 / 10 / 5 / 11;
+    grid-area: 4 / 8 / 5 / 9;
   }
   .div10 {
-    grid-area: 5 / 3 / 6 / 4;
+    grid-area: 5 / 1 / 6 / 2;
   }
   .div11 {
-    grid-area: 5 / 5 / 6 / 6;
+    grid-area: 5 / 3 / 6 / 4;
   }
   .div12 {
-    grid-area: 5 / 7 / 6 / 8;
+    grid-area: 5 / 5 / 6 / 6;
   }
   .div13 {
-    grid-area: 5 / 9 / 6 / 10;
+    grid-area: 5 / 7 / 6 / 8;
   }
   .div14 {
-    grid-area: 5 / 11 / 6 / 12;
+    grid-area: 5 / 9 / 6 / 10;
+  }
+
+  .triangle {
+    width: 320px;
+    height: 370px;
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+  }
+
+  .circle {
+    width: 50px;
+    height: 50px;
+    clip-path: circle();
+    text-align: center;
+    color: white;
+    cursor: pointer;
   }
-  .div15 {
+
-    grid-area: 6 / 2 / 7 / 3;
+  .hole {
+    cursor: default;
+    background-color: #d8dee9;
   }
-  .div16 {
+
-    grid-area: 6 / 4 / 7 / 5;
+  .green {
+    background-color: hsl(92, 28%, 65%);
   }
-  .div17 {
+
-    grid-area: 6 / 6 / 7 / 7;
+  .green-lighter {
+    background-color: hsl(92, 28%, 85%);
   }
-  .div18 {
+
-    grid-area: 6 / 8 / 7 / 9;
+  .green-darker {
+    background-color: hsl(92, 28%, 30%);
   }
-  .div19 {
+
-    grid-area: 6 / 10 / 7 / 11;
+  .cyan {
+    background-color: hsl(179, 25%, 65%);
   }
-  .div20 {
+
-    grid-area: 6 / 12 / 7 / 13;
+  .cyan-lighter {
+    background-color: hsl(179, 25%, 85%);
   }
-  .div21 {
+
-    grid-area: 7 / 1 / 8 / 2;
+  .cyan-darker {
+    background-color: hsl(179, 25%, 30%);
   }
-  .div22 {
+
-    grid-area: 7 / 3 / 8 / 4;
+  .blue {
+    background-color: hsl(210, 34%, 63%);
   }
-  .div23 {
+
-    grid-area: 7 / 5 / 8 / 6;
+  .blue-lighter {
+    background-color: hsl(213, 32%, 82%);
   }
-  .div24 {
+
-    grid-area: 7 / 7 / 8 / 8;
+  .blue-darker {
+    background-color: hsl(213, 32%, 37%);
   }
-  .div25 {
+
-    grid-area: 7 / 9 / 8 / 10;
+  .yellow {
+    background-color: hsl(40, 71%, 73%);
   }
-  .div26 {
+
-    grid-area: 7 / 11 / 8 / 12;
+  .yellow-lighter {
+    background-color: hsl(40, 71%, 88%);
   }
-  .div27 {
+
-    grid-area: 7 / 13 / 8 / 14;
+  .yellow-darker {
+    background-color: hsl(40, 71%, 37%);
   }
 
-  .triangle {
+  .orange {
-    width: 600px;
+    background-color: hsl(14, 51%, 63%);
-    height: 520px;
-    display: grid;
-    grid-template-columns: repeat(13, 1fr);
-    grid-template-rows: repeat(7, 1fr);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
   }
 
-  .circle {
+  .orange-lighter {
-    width: 50px;
+    background-color: hsl(14, 51%, 83%);
-    height: 50px;
-    clip-path: circle();
-    text-align: center;
-    color: white;
   }
 
-  .pole {
+  .orange-darker {
-    cursor: pointer;
+    background-color: hsl(14, 51%, 28%);
-    background-color: #8fbcbb;
   }
 
-  .hole {
+  .red {
-    cursor: default;
+    background-color: hsl(354, 42%, 56%);
-    background-color: #d8dee9;
   }
 
-  .pick {
+  .red-lighter {
-    cursor: pointer;
+    background-color: hsl(354, 42%, 76%);
-    background-color: #a3be8c;
   }
 
-  .dest {
+  .red-darker {
-    cursor: pointer;
+    background-color: hsl(354, 42%, 28%);
-    background-color: #81a1c1;
   }
-  :global(body) {
+
-    background-color: #eceff4;
+  .purple {
-    margin: 0;
+    background-color: hsl(311, 20%, 63%);
-    padding: 15px;
+  }
+
+  .purple-lighter {
+    background-color: hsl(311, 20%, 83%);
+  }
+
+  .purple-darker {
+    background-color: hsl(311, 20%, 28%);
   }
 
   span {
@@ -424,7 +460,7 @@
       <div
         in:receive={{ key: i }}
         out:send={{ key: i }}
-        class="circle div{i} pole"
+        class="circle div{i} {circleColors[i]}"
         on:click={() => change(i)}>
         {i}
       </div>
@@ -433,7 +469,7 @@
       <div
         in:receive={{ key: i }}
         out:send={{ key: i }}
-        class="circle div{i} pick"
+        class="circle div{i} {circleColors[i]}-lighter"
         on:click={() => change(i)}>
         {i}
       </div>
@@ -442,7 +478,7 @@
       <div
         in:receive={{ key: i }}
         out:send={{ key: i }}
-        class="circle div{i} dest"
+        class="circle div{i} {getDestColor()}-darker"
         on:click={() => change(i)}>
         {i}
       </div>

src/levels.js

@@ -11,3 +11,13 @@ export const levels = [
   { side: 5, variant: 5, holes: [1] }, // 294543 / 14880 (5.05%)
   { side: 5, variant: 6, holes: [4] }, // 137864 / 1550 (1.12%)
 ]
+
+export const colors = [
+  "yellow",
+  "red",
+  "blue",
+  "orange",
+  "purple",
+  "green",
+  // "cyan",
+]