From 291c9d60fa3cf8195b18f7f7f2cd5356d4b8ef1f Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Mon, 15 Feb 2021 09:56:02 -0500 Subject: [PATCH] Factor out svg-symbol.tsx, visible-specs.tsx. --- lib/bounding-box.ts | 2 +- lib/pages/creature-page.tsx | 26 +++++++ lib/pages/vocabulary-page.tsx | 127 +++------------------------------- lib/specs.ts | 2 +- lib/svg-symbol.tsx | 94 +++++++++++++++++++++++++ lib/svg-vocabulary.ts | 2 +- lib/visible-specs.tsx | 68 ++++++++++++++++++ lib/vocabulary.ts | 25 +------ 8 files changed, 202 insertions(+), 144 deletions(-) create mode 100644 lib/svg-symbol.tsx create mode 100644 lib/visible-specs.tsx diff --git a/lib/bounding-box.ts b/lib/bounding-box.ts index 14c7fb2..4c5917b 100644 --- a/lib/bounding-box.ts +++ b/lib/bounding-box.ts @@ -1,7 +1,7 @@ import { Bezier, Point, BBox, MinMax } from "../vendor/bezier-js"; import { SVGProps } from "react"; -import type { SvgSymbolElement } from "./vocabulary"; +import type { SvgSymbolElement } from "./svg-symbol"; import { flatten, float } from "./util"; import { pathToShapes } from "./path"; diff --git a/lib/pages/creature-page.tsx b/lib/pages/creature-page.tsx index d6ec0d7..5c06dee 100644 --- a/lib/pages/creature-page.tsx +++ b/lib/pages/creature-page.tsx @@ -1,10 +1,30 @@ import React from "react"; import { Random } from "../random"; import { SvgVocabulary } from "../svg-vocabulary"; +import { + createSvgSymbolContext, + SvgSymbolContent, + SvgSymbolData, +} from "../svg-symbol"; + +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; +} export const CreaturePage: React.FC<{}> = () => { const rand = new Random(1); const parts: string[] = []; + const ctx = createSvgSymbolContext(); + const eye = getSymbol("eye"); + const hand = getSymbol("hand"); for (let i = 0; i < 5; i++) { parts.push(rand.choice(SvgVocabulary).name); @@ -13,6 +33,12 @@ export const CreaturePage: React.FC<{}> = () => { return ( <>

Creature!

+ + + + + +

TODO: Make a creature with maybe the following parts: