2021-02-27 13:35:34 +00:00
|
|
|
import React, { useContext, useRef, useState } from "react";
|
2021-03-27 00:47:22 +00:00
|
|
|
import { SvgVocabulary } from "../svg-vocabulary";
|
2021-04-02 20:33:07 +00:00
|
|
|
import { noFillIfShowingSpecs, SvgSymbolData } from "../svg-symbol";
|
2021-03-18 23:32:05 +00:00
|
|
|
import {
|
|
|
|
AttachmentPointType,
|
|
|
|
ATTACHMENT_POINT_TYPES,
|
|
|
|
iterAttachmentPoints,
|
|
|
|
} from "../specs";
|
2021-02-16 22:42:19 +00:00
|
|
|
import { Random } from "../random";
|
2021-02-23 02:50:14 +00:00
|
|
|
import { range } from "../util";
|
2021-02-27 13:50:06 +00:00
|
|
|
|
2021-02-27 13:35:34 +00:00
|
|
|
import { AutoSizingSvg } from "../auto-sizing-svg";
|
2021-03-29 11:22:09 +00:00
|
|
|
import { ExportWidget } from "../export-svg";
|
2021-02-27 13:50:06 +00:00
|
|
|
import {
|
|
|
|
CreatureContext,
|
|
|
|
CreatureContextType,
|
|
|
|
CreatureSymbol,
|
2021-02-27 23:55:14 +00:00
|
|
|
NestedCreatureSymbol,
|
2021-02-27 13:50:06 +00:00
|
|
|
} from "../creature-symbol";
|
2021-02-27 18:28:44 +00:00
|
|
|
import { HoverDebugHelper } from "../hover-debug-helper";
|
2021-03-28 10:39:06 +00:00
|
|
|
import { svgScale, SvgTransform } from "../svg-transform";
|
2021-03-27 11:24:15 +00:00
|
|
|
import { NumericSlider } from "../numeric-slider";
|
2021-03-28 11:38:32 +00:00
|
|
|
import { Checkbox } from "../checkbox";
|
2021-04-02 20:33:07 +00:00
|
|
|
import {
|
|
|
|
CompositionContextWidget,
|
|
|
|
createSvgCompositionContext,
|
|
|
|
} from "../svg-composition-context";
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
import { Page } from "../page";
|
2021-02-26 00:40:18 +00:00
|
|
|
|
2021-02-27 15:02:07 +00:00
|
|
|
/** Symbols that can be the "root" (i.e., main body) of a creature. */
|
2021-03-27 12:29:42 +00:00
|
|
|
const ROOT_SYMBOLS = SvgVocabulary.items.filter(
|
2021-02-27 15:02:07 +00:00
|
|
|
(data) => data.meta?.always_be_nested !== true
|
|
|
|
);
|
|
|
|
|
2021-03-18 23:32:05 +00:00
|
|
|
type AttachmentSymbolMap = {
|
|
|
|
[key in AttachmentPointType]: SvgSymbolData[];
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Symbols that can be attached to the main body of a creature,
|
|
|
|
* at a particular attachment point.
|
|
|
|
*/
|
|
|
|
const ATTACHMENT_SYMBOLS: AttachmentSymbolMap = (() => {
|
|
|
|
const result = {} as AttachmentSymbolMap;
|
|
|
|
|
|
|
|
for (let type of ATTACHMENT_POINT_TYPES) {
|
2021-03-27 12:29:42 +00:00
|
|
|
result[type] = SvgVocabulary.items.filter((data) => {
|
2021-03-18 23:32:05 +00:00
|
|
|
const { meta } = data;
|
|
|
|
|
|
|
|
// If we have no metadata whatsoever, it can attach anywhere.
|
|
|
|
if (!meta) return true;
|
|
|
|
|
|
|
|
if (meta.always_be_nested === true) {
|
|
|
|
// This symbol should *only* ever be nested, so return false.
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
// If we have no "attach_to", it can attach anywhere.
|
|
|
|
if (!meta.attach_to) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Only attach to points listed in "attach_to".
|
|
|
|
return meta.attach_to.includes(type);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return result;
|
|
|
|
})();
|
2021-02-27 15:02:07 +00:00
|
|
|
|
|
|
|
/** Symbols that can be nested within any part of a creature. */
|
2021-03-27 12:29:42 +00:00
|
|
|
const NESTED_SYMBOLS = SvgVocabulary.items.filter(
|
2021-03-01 00:10:53 +00:00
|
|
|
// Since we don't currently support recursive nesting, ignore anything that
|
|
|
|
// wants nested children.
|
|
|
|
(data) =>
|
|
|
|
data.meta?.always_nest !== true && data.meta?.never_be_nested !== true
|
2021-02-27 15:02:07 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Given a parent symbol, return an array of random children to be nested within
|
|
|
|
* it.
|
|
|
|
*
|
|
|
|
* Can return an empty array e.g. if the parent symbol doesn't have
|
|
|
|
* any nesting areas.
|
|
|
|
*/
|
2021-02-27 23:55:14 +00:00
|
|
|
function getNestingChildren(
|
|
|
|
parent: SvgSymbolData,
|
2021-03-01 00:49:41 +00:00
|
|
|
rng: Random,
|
|
|
|
preferNesting?: boolean
|
2021-02-27 23:55:14 +00:00
|
|
|
): NestedCreatureSymbol[] {
|
2021-02-27 15:02:07 +00:00
|
|
|
const { meta, specs } = parent;
|
2021-03-01 00:49:41 +00:00
|
|
|
if ((meta?.always_nest || preferNesting) && specs?.nesting) {
|
2021-02-27 15:02:07 +00:00
|
|
|
const indices = range(specs.nesting.length);
|
|
|
|
const child = rng.choice(NESTED_SYMBOLS);
|
|
|
|
return [
|
2021-02-27 23:55:14 +00:00
|
|
|
{
|
|
|
|
data: child,
|
|
|
|
attachments: [],
|
|
|
|
nests: [],
|
|
|
|
indices,
|
2021-03-06 00:38:25 +00:00
|
|
|
invertColors: meta?.invert_nested ?? false,
|
2021-02-27 23:55:14 +00:00
|
|
|
},
|
2021-02-27 15:02:07 +00:00
|
|
|
];
|
|
|
|
}
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
|
2021-02-27 14:22:07 +00:00
|
|
|
/**
|
|
|
|
* Randomly creates a symbol with the given number of
|
|
|
|
* types of attachments. The symbol itself, and where the
|
|
|
|
* attachments are attached, are chosen randomly.
|
|
|
|
*/
|
|
|
|
function getSymbolWithAttachments(
|
|
|
|
numAttachmentKinds: number,
|
2021-03-07 01:35:58 +00:00
|
|
|
{ rng, randomlyInvert: randomlyInvertSymbols }: CreatureGeneratorOptions
|
2021-02-27 23:55:14 +00:00
|
|
|
): CreatureSymbol {
|
2021-02-27 15:02:07 +00:00
|
|
|
const root = rng.choice(ROOT_SYMBOLS);
|
2021-03-07 01:35:58 +00:00
|
|
|
const randomlyInvertRng = rng.clone();
|
|
|
|
const shouldInvert = () =>
|
|
|
|
randomlyInvertSymbols ? randomlyInvertRng.bool() : false;
|
2021-02-27 23:55:14 +00:00
|
|
|
const result: CreatureSymbol = {
|
|
|
|
data: root,
|
|
|
|
attachments: [],
|
2021-03-01 00:49:41 +00:00
|
|
|
nests: getNestingChildren(root, rng, true),
|
2021-03-07 01:35:58 +00:00
|
|
|
invertColors: shouldInvert(),
|
2021-02-27 23:55:14 +00:00
|
|
|
};
|
2021-02-27 14:22:07 +00:00
|
|
|
if (root.specs) {
|
|
|
|
const attachmentKinds = rng.uniqueChoices(
|
|
|
|
Array.from(iterAttachmentPoints(root.specs))
|
|
|
|
.filter((point) => point.type !== "anchor")
|
|
|
|
.map((point) => point.type),
|
|
|
|
numAttachmentKinds
|
|
|
|
);
|
|
|
|
for (let kind of attachmentKinds) {
|
2021-03-18 23:32:05 +00:00
|
|
|
const attachment = rng.choice(ATTACHMENT_SYMBOLS[kind]);
|
2021-02-27 14:22:07 +00:00
|
|
|
const indices = range(root.specs[kind]?.length ?? 0);
|
2021-02-27 23:55:14 +00:00
|
|
|
result.attachments.push({
|
|
|
|
data: attachment,
|
|
|
|
attachTo: kind,
|
|
|
|
indices,
|
|
|
|
attachments: [],
|
|
|
|
nests: getNestingChildren(attachment, rng),
|
2021-03-07 01:35:58 +00:00
|
|
|
invertColors: shouldInvert(),
|
2021-02-27 23:55:14 +00:00
|
|
|
});
|
2021-02-27 14:22:07 +00:00
|
|
|
}
|
|
|
|
}
|
2021-02-27 23:55:14 +00:00
|
|
|
return result;
|
2021-02-27 14:22:07 +00:00
|
|
|
}
|
|
|
|
|
2021-03-07 01:35:58 +00:00
|
|
|
type CreatureGeneratorOptions = {
|
|
|
|
rng: Random;
|
|
|
|
randomlyInvert: boolean;
|
|
|
|
};
|
|
|
|
|
|
|
|
type CreatureGenerator = (options: CreatureGeneratorOptions) => CreatureSymbol;
|
2021-02-23 02:50:14 +00:00
|
|
|
|
2021-02-27 14:21:11 +00:00
|
|
|
/**
|
|
|
|
* Each index of this array represents the algorithm we use to
|
|
|
|
* randomly construct a creature with a particular "complexity level".
|
|
|
|
*
|
|
|
|
* For instance, the algorithm used to create a creature with
|
|
|
|
* complexity level 0 will be the first item of this array.
|
|
|
|
*/
|
2021-02-23 02:50:14 +00:00
|
|
|
const COMPLEXITY_LEVEL_GENERATORS: CreatureGenerator[] = [
|
|
|
|
...range(5).map((i) => getSymbolWithAttachments.bind(null, i)),
|
|
|
|
];
|
|
|
|
|
|
|
|
const MAX_COMPLEXITY_LEVEL = COMPLEXITY_LEVEL_GENERATORS.length - 1;
|
|
|
|
|
2021-03-23 00:54:01 +00:00
|
|
|
const INITIAL_COMPLEXITY_LEVEL = 2;
|
|
|
|
|
2021-03-29 11:22:09 +00:00
|
|
|
function getDownloadBasename(randomSeed: number) {
|
|
|
|
return `mystic-symbolic-creature-${randomSeed}`;
|
2021-02-17 14:14:06 +00:00
|
|
|
}
|
2021-02-17 01:54:05 +00:00
|
|
|
|
|
|
|
export const CreaturePage: React.FC<{}> = () => {
|
2021-02-17 14:14:06 +00:00
|
|
|
const svgRef = useRef<SVGSVGElement>(null);
|
2021-03-27 00:47:22 +00:00
|
|
|
const [randomSeed, setRandomSeed] = useState<number>(Date.now());
|
2021-03-23 00:54:01 +00:00
|
|
|
const [randomlyInvert, setRandomlyInvert] = useState(true);
|
2021-04-02 20:33:07 +00:00
|
|
|
const [compCtx, setCompCtx] = useState(createSvgCompositionContext());
|
2021-03-27 00:47:22 +00:00
|
|
|
const [complexity, setComplexity] = useState(INITIAL_COMPLEXITY_LEVEL);
|
2021-02-16 03:36:18 +00:00
|
|
|
const defaultCtx = useContext(CreatureContext);
|
2021-02-23 02:50:14 +00:00
|
|
|
const newRandomSeed = () => setRandomSeed(Date.now());
|
2021-03-29 12:23:53 +00:00
|
|
|
const ctx: CreatureContextType = noFillIfShowingSpecs({
|
2021-02-16 03:36:18 +00:00
|
|
|
...defaultCtx,
|
2021-04-02 20:33:07 +00:00
|
|
|
...compCtx,
|
2021-03-29 12:23:53 +00:00
|
|
|
});
|
2021-03-27 00:47:22 +00:00
|
|
|
const creature = COMPLEXITY_LEVEL_GENERATORS[complexity]({
|
|
|
|
rng: new Random(randomSeed),
|
|
|
|
randomlyInvert,
|
|
|
|
});
|
2021-02-16 03:36:18 +00:00
|
|
|
|
2021-02-15 13:34:22 +00:00
|
|
|
return (
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
<Page title="Creature!">
|
|
|
|
<div className="sidebar">
|
|
|
|
<CompositionContextWidget ctx={compCtx} onChange={setCompCtx} />
|
|
|
|
<div className="thingy">
|
|
|
|
<NumericSlider
|
|
|
|
label="Random creature complexity"
|
|
|
|
min={0}
|
|
|
|
max={MAX_COMPLEXITY_LEVEL}
|
|
|
|
step={1}
|
|
|
|
value={complexity}
|
|
|
|
onChange={(value) => {
|
|
|
|
setComplexity(value);
|
|
|
|
newRandomSeed();
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className="thingy">
|
|
|
|
<Checkbox
|
|
|
|
label="Randomly invert symbols"
|
|
|
|
value={randomlyInvert}
|
|
|
|
onChange={setRandomlyInvert}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className="thingy">
|
|
|
|
<button accessKey="r" onClick={newRandomSeed}>
|
|
|
|
<u>R</u>andomize!
|
|
|
|
</button>{" "}
|
|
|
|
<ExportWidget
|
|
|
|
basename={getDownloadBasename(randomSeed)}
|
|
|
|
svgRef={svgRef}
|
|
|
|
/>
|
|
|
|
</div>
|
2021-03-27 12:34:22 +00:00
|
|
|
</div>
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
<div className="canvas" style={{ backgroundColor: compCtx.background }}>
|
|
|
|
<CreatureContext.Provider value={ctx}>
|
|
|
|
<HoverDebugHelper>
|
|
|
|
<AutoSizingSvg
|
|
|
|
padding={20}
|
|
|
|
ref={svgRef}
|
|
|
|
bgColor={compCtx.background}
|
|
|
|
>
|
|
|
|
<SvgTransform transform={svgScale(0.5)}>
|
|
|
|
<CreatureSymbol {...creature} />
|
|
|
|
</SvgTransform>
|
|
|
|
</AutoSizingSvg>
|
|
|
|
</HoverDebugHelper>
|
|
|
|
</CreatureContext.Provider>
|
2021-03-27 12:34:22 +00:00
|
|
|
</div>
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
</Page>
|
2021-02-15 13:34:22 +00:00
|
|
|
);
|
|
|
|
};
|