Add Playful Mode

Author: msbrogli

DEBUG.md

@@ -0,0 +1,84 @@
+# Debug Mode
+
+## Enabling Debug Mode
+
+To enable debug mode in the Fortune Tiger slot machine, open your browser console and run:
+
+```javascript
+localStorage.setItem('debug_mode', 'true');
+```
+
+Then refresh the page. You'll see a purple "🐛 Debug Spin" button in the top-left corner.
+
+## Disabling Debug Mode
+
+To disable debug mode:
+
+```javascript
+localStorage.removeItem('debug_mode');
+// or
+localStorage.setItem('debug_mode', 'false');
+```
+
+Then refresh the page.
+
+## What Does Debug Mode Do?
+
+The debug button allows you to test the spinning animation and transaction flow without actually:
+- Connecting a wallet
+- Placing a real bet
+- Spending any tokens
+
+When you click "🐛 Debug Spin", it will:
+1. **Ask you to choose**: Click OK to WIN, or Cancel to LOSE
+2. Start the spinning animation immediately
+3. Show "CONFIRMING..." state for 2 seconds (simulating wallet confirmation)
+4. Show "Transaction confirmed! Spinning..." toast
+5. Continue spinning for 5 seconds (simulating blockchain confirmation)
+6. Stop at the result you chose (guaranteed win or guaranteed lose)
+7. If you chose WIN, show the "WINNER CHICKEN DINNER" animation
+8. Play spinning sound effect (if `spin.mp3` exists in `public/sounds/`)
+
+This is useful for:
+- Testing the UI/UX flow
+- Checking animations
+- Debugging audio playback
+- Testing the winning animation
+- Demonstrating the app without needing a wallet connection
+
+## Audio
+
+The app will automatically play a spinning sound effect when the reels are spinning.
+
+### Automatic Fallback Sound
+
+**No setup required!** If the `spin.mp3` file is missing, the app will automatically generate a spinning sound using Web Audio API. You'll see this console message:
+- `🔊 Playing Web Audio API fallback sound`
+
+### Optional: Add Better Sound
+
+For a more realistic casino experience:
+
+1. Download a free slot machine spin sound (MP3 format)
+   - Mixkit: https://mixkit.co/free-sound-effects/casino/
+   - Freesound: https://freesound.org/ (search "slot machine spin")
+   - Pixabay: https://pixabay.com/sound-effects/search/slot%20machine/
+
+2. Rename the file to `spin.mp3`
+
+3. Place it in `public/sounds/spin.mp3`
+
+4. Refresh the browser
+
+5. Check console for "✅ Audio file loaded successfully" and "🔊 Playing MP3 audio" messages
+
+See `public/sounds/README.md` for detailed audio setup instructions.
+
+## Notes
+
+- The debug button is only visible when debug mode is enabled
+- You can toggle debug mode at any time by changing localStorage
+- Debug spins don't affect your real balance or create real transactions
+- You can choose to win or lose before each debug spin
+- Audio will only play if `spin.mp3` exists in the `public/sounds/` folder
+- If audio is blocked by browser, it will play after user interaction (clicking debug button)

app/page.tsx

@@ -10,10 +10,12 @@ import RecentOperationsTable from '@/components/RecentOperationsTable';
 import ProfitLossCard from '@/components/ProfitLossCard';
 import TokenSelector from '@/components/TokenSelector';
 import PlaceBetCard from '@/components/PlaceBetCard';
+import FortuneTigerBetCard from '@/components/FortuneTigerBetCard';
 import AddLiquidityCard from '@/components/AddLiquidityCard';
 import RemoveLiquidityCard from '@/components/RemoveLiquidityCard';
 import { ContractInfoCompact } from '@/components/ContractInfoCompact';
 import { NetworkSelector } from '@/components/NetworkSelector';
+import { UIModeSwitcher, type UIMode } from '@/components/UIModeSwitcher';
 import HelpIcon from '@/components/HelpIcon';
 import { formatBalance } from '@/lib/utils';
 import { toast } from '@/lib/toast';
@@ -31,6 +33,20 @@ export default function Home() {
   const [isRefreshingContract, setIsRefreshingContract] = useState(false);
   const [showWithdrawModal, setShowWithdrawModal] = useState(false);
   const [withdrawAmount, setWithdrawAmount] = useState('');
+  const [uiMode, setUIMode] = useState<UIMode>('classic');
+
+  // Load UI mode preference from localStorage
+  useEffect(() => {
+    const storedMode = localStorage.getItem('ui_mode') as UIMode | null;
+    if (storedMode && (storedMode === 'classic' || storedMode === 'fortune-tiger')) {
+      setUIMode(storedMode);
+    }
+  }, []);
+
+  const handleModeChange = (mode: UIMode) => {
+    setUIMode(mode);
+    localStorage.setItem('ui_mode', mode);
+  };
 
   const handleCardToggle = (cardId: string) => {
     setExpandedCard(expandedCard === cardId ? null : cardId);
@@ -160,6 +176,16 @@ export default function Home() {
 
   const contractState = getContractStateForToken(selectedToken);
 
+  // If in Fortune Tiger mode, render full-screen slot machine
+  if (uiMode === 'fortune-tiger') {
+    return (
+      <div className="relative">
+        <FortuneTigerBetCard selectedToken={selectedToken} />
+        <UIModeSwitcher currentMode={uiMode} onModeChange={handleModeChange} />
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen bg-slate-900">
       <Header />
@@ -359,6 +385,9 @@ export default function Home() {
       <footer className="mt-8 text-center text-slate-500 text-sm">
         <p>HathorDice {APP_VERSION}</p>
       </footer>
+
+      {/* UI Mode Switcher - Only show in classic mode */}
+      <UIModeSwitcher currentMode={uiMode} onModeChange={handleModeChange} />
     </div>
   );
 }