From 3ca23e06c33654723f389e29ef1ce3b8c3d356a3 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:44:08 -0500
Subject: [PATCH] [O] Split color picker into separate component

---
 src/App.svelte             | 12 ++----------
 src/lib/ColorPicker.svelte | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/ColorPicker.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 04040ac..9a67de4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -8,6 +8,7 @@
   import CompletedOverlay from './lib/CompletedOverlay.svelte';
   import UploadOverlay from './lib/UploadOverlay.svelte';
   import Heading from './lib/Heading.svelte';
+  import ColorPicker from './lib/ColorPicker.svelte';
 
   const params = new URLSearchParams(location.search)
   const hasTouch = Misc.hasTouch()
@@ -361,16 +362,7 @@
     {#if mode === 'color'}
       <div class="btn-div">
         <button on:click={() => colors = [...colors, "#90A4AE"]}>+</button>
-        {#each colors as color, idx}
-        <div class="color-picker-div">
-          <button class="color-picker" on:click={() => ci = idx} aria-label="color" class:selected={ci === idx}>
-            <div class="color" style={`background-color: ${color}`} role="none"
-              on:click={() => document.getElementById(`color-picker-${idx}`)!.click()}></div>
-          </button>
-          <input type="color" value={color} id={`color-picker-${idx}`}
-            on:input={e => { colors[idx] = e.target.value; updateColors() }}/>
-        </div>
-        {/each}
+        {#each colors as color, idx}<ColorPicker bind:ci={ci} {idx} {colors} {updateColors}/>{/each}
       </div>
     {/if}
     <div class="btn-div">
diff --git a/src/lib/ColorPicker.svelte b/src/lib/ColorPicker.svelte
new file mode 100644
index 0000000..d8402ea
--- /dev/null
+++ b/src/lib/ColorPicker.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    export let ci: number
+    export let idx: number
+    export let colors: string[]
+    export let updateColors: () => void
+    
+    let input: HTMLInputElement
+    $: color = colors[idx]
+</script>
+
+<div class="color-picker-div">
+    <button class="color-picker" on:click={() => ci = idx} aria-label="color" class:selected={ci === idx}>
+      <div class="color" style={`background-color: ${color}`} role="none"
+        on:click={() => input!.click()}></div>
+    </button>
+    <input type="color" value={color} bind:this={input}
+      on:input={e => { colors[idx] = e.target.value; updateColors() }}/>
+  </div>
\ No newline at end of file