1 files changed, 151 insertions, 22 deletions

diff --git a/packages/prosody-ui/src/components/Sentence.tsx b/packages/prosody-ui/src/components/Sentence.tsx
index 33144ac..1986ba8 100644
--- a/packages/prosody-ui/src/components/Sentence.tsx
+++ b/packages/prosody-ui/src/components/Sentence.tsx
@@ -1,26 +1,49 @@
 import React from "react";
-import { notRandomFromArray } from "sortug";
+import { notRandomFromArray } from "@sortug/lib";
 import "./sentence.css";
+import type { AnalyzeRes, ColorTheme, LangToColor } from "../logic/types";
+import type { POS_CODE } from "../thai/logic/thainlp";
 
 export function ColoredText({
   frags,
   fn,
   lang,
+  theme,
 }: {
-  frags: string[];
-  fn?: (s: string) => void;
+  frags: LangToColor<unknown>[];
+  fn?: (s: any) => void;
   lang?: string;
+  theme: ColorTheme;
 }) {
+  const colors = colorPalette[theme];
+  console.log("coloredText", theme);
+
+  // function getStyle(frags: AnalyzeRes[], i: number) {
+  // const prev = frags[i - 1];
+  // const prevC = prev ? notRandomFromArray(prev.word, colors) : "lol";
+  // const color = notRandomFromArray(s, colors);
+  // const opacity = prev && prevC === color ? 0.8 : 1;
+  // const style = { color, opacity };
+  // return style;
+  // }
+
   return (
     <>
       {frags.map((s, i) => {
+        // old code
         const prev = frags[i - 1];
-        const prevC = prev ? notRandomFromArray(prev, colors) : "lol";
-        const color = notRandomFromArray(s, colors);
-        const opacity = prev && prevC === color ? 0.8 : 1;
-        const style = { color, opacity };
-        console.log({ style });
-        return <CTInner lang={lang} key={s + i} s={s} style={style} fn={fn} />;
+        const prevC = prev ? notRandomFromArray(prev.colorBy, colors) : "lol";
+        const color = notRandomFromArray(s.colorBy, colors);
+        const style = !prev ? { color } : { color };
+        return (
+          <CTInner
+            lang={lang}
+            key={s.display + i}
+            s={s}
+            style={style}
+            fn={fn}
+          />
+        );
       })}
     </>
   );
@@ -32,26 +55,132 @@ export function CTInner({
   fn,
   lang,
 }: {
-  s: string;
+  s: LangToColor<unknown>;
   style: any;
-  fn?: (s: string) => void;
+  fn?: (s: any) => void;
   lang?: string;
 }) {
   function handleClick(e: React.MouseEvent<HTMLSpanElement>) {
-    console.log(!!fn, "fn");
-    if (fn) fn(e.currentTarget.innerText.trim());
+    if (fn) {
+      e.stopPropagation();
+      fn(s.data);
+    }
   }
   return (
     <span lang={lang} onClick={handleClick} className="word cp" style={style}>
-      {s}
+      {s.display}
     </span>
   );
 }
-export const colors = [
-  "#8c2c2c",
-  "#000000",
-  "#ffd400",
-  "#1513a0",
-  "#7e7e7e",
-  "1eb52d",
-];
+
+export const colorPalette: Record<ColorTheme, string[]> = {
+  light: [
+    // Black	Standard high contrast
+    "#000000",
+    // 	Charcoal	Softer than pure black
+    "#36454F",
+    // 	Slate Grey	Cool, dark grey-green
+    "#2F4F4F",
+    // 	Navy Blue	Classic professional blue
+    "#000080",
+    // 	Midnight Blue	Very deep, rich blue
+    "#191970",
+    // 	Cobalt	Vivid, highly legible blue
+    "#0047AB",
+    // 	Teal	Distinct blue-green
+    "#008080",
+    // 	Forest Green	Nature-inspired dark green
+    "#006400",
+    // 	Pine Green	Cooler, bluish green
+    "#01796F",
+    // 	Olive Drab	Dark brownish-green
+    "#4B5320",
+    // 	Bronze	Metallic brown-orange
+    "#CD7F32",
+    // 	Saddle Brown	Robust earthy tone
+    "#8B4513",
+    // 	Chocolate	Warm, readable orange-brown
+    "#D2691E",
+    // 	Burnt Sienna	Reddish-orange earth tone
+    "#E97451",
+    // 	Firebrick	Muted dark red
+    "#B22222",
+    // 	Crimson	Vivid, alarming red
+    "#DC143C",
+    // 	Maroon	Deep, serious red
+    "#800000",
+    // 	Burgundy	Purple-leaning red
+    "#800020",
+    // 	Deep Pink	High contrast magenta-pink
+    "#C71585",
+    // 	Dark Violet	Vivid purple
+    "#9400D3",
+    // 	Indigo	Deep blue-purple
+    "#4B0082",
+    // 	Purple	Standard distinct purple
+    "#800080",
+    // 	Rebecca Purple	Web-standard bluish purple
+    "#663399",
+    // 	Dim Gray	Neutral, medium-dark gray
+    "#696969",
+  ],
+  dark: [
+    // White	Standard high contrast
+    "#FFFFFF",
+    // 	Silver	Soft readable grey
+    "#C0C0C0",
+    // 	Cream	Warm white, easier on eyes
+    "#FFFDD0",
+    // 	Cyan	The standard terminal blue-green
+    "#00FFFF",
+    // 	Sky Blue	Pleasant, airy blue
+    "#87CEEB",
+    // 	Powder Blue	Very pale, soft blue
+    "#B0E0E6",
+    // 	Aquamarine	Bright neon blue-green
+    "#7FFFD4",
+    // 	Mint Green	Soft, pastel green
+    "#98FB98",
+    // Lime	Classic high-vis terminal green
+    "#00FF00",
+    // 	Chartreuse	Yellow-green neon
+    "#7FFF00",
+    // 	Gold	Bright yellow-orange
+    "#FFD700",
+    // 	Yellow	Standard high-vis yellow
+    "#FFFF00",
+    // 	Khaki	Muted, sandy yellow
+    "#F0E68C",
+    // Wheat	Soft beige/earth tone
+    "#F5DEB3",
+    // 	Orange	Standard distinctive orange
+    "#FFA500",
+    // 	Coral	Pinkish-orange
+    "#FF7F50",
+    // 	Salmon	Soft reddish-pink
+    "#FA8072",
+    // Hot Pink	Vivid, high-energy pink
+    "#FF69B4",
+    // 	Magenta	Pure, digital pink-purple
+    "#FF00FF",
+    // 	Plum	Muted, readable purple
+    "#DDA0DD",
+    // 	Violet	Bright, distinct purple
+    "#EE82EE",
+    // Lavender	Very light purple-blue
+    "#E6E6FA",
+    // 	Periwinkle	Soft indigo-blue
+    "#CCCCFF",
+    // 	Thistle	Desaturated light purple
+    "#D8BFD8",
+  ],
+};
+
+// export const colors = [
+//   "#8c2c2c",
+//   "#000000",
+//   "#ffd400",
+//   "#1513a0",
+//   "#7e7e7e",
+//   "1eb52d",
+// ];