# Button Men Hex

## About This App
A strategy dice game for two players battling with unique characters and tactical dice combat

- **Creator**: @vgrichina

## Specification
# Button Men Dice Game Web App (Modified)

Create an engaging, interactive implementation of the Button Men dice game. This is a 2-player strategy dice game where players use characters with unique dice sets to capture opponents' dice through strategic attacks.

**App Type: React Web App** - Best suited for this turn-based game with complex state management, multiple UI panels, and interactive game mechanics.

## Core Game Mechanics

### Character Selection
- Display a roster of unique characters, each with distinct dice sets (e.g., "Warrior: 4,6,8,12,20" or "Mage: 6,6,10,20,20")
- Characters should have fantasy/gaming themed names and personalities
- Show dice composition clearly for each character
- Allow both players to select characters before starting

### Game Board Layout

#### Main Game Area
- **Player 1 Zone** (top): Display character name, active dice, captured dice, and current score
- **Player 2 Zone** (bottom): Mirror layout of Player 1
- **Central Combat Log**: Scrollable feed showing all actions taken (rolls, attacks, captures)
- **Game Status Panel**: Current round number, turn indicator, and overall match score

#### Dice Display
- **Active Dice**: Large, clearly visible dice showing current values after rolls. Each die should be displayed as a **hexagonal badge** shape (like a honeycomb/hex) with a glowing inner orb and the die label (e.g., "d20", "d12", "d6") displayed prominently below, inspired by the reference image showing a golden hexagonal die badge on a fantasy battlefield background.
- **Captured Dice**: Smaller display area showing opponent dice that have been captured
- **Dice Colors**: Use a **golden/amber hex badge** style for dice with a soft glowing center orb. Distinguish between players by tinting Player 1's dice gold/amber and Player 2's dice blue/teal.
- **Visual Feedback**: Highlight attackable dice, show valid targets, animate captures

#### **CRITICAL UI CHANGE: No Instructional Text Banner**
- **Do NOT display** any instructional text like "> Select your dice below, then click an enemy die to attack." anywhere on the game board during gameplay.
- The game interface should be **clean and uncluttered** — rely on visual affordances (highlights, hover states, cursor changes, subtle pulse animations on selectable dice) to guide the player rather than explicit text instructions.
- The turn indicator should simply show the current player's name/character (e.g., "Dragon Knight's Turn") without appending instructional directions.
- If tooltips are needed, use **hover-only tooltips** on individual dice rather than a persistent instruction banner.

### Turn-Based Interface

#### Attack Options
- **Power Attack Button**: "Power Attack" - available when attacker die ≥ target die, show calculation on hover/preview
- **Skill Attack Button**: "Skill Attack" - available when sum of selected dice = target die, show calculation on hover/preview
- **Pass Button**: "Pass" - when no attacks are possible or player chooses to pass
- **Dice Selection**: Click to select attacking dice (they glow/pulse), click targets to highlight valid attacks. All guidance is through visual cues, not text banners.

#### Visual Indicators
- Highlight valid attacking dice with a green glow/border
- Highlight valid targets with a red glow/border when attacker is selected
- Show attack type and calculation preview in a small floating tooltip near the dice, NOT as a banner
- Disable invalid actions with dimmed/grayed visual feedback

### Scoring System
- **Round Scoring**: Captured dice (full point value) + remaining dice (half point value)
- **Match Progress**: Visual indicator showing rounds won (first to 3 rounds wins)
- **Score History**: Track and display score progression throughout the match

## Game Modes

### Hot Seat Multiplayer
- Players alternate turns on the same device
- Clear "Player X's Turn" indicators (name only, no instructions appended)
- Option to hide dice values between turns (privacy mode)

### vs AI Mode
- Simple AI that makes reasonable attacks when available
- AI difficulty slider (affects decision-making speed and strategy)
- AI character selection and "thinking" animations

## UI/UX Design

### Visual Theme
- **Fantasy Gaming Aesthetic**: Use medieval/fantasy color palette (deep blues, golds, burgundy) with lush green battlefield backgrounds reminiscent of the pixel-art dragon reference image
- **Dice Styling**: Hexagonal badge shapes with inner glowing orbs and clear die-type labels (d4, d6, d8, d10, d12, d20) — inspired by the golden hex badge in the reference image
- **Character Cards**: Trading card inspired design with pixel-art character portraits
- **Battle Effects**: Subtle animations for attacks, captures, and victories

### Layout Considerations
- **Responsive Design**: Works on desktop and tablets (mobile-friendly but optimized for larger screens)
- **Clean, Uncluttered Interface**: No persistent instructional text banners. Game state always visible, current options prominent, all guidance through visual affordances.
- **Accessibility**: High contrast, clear fonts, keyboard navigation support

### Interactive Elements
- **Hover Effects**: Preview attack calculations as floating tooltips on hover
- **Click Feedback**: Satisfying button presses and dice selection with hex-glow animations
- **Animation**: Smooth transitions for dice captures, turn changes, round completion
- **Sound Effects**: Optional dice rolling, attack, and victory sounds

## Additional Features

### Game Options
- **Quick Start**: Jump into a game with random characters
- **Custom Characters**: Allow players to create characters with custom dice sets
- **Game Rules**: Built-in tutorial and rules reference (accessible via a help icon, NOT displayed on the game board)
- **Match History**: Track wins/losses and favorite characters

### Character Generation
Use the retrodiffusion API to generate character portraits:
- Fantasy character portraits in `portrait` style (pixel art dragons, knights, mages, etc. reminiscent of the reference image)
- Dice icons in `game_asset` style with `remove_bg=true`
- Game UI elements in `simple` style

### Technical Implementation
- **State Management**: Track game state, turn order, dice values, scores
- **Validation**: Ensure only legal moves are possible
- **Auto-save**: Preserve game state in localStorage
- **Performance**: Smooth animations and responsive interactions

### Whimsical Touches
- Character flavor text and battle quips in the combat log
- Dice that "bounce" when rolled with hex-glow pulse
- Victory celebrations and defeat animations
- Easter eggs for certain character combinations
- Randomized battle comments in the combat log

The app should feel like a polished digital board game that captures the strategic depth of Button Men while being accessible to new players through **intuitive visual cues and clean UI design** — no instructional text banners cluttering the game board. Players learn by interacting, not by reading instructions mid-game.

## About Berrry
Berrry transforms your social media content into interactive web applications. Share a Twitter/X post or Reddit comment, and our AI creates a custom web app hosted at your own subdomain.

**Visit**: https://berrry.app

Transform your social media ideas into real web applications today.