From 8683f50bd4a69c7a0236f29d0fe5ced9a09dc426 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Wed, 22 Dec 2021 19:31:05 -0700
Subject: [PATCH] Adjust the code format and add the ability to disable the
 checkbox

---
 .../src/components/SciFi-Checkbox.svelte      | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/web-svelte/src/components/SciFi-Checkbox.svelte b/web-svelte/src/components/SciFi-Checkbox.svelte
index c774a08..730df0e 100644
--- a/web-svelte/src/components/SciFi-Checkbox.svelte
+++ b/web-svelte/src/components/SciFi-Checkbox.svelte
@@ -1,22 +1,28 @@
 <script lang="ts">
 import { createEventDispatcher } from "svelte";
 
+const emit = createEventDispatcher();
+
+export let disabled: boolean = false;
+export let state: boolean;
 export let name: string;
 export let id: string;
 
-const emit = createEventDispatcher();
-
-let enabled = false;
-
-function toggleState() {
-	enabled = !enabled;
-	emit(`toggle`, enabled);
+function onToggle() {
+	emit(`toggle`, id);
 };
 </script>
 
-<label class="container">
+<label class="container" {disabled}>
 	<slot></slot>
-	<input type="checkbox" {name} {id}>
+	<input
+		type="checkbox"
+		{disabled}
+		{name}
+		{id}
+		bind:checked="{state}"
+		on:click="{onToggle}"
+	>
 	<span class="checkmark"></span>
 </label>