From 54d1d957c3b3ad38b155c631a8c0561e0766f401 Mon Sep 17 00:00:00 2001
From: TerraMaster85 <tm85@e3t.cc>
Date: Sat, 6 Jan 2024 16:14:37 -0500
Subject: [PATCH] Checkbox Component

---
 .../src/components/ui/Checkbox.svelte         | 36 +++++++++++++++++++
 starkingdoms-client/src/pages/Play.svelte     |  8 ++---
 2 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 starkingdoms-client/src/components/ui/Checkbox.svelte

diff --git a/starkingdoms-client/src/components/ui/Checkbox.svelte b/starkingdoms-client/src/components/ui/Checkbox.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..950d5e5bef26361bd90c30381c3d4326d18d2a58
--- /dev/null
+++ b/starkingdoms-client/src/components/ui/Checkbox.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  let clazz: string = "";
+  export { clazz as class };
+  export let id = "";
+  export let disabled = false;
+  export let style = "";
+  export let title = "";
+</script>
+
+<input type="checkbox" {id} class="svcmp-Checkbox {clazz}" {disabled} on:click on:focus {style} {title}>
+
+<style lang="scss">
+  .svcmp-Checkbox {
+    appearance: none;
+    background: transparent;
+    color: var(--text);
+    padding: 0.3rem;
+    vertical-align: baseline;
+    border-radius: 0.25rem;
+    cursor: text;
+    border: 2px solid var(--links);
+    transition: 0.1s ease-in-out;
+    background-size: cover;
+    margin: 0;
+  }
+  .svcmp-Checkbox:not(:disabled):hover {
+    cursor: pointer;
+    background-color: var(--links-transparent);
+  }
+  .svcmp-Checkbox:checked {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAPnAAAD5wHDtfxxAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAfxJREFUWIW9ls2LTnEUxz/PY6Jhmh1qSkRJ9ChlQamZLRuWbCTZjA1lRXZSFlJKyUJTkz/AxsbCRtmoyUuTRHlZKMlLMobG+Fg89+Zxnfvc5+Xee+pXt9895/f5nnPuPfc2VGq0I8B+YBpYAECta02oH23bM7Wl0qipAg3gTpJ9aovA6WYddOBkBg4wCkzVUYEtwCNgLLP/DmhVXYER4FYAFzgBfKr6wTtvbNdSnyrhu9SfAfylOla1gFXqkwC+pO7p9K1KwJUArnoh61sFfJ+6HMDn1JVVCxhXXwfwHyaTL7vKfg2vAhuD/bPA0zCixOwPBpmr3lebeXFlTcK1SYbrM/tfgZ3Am7zAslpwPYADnOoGB0ppwfGc0t/uJX7YFmwCHgPjmf0PQAt4X3TAMC1oAjMBHNp/PIVw4J8WHFNn1dU9lv5MTulv9tPC9GKH+i05YE7dXBC4Xf0ewF/ZHkZ9CVijzmcO+qIeygkaUR8G8GV1qh94KmAmOEz1t3rJ/4fIxRz/y/3CUwFH/Vv+yO6p65KAveqvwGdeHR1UAOo24+93am/VSfV5cG9J3T0IvFMASQY3uoiIMlc9Nyg8KyBdRS3ptAfqirIF9NIS1QV16zDwbgJ6acn0sPAiAemKRNxVG3UJQD2gLibwz+qGMuD9CMD2LHihHi4LrvIH6xoIB63GYHwAAAAASUVORK5CYII=');
+  }
+  .svcmp-Checkbox:disabled {
+    opacity: 0.5;
+  }
+</style>
diff --git a/starkingdoms-client/src/pages/Play.svelte b/starkingdoms-client/src/pages/Play.svelte
index 8d2fff8ecfb4299cd0d259c7b48c94b2b764d49f..f5f4bcd509754b6e65dac9873ba3d68b43470564 100644
--- a/starkingdoms-client/src/pages/Play.svelte
+++ b/starkingdoms-client/src/pages/Play.svelte
@@ -9,6 +9,7 @@
   import Chatbox from "../components/Chatbox.svelte";
   import { onMount } from "svelte";
   import Popup from "../components/ui/Popup.svelte";
+  import Checkbox from "../components/ui/Checkbox.svelte";
 
   let config = DEFAULT_CONFIG;
 
@@ -102,11 +103,8 @@
     minimizable
     style="width: 20vw; position: absolute;">
     <label for="dev_mode">Developer mode (Advanced)</label>
-    <input type="checkbox" id="dev_mode" />
-    <span>
-      Enables parts of the client intended only for StarKingdoms developers.
-      Buggy. Use at your own risk.
-    </span>
+    <Checkbox 
+      title="Enables tools intended only for the developers. Buggy. Use at your own risk."/>
   </Popup>
 </div>