diff --git a/lib/creature-animator.tsx b/lib/creature-animator.tsx index 5443f86..03f4462 100644 --- a/lib/creature-animator.tsx +++ b/lib/creature-animator.tsx @@ -67,7 +67,7 @@ const spinAnimator: CreatureAnimator = { export const CREATURE_ANIMATOR_NAMES = ["none", "breathe", "spin"] as const; -type CreatureAnimatorName = typeof CREATURE_ANIMATOR_NAMES[number]; +export type CreatureAnimatorName = typeof CREATURE_ANIMATOR_NAMES[number]; export const CreatureAnimators: { [k in CreatureAnimatorName]: CreatureAnimator; diff --git a/lib/pages/creature-page/core.tsx b/lib/pages/creature-page/core.tsx index 98127e8..0ef1b8e 100644 --- a/lib/pages/creature-page/core.tsx +++ b/lib/pages/creature-page/core.tsx @@ -47,7 +47,11 @@ import { GalleryWidget } from "../../gallery-widget"; import { serializeCreatureDesign } from "./serialization"; import { CreatureEditorWidget } from "./creature-editor"; import { useAnimationPct } from "../../animation"; -import { CreatureAnimators } from "../../creature-animator"; +import { + CreatureAnimatorName, + CreatureAnimators, + CREATURE_ANIMATOR_NAMES, +} from "../../creature-animator"; /** * The minimum number of attachment points that any symbol used as the main body @@ -266,10 +270,40 @@ export const CREATURE_DESIGN_DEFAULTS: CreatureDesign = { }, }; +type AnimationWidgetProps = { + value: CreatureAnimatorName; + onChange: (name: CreatureAnimatorName) => void; +}; + +const AnimationWidget: React.FC = (props) => { + const id = "animationName"; + return ( +
+ + +
+ ); +}; + export const CreaturePageWithDefaults: React.FC< ComponentWithShareableStateProps > = ({ defaults, onChange }) => { const svgRef = useRef(null); + const [animatorName, setAnimatorName] = + useRememberedState( + "creature-page:animatorName", + "none" + ); const [randomlyInvert, setRandomlyInvert] = useRememberedState( "creature-page:randomlyInvert", true @@ -316,8 +350,9 @@ export const CreaturePageWithDefaults: React.FC< ); const render = useMemo( - () => createCreatureAnimationRenderer(creature, ctx), - [creature, ctx] + () => + createCreatureAnimationRenderer(creature, ctx, undefined, animatorName), + [creature, ctx, animatorName] ); return ( @@ -325,6 +360,7 @@ export const CreaturePageWithDefaults: React.FC<
+ setCompCtx({ ...compCtx, ...colors })} onSymbolsChange={newRandomCreature} @@ -375,7 +411,8 @@ export const CreaturePageWithDefaults: React.FC< function createCreatureAnimationRenderer( creature: CreatureSymbol, ctx: CreatureContextType, - scale = 0.5 + scale = 0.5, + animatorName: CreatureAnimatorName = "none" ): AnimationRenderer { return (animPct) => { return ( @@ -384,7 +421,7 @@ function createCreatureAnimationRenderer(