diff --git a/cypress/integration/spec.js b/cypress/integration/spec.js
index ed39e13..6e670b1 100644
--- a/cypress/integration/spec.js
+++ b/cypress/integration/spec.js
@@ -5,43 +5,42 @@ describe("game should", () => {
     cy.visit("/")
     cy.get(".div0.hole").should("be.visible")
     cy.get(".div1.pole").should("be.visible")
-    cy.get(".div2.pole").should("be.visible").click()
-    cy.get(".div2.pick").should("be.visible")
+    cy.get(".div3.pole").should("be.visible").click()
+    cy.get(".div3.pick").should("be.visible")
     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(".div3.hole").should("be.visible")
     cy.get(".restart").click()
-    cy.get(".div2.pole").should("be.visible")
+    cy.get(".div3.pole").should("be.visible")
   })
 
   it("display game over", () => {
     cy.visit("/")
     cy.get("[data-cy=gameover]").as("gameover").should("not.be.visible")
 
-    cy.get(".div2.pole").click()
+    cy.get(".div3.pole").click()
     cy.get(".div0.dest").click()
+    cy.get(".div5.pole").click()
+    cy.get(".div3.dest").click()
+    cy.get(".div13.pole").click()
+    cy.get(".div4.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(".div13.dest").click()
+    cy.get(".div14.pole").click()
     cy.get(".div5.dest").should("be.visible")
-    cy.get(".div7.dest").click()
-    cy.get(".div13.pole").click()
+    cy.get(".div12.dest").click()
+    cy.get(".div6.pole").click()
+    cy.get(".div1.dest").should("be.visible")
     cy.get(".div8.dest").click()
-    cy.get(".div7.pole").click()
+    cy.get(".div12.pole").click()
     cy.get(".div5.dest").click()
-    cy.get(".div5.pole").click()
+    cy.get(".div2.pole").click()
+    cy.get(".div7.dest").click()
+    cy.get(".div3.pole").click()
     cy.get(".div12.dest").click()
-    cy.get(".div14.pole").click()
-    cy.get(".div11.dest").click()
+    cy.get(".div5.pole").click()
+    cy.get(".div14.dest").click()
 
     cy.get("@gameover").should("be.be.visible")
   })
@@ -50,33 +49,32 @@ describe("game should", () => {
     cy.visit("/")
     cy.get("[data-cy=victory]").as("victory").should("not.be.visible")
 
-    // 2>0  11>2  3>1  9>2  0>9  13>8  14>11  1>3  5>12  12>7  4>2  2>9  8>13
-    cy.get(".div2.pole").click()
-    cy.get(".div0.dest").click()
-    cy.get(".div11.pole").click()
-    cy.get(".div2.dest").click()
     cy.get(".div3.pole").click()
+    cy.get(".div0.dest").click()
+    cy.get(".div5.pole").click()
+    cy.get(".div3.dest").click()
+    cy.get(".div0.pole").click()
+    cy.get(".div5.dest").click()
+    cy.get(".div6.pole").click()
     cy.get(".div1.dest").click()
     cy.get(".div9.pole").click()
     cy.get(".div2.dest").click()
-    cy.get(".div0.pole").click()
-    cy.get(".div9.dest").click()
-    cy.get(".div13.pole").click()
+    cy.get(".div11.pole").click()
+    cy.get(".div4.dest").click()
+    cy.get(".div12.pole").click()
+    cy.get(".div5.dest").click()
+    cy.get(".div1.pole").click()
     cy.get(".div8.dest").click()
+    cy.get(".div2.pole").click()
+    cy.get(".div9.dest").click()
     cy.get(".div14.pole").click()
-    cy.get(".div11.dest").click()
-    cy.get(".div1.pole").click()
-    cy.get(".div3.dest").click()
+    cy.get(".div5.dest").click()
     cy.get(".div5.pole").click()
     cy.get(".div12.dest").click()
-    cy.get(".div12.pole").click()
-    cy.get(".div7.dest").click()
-    cy.get(".div4.pole").click()
-    cy.get(".div2.dest").click()
-    cy.get(".div2.pole").click()
-    cy.get(".div9.dest").click()
-    cy.get(".div8.pole").click()
-    cy.get(".div13.dest").click()
+    cy.get(".div13.pole").click()
+    cy.get(".div11.dest").click()
+    cy.get(".div10.pole").click()
+    cy.get(".div12.dest").click()
 
     cy.get("@victory").should("be.visible")
   })
diff --git a/src/App.svelte b/src/App.svelte
index 75e9c03..2c336fb 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,5 +3,5 @@
 </script>
 
 <main>
-  <Triangle />
+  <Triangle side="5" />
 </main>
diff --git a/src/Tree.js b/src/Tree.js
new file mode 100644
index 0000000..3e03238
--- /dev/null
+++ b/src/Tree.js
@@ -0,0 +1,9 @@
+class Tree {
+  constructor(solution, depth) {
+    this.depth = depth
+    this.solution = solution
+    this.children = []
+  }
+}
+
+export default Tree
diff --git a/src/Triangle.svelte b/src/Triangle.svelte
index baef77a..9b34822 100644
--- a/src/Triangle.svelte
+++ b/src/Triangle.svelte
@@ -1,29 +1,78 @@
-<script>
-  import Graph from "./Graph.js"
-  import { onMount } from "svelte"
-  import { crossfade, scale } from "svelte/transition"
+<script context="module">
+  import Tree from "./Tree"
+  import Graph from "./Graph"
 
-  const [send, receive] = crossfade({
-    duration: 400,
-    fallback: scale,
-  })
+  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_NUM_CIRCLES = 21
-  const C_MAX_STEPS = 19
+  const C_MAX_CIRCLES = 21
   const C_POLE = 0
   const C_HOLE = 1
   const C_PICK = 2
   const C_DEST = 3
 
+  const triangular = n => (n <= 1 ? 1 : n + triangular(n - 1))
+  const leftMost = detph => (detph == 0 ? 0 : triangular(detph))
+  const find = (r, c) => (c > r ? undefined : leftMost(r) + c)
+
+  let row = 0
+  let col = 0
+  for (let i = 0; i < C_MAX_CIRCLES; i++, col++) {
+    const addEdge = (graph, i, pos) => {
+      if (pos != undefined && pos < C_MAX_CIRCLES) {
+        graph.addVertex(i)
+        graph.addVertex(pos)
+        graph.addEdge(i, pos)
+      }
+    }
+
+    if (i >= leftMost(row + 1)) {
+      row++
+    }
+
+    if (i == leftMost(row)) {
+      col = 0
+    }
+
+    let east = find(row, col + 1)
+    let south = find(row + 1, col)
+    let southEast = find(row + 1, col + 1)
+
+    addEdge(adjcs, i, east)
+    addEdge(adjcs, i, south)
+    addEdge(adjcs, i, southEast)
+
+    east = find(row, col + 2)
+    south = find(row + 2, col)
+    southEast = find(row + 2, col + 2)
+
+    addEdge(jumps, i, east)
+    addEdge(jumps, i, south)
+    addEdge(jumps, i, southEast)
+  }
+</script>
+
+<script>
+  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
+
   let circles = []
   let steps = 0
-  let adjcs
-  let jumps
   let gameover
   let victory
 
@@ -33,60 +82,16 @@
   })
 
   const restart = () => {
-    adjcs = new Graph()
-    jumps = new Graph()
-
     circles = []
     steps = 0
     gameover = false
     victory = false
 
-    for (let i = 0; i < C_NUM_CIRCLES; i++) {
-      adjcs.addVertex(i)
-      jumps.addVertex(i)
+    for (let i = 0; i < numCircles; i++) {
       circles[i] = C_POLE
     }
 
     circles[0] = C_HOLE
-
-    let row = 0
-    let col = 0
-    for (let i = 0; i < C_NUM_CIRCLES; i++, col++) {
-      const triangular = n => (n <= 1 ? 1 : n + triangular(n - 1))
-      const leftMost = detph => (detph == 0 ? 0 : triangular(detph))
-      const find = (r, c) => (c > r ? undefined : leftMost(r) + c)
-      // const triangular2 = n => (n <= 1 ? 0 : n + triangular2(n - 1))
-      // const rightMost = detph => (detph == 0 ? 0 : triangular2(detph + 1))
-      const addEdge = (graph, i, pos) => {
-        if (pos != undefined && pos < C_NUM_CIRCLES) {
-          graph.addEdge(i, pos)
-        }
-      }
-
-      if (i >= leftMost(row + 1)) {
-        row++
-      }
-
-      if (i == leftMost(row)) {
-        col = 0
-      }
-
-      let east = find(row, col + 1)
-      let south = find(row + 1, col)
-      let southEast = find(row + 1, col + 1)
-
-      addEdge(adjcs, i, east)
-      addEdge(adjcs, i, south)
-      addEdge(adjcs, i, southEast)
-
-      east = find(row, col + 2)
-      south = find(row + 2, col)
-      southEast = find(row + 2, col + 2)
-
-      addEdge(jumps, i, east)
-      addEdge(jumps, i, south)
-      addEdge(jumps, i, southEast)
-    }
   }
 
   const commonBetween = (source, destination) => {
@@ -104,9 +109,7 @@
   }
 
   const clearDests = () =>
-    circles.forEach(
-      (_, i) => (circles[i] = circles[i] == C_DEST ? C_HOLE : circles[i])
-    )
+    (circles = circles.map(c => (c == C_DEST ? C_HOLE : c)))
 
   const getDests = (circles, curr) => {
     let dests = []
@@ -169,7 +172,7 @@
       clearDests()
       steps++
 
-      if (steps == C_MAX_STEPS) {
+      if (steps == maxSteps) {
         victory = true
 
         return
@@ -190,14 +193,6 @@
     }
   }
 
-  class Tree {
-    constructor(solution, depth) {
-      this.depth = depth
-      this.solution = solution
-      this.children = []
-    }
-  }
-
   const printSingleSolution = () => {
     let depth = 0
     let solutions = []
@@ -222,7 +217,7 @@
           jumpOver(shadow, hint, destination)
           depth = depth + 1
 
-          if (depth == C_MAX_STEPS) {
+          if (depth == maxSteps) {
             solutions.push(solution)
           }
           recurse(move.children[lastIndex])