Flip the Coin

Complete User Guide

📖 FlipTheCoin User Guide

Welcome to FlipTheCoin - Your Complete Guide

Everything you need to know about using FlipTheCoin, from your very first flip to advanced customization.

🚀 Quick Start

✅ Open the app in your browser

✅ Click the coin (or press Spacebar) to flip

✅ Watch the result: HEADS 👑 or TAILS 🔷

✅ Check your statistics (bottom right)

✅ Open Settings (gear icon âš™ī¸) to customize

Step 1: Open the Application

  1. Open your web browser (Chrome, Firefox, Safari, or Edge)
  2. Open the index.html file or navigate to the website URL
  3. Wait a few seconds for the coin to load
  4. You'll see a shiny gold coin - you're ready!

Step 2: Your First Flip

  1. Click on the coin with your mouse (or tap it on phone/tablet)
  2. Watch it spin in the air!
  3. Wait for it to land
  4. See your result: "HEADS" or "TAILS"

🎉 Congratulations! You've made your first flip!

Top Bar (Header)

  • FlipTheCoin - App name (left side)
  • Gear Icon âš™ī¸ - Opens settings (right side)

Center Area

  • 3D Coin - The main attraction! Click to flip
  • Result Display - Shows "HEADS 👑" or "TAILS 🔷" after each flip

Control Panel (Below Coin)

  • Flip Coin - Big button to flip
  • Auto - Automatically flip multiple times
  • Slow-Mo - Flip in slow motion
  • Replay - See the last flip again
  • Speaker 🔊 - Mute/unmute sounds

Statistics Panel (Bottom Right)

  • Total Flips - Count of all flips
  • Heads/Tails Count - Individual results with percentages
  • Streak - Current winning streak
  • Recent History - Last 10 results as emojis
  • Export/Clear - Save or reset statistics

Method 1: Click/Tap the Coin (Easiest)

Move your mouse over the coin and click once. On phones/tablets, just tap the coin with your finger.

Method 2: Use the "Flip Coin" Button

Look for the big button below the coin that says "Flip Coin" and click it.

Method 3: Keyboard Shortcuts

Press the Spacebar or Enter key on your keyboard. Great for quick flips!

đŸ”ĩ Flip Coin Button

Flips the coin once. Click it anytime to get a result.

🔄 Auto Button

What it does: Flips automatically, over and over.

How to use: Click once to start, click again to stop. Great for getting lots of flips quickly!

Speed: Default is every 2 seconds (adjustable in Settings).

🐌 Slow-Mo Button

What it does: Makes the flip happen in slow motion (30% speed).

When to use: Watch the beautiful 3D physics in detail or make dramatic decisions!

â†Šī¸ Replay Button

What it does: Replays the animation of your last flip (same result).

Note: Doesn't count as a new flip - just shows the animation again.

🔊 Mute Button

What it does: Turns sound on/off.

Sounds: Whoosh (toss) and Clink (landing).

Click the gear icon âš™ī¸ in the top right to open Settings.

🎨 Coin Theme

  • Classic Gold: Beautiful golden coin (default)
  • Silver: Chrome/silver metallic finish
  • Custom: Upload your own images for heads and tails!

Custom Images: PNG or JPEG, max 5MB, square images work best (1024×1024px recommended).

⚡ Physics Settings

  • Intensity: Light (gentle) | Normal (realistic) | Heavy (forceful)
  • Bias (%): 50% = fair coin | 0% = always tails | 100% = always heads
  • Auto-Flip Interval: 0.5s (fast) to 5.0s (slow)

🔊 Audio Settings

Volume: 0% (silent) to 100% (maximum). Default is 70%.

⚡ Performance

  • High Performance Mode: Reduces visual quality for faster performance on slower devices
  • Show FPS Counter: Display frames per second (60 FPS = perfect)

â™ŋ Accessibility

  • Reduced Motion: Minimizes animations (good for motion sensitivity)
  • Enable Haptics: Phone/tablet vibration on flip (mobile only)
  • Celebration Effects: Show confetti on win streaks (3+ in a row)

🔄 Reset to Defaults

Resets ALL settings back to original values (doesn't affect statistics).

The statistics panel tracks all your flips automatically.

Total Flips

Shows total number of flips you've made. Example: "Total Flips: 100"

Heads/Tails Count

Shows individual results with percentages. Example: "Heads: 52 (52.0%)"

Fair Coin Check: After 100+ flips, both should be close to 50%.

Streak

Shows consecutive same results. Example: "3 Heads 👑" means you got heads 3 times in a row.

Long streaks are rare! Getting 5 in a row happens only ~3% of the time.

Recent History

Shows last 10 flips as emojis: 👑 = Heads, 🔷 = Tails

Read from right to left (oldest to newest).

Export Statistics

Saves all your statistics to a .json file. Great for tracking progress or sharing!

Clear Statistics

Warning: Resets everything to zero. Cannot be undone! Export first if you want to keep data.

Example: Cat vs Dog Coin

  1. Prepare images: cat.jpg (for heads) and dog.jpg (for tails) - under 5MB each
  2. Click gear icon âš™ī¸ to open Settings
  3. Select "Custom" theme
  4. Click "Heads Texture" → upload cat image
  5. Click "Tails Texture" → upload dog image
  6. Close settings and flip!

Custom Theme Ideas

  • Sports Teams (Team A vs Team B logos)
  • Food Choices (Pizza vs Burger)
  • Yes or No (Green checkmark vs Red X)
  • Travel (Beach vs Mountain photos)
  • Pet Photos (Your pets!)

✅ Best Practices

  • Use square images (1024×1024px ideal)
  • Use high-contrast, bright images
  • Center your subject in the image
  • Keep files under 5MB

🚀 Speed Tips

  • Fastest way to flip: Press Spacebar repeatedly
  • Quickly flip 100 times: Use Auto mode with 0.5s interval
  • Skip waiting: Enable Reduced Motion for faster results

đŸŽ¯ Fun Challenges

  • Try to get a streak of 5 in a row (3% chance!)
  • Flip until you get exactly 50/50 split
  • Use Slow-Mo to watch physics in detail
  • Create custom themes for different decisions

âŒ¨ī¸ Keyboard Shortcuts

  • Space/Enter: Flip the coin
  • Tab: Move between buttons
  • Escape: Close settings window

📱 Mobile Tips

  • Turn on Haptics for vibration feedback
  • Use High Performance Mode to save battery
  • Add to home screen for quick access

❌ Coin doesn't flip when clicked

Solutions:

  • Wait for page to fully load
  • Click directly on the coin, not around it
  • Try pressing Spacebar instead
  • Refresh the page (F5)

❌ Can't see the coin (black screen)

Solutions:

  • Check if WebGL is supported: visit https://get.webgl.org/
  • Update your browser to latest version
  • Update graphics drivers (especially on older PCs)
  • Try 2D mode if offered

❌ No sound playing

Solutions:

  • Check if speaker icon 🔊 shows mute (X through it)
  • Open Settings → Volume slider → increase to 50%+
  • Check your device volume
  • Some browsers block sound until you interact - click coin first

❌ App is laggy or slow

Solutions:

  • Settings → Enable "High Performance Mode"
  • Close other browser tabs and programs
  • Check FPS (Settings → Show FPS Counter) - if below 30, device may be slow
  • Try Chrome browser for best performance

❌ Custom textures won't load

Solutions:

  • Check file size: must be under 5MB
  • Check file format: only PNG and JPEG supported
  • Try different/smaller images
  • File might be corrupted - test with a simple image first

❌ Settings keep resetting

Solutions:

  • Don't use private/incognito mode (settings can't save there)
  • Check if browser blocks localStorage in privacy settings
  • Try a different browser