add level switcher

src/App.svelte

@@ -1,7 +1,28 @@
 <script>
   import Triangle from "./Triangle.svelte"
+  import { levels } from "./levels.js"
+
+  let level = 0
+  $: variant = levels[level].variant
+  $: side = levels[level].side
+
+  const changeLevel = event => {
+    level = event.target.value
+  }
+
+  $: console.log(level)
 </script>
 
+<style>
+  button {
+    margin-right: 10px;
+  }
+</style>
+
 <main>
-  <Triangle side="5" />
+  <Triangle {side} {variant} />
+
+  {#each levels as _, value}
+    <button on:click={changeLevel} {value}>{value}</button>
+  {/each}
 </main>

src/Triangle.svelte

@@ -58,28 +58,31 @@
 </script>
 
 <script>
+  import { levels } from "./levels.js"
   import { onMount } from "svelte"
   import { crossfade, scale } from "svelte/transition"
 
-  const [send, receive] = crossfade({
-    duration: 400,
-    fallback: scale,
-  })
-
   export let side = 5
-
-  const numCircles = leftMost(parseInt(side))
-  const maxSteps = numCircles - 2
+  export let variant = 0
 
   let circles = []
   let steps = 0
   let gameover
   let victory
+  let maxSteps
+
+  const [send, receive] = crossfade({
+    duration: 400,
+    fallback: scale,
+  })
 
   onMount(() => {
     restart()
-    printSingleSolution()
+    // printSolutions(1)
   })
+  $: if (variant || side) {
+    restart()
+  }
 
   const restart = () => {
     circles = []
@@ -87,11 +90,20 @@
     gameover = false
     victory = false
 
+    const numCircles = leftMost(side)
+
     for (let i = 0; i < numCircles; i++) {
       circles[i] = C_POLE
     }
 
-    circles[0] = C_HOLE
+    const currentVariant = levels.find(
+      v => v.side == side && v.variant == variant
+    )
+
+    currentVariant.holes.forEach(hole => (circles[hole] = C_HOLE))
+    const numHoles = circles.filter(c => c == C_HOLE).length
+
+    maxSteps = numCircles - (numHoles + 1)
   }
 
   const commonBetween = (source, destination) => {
@@ -193,19 +205,26 @@
     }
   }
 
-  const printSingleSolution = () => {
+  const printSolutions = maxSolutionCount => {
     let depth = 0
     let solutions = []
+    let gameovers = []
     let shadow = [...circles]
     const moves = new Tree("", depth)
 
     const recurse = move => {
-      if (solutions.length > 0) {
+      if (
+        maxSolutionCount != 0 &&
+        maxSolutionCount != undefined &&
+        maxSolutionCount <= solutions.length
+      ) {
         return
       }
 
       const hints = getHints(shadow)
       if (hints.length == 0) {
+        gameovers.push(move.solution)
+
         return
       }
 
@@ -229,6 +248,13 @@
 
     recurse(moves)
     console.log(solutions)
+
+    if (maxSolutionCount < 1) {
+      console.log(gameovers)
+
+      const proportion = (solutions.length * 100) / gameovers.length
+      console.log(proportion.toFixed(2) + "% moves are victory")
+    }
   }
 </script>
 

src/levels.js

@@ -0,0 +1,13 @@
+export const levels = [
+  { side: 3, variant: 0, holes: [0, 3] }, // 2 / 2 (100%)
+  { side: 4, variant: 0, holes: [0, 7] }, // 168 / 39 (23.21%%)
+  { side: 4, variant: 1, holes: [0, 1] }, // 88 / 14 (15.91%)
+  { side: 4, variant: 2, holes: [0, 3] }, // 22 / 3 (13.64%)
+  { side: 5, variant: 0, holes: [0, 10] }, // 771424 / 81668 (10.59%)
+  { side: 5, variant: 1, holes: [0, 11] }, // 319058 / 22368 (7.01%)
+  { side: 5, variant: 2, holes: [0, 7] }, // 157024 / 7339 (4.67%)
+  { side: 5, variant: 3, holes: [3] }, // 1149568 / 85258 (7.42%)
+  { side: 5, variant: 4, holes: [0] }, // 568630 / 29760 (5.23%)
+  { side: 5, variant: 5, holes: [1] }, // 294543 / 14880 (5.05%)
+  { side: 5, variant: 6, holes: [4] }, // 137864 / 1550 (1.12%)
+]