fix victory / gameover

README.md

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

src/App.svelte

@@ -54,6 +54,7 @@
   import Button from "./Button.svelte"
   import Tailwind from "./Components/Tailwind.svelte"
   import LevelButton from "./LevelButton.svelte"
+  import Modal from "./Modal.svelte"
   import Triangle, {
     C_POLE,
     C_HOLE,
@@ -72,8 +73,8 @@
   let circles = []
   let circleColors = []
   let moveStack = []
-  let gameover
-  let victory
+  let gameover = false
+  let victory = false
   let maxSteps
 
   $: if (variant || side) {
@@ -302,19 +303,10 @@
   }
 </script>
 
-<style lang="postcss">
+<style>
   .outer {
     width: 290px;
   }
-
-  span {
-    visibility: hidden;
-  }
-
-  .gameover,
-  .victory {
-    visibility: visible;
-  }
 </style>
 
 <Tailwind />
@@ -331,9 +323,9 @@
         {/each}
       </div>
 
-      <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 class="relative text-blue-darker">
+        <Modal position="left" text="victory" invisible={!victory} />
+        <Modal position="right" text="gameover" invisible={!gameover} />
       </div>
 
       <Triangle

src/Modal.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let position
+  export let text
+  export let invisible
+</script>
+
+<div
+  class="absolute top-0 {position}-0 px-2 uppercase"
+  data-cy={text}
+  class:invisible>
+  {text}!
+</div>