mirror
/
mysticsymbolic.github.io
kopia lustrzana https://github.com/mysticsymbolic/mysticsymbolic.github.io
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Add 'show specs' checkbox on creature page.

pull/4/head
Atul Varma 2021-02-15 22:36:18 -05:00
rodzic a44c43a04e
commit 93e972256c
1 zmienionych plików z 46 dodań i 26 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

72
lib/pages/creature-page.tsx
Wyświetl plik

@ -1,4 +1,4 @@
import React, { useContext } from "react"; import React, { useContext, useState } from "react";
import { SvgVocabulary } from "../svg-vocabulary"; import { SvgVocabulary } from "../svg-vocabulary";
import { import {
createSvgSymbolContext, createSvgSymbolContext,
@ -142,34 +142,54 @@ const MuscleArm = createCreatureSymbol("muscle arm");
const Tail = createCreatureSymbol("tail"); const Tail = createCreatureSymbol("tail");
export const CreaturePage: React.FC<{}> = () => { export const CreaturePage: React.FC<{}> = () => {
const [showSpecs, setShowSpecs] = useState(false);
const defaultCtx = useContext(CreatureContext);
const ctx: CreatureContextType = {
...defaultCtx,
fill: showSpecs ? "none" : defaultCtx.fill,
showSpecs,
};
return ( return (
<> <>
<h1>Creature!</h1> <h1>Creature!</h1>
<svg width="1280px" height="720px"> <p>
<g transform-origin="50% 50%" transform="scale(0.5 0.5)"> <label>
<Eye> <input
<Arm attachTo="arm"> type="checkbox"
<Wing attachTo="arm" /> checked={showSpecs}
<Wing attachTo="arm" attachIndex={1} /> onChange={(e) => setShowSpecs(e.target.checked)}
</Arm> />{" "}
<Arm attachTo="arm" attachIndex={1}> Show specs
<MuscleArm attachTo="arm" /> </label>
<MuscleArm attachTo="arm" attachIndex={1} /> </p>
</Arm> <CreatureContext.Provider value={ctx}>
<Antler attachTo="horn" /> <svg width="1280px" height="720px">
<Antler attachTo="horn" attachIndex={1} /> <g transform-origin="50% 50%" transform="scale(0.5 0.5)">
<Crown attachTo="crown"> <Eye>
<Hand attachTo="horn"> <Arm attachTo="arm">
<Arm attachTo="arm" /> <Wing attachTo="arm" />
</Hand> <Wing attachTo="arm" attachIndex={1} />
<Hand attachTo="horn" attachIndex={1}> </Arm>
<Arm attachTo="arm" /> <Arm attachTo="arm" attachIndex={1}>
</Hand> <MuscleArm attachTo="arm" />
</Crown> <MuscleArm attachTo="arm" attachIndex={1} />
<Tail attachTo="tail" /> </Arm>
</Eye> <Antler attachTo="horn" />
</g> <Antler attachTo="horn" attachIndex={1} />
</svg> <Crown attachTo="crown">
<Hand attachTo="horn">
<Arm attachTo="arm" />
</Hand>
<Hand attachTo="horn" attachIndex={1}>
<Arm attachTo="arm" />
</Hand>
</Crown>
<Tail attachTo="tail" />
</Eye>
</g>
</svg>
</CreatureContext.Provider>
</> </>
); );
}; };