Slot Math & GDD

Slot Math Dashboard Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Build an autonomous editable HTML dashboard and example JSON for reviewing slot-math statistics, evidence and approval readiness.

Architecture: One dependency-free HTML file owns rendering and browser interactions. One external example JSON documents portable input while identical embedded demo data guarantees direct-file startup. Pure JavaScript helpers isolate validation, derived metrics, lifecycle changes and serialization so they can be exercised from the browser console and UI.

Tech Stack: HTML5, CSS3, vanilla ES2022 JavaScript, inline SVG, localStorage, FileReader and Blob download APIs.

Global Constraints

  • No npm, Python, framework, CDN, server or network dependency.
  • Preserve exact, Monte Carlo and target values as distinct fields.
  • Final is read-only; edits require a new Draft.
  • Never display internal verification as external certification.
  • Support keyboard focus, reduced motion, print and 360 px width.

Task 1: Define the dashboard data contract and Classic Fruits fixture

Files:

  • Create: templates/examples/classic-fruits-3x3-dashboard.json

Interfaces:

  • Produces: JSON object with schemaVersion, identity, lifecycle, metrics, rtpComponents, winDistribution, mechanics, backend, verification, parameters, changelog, approvals, handoff.

  • Create valid JSON using the documented Classic Fruits exact RTP 0.953967, simulated RTP 0.959817, CI half-width 0.009573, hit frequency 0.334839, sigma 2.574029, max win 65, and explicit null for unavailable feature metrics.

  • Mark the fixture as frozen/internal-candidate rather than certified and include backend identity placeholders as missing values, not invented hashes.

  • Verify syntax with ruby -rjson -e 'JSON.parse(File.read(ARGV[0]))' templates/examples/classic-fruits-3x3-dashboard.json and expect exit code 0.

Task 2: Build semantic dashboard presentation

Files:

  • Create: templates/slot-math-dashboard.html

Interfaces:

  • Consumes: the Task 1 object shape.

  • Produces: renderDashboard(model), renderRtpRail(model), renderCharts(model), and accessible DOM regions keyed by data-section.

  • Add the embedded fixture in <script type="application/json" id="demo-data"> so direct file opening works.

  • Build header, RTP rail, primary metric matrix, decomposition chart, win distribution, mechanics, evidence, governance and handoff sections with real labels and missing-data states.

  • Create a subject-specific token system: --paper, --ink, --blueprint, --amber, --pass, --fail, typography roles and density scales.

  • Use inline SVG for charts, semantic tables for exact values, CSS grid for responsiveness and @media print/prefers-reduced-motion rules.

  • Verify HTML contains no external resource URLs with rg -n 'https?://|<script[^>]+src=|<link[^>]+href=' templates/slot-math-dashboard.html; expect no matches.

Task 3: Add validation, editing and lifecycle controls

Files:

  • Modify: templates/slot-math-dashboard.html

Interfaces:

  • Produces: validateModel(value) -> {ok, errors}, deriveStatus(model), updateField(path, value), createDraft(model), serializeModel(model).

  • Implement structural validation with paths in error messages and reject malformed numeric ranges without discarding the current valid model.

  • Add import via FileReader, export via Blob, reset with confirmation, print, and namespaced localStorage persistence.

  • Add a focused editor for identity, lifecycle, targets, exact/simulation metrics, CI, primary statistics and notes.

  • Disable editor controls for Final; “Create new Draft” must preserve provenance, increment a pre-release revision, clear final approval and append a changelog entry.

  • Compute RTP reconciliation drift, exact-in-CI, gate completion and handoff readiness; label unknown inputs as blocked rather than failed.

Task 4: Browser verification and polish

Files:

  • Modify: templates/slot-math-dashboard.html
  • Modify: templates/examples/classic-fruits-3x3-dashboard.json only if a verified contract mismatch exists.

Interfaces:

  • Consumes: completed static artifact and fixture.

  • Produces: visually verified dashboard at desktop and mobile widths.

  • Open the HTML locally in a browser and capture desktop and 360 px screenshots.

  • Verify import of the fixture, a metric edit, export, reload persistence, Final read-only behavior, new-Draft creation and print preview.

  • Check keyboard tab order, focus visibility, table overflow, missing-value labels and reduced-motion behavior.

  • Remove one nonessential decorative treatment after visual critique and confirm the RTP rail remains the single signature element.

  • Run JSON parse, external-resource scan and git diff --check; all must pass.