61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
|
import { debug_render } from "./html.ts";
|
||
|
|
import { Component } from "./jsx/jsx-runtime.ts";
|
||
|
|
|
||
|
|
const Spinny: Component = ({ depth }) => (
|
||
|
|
<div class="main">
|
||
|
|
<Square depth={depth} num_squares={depth} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
function color(depth: number, num_squares: number): string {
|
||
|
|
return (
|
||
|
|
[
|
||
|
|
// roygbv
|
||
|
|
"#FF6961",
|
||
|
|
"#FFB347",
|
||
|
|
"#FFFF99",
|
||
|
|
"#77DD77",
|
||
|
|
"#ADD8E6",
|
||
|
|
"#B19CD9",
|
||
|
|
|
||
|
|
//t
|
||
|
|
"#5DCDFA",
|
||
|
|
"#F1A5B7",
|
||
|
|
"white",
|
||
|
|
"#F1A5B7",
|
||
|
|
"#5DCDFA",
|
||
|
|
// p
|
||
|
|
"#FE218A",
|
||
|
|
"#FCD800",
|
||
|
|
"#20B0FE",
|
||
|
|
// "#FFB6C1",
|
||
|
|
// "#98E6E6",
|
||
|
|
// "#FFDAB9",
|
||
|
|
// "#E6E6FA",
|
||
|
|
// "#98FF98",
|
||
|
|
// "#FF7F50",
|
||
|
|
// "#C8A2C8",
|
||
|
|
// "#FFA07A",
|
||
|
|
// "#87CEEB",
|
||
|
|
// "#FFCCCC",
|
||
|
|
][num_squares - depth] ?? "none"
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
//TODO: MAYBE: try to get a backup pulse animation for preferes-reduced motion
|
||
|
|
// low priority because it already turns off the animation thankfully
|
||
|
|
// ${depth % 2 == 0 ? "cw" : "ccw"}
|
||
|
|
const Square: Component = ({ depth, num_squares }) =>
|
||
|
|
depth == 0 ? (
|
||
|
|
<></>
|
||
|
|
) : (
|
||
|
|
<div
|
||
|
|
class={`spin`}
|
||
|
|
style={`background-color: ${color(depth, num_squares)};`}
|
||
|
|
>
|
||
|
|
<Square depth={depth - 1} num_squares={num_squares} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
debug_render(<Spinny depth={14} />);
|