undef-dice 2026-01-31
Full React application layer built with Zustand stores, 10 UI components, hooks, and Tailwind CSS
51 files · 8,316+ · 83-

React application shell and state management

12 files changed
  • UndefDiceApp.tsx Main React application shell with dice rolling, effects, presets, and history (~513 lines)
  • index.ts App module exports
  • useCameraStore.ts Camera state store
  • useDiceStore.ts Dice state store
  • useEffectsStore.ts Visual effects state store
  • useHistoryStore.ts Roll history state store
  • useModifierStore.ts Dice modifier state store
  • usePhysicsStore.ts Physics configuration state store
  • usePresetStore.ts Preset management state store
  • index.ts Stores module exports
  • types.ts Store type definitions
  • index.ts React app barrel exports
  • Created src/react-app/app/UndefDiceApp.tsx (~513 lines) as the main React application shell with dice rolling, effects, presets, and history instantiate architectural
    1 file
    • UndefDiceApp.tsx
  • Built 7 Zustand stores: useCameraStore, useDiceStore, useEffectsStore, useHistoryStore, useModifierStore, usePhysicsStore, usePresetStore instantiate architectural
    7 files
    • useCameraStore.ts
    • useDiceStore.ts
    • useEffectsStore.ts
    • useHistoryStore.ts
    • useModifierStore.ts
    • usePhysicsStore.ts
    • usePresetStore.ts

UI components and hooks

18 files changed
  • ActionRow.tsx Action row component
  • CameraControls.tsx Camera controls UI
  • DiceButtons.tsx Dice type selection buttons
  • EffectsPanel.tsx Visual effects control panel
  • HistoryPanel.tsx Roll history display
  • Modifiers.tsx Dice modifier controls
  • OptionsDrawer.tsx Slide-out options drawer
  • Presets.tsx Preset management UI
  • ResultsOverlay.tsx Roll results overlay
  • Sliders.tsx Numeric slider controls
  • index.ts UI components exports
  • EffectComposer.tsx Post-processing effect compositor
  • PanelGlow.tsx Panel glow effect component
  • index.ts Effects module exports
  • useKeyboard.ts Keyboard shortcut hook
  • useLongPress.ts Long press gesture hook
  • useTimer.ts Timer hook
  • index.ts Hooks module exports
  • Added 10 UI components: ActionRow, CameraControls, DiceButtons, EffectsPanel, HistoryPanel, Modifiers, OptionsDrawer, Presets, ResultsOverlay, Sliders instantiate behavioral
    5 files
    • ActionRow.tsx
    • DiceButtons.tsx
    • EffectsPanel.tsx
    • HistoryPanel.tsx
    • ResultsOverlay.tsx
  • Created React effects system: EffectComposer.tsx and PanelGlow.tsx instantiate behavioral
    2 files
    • EffectComposer.tsx
    • PanelGlow.tsx
  • Added custom hooks: useKeyboard, useLongPress, useTimer instantiate behavioral
    3 files
    • useKeyboard.ts
    • useLongPress.ts
    • useTimer.ts

DiceArena component and testing

5 files changed
  • DiceArena.tsx Self-contained dice rolling widget component
  • DiceArena.test.tsx DiceArena unit tests
  • dice-arena.spec.ts DiceArena E2E test spec
  • seed-test-app.tsx RNG determinism testing app
  • test-setup.ts Vitest global test setup
  • Created DiceArena.tsx component as a self-contained dice rolling widget instantiate behavioral
    1 file
    • DiceArena.tsx
  • Added seed-test-app.tsx and seed-test.html for RNG determinism testing qualify internal
    2 files
    • seed-test-app.tsx
    • seed-test.html
  • Added react.html and test-app.html entry points qualify internal
    2 files
    • react.html
    • test-app.html
  • Added DiceArena E2E test spec (tests/e2e/dice-arena.spec.ts) qualify internal
    1 file
    • dice-arena.spec.ts
  • Added DiceArena unit tests (__tests__/DiceArena.test.tsx) qualify internal
    1 file
    • DiceArena.test.tsx

Tailwind CSS and build configuration

7 files changed
  • tailwind.config.js Tailwind CSS configuration
  • postcss.config.js PostCSS configuration for Tailwind
  • undef-dice.css Complete React app styling (~1260 lines)
  • index.css React app index styles
  • vite.config.ts Updated Vite configuration
  • vitest.config.ts Updated Vitest configuration
  • package.json Added Zustand, Tailwind, PostCSS, autoprefixer dependencies
  • Added tailwind.config.js and postcss.config.js for Tailwind CSS baseline internal
    2 files
    • tailwind.config.js
    • postcss.config.js
  • Created src/react-app/styles/undef-dice.css (~1260 lines) with complete styling for the React app instantiate behavioral
    1 file
    • undef-dice.css
  • Updated package.json with Zustand, Tailwind, PostCSS, and autoprefixer dependencies baseline internal
    1 file
    • package.json