1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
import React from "react";
import { notRandomFromArray } from "sortug";
import "./sentence.css";
export function ColoredText({
frags,
fn,
lang,
}: {
frags: string[];
fn?: (s: string) => void;
lang?: string;
}) {
return (
<>
{frags.map((s, i) => {
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} />;
})}
</>
);
}
export function CTInner({
s,
style,
fn,
lang,
}: {
s: string;
style: any;
fn?: (s: string) => void;
lang?: string;
}) {
function handleClick(e: React.MouseEvent<HTMLSpanElement>) {
console.log(!!fn, "fn");
if (fn) fn(e.currentTarget.innerText.trim());
}
return (
<span lang={lang} onClick={handleClick} className="word cp" style={style}>
{s}
</span>
);
}
export const colors = [
"#8c2c2c",
"#000000",
"#ffd400",
"#1513a0",
"#7e7e7e",
"1eb52d",
];
|
