Dice Roller Web App

A modern, responsive dice roller with clean UI, roll analytics, and local history.

Preview

• Open index.html in your browser to view the app.
• Optional: add a screenshot/GIF in this README for Discord sharing.

Features

• 🎲 Roll 1 to 12 dice in one click.
• 📊 Get instant stats: total, average, highest, lowest.
• 🧾 View recent roll history with timestamps.
• 💾 History persists using localStorage.
• 🌗 Toggle between light and dark themes.
• 🔊 Roll sound toggle with graceful fallback tone.
• 🎞️ Enhanced roll animation with shuffle phase and staggered reveal.
• 🖼️ Shareable result cards (copy summary, download PNG, native share where supported).
• ✅ Input validation and user-friendly status messages.
• 📱 Fully responsive layout for desktop and mobile.

Project Structure

Dice-roll-webapp/
├── index.html
├── README.md
└── assets/
    ├── audio/
    │   └── dice_roll.mp3
    ├── css/
    │   └── style.css
    ├── js/
    │   └── main.js
    └── images/
        └── dice/
            ├── dice1.png
            ├── dice2.png
            ├── dice3.png
            ├── dice4.png
            ├── dice5.png
            └── dice6.png

Tech Stack

• 🧱 HTML5
• 🎨 CSS3
• ⚙️ JavaScript (ES6+)

Run Locally

1. Clone the repository:

   git clone <your-repo-url>

2. Move into the project folder:

   cd Dice-roll-webapp

3. Open index.html in any modern browser.

Professional Upgrades Done

• Semantic and accessible HTML structure.
• Event-driven JavaScript (no inline handlers).
• Better code organization with modular logic in assets/js/main.js.
• Design-system style CSS with variables and responsive grid.
• Improved visual polish for portfolio/showcase usage.
• Persistent theme preference and sound preference controls.
• Upgraded dice roll interaction with staged animation.
• Shareable result card workflow for Discord/social posting.
• Deployed version is live.

Sound Setup

• Custom sound is read from the audio element in index.html:
  • <audio id="roll-sound" preload="auto" src="assets/audio/dice_roll.mp3"></audio>
• If no custom file is set, the app uses a short generated fallback tone.

Next Improvements (Optional)

• Add dice type selection (d4, d8, d20).