From a5ab1c319f6c5ebde802d7d64dc55b898e4e5754 Mon Sep 17 00:00:00 2001
From: CrispyBaguette <alexandre.bruyant@gmail.com>
Date: Wed, 15 Dec 2021 18:46:05 +0100
Subject: [PATCH 1/2] Palette selector component

---
 client/src/ImageInput.tsx    | 21 ++++++---------------
 client/src/Palette.ts        | 10 +++-------
 client/src/PaletteSelect.tsx | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 43 insertions(+), 22 deletions(-)
 create mode 100644 client/src/PaletteSelect.tsx

diff --git a/client/src/ImageInput.tsx b/client/src/ImageInput.tsx
index f0d2997..e8e113e 100644
--- a/client/src/ImageInput.tsx
+++ b/client/src/ImageInput.tsx
@@ -1,5 +1,6 @@
 import React, { FormEventHandler } from "react";
 import Palette, { palettes } from "./Palette";
+import PaletteSelect from "./PaletteSelect";
 
 interface Props {
   onImageSubmit: (image: Blob, palette: Palette) => void;
@@ -7,7 +8,7 @@ interface Props {
 
 function ImageInput({ onImageSubmit }: Props) {
   const fileInputRef = React.useRef<HTMLInputElement>(null);
-  const [paletteIndex, setPaletteIndex] = React.useState(0);
+  const [palette, setPalette] = React.useState<Palette>(palettes[0]);
 
   const handleSubmit: FormEventHandler = (e) => {
     e.preventDefault();
@@ -19,11 +20,11 @@ function ImageInput({ onImageSubmit }: Props) {
       return;
     }
 
-    onImageSubmit(fileInputRef.current.files[0], palettes[paletteIndex]);
+    onImageSubmit(fileInputRef.current.files[0], palette);
   };
 
-  const handlePaletteChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setPaletteIndex(parseInt(event.target.value));
+  const handlePaletteChange = (palette: Palette) => {
+    setPalette(palette);
   };
 
   return (
@@ -42,17 +43,7 @@ function ImageInput({ onImageSubmit }: Props) {
       </label>
       <label>
         <span className="block">Select a color palette:</span>
-        <select
-          value={paletteIndex}
-          onChange={handlePaletteChange}
-          className="form-select block w-full mt-1"
-        >
-          {palettes.map((palette, i) => (
-            <option key={i} value={i}>
-              {palette.label}
-            </option>
-          ))}
-        </select>
+        <PaletteSelect value={palette} onChange={handlePaletteChange} />
       </label>
       <button
         type="submit"
diff --git a/client/src/Palette.ts b/client/src/Palette.ts
index 030b8f6..bd5aa49 100644
--- a/client/src/Palette.ts
+++ b/client/src/Palette.ts
@@ -58,11 +58,7 @@ for (let i = 0; i < 256; i++) {
 }
 const grayScale8bits = new Palette("Gray Scale 8 bits", grayColors);
 
-export const palettes = [
-  nord,
-  monokai,
-  grayScale1bit,
-  grayScale2bits,
-  grayScale8bits,
-];
+const palettes = [nord, monokai, grayScale1bit, grayScale2bits, grayScale8bits];
+
+export { palettes };
 export default Palette;
diff --git a/client/src/PaletteSelect.tsx b/client/src/PaletteSelect.tsx
new file mode 100644
index 0000000..6f15bef
--- /dev/null
+++ b/client/src/PaletteSelect.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import Palette, { palettes } from "./Palette";
+
+interface PaletteSelectProps {
+  value: Palette;
+  onChange: (palette: Palette) => void;
+}
+
+function PaletteSelect({ value, onChange }: PaletteSelectProps) {
+  const handlePaletteChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(palettes[parseInt(event.target.value)]);
+  };
+
+  // Index of the palette in the palettes array, used as the value of the select
+  const valueIndex = palettes.findIndex((p) => p === value);
+
+  const paletteOptions = palettes.map((palette, index) => (
+    <option key={index} value={index}>
+      {palette.label}
+    </option>
+  ));
+
+  return (
+    <select
+      value={valueIndex}
+      onChange={handlePaletteChange}
+      className="form-select block w-full mt-1"
+    >
+      {paletteOptions}
+    </select>
+  );
+}
+
+export default PaletteSelect;
-- 
2.45.1


From 47dad1d2bb28855e909719316a296447e4009cf0 Mon Sep 17 00:00:00 2001
From: CrispyBaguette <alexandre.bruyant@gmail.com>
Date: Wed, 15 Dec 2021 20:05:25 +0100
Subject: [PATCH 2/2] Palette preview component

---
 client/src/ImageInput.tsx     |  2 ++
 client/src/PalettePreview.tsx | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 client/src/PalettePreview.tsx

diff --git a/client/src/ImageInput.tsx b/client/src/ImageInput.tsx
index e8e113e..3156e88 100644
--- a/client/src/ImageInput.tsx
+++ b/client/src/ImageInput.tsx
@@ -1,5 +1,6 @@
 import React, { FormEventHandler } from "react";
 import Palette, { palettes } from "./Palette";
+import PalettePreview from "./PalettePreview";
 import PaletteSelect from "./PaletteSelect";
 
 interface Props {
@@ -45,6 +46,7 @@ function ImageInput({ onImageSubmit }: Props) {
         <span className="block">Select a color palette:</span>
         <PaletteSelect value={palette} onChange={handlePaletteChange} />
       </label>
+      <PalettePreview palette={palette}></PalettePreview>
       <button
         type="submit"
         value="Go"
diff --git a/client/src/PalettePreview.tsx b/client/src/PalettePreview.tsx
new file mode 100644
index 0000000..23941c7
--- /dev/null
+++ b/client/src/PalettePreview.tsx
@@ -0,0 +1,35 @@
+import Palette from "./Palette";
+
+interface PalettePreviewProps {
+  palette: Palette;
+}
+
+function PalettePreview({ palette }: PalettePreviewProps) {
+  // Build a linear-gradient css string from the palette colors, evenly spaced with hard stops
+  const paletteLength = palette.colors.length;
+  const bandSize = 100 / paletteLength;
+  let gradientPercent = 0;
+  let gradientString = `linear-gradient(90deg, `;
+  for (let i = 0; i < paletteLength; i++) {
+    const color = palette.colors[i];
+    gradientString += `#${color} ${gradientPercent}%, #${color} ${
+      gradientPercent + bandSize
+    }%`;
+    gradientPercent += bandSize;
+
+    if (i !== paletteLength - 1) {
+      gradientString += `, `;
+    } else {
+      gradientString += `)`;
+    }
+  }
+
+  return (
+    <div
+      className="h-5 my-2 border-solid border-2 border-nord-0"
+      style={{ background: gradientString }}
+    ></div>
+  );
+}
+
+export default PalettePreview;
-- 
2.45.1