mysticsymbolic.github.io/lib/pages/debug-page.tsx

126 wiersze
3.5 KiB
TypeScript
Czysty Zwykły widok Historia

import React, { useContext, useState } from "react";
import { AutoSizingSvg } from "../auto-sizing-svg";
import { CreatureContext, CreatureContextType } from "../creature-symbol";
import { createCreatureSymbolFactory } from "../creature-symbol-factory";
import { HoverDebugHelper } from "../hover-debug-helper";
import { Page } from "../page";
import { PaletteAlgorithmWidget } from "../palette-algorithm-widget";
import { Random } from "../random";
import {
createRandomColorPalette,
DEFAULT_RANDOM_PALETTE_ALGORITHM,
RandomPaletteAlgorithm,
} from "../random-colors";
import { createSvgSymbolContext } from "../svg-symbol";
import { svgScale, SvgTransform } from "../svg-transform";
2021-03-27 12:29:42 +00:00
import { SvgVocabulary } from "../svg-vocabulary";
import { SymbolContextWidget } from "../symbol-context-widget";
import { range } from "../util";
2021-03-27 12:29:42 +00:00
const symbol = createCreatureSymbolFactory(SvgVocabulary);
const Eye = symbol("eye");
const Hand = symbol("hand");
const Arm = symbol("arm");
const Antler = symbol("antler");
const Crown = symbol("crown");
const Wing = symbol("wing");
const MuscleArm = symbol("muscle_arm");
const Leg = symbol("leg");
const Tail = symbol("tail");
const Lightning = symbol("lightning");
const EYE_CREATURE = (
<Eye>
<Lightning nestInside />
<Arm attachTo="arm" left>
<Wing attachTo="arm" left right />
</Arm>
<Arm attachTo="arm" right>
<MuscleArm attachTo="arm" left right />
</Arm>
<Antler attachTo="horn" left right />
<Crown attachTo="crown">
<Hand attachTo="horn" left right>
<Arm attachTo="arm" left />
</Hand>
</Crown>
<Leg attachTo="leg" left right />
<Tail attachTo="tail" invert />
</Eye>
);
const RandomColorSampling: React.FC<{}> = () => {
const [paletteAlg, setPaletteAlg] = useState<RandomPaletteAlgorithm>(
DEFAULT_RANDOM_PALETTE_ALGORITHM
);
const [seed, setSeed] = useState(Date.now());
const NUM_COLORS = 100;
const rng = new Random(seed);
const palette = createRandomColorPalette(NUM_COLORS, rng, paletteAlg);
return (
<>
<PaletteAlgorithmWidget value={paletteAlg} onChange={setPaletteAlg} />
<div className="thingy">
<div style={{ fontSize: 0 }}>
{range(NUM_COLORS).map((i) => (
<div
key={i}
style={{
backgroundColor: palette[i],
width: "1rem",
height: "1rem",
display: "inline-block",
}}
/>
))}
</div>
</div>
<div className="thingy">
<button onClick={() => setSeed(Date.now())}>Regenerate colors</button>
</div>
</>
);
};
export const DebugPage: React.FC<{}> = () => {
const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext());
const defaultCtx = useContext(CreatureContext);
const ctx: CreatureContextType = {
...defaultCtx,
...symbolCtx,
fill: symbolCtx.showSpecs ? "none" : symbolCtx.fill,
};
return (
<Page title="Debug!">
<div className="sidebar">
<SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
<h2>Random color sampling</h2>
<RandomColorSampling />
</div>
<div className="canvas">
<CreatureContext.Provider value={ctx}>
<HoverDebugHelper>
<AutoSizingSvg padding={20}>
<SvgTransform transform={svgScale(0.5)}>
{EYE_CREATURE}
</SvgTransform>
</AutoSizingSvg>
</HoverDebugHelper>
</CreatureContext.Provider>
</div>
</Page>
);
};