From 2aa4ddb28fb83649022b0af763b753e5ab1fd0c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Babi=C4=8D?= <peter@peterbabic.dev>
Date: Mon, 15 Mar 2021 21:58:20 +0100
Subject: [PATCH] insert buttons with svg

---
 src/Button.svelte   | 18 ++++++++++++++++++
 src/Triangle.svelte | 21 ++++++++++-----------
 2 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 src/Button.svelte

diff --git a/src/Button.svelte b/src/Button.svelte
new file mode 100644
index 0000000..fbf5de9
--- /dev/null
+++ b/src/Button.svelte
@@ -0,0 +1,18 @@
+<script>
+  export let icon
+
+  const d = []
+  d["Restart"] =
+    "M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42 1.42zM12 10h8l-4 4-4-4z"
+  d["Undo"] =
+    "M 15,3 V 5.99 A 4,4 0 0 1 11,10 H 8 V 5 l -6,6 6,6 v -5 h 3 A 6,6 0 0 0 17,6 V 3 Z"
+</script>
+
+<button
+  on:click
+  class="block flex-none bg-transparent text-gray-600 hover:bg-gray-600 hover:text-gray-50 fill-current py-2 px-3 border border-gray-600 hover:border-transparent rounded">
+  <svg
+    class="w-5 h-5"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"><path d={d[icon]} /></svg>
+</button>
diff --git a/src/Triangle.svelte b/src/Triangle.svelte
index 81cd202..f3e42e7 100644
--- a/src/Triangle.svelte
+++ b/src/Triangle.svelte
@@ -56,6 +56,7 @@
   import { completed } from "./store.js"
   import { levels, colors } from "./levels.js"
   import { crossfade, scale } from "svelte/transition"
+  import Button from "./Button.svelte"
 
   export let side = 5
   export let variant = 0
@@ -318,21 +319,13 @@
   .victory {
     display: inline;
   }
-
-  button {
-    cursor: pointer;
-  }
 </style>
 
 <div class="outer overflow-x-hidden">
-  <div>
-    <button class="restart" on:click={restart}>RESTART GAME</button>
-    <button class="undo" on:click={undo}>UNDO</button>
-    <span data-cy="gameover" class:gameover>GAME OVER</span>
-    <span data-cy="victory" class:victory>VICTORY</span>
-  </div>
+  <span data-cy="gameover" class:gameover>GAME OVER</span>
+  <span data-cy="victory" class:victory>VICTORY</span>
 
-  <div class="triangle grid-cols-9 grid-rows-5">
+  <div class="triangle grid-cols-9 grid-rows-5 mb-4">
     {#each circles as _, i}
       {#key circles[i]}
         <div
@@ -345,4 +338,10 @@
       {/key}
     {/each}
   </div>
+
+  <div class="flex">
+    <Button on:click={restart} icon="Restart" />
+    <div class="flex-grow" />
+    <Button on:click={undo} icon="Undo" />
+  </div>
 </div>