From 19baa22d7245969b37eb78b7adca0392a02b753c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Babi=C4=8D?= <peter@peterbabic.dev>
Date: Fri, 19 Mar 2021 19:13:15 +0100
Subject: [PATCH] fix victory / gameover

---
 README.md        |  2 +-
 src/App.svelte   | 22 +++++++---------------
 src/Modal.svelte | 12 ++++++++++++
 3 files changed, 20 insertions(+), 16 deletions(-)
 create mode 100644 src/Modal.svelte

diff --git a/README.md b/README.md
index 6bd68fe..1ae02fc 100644
--- a/README.md
+++ b/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
diff --git a/src/App.svelte b/src/App.svelte
index 519c601..6ffbf8c 100644
--- a/src/App.svelte
+++ b/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
diff --git a/src/Modal.svelte b/src/Modal.svelte
new file mode 100644
index 0000000..dd3cfee
--- /dev/null
+++ b/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>