1 files changed, 198 insertions, 0 deletions
diff --git a/packages/prosody-ui/src/components/Colors.tsx b/packages/prosody-ui/src/components/Colors.tsx
new file mode 100644
index 0000000..d98838f
--- /dev/null
+++ b/packages/prosody-ui/src/components/Colors.tsx
@@ -0,0 +1,198 @@
+import React from "react";
+import { notRandomFromArray, randomFromArrayMany } from "@sortug/lib";
+import "./sentence.css";
+import type { AnalyzeRes, ColorTheme, LangToColor } from "../logic/types";
+import type { POS_CODE } from "../thai/logic/thainlp";
+
+export function assignColors(keys: string[], theme?: ColorTheme): string[] {
+  const background = theme ? theme : "light";
+  const colors = colorPalette[background];
+  const reduced = randomFromArrayMany(colors, keys.length, false);
+  const assigned: string[] = [];
+  for (const key of keys) {
+    const color = notRandomFromArray(key, reduced);
+    assigned.push(color);
+  }
+  return assigned;
+}
+
+export function ColoredText({
+  frags,
+  fn,
+  lang,
+  theme,
+}: {
+  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.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}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+export function CTInner({
+  s,
+  style,
+  fn,
+  lang,
+}: {
+  s: LangToColor<unknown>;
+  style: any;
+  fn?: (s: any) => void;
+  lang?: string;
+}) {
+  function handleClick(e: React.MouseEvent<HTMLSpanElement>) {
+    if (fn) {
+      e.stopPropagation();
+      fn(s.data);
+    }
+  }
+  return (
+    <span lang={lang} onClick={handleClick} className="word cp" style={style}>
+      {s.display}
+    </span>
+  );
+}
+
+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",
+// ];