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 {
createSvgSymbolContext,
@ -142,34 +142,54 @@ const MuscleArm = createCreatureSymbol("muscle arm");
const Tail = createCreatureSymbol("tail");
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 (
<>
<h1>Creature!</h1>
<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>
<Tail attachTo="tail" />
</Eye>
</g>
</svg>
<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>
<Tail attachTo="tail" />
</Eye>
</g>
</svg>
</CreatureContext.Provider>
</>
);
};