partly extract Triangle to separate component

README.md

@@ -8,4 +8,5 @@
 - [x] fix undo missing animation
 - [x] fix undo when circle picked
 - [ ] add about page
-- [ ] handle U, R and A keypresses
+- [ ] fix victory / gameover modal
+- [x] handle U, R and A keypresses

src/App.svelte

@@ -5,11 +5,7 @@
   const adjcs = new Graph()
   const jumps = new Graph()
 
-  const C_MAX_CIRCLES = 21
-  const C_POLE = "pole"
-  const C_HOLE = "hole"
-  const C_PICK = "pick"
-  const C_DEST = "dest"
+  const C_MAX_CIRCLES = 15
 
   const triangular = n => (n <= 1 ? 1 : n + triangular(n - 1))
   const leftMost = detph => (detph == 0 ? 0 : triangular(detph))
@@ -55,10 +51,15 @@
 <script>
   import { completed } from "./store.js"
   import { levels, colors } from "./levels.js"
-  import { crossfade, scale } from "svelte/transition"
   import Button from "./Button.svelte"
   import Tailwind from "./Components/Tailwind.svelte"
   import LevelButton from "./LevelButton.svelte"
+  import Triangle, {
+    C_POLE,
+    C_HOLE,
+    C_DEST,
+    C_PICK,
+  } from "./Triangle.svelte"
 
   let level = 0
   $: variant = levels[level].variant
@@ -75,12 +76,6 @@
   let victory
   let maxSteps
 
-  const duration = 400
-  const [send, receive] = crossfade({
-    duration,
-    fallback: scale,
-  })
-
   $: if (variant || side) {
     restart()
   }
@@ -130,14 +125,6 @@
   }
 
   const getColor = i => colors[i % colors.length]
-  const getDestColor = _ => circleColors[circles.indexOf(C_PICK)]
-
-  $: getCircleColor = i => {
-    if (circles[i] == C_HOLE) return `bg-gray`
-    if (circles[i] == C_POLE) return `bg-${circleColors[i]}`
-    if (circles[i] == C_PICK) return `bg-${circleColors[i]}-lighter`
-    if (circles[i] == C_DEST) return `bg-${getDestColor()}-darker`
-  }
 
   const commonBetween = (source, destination) => {
     const common = adjcs.adjacencyList[source].filter(common =>
@@ -201,7 +188,8 @@
     circles[destination] = C_POLE
   }
 
-  const change = curr => {
+  const change = event => {
+    const curr = event.detail
     const prev = circles.indexOf(C_PICK)
 
     if (circles[curr] == C_POLE && prev == -1) {
@@ -312,13 +300,6 @@
       restart()
     }
   }
-
-  const animate = i =>
-    (level == 0 &&
-      i == 5 &&
-      circles[i] == C_POLE &&
-      moveStack.length == 0) ||
-    circles[i] == C_DEST
 </script>
 
 <style lang="postcss">
@@ -326,21 +307,6 @@
     width: 290px;
   }
 
-  .triangle {
-    width: 450px;
-  }
-
-  .circle {
-    width: 50px;
-    height: 50px;
-    /* make sqare aorund circle hidden on click/touch */
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  }
-
-  .hole {
-    @apply shadow-inner cursor-default;
-  }
-
   span {
     visibility: hidden;
   }
@@ -365,27 +331,21 @@
         {/each}
       </div>
 
-      <div class="absolute">
+      <div class="absolute flex border border-blue">
         <span data-cy="gameover" class:gameover>GAME OVER</span>
         <span data-cy="victory" class:victory>VICTORY</span>
       </div>
 
-      <div class="triangle grid grid-cols-9 grid-rows-5 mb-4">
-        {#each circles as _, i}
-          {#key circles[i]}
-            <div
-              class="circle rounded-full cursor-pointer div{i} {circles[i]} {getCircleColor(i)}"
-              class:animate-pulse={animate(i)}
-              on:click={() => change(i)}
-              in:receive={{ key: i }}
-              out:send={{ key: i }} />
-          {/key}
-        {/each}
-      </div>
+      <Triangle
+        {level}
+        {circles}
+        {circleColors}
+        {moveStack}
+        on:change={change} />
 
       <div class="flex space-x-2">
-        <Button on:click={console.log} icon="about" color="red" />
-        <Button on:click={restart} icon="restart" color="blue" />
+        <Button on:click={console.log} icon="about" />
+        <Button on:click={restart} icon="restart" />
         <Button on:click={undo} icon="undo" />
       </div>
     </div>

src/Triangle.svelte

@@ -0,0 +1,70 @@
+<script context="module">
+  export const C_POLE = "pole"
+  export const C_HOLE = "hole"
+  export const C_PICK = "pick"
+  export const C_DEST = "dest"
+</script>
+
+<script>
+  import { crossfade, scale } from "svelte/transition"
+  import { createEventDispatcher } from "svelte"
+
+  export let circles
+  export let level
+  export let circleColors
+  export let moveStack
+
+  const dispatch = createEventDispatcher()
+
+  const animate = i =>
+    (level == 0 &&
+      i == 5 &&
+      circles[i] == C_POLE &&
+      moveStack.length == 0) ||
+    circles[i] == C_DEST
+
+  const duration = 400
+  const [send, receive] = crossfade({
+    duration,
+    fallback: scale,
+  })
+
+  const getDestColor = _ => circleColors[circles.indexOf(C_PICK)]
+
+  $: getCircleColor = i => {
+    if (circles[i] == C_HOLE) return `bg-gray`
+    if (circles[i] == C_POLE) return `bg-${circleColors[i]}`
+    if (circles[i] == C_PICK) return `bg-${circleColors[i]}-lighter`
+    if (circles[i] == C_DEST) return `bg-${getDestColor()}-darker`
+  }
+</script>
+
+<style lang="postcss">
+  .triangle {
+    width: 450px;
+  }
+
+  .circle {
+    width: 50px;
+    height: 50px;
+    /* make sqare aorund circle hidden on click/touch */
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .hole {
+    @apply shadow-inner cursor-default;
+  }
+</style>
+
+<div class="triangle grid grid-cols-9 grid-rows-5 mb-4">
+  {#each circles as _, i}
+    {#key circles[i]}
+      <div
+        class="circle rounded-full cursor-pointer div{i} {circles[i]} {getCircleColor(i)}"
+        class:animate-pulse={animate(i)}
+        on:click={() => dispatch('change', i)}
+        in:receive={{ key: i }}
+        out:send={{ key: i }} />
+    {/key}
+  {/each}
+</div>