From 7e7f5fac79f613cfff7f299c99dcb28e3d3a8ada Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Babi=C4=8D?= <peter@peterbabic.dev>
Date: Thu, 18 Mar 2021 15:37:04 +0100
Subject: [PATCH] convert buttons to gray

---
 src/App.svelte         |  6 +++++-
 src/Button.svelte      | 16 +++++++++-------
 src/LevelButton.svelte | 12 ++++++++----
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 48e400c..ced3939 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -114,7 +114,7 @@
       }
     }
 
-    printSolutions(1)
+    printSolutions(-1)
   }
 
   const undo = () => {
@@ -245,6 +245,10 @@
   }
 
   const printSolutions = maxSolutionCount => {
+    if (maxSolutionCount < 0) {
+      return
+    }
+
     let depth = 0
     let solutions = []
     let gameovers = []
diff --git a/src/Button.svelte b/src/Button.svelte
index 2433023..89e5533 100644
--- a/src/Button.svelte
+++ b/src/Button.svelte
@@ -1,6 +1,5 @@
 <script>
-  export let icon = "restart"
-  export let color = "green"
+  export let icon = ""
 
   const d = []
   d["restart"] =
@@ -13,9 +12,12 @@
 
 <button
   on:click
-  class="capitalize flex-auto inline-flex items-center rounded fill-current text-{color}-lighter px-2 py-2 border-0 border-b-2 bg-{color} border-{color}-darker active:text-{color} active:bg-{color}-darker">
-  <svg
-    class="w-5 h-5 mr-2"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20"><path d={d[icon]} /></svg>{icon}
+  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
+      class="w-5 h-5 mr-2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"><path d={d[icon]} /></svg>
+  {/if}
+  {icon}
 </button>
diff --git a/src/LevelButton.svelte b/src/LevelButton.svelte
index 26b89aa..58cc3e8 100644
--- a/src/LevelButton.svelte
+++ b/src/LevelButton.svelte
@@ -6,17 +6,21 @@
 </script>
 
 <style>
+  .completed {
+    @apply text-blue-darker;
+  }
+
   .active {
-    @apply font-bold;
+    @apply bg-blue-lighter text-blue-darker border-blue;
   }
 
-  .completed {
-    @apply text-blue-darker;
+  .active:not(.completed) {
+    @apply text-gray-lighter;
   }
 </style>
 
 <button
-  class="block py-1 rounded border-0 border-b-2 border-gray-darker bg-gray-lighter flex-1 text-center"
+  class="block py-2 rounded border-0 border-b-2 border-gray-darker bg-gray-lighter flex-1 text-center text-gray active:text-blue-lighter active:bg-gray-darker"
   on:click
   value={i}
   class:completed={$completed.includes(i)}