feat: add backend code for color storage

view/src/components/Analyzer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
+  import { countPixels, rgbToHex } from "helpers";
-  import { countPixels } 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}
+      <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;

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)}
+        on:click={() => (activeColor = c.val)}
-        class:active={activeColor === c}
+        class:active={activeColor === c.val}
-        style={`background-color: #${c};`}
+        style={`background-color: #${c.val};`}
       />
     {/each}
+    <div class="color">Ξ</div>
   </div>
 
   <div class="settings-wrapper">

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";

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);
+}

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;

view/src/stores/index.ts

@@ -2,3 +2,4 @@ import * as images from "./images";
 export { images }
 export { default as route } from "./route";
 export { default as commitStore } from "./commits";
+export { default as colorStore } from "./colors";

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;