ytnrvdf/wha-spell-simulator

What It Does

The app turns a freehand spell diagram into parser output, compiled spell behavior, and animated canvas effects.

• Lets you draw spell diagrams on a paper-like canvas.
• Detects one enclosing ring and distinguishes prepared versus active spells.
• Recognizes dictionary-backed primary sigils for fire, water, wind, earth, and light.
• Recognizes signs that modify direction, levitation, convergence, force, spread, focus, range, duration, and stability.
• Produces parser diagnostics, GlyphAST, and SpellIR output for inspection.
• Renders animated element effects from the compiled spell behavior.
• Shows sample spell layouts in the Dictionary panel as drawing references.
• Includes reference tools for making, viewing, and testing stroke templates, plus a spell effect lab for visual and animation tuning.

Current Limitations

• The app supports one enclosing spell ring at a time. Multiple rings are detected as unsupported.
• The current compiler expects one primary sigil. Multiple primary sigils are detected as unsupported.
• Recognition is based on local stroke templates, so it works best with clean, deliberate drawings.
• The recognizer is not perfect. Some valid-looking drawings may fail to match, and some rough drawings may need to be redrawn more clearly.
• The dictionaries only cover a small fan-made subset of sigils, signs, and observed spell ideas.
• The visual effects are interpretive canvas animations, not a faithful reproduction of manga or anime effects.
• Raster images can be used as visual references, but the app cannot recover true stroke order from an image.
• Closed but invalid diagrams may show diagnostics, but they do not fall back to another element.
• This is a browser prototype, not a production drawing engine or general symbol recognizer.

Run Locally

Install dependencies:

npm install

Start the Vite dev server:

npm start

Then open:

http://127.0.0.1:5173/

Reference Tools

These tools are available from the app:

/tools/strokeTemplateMaker.html
/tools/strokeTemplateViewer.html
/tools/sigilSignDetectorLab.html
/tools/spellEffectLab.html

Tests

Run the Node test suite:

npm test

Documentation

• Dictionary authoring
• Parser and spell semantics rules
• Parsed glyph output contract
• Compiled spell output contract
• Visual effect renderer notes