2021-02-16 03:36:18 +00:00
|
|
|
import React, { useContext, useState } from "react";
|
2021-02-15 13:34:22 +00:00
|
|
|
import { SvgVocabulary } from "../svg-vocabulary";
|
2021-02-15 14:56:02 +00:00
|
|
|
import {
|
|
|
|
createSvgSymbolContext,
|
|
|
|
SvgSymbolContent,
|
2021-02-15 22:19:07 +00:00
|
|
|
SvgSymbolContext,
|
2021-02-15 14:56:02 +00:00
|
|
|
SvgSymbolData,
|
|
|
|
} from "../svg-symbol";
|
2021-02-15 21:40:47 +00:00
|
|
|
import { AttachmentPointType, PointWithNormal } from "../specs";
|
2021-02-16 16:52:52 +00:00
|
|
|
import { getAttachmentTransforms } from "../attach";
|
|
|
|
import { scalePointXY } from "../point";
|
2021-02-15 14:56:02 +00:00
|
|
|
|
|
|
|
const SYMBOL_MAP = new Map(
|
|
|
|
SvgVocabulary.map((symbol) => [symbol.name, symbol])
|
|
|
|
);
|
|
|
|
|
|
|
|
function getSymbol(name: string): SvgSymbolData {
|
|
|
|
const symbol = SYMBOL_MAP.get(name);
|
|
|
|
if (!symbol) {
|
|
|
|
throw new Error(`Unable to find the symbol "${name}"!`);
|
|
|
|
}
|
|
|
|
return symbol;
|
|
|
|
}
|
2021-02-15 13:34:22 +00:00
|
|
|
|
2021-02-15 21:40:47 +00:00
|
|
|
function getAttachmentPoint(
|
|
|
|
s: SvgSymbolData,
|
|
|
|
type: AttachmentPointType,
|
|
|
|
idx: number = 0
|
|
|
|
): PointWithNormal {
|
|
|
|
const { specs } = s;
|
|
|
|
if (!specs) {
|
|
|
|
throw new Error(`Symbol ${s.name} has no specs!`);
|
|
|
|
}
|
|
|
|
const points = specs[type];
|
|
|
|
if (!(points && points.length > idx)) {
|
|
|
|
throw new Error(
|
|
|
|
`Symbol ${s.name} must have at least ${
|
|
|
|
idx + 1
|
|
|
|
} ${type} attachment point(s)!`
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return points[idx];
|
|
|
|
}
|
|
|
|
|
2021-02-15 22:19:07 +00:00
|
|
|
type AttachmentChildren = JSX.Element | JSX.Element[];
|
|
|
|
|
|
|
|
type CreatureContextType = SvgSymbolContext & {
|
|
|
|
attachmentScale: number;
|
2021-02-16 18:36:14 +00:00
|
|
|
cumulativeScale: number;
|
2021-02-15 22:19:07 +00:00
|
|
|
parent: SvgSymbolData | null;
|
|
|
|
};
|
|
|
|
|
2021-02-15 22:22:59 +00:00
|
|
|
const DEFAULT_ATTACHMENT_SCALE = 0.5;
|
|
|
|
|
2021-02-15 22:19:07 +00:00
|
|
|
const CreatureContext = React.createContext<CreatureContextType>({
|
|
|
|
...createSvgSymbolContext(),
|
2021-02-15 22:22:59 +00:00
|
|
|
attachmentScale: DEFAULT_ATTACHMENT_SCALE,
|
2021-02-16 18:36:14 +00:00
|
|
|
cumulativeScale: 1,
|
2021-02-15 22:19:07 +00:00
|
|
|
parent: null,
|
|
|
|
});
|
|
|
|
|
|
|
|
type CreatureSymbolProps = {
|
|
|
|
data: SvgSymbolData;
|
|
|
|
children?: AttachmentChildren;
|
|
|
|
attachTo?: AttachmentPointType;
|
|
|
|
attachIndex?: number;
|
|
|
|
};
|
|
|
|
|
|
|
|
const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
|
|
|
|
const ctx = useContext(CreatureContext);
|
|
|
|
const { data, attachTo, attachIndex } = props;
|
|
|
|
const ourSymbol = (
|
|
|
|
<>
|
|
|
|
{props.children && (
|
2021-02-16 18:36:14 +00:00
|
|
|
<CreatureContext.Provider
|
|
|
|
value={{
|
|
|
|
...ctx,
|
|
|
|
parent: data,
|
|
|
|
cumulativeScale: ctx.attachmentScale * ctx.cumulativeScale,
|
|
|
|
strokeScale: 1 / ctx.cumulativeScale,
|
|
|
|
}}
|
|
|
|
>
|
2021-02-15 22:19:07 +00:00
|
|
|
{props.children}
|
|
|
|
</CreatureContext.Provider>
|
|
|
|
)}
|
2021-02-16 00:28:03 +00:00
|
|
|
<SvgSymbolContent data={data} {...ctx} />
|
2021-02-15 22:19:07 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
if (!attachTo) {
|
|
|
|
return ourSymbol;
|
|
|
|
}
|
|
|
|
|
|
|
|
const parent = ctx.parent;
|
|
|
|
if (!parent) {
|
|
|
|
throw new Error(
|
|
|
|
`Cannot attach ${props.data.name} because it has no parent!`
|
|
|
|
);
|
|
|
|
}
|
2021-02-16 16:52:52 +00:00
|
|
|
|
2021-02-15 22:19:07 +00:00
|
|
|
const parentAp = getAttachmentPoint(parent, attachTo, attachIndex);
|
|
|
|
const ourAp = getAttachmentPoint(data, "tail");
|
2021-02-16 00:28:03 +00:00
|
|
|
|
2021-02-16 16:52:52 +00:00
|
|
|
// If we're being attached as a tail, we want to actually rotate
|
|
|
|
// the attachment an extra 180 degrees, as the tail attachment
|
|
|
|
// point is facing the opposite direction that we actually
|
|
|
|
// want to orient the tail in.
|
|
|
|
const extraRot = attachTo === "tail" ? 180 : 0;
|
|
|
|
|
|
|
|
// If we're attaching something oriented towards the left, horizontally flip
|
|
|
|
// the attachment image.
|
|
|
|
let xFlip = parentAp.normal.x < 0 ? -1 : 1;
|
|
|
|
|
|
|
|
// Er, things look weird if we don't inverse the flip logic for
|
|
|
|
// the downward-facing attachments, like legs...
|
|
|
|
if (parentAp.normal.y > 0) {
|
2021-02-16 03:51:35 +00:00
|
|
|
xFlip *= -1;
|
2021-02-16 00:28:03 +00:00
|
|
|
}
|
2021-02-15 22:19:07 +00:00
|
|
|
|
2021-02-16 16:52:52 +00:00
|
|
|
const t = getAttachmentTransforms(parentAp, {
|
|
|
|
point: ourAp.point,
|
|
|
|
normal: scalePointXY(ourAp.normal, xFlip, 1),
|
|
|
|
});
|
|
|
|
|
2021-02-15 22:19:07 +00:00
|
|
|
return (
|
2021-02-16 16:52:52 +00:00
|
|
|
<g transform={`translate(${t.translation.x} ${t.translation.y})`}>
|
2021-02-15 22:19:07 +00:00
|
|
|
<g
|
|
|
|
transform-origin={`${ourAp.point.x} ${ourAp.point.y}`}
|
2021-02-16 00:28:03 +00:00
|
|
|
transform={`scale(${xFlip * ctx.attachmentScale} ${
|
|
|
|
ctx.attachmentScale
|
2021-02-16 16:52:52 +00:00
|
|
|
}) rotate(${xFlip * t.rotation + extraRot})`}
|
2021-02-15 22:19:07 +00:00
|
|
|
>
|
|
|
|
{ourSymbol}
|
|
|
|
</g>
|
|
|
|
</g>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
function createCreatureSymbol(
|
|
|
|
name: string
|
|
|
|
): React.FC<Omit<CreatureSymbolProps, "data">> {
|
|
|
|
const data = getSymbol(name);
|
|
|
|
return (props) => <CreatureSymbol data={data} {...props} />;
|
|
|
|
}
|
|
|
|
|
|
|
|
const Eye = createCreatureSymbol("eye");
|
|
|
|
|
|
|
|
const Hand = createCreatureSymbol("hand");
|
|
|
|
|
2021-02-16 00:28:03 +00:00
|
|
|
const Arm = createCreatureSymbol("arm");
|
2021-02-15 22:19:07 +00:00
|
|
|
|
2021-02-16 01:12:14 +00:00
|
|
|
const Antler = createCreatureSymbol("antler");
|
|
|
|
|
|
|
|
const Crown = createCreatureSymbol("crown");
|
|
|
|
|
2021-02-16 01:20:41 +00:00
|
|
|
const Wing = createCreatureSymbol("wing");
|
|
|
|
|
|
|
|
const MuscleArm = createCreatureSymbol("muscle arm");
|
|
|
|
|
2021-02-16 03:51:35 +00:00
|
|
|
const Leg = createCreatureSymbol("leg");
|
|
|
|
|
2021-02-16 01:20:41 +00:00
|
|
|
const Tail = createCreatureSymbol("tail");
|
|
|
|
|
2021-02-15 13:34:22 +00:00
|
|
|
export const CreaturePage: React.FC<{}> = () => {
|
2021-02-16 03:36:18 +00:00
|
|
|
const [showSpecs, setShowSpecs] = useState(false);
|
|
|
|
const defaultCtx = useContext(CreatureContext);
|
|
|
|
const ctx: CreatureContextType = {
|
|
|
|
...defaultCtx,
|
|
|
|
fill: showSpecs ? "none" : defaultCtx.fill,
|
|
|
|
showSpecs,
|
|
|
|
};
|
|
|
|
|
2021-02-15 13:34:22 +00:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<h1>Creature!</h1>
|
2021-02-16 03:36:18 +00:00
|
|
|
<p>
|
|
|
|
<label>
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
checked={showSpecs}
|
|
|
|
onChange={(e) => setShowSpecs(e.target.checked)}
|
|
|
|
/>{" "}
|
|
|
|
Show specs
|
|
|
|
</label>
|
|
|
|
</p>
|
|
|
|
<CreatureContext.Provider value={ctx}>
|
|
|
|
<svg width="1280px" height="720px">
|
|
|
|
<g transform-origin="50% 50%" transform="scale(0.5 0.5)">
|
|
|
|
<Eye>
|
|
|
|
<Arm attachTo="arm">
|
|
|
|
<Wing attachTo="arm" />
|
|
|
|
<Wing attachTo="arm" attachIndex={1} />
|
|
|
|
</Arm>
|
|
|
|
<Arm attachTo="arm" attachIndex={1}>
|
|
|
|
<MuscleArm attachTo="arm" />
|
|
|
|
<MuscleArm attachTo="arm" attachIndex={1} />
|
|
|
|
</Arm>
|
|
|
|
<Antler attachTo="horn" />
|
|
|
|
<Antler attachTo="horn" attachIndex={1} />
|
|
|
|
<Crown attachTo="crown">
|
|
|
|
<Hand attachTo="horn">
|
|
|
|
<Arm attachTo="arm" />
|
|
|
|
</Hand>
|
|
|
|
<Hand attachTo="horn" attachIndex={1}>
|
|
|
|
<Arm attachTo="arm" />
|
|
|
|
</Hand>
|
|
|
|
</Crown>
|
2021-02-16 03:51:35 +00:00
|
|
|
<Leg attachTo="leg" />
|
|
|
|
<Leg attachTo="leg" attachIndex={1} />
|
2021-02-16 03:36:18 +00:00
|
|
|
<Tail attachTo="tail" />
|
|
|
|
</Eye>
|
|
|
|
</g>
|
|
|
|
</svg>
|
|
|
|
</CreatureContext.Provider>
|
2021-02-15 13:34:22 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|