From e5764201685992f52128ce596caad5191c5947fe Mon Sep 17 00:00:00 2001
From: Jim Richter <jim-x@web.de>
Date: Tue, 16 Mar 2021 17:16:05 +0100
Subject: [PATCH] feat: add backend code for color storage

---
 view/src/components/Analyzer.svelte      | 30 +++++++++++++++++-------
 view/src/components/Editor/TopBar.svelte | 16 +++++++------
 view/src/helpers/index.ts                |  1 +
 view/src/helpers/rgbToHex.ts             |  8 +++++++
 view/src/stores/colors.ts                | 27 +++++++++++++++++++++
 view/src/stores/index.ts                 |  3 ++-
 view/src/types.d.ts                      |  5 ++++
 7 files changed, 74 insertions(+), 16 deletions(-)
 create mode 100644 view/src/helpers/rgbToHex.ts
 create mode 100644 view/src/stores/colors.ts

diff --git a/view/src/components/Analyzer.svelte b/view/src/components/Analyzer.svelte
index a046da6..4c92bd6 100644
--- a/view/src/components/Analyzer.svelte
+++ b/view/src/components/Analyzer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
-  import { countPixels } from "../helpers";
+  import { countPixels, rgbToHex } from "helpers";
+  import { colorStore } from "stores";
   export let img: Image;
 
   import { quartInOut } from "svelte/easing";
@@ -21,6 +21,15 @@
   }
 
   const prom = countPixels(img, correctDistortion);
+
+  console.log($colorStore);
+
+  const getName = (color) => {
+    const [r, g, b] = color.id.split("-").map((num) => parseInt(num) * 255);
+
+    const hex = rgbToHex(r, g, b);
+    return $colorStore.find((c) => c.val === hex)?.name || "";
+  };
 </script>
 
 <div id="header">
@@ -38,11 +47,16 @@
 {:then result}
   <div class="list">
     {#each result as color, i}
-      <p>
-        {Math.floor(
-          (correctDistortion ? color.value : color.distortedValue) * 10000
-        ) / 100}%
-      </p>
+      <div>
+        <p>
+          {Math.floor(
+            (correctDistortion ? color.value : color.distortedValue) * 10000
+          ) / 100}%
+        </p>
+        <p>
+          {getName(color)}
+        </p>
+      </div>
       <div
         in:scaleX={{ duration: 500, delay: i * 200 }}
         class="bar"
@@ -75,7 +89,7 @@
     grid-template-columns: min-content 1fr;
   }
 
-  .list > p {
+  .list p {
     margin: 0;
     text-align: right;
     padding-right: 10px;
diff --git a/view/src/components/Editor/TopBar.svelte b/view/src/components/Editor/TopBar.svelte
index 76479a4..fbadee5 100644
--- a/view/src/components/Editor/TopBar.svelte
+++ b/view/src/components/Editor/TopBar.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { colorStore } from "stores";
+
   export let activeColor = "ff0000";
   export let activeTool;
 
@@ -7,10 +9,9 @@
   export let brushRadius = 10;
   export let layerOpacity = 50;
 
-  const colors = ["ff0000", "00ff00", "0000ff", "ffff00", "00ffff", "ff00ff"];
-
   $: if (activeColor) {
-    if (!colors.includes(activeColor)) activeColor = colors[0];
+    if (!$colorStore.find((c) => c.val === activeColor))
+      activeColor = $colorStore[0].val;
     localStorage.setItem("activeColor", activeColor);
   }
 
@@ -30,14 +31,15 @@
 
 <div class="wrapper">
   <div class="color-wrapper">
-    {#each colors as c}
+    {#each $colorStore as c}
       <div
         class="color"
-        on:click={() => (activeColor = c)}
-        class:active={activeColor === c}
-        style={`background-color: #${c};`}
+        on:click={() => (activeColor = c.val)}
+        class:active={activeColor === c.val}
+        style={`background-color: #${c.val};`}
       />
     {/each}
+    <div class="color">Ξ</div>
   </div>
 
   <div class="settings-wrapper">
diff --git a/view/src/helpers/index.ts b/view/src/helpers/index.ts
index 479894f..4859a76 100644
--- a/view/src/helpers/index.ts
+++ b/view/src/helpers/index.ts
@@ -5,4 +5,5 @@ export { default as downloadImage } from "./DownloadImage";
 export { default as imageToArray } from "./ImageToArray";
 export { default as createFloodMap } from "./FloodFillMap";
 export { default as hexToRGB } from "./hexToRGB";
+export { default as rgbToHex } from "./rgbToHex";
 export { default as AI } from "./AI";
\ No newline at end of file
diff --git a/view/src/helpers/rgbToHex.ts b/view/src/helpers/rgbToHex.ts
new file mode 100644
index 0000000..58ec1b2
--- /dev/null
+++ b/view/src/helpers/rgbToHex.ts
@@ -0,0 +1,8 @@
+function componentToHex(c) {
+  var hex = c.toString(16);
+  return hex.length == 1 ? "0" + hex : hex;
+}
+
+export default function rgbToHex(r, g, b) {
+  return componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
\ No newline at end of file
diff --git a/view/src/stores/colors.ts b/view/src/stores/colors.ts
new file mode 100644
index 0000000..fb8bb18
--- /dev/null
+++ b/view/src/stores/colors.ts
@@ -0,0 +1,27 @@
+import { writable } from "svelte/store";
+
+let colors = [
+  { val: "ff0000", name: "ground" },
+  { val: "00ff00", name: "trees" },
+  { val: "0000ff", name: "sky" },
+  { val: "ffff00", name: "unnamed1" },
+  { val: "00ffff", name: "unnamed2" },
+  { val: "ff00ff", name: "unnamed3" }
+];
+
+if ("colors" in localStorage) {
+  try {
+    const v = localStorage.getItem("colors");
+    colors = JSON.parse(v);
+  } catch (error) {
+
+  }
+}
+
+const store = writable<Color[]>(colors);
+
+store.subscribe(v => {
+  localStorage.setItem("colors", JSON.stringify(v));
+})
+
+export default store;
\ No newline at end of file
diff --git a/view/src/stores/index.ts b/view/src/stores/index.ts
index 9cae437..c6c5464 100644
--- a/view/src/stores/index.ts
+++ b/view/src/stores/index.ts
@@ -1,4 +1,5 @@
 import * as images from "./images";
 export { images }
 export { default as route } from "./route";
-export { default as commitStore } from "./commits";
\ No newline at end of file
+export { default as commitStore } from "./commits";
+export { default as colorStore } from "./colors";
\ No newline at end of file
diff --git a/view/src/types.d.ts b/view/src/types.d.ts
index 80f9a27..b960f72 100644
--- a/view/src/types.d.ts
+++ b/view/src/types.d.ts
@@ -17,6 +17,11 @@ interface Commit {
   date: Date
 }
 
+interface Color {
+  name: string,
+  val: string;
+}
+
 declare module "*.frag" {
   const content: string;
   export default content;