Don't fill if showing specs on mandala.
rodzic
9aa0c6118f
commit
f6c95f1ffb
|
@ -1,6 +1,10 @@
|
|||
import React, { useContext, useRef, useState } from "react";
|
||||
import { SvgVocabulary } from "../svg-vocabulary";
|
||||
import { createSvgSymbolContext, SvgSymbolData } from "../svg-symbol";
|
||||
import {
|
||||
createSvgSymbolContext,
|
||||
noFillIfShowingSpecs,
|
||||
SvgSymbolData,
|
||||
} from "../svg-symbol";
|
||||
import {
|
||||
AttachmentPointType,
|
||||
ATTACHMENT_POINT_TYPES,
|
||||
|
@ -180,11 +184,10 @@ export const CreaturePage: React.FC<{}> = () => {
|
|||
const [complexity, setComplexity] = useState(INITIAL_COMPLEXITY_LEVEL);
|
||||
const defaultCtx = useContext(CreatureContext);
|
||||
const newRandomSeed = () => setRandomSeed(Date.now());
|
||||
const ctx: CreatureContextType = {
|
||||
const ctx: CreatureContextType = noFillIfShowingSpecs({
|
||||
...defaultCtx,
|
||||
...symbolCtx,
|
||||
fill: symbolCtx.showSpecs ? "none" : symbolCtx.fill,
|
||||
};
|
||||
});
|
||||
const creature = COMPLEXITY_LEVEL_GENERATORS[complexity]({
|
||||
rng: new Random(randomSeed),
|
||||
randomlyInvert,
|
||||
|
|
|
@ -8,6 +8,7 @@ import { HoverDebugHelper } from "../hover-debug-helper";
|
|||
import { NumericSlider } from "../numeric-slider";
|
||||
import {
|
||||
createSvgSymbolContext,
|
||||
noFillIfShowingSpecs,
|
||||
safeGetAttachmentPoint,
|
||||
SvgSymbolContent,
|
||||
SvgSymbolContext,
|
||||
|
@ -237,7 +238,7 @@ export const MandalaPage: React.FC<{}> = () => {
|
|||
const [bgColor, setBgColor] = useState(DEFAULT_BG_COLOR);
|
||||
const [circle1, setCircle1] = useState(CIRCLE_1_DEFAULTS);
|
||||
const [circle2, setCircle2] = useState(CIRCLE_2_DEFAULTS);
|
||||
const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext());
|
||||
const [baseSymbolCtx, setBaseSymbolCtx] = useState(createSvgSymbolContext());
|
||||
const [useTwoCircles, setUseTwoCircles] = useState(false);
|
||||
const [invertCircle2, setInvertCircle2] = useState(true);
|
||||
const [firstBehindSecond, setFirstBehindSecond] = useState(false);
|
||||
|
@ -247,6 +248,8 @@ export const MandalaPage: React.FC<{}> = () => {
|
|||
setCircle2({ ...circle2, ...getRandomCircleParams(rng) });
|
||||
};
|
||||
|
||||
const symbolCtx = noFillIfShowingSpecs(baseSymbolCtx);
|
||||
|
||||
const circle2SymbolCtx = invertCircle2 ? swapColors(symbolCtx) : symbolCtx;
|
||||
|
||||
const circles = [
|
||||
|
@ -265,7 +268,7 @@ export const MandalaPage: React.FC<{}> = () => {
|
|||
return (
|
||||
<>
|
||||
<h1>Mandala!</h1>
|
||||
<SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx}>
|
||||
<SymbolContextWidget ctx={baseSymbolCtx} onChange={setBaseSymbolCtx}>
|
||||
<ColorWidget label="Background" value={bgColor} onChange={setBgColor} />{" "}
|
||||
</SymbolContextWidget>
|
||||
<fieldset>
|
||||
|
|
|
@ -43,6 +43,13 @@ const DEFAULT_CONTEXT: SvgSymbolContext = {
|
|||
uniformStrokeWidth: DEFAULT_UNIFORM_STROKE_WIDTH,
|
||||
};
|
||||
|
||||
export function noFillIfShowingSpecs<T extends SvgSymbolContext>(ctx: T): T {
|
||||
return {
|
||||
...ctx,
|
||||
fill: ctx.showSpecs ? "none" : ctx.fill,
|
||||
};
|
||||
}
|
||||
|
||||
export function swapColors<T extends SvgSymbolContext>(ctx: T): T {
|
||||
return {
|
||||
...ctx,
|
||||
|
|
Ładowanie…
Reference in New Issue