From 68ea235e19a5cf25208a03e59b44280083fd059d Mon Sep 17 00:00:00 2001
From: TerraMaster85 <tm85@e3t.cc>
Date: Sun, 7 Jan 2024 16:08:12 -0500
Subject: [PATCH] Document the Checkbox Component

---
 .../src/components/ui/Checkbox.svelte         | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/starkingdoms-client/src/components/ui/Checkbox.svelte b/starkingdoms-client/src/components/ui/Checkbox.svelte
index 71f4fe9a3e7633f07cd07fc79ae977288cba114e..634edf8d7c4e4e7015829339e966dbb5b2356376 100644
--- a/starkingdoms-client/src/components/ui/Checkbox.svelte
+++ b/starkingdoms-client/src/components/ui/Checkbox.svelte
@@ -1,8 +1,16 @@
+<!-- This Component is specially commented to illustrate how Svelte works -->
+
 <script lang="ts">
+  // We're declaring vars that can be passed as parameters to the component,
+  // in a manner like:
+  // <Checkbox id="T">
+  // where the variable `id' is set to "T".
+  // `class' is a reserved keyword in JS, so we call the variable `clazz` and
+  // export it as 'class' so we can still say <Checkbox class="whatever">.
   let clazz: string = "";
   export { clazz as class };
   export let id = "";
-  export let disabled = false;
+  export let disabled = false; // Boolean parameters have no content.
   export let style = "";
   export let title = "";
 </script>
@@ -17,7 +25,37 @@
   {style}
   {title} />
 
+<!--
+  Reviewing the above:
+
+<input                            This is the content of the component.
+                                  Well, technically it all is, but this
+                                  is actual HTML content.
+  type="checkbox"                 Fixed value. Not dynamic, always
+                                  applied. Works as you'd expect.
+  {id}                            This de-sugars to id="{id}", inlining
+                                  the value of the `id' variable for
+                                  {id}.
+  class="svcmp-Checkbox {clazz}"  One static class, and other classes 
+                                  passed are added also.
+  {disabled}                      {disabled} is inlined if `disabled` is
+                                  true. Otherwise, it is skipped.
+  on:click                        Listener bindings. Ask core.
+  on:focus                        "
+  {style}                         Same idea as {id} above.
+  {title} />                      "
+
+-->
+
 <style lang="scss">
+  /*
+    These styles are inlined as a part of the component.
+    Class and id names are mangled, but I try to keep them reasonable so that
+    the file is maintainable.
+    This sort of styling will replace the entire css/ directory eventually.
+  */
+
+
   .svcmp-Checkbox {
     appearance: none;
     background: transparent;