insert about modal

src/About.svelte

@@ -0,0 +1,45 @@
+<script>
+  export let hidden
+</script>
+
+<style>
+  * {
+    @apply text-sm;
+  }
+
+  h1 {
+    @apply text-lg;
+  }
+
+  h1,
+  h2,
+  a {
+    @apply font-bold mt-2;
+  }
+
+  div.absolute {
+    background-color: white;
+  }
+</style>
+
+<div class="relative">
+  <div
+    class="absolute z-10 rounded text-blue-darker text-justify border-1 border-orange"
+    class:hidden>
+    <h1>Triangles.fun</h1>
+    A game. Leave only a single dot to win. Eliminate other dots by jumping
+    them over!
+    <h2>Instructions</h2>
+    Click or touch the dot. If the dot can jump, it becomes lighter and the
+    spots where it can land become darker. Perform jump by touching or
+    clicking on the darker spot.
+    <h2>Installation</h2>
+    This game can be installed into your device. Look for "Add to Home
+    Screen" in the browser menu.
+    <h2>Support</h2>
+    You can send me your feedback or complains via
+    <a href="mailto:peter@triangles.fun">peter@triangles.fun</a>
+    and you can even
+    <a href="https://www.buymeacoffee.com/peterbabic">buy me a coffee</a>.
+  </div>
+</div>

src/App.svelte

@@ -55,6 +55,7 @@
   import Tailwind from "./Components/Tailwind.svelte"
   import LevelButton from "./LevelButton.svelte"
   import Modal from "./Modal.svelte"
+  import About from "./About.svelte"
   import Triangle, {
     C_POLE,
     C_HOLE,
@@ -301,6 +302,8 @@
       restart()
     }
   }
+
+  let about = false
 </script>
 
 <style>
@@ -317,6 +320,8 @@
   <div
     class="m-auto transform-gpu sm:scale-150 md:scale-175 lg:scale-200 xl:scale-225">
     <div class="outer overflow-x-hidden my-4">
+      <About hidden={!about} />
+
       <div data-cy="levels" class="grid grid-cols-5 gap-2 mb-4">
         {#each levels as _, i}
           <LevelButton {i} {level} on:click={changeLevel} />
@@ -336,9 +341,9 @@
         on:change={change} />
 
       <div class="flex space-x-2">
-        <Button on:click={console.log} icon="about" />
-        <Button on:click={restart} icon="restart" />
-        <Button on:click={undo} icon="undo" />
+        <Button on:click={() => (about = !about)} icon="about" />
+        <Button on:click={restart} invisible={about} icon="restart" />
+        <Button on:click={undo} invisible={about} icon="undo" />
       </div>
     </div>
   </div>

src/Button.svelte

@@ -1,5 +1,6 @@
 <script>
   export let icon = ""
+  export let invisible = false
 
   const d = []
   d["restart"] =
@@ -13,6 +14,7 @@
 <button
   on:click
   data-cy={icon}
+  class:invisible
   class="capitalize flex-auto inline-flex items-center rounded fill-current text-blue-darker px-2 py-2 border-0 border-b-2 bg-gray-lighter border-gray-darker active:text-gray active:bg-gray-darker active:border-t-2 active:border-green-lighter">
   {#if icon}
     <svg

src/Triangle.svelte

@@ -56,7 +56,7 @@
   }
 </style>
 
-<div class="triangle grid grid-cols-9 grid-rows-5 mb-4">
+<div class="triangle grid grid-cols-9 grid-rows-5 mb-4 z-0">
   {#each circles as _, i}
     {#key circles[i]}
       <div

tailwind.config.js

@@ -43,7 +43,7 @@ module.exports = {
       scale: {
         175: "1.75",
         200: "2",
-        225: "2.25",
+        225: "2.15",
       },
     },
   },