- add configurable spin duration (1s-10s) with localStorage persistence

TobiasMue91 · TobiasMue91 · commit d7d5580fada5 · 2025-06-19T21:57:43.000+02:00
- replace physics-based animation with time-based `easeOut()` curve
- implement realistic `SpinningWheelSound` class with dynamic click timing
diff --git a/tools/decision_wheel.html b/tools/decision_wheel.html
@@ -2,31 +2,32 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="description" content="Free online Decision Wheel - Spin the wheel to make random choices! Add your options and let our customizable spinning wheel pick for you. Perfect for decisions, games, and random selection.">
-    <meta name="keywords" content="decision wheel, spinning wheel, random picker, choice maker, decision maker, random selector, spin wheel, online wheel, random choice, decision tool, picker wheel, fortune wheel">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Decision Wheel - Random Picker</title>
+    <meta name="description"
+          content="Free online Decision Wheel - Spin the wheel to make random choices! Add your options and let our customizable spinning wheel pick for you. Perfect for decisions, games, and random selection.">
+    <meta name="keywords"
+          content="decision wheel, spinning wheel, random picker, choice maker, decision maker, random selector, spin wheel, online wheel, random choice, decision tool, picker wheel, fortune wheel">
     <meta name="author" content="Claude Sonnet 4 prompted by Tobias Müller">
     <meta name="robots" content="index, follow">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="canonical" href="https://www.gptgames.dev/tools/decision_wheel.html">
-
     <meta property="og:title" content="Decision Wheel - Random Picker Tool">
-    <meta property="og:description" content="Free online Decision Wheel - Spin the wheel to make random choices! Add your options and let our customizable spinning wheel pick for you. Perfect for decisions, games, and random selection.">
+    <meta property="og:description"
+          content="Free online Decision Wheel - Spin the wheel to make random choices! Add your options and let our customizable spinning wheel pick for you. Perfect for decisions, games, and random selection.">
     <meta property="og:image" content="https://www.gptgames.dev/screenshots/screenshot_208.webp">
     <meta property="og:url" content="https://www.gptgames.dev/tools/decision_wheel.html">
     <meta property="og:type" content="website">
     <meta property="og:site_name" content="GPT Games">
-
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Decision Wheel - Random Picker Tool">
-    <meta name="twitter:description" content="Free online Decision Wheel - Spin the wheel to make random choices! Add your options and let our customizable spinning wheel pick for you.">
+    <meta name="twitter:description"
+          content="Free online Decision Wheel - Spin the wheel to make random choices! Add your options and let our customizable spinning wheel pick for you.">
     <meta name="twitter:image" content="https://www.gptgames.dev/screenshots/screenshot_208.webp">
-
     <meta name="theme-color" content="#3182ce">
     <meta name="application-name" content="Decision Wheel">
     <meta name="apple-mobile-web-app-title" content="Decision Wheel">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
-    <title>Decision Wheel - Random Picker</title>
     <style>
         * {
             margin: 0;
@@ -193,7 +194,7 @@
             font-size: 0.9rem
         }
 
-        .form-group input {
+        .form-group input, .form-group select {
             width: 100%;
             padding: 0.75rem 1rem;
             border: 2px solid #e5e7eb;
@@ -203,12 +204,18 @@
             background: white
         }
 
-        .form-group input:focus {
+        .form-group input:focus, .form-group select:focus {
             outline: none;
             border-color: #3182ce;
             box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1)
         }
 
+        .duration-info {
+            font-size: 0.8rem;
+            color: #6b7280;
+            margin-top: 0.25rem
+        }
+
         .btn {
             padding: 0.7rem 1.2rem;
             border: none;
@@ -473,9 +480,20 @@ <h3>Wheel Options</h3>
         </div>
         <div class="settings-section">
             <h4>Settings</h4>
+            <div class="form-group">
+                <label for="spinDuration">Spin Duration</label>
+                <select id="spinDuration">
+                    <option value="1">⚡ Instant (1s) - Perfect for streaming</option>
+                    <option value="2">🏃 Fast (2s) - Quick decision</option>
+                    <option value="4" selected>⚖️ Normal (4s) - Balanced</option>
+                    <option value="6">🎪 Dramatic (6s) - Build suspense</option>
+                    <option value="10">🐌 Slow (10s) - Maximum drama</option>
+                </select>
+                <div class="duration-info">Choose based on your use case - streamers prefer faster spins</div>
+            </div>
             <div class="checkbox-group">
                 <input type="checkbox" id="soundToggle" checked>
-                <label for="soundToggle">Sound effects</label>
+                <label for="soundToggle">Spinning sound</label>
             </div>
             <div class="checkbox-group">
                 <input type="checkbox" id="confettiToggle" checked>
@@ -493,6 +511,65 @@ <h4>Recent Results</h4>
     </div>
 </div>
 <script>
+    class SpinningWheelSound {
+        constructor() {
+            try {
+                this.ctx = new (window.AudioContext || window.webkitAudioContext)();
+                this.playing = false;
+            } catch (e) {
+                this.ctx = null;
+            }
+        }
+
+        click(when = 0) {
+            if (!this.ctx) return;
+            const t = this.ctx.currentTime + when;
+            const osc = this.ctx.createOscillator();
+            const gain = this.ctx.createGain();
+            const filter = this.ctx.createBiquadFilter();
+
+            osc.frequency.setValueAtTime(2800, t);
+            osc.frequency.exponentialRampToValueAtTime(800, t + 0.015);
+            filter.type = 'highpass';
+            filter.frequency.value = 400;
+            gain.gain.setValueAtTime(0, t);
+            gain.gain.linearRampToValueAtTime(0.4, t + 0.003);
+            gain.gain.exponentialRampToValueAtTime(0.001, t + 0.06);
+
+            osc.connect(filter).connect(gain).connect(this.ctx.destination);
+            osc.start(t);
+            osc.stop(t + 0.06);
+        }
+
+        spin(duration = 3000, initialSpeed = 30) {
+            if (!this.ctx || this.playing) return;
+            this.playing = true;
+            const startTime = Date.now();
+            const minSpeed = 1;
+
+            const loop = () => {
+                const elapsed = Date.now() - startTime;
+                if (elapsed > duration) {
+                    this.playing = false;
+                    return;
+                }
+
+                this.click();
+
+                // Calculate current speed based on time progress (exponential curve)
+                const progress = elapsed / duration;
+                const currentSpeed = initialSpeed * Math.pow(minSpeed / initialSpeed, progress);
+
+                setTimeout(loop, 1000 / currentSpeed);
+            };
+            loop();
+        }
+
+        stop() {
+            this.playing = false;
+        }
+    }
+
     class DecisionWheel {
         constructor() {
             this.canvas = document.getElementById('wheel');
@@ -501,12 +578,14 @@ <h4>Recent Results</h4>
             this.colors = ['#3182ce', '#38a169', '#e53e3e', '#d69e2e', '#805ad5', '#dd6b20', '#319795', '#e53e3e', '#38b2ac', '#3182ce'];
             this.rotation = 0;
             this.spinning = false;
-            this.spinSpeed = 0;
-            this.friction = 0.996;
-            this.minSpeed = 0.008;
+            this.spinStartTime = 0;
+            this.spinDuration = parseInt(localStorage.getItem('spinDuration')) || 4;
+            this.startRotation = 0;
+            this.targetRotation = 0;
             this.history = JSON.parse(localStorage.getItem('wheelHistory')) || [];
             this.soundEnabled = localStorage.getItem('soundEnabled') !== 'false';
             this.confettiEnabled = localStorage.getItem('confettiEnabled') !== 'false';
+            this.sound = new SpinningWheelSound();
             this.setupEventListeners();
             this.updateDisplay();
             this.draw()
@@ -519,6 +598,7 @@ <h4>Recent Results</h4>
             const resetBtn = document.getElementById('resetBtn');
             const soundToggle = document.getElementById('soundToggle');
             const confettiToggle = document.getElementById('confettiToggle');
+            const spinDurationSelect = document.getElementById('spinDuration');
             addBtn.addEventListener('click', () => this.addSegment());
             newSegmentInput.addEventListener('keypress', e => {
                 if (e.key === 'Enter' && !e.shiftKey) {
@@ -536,11 +616,16 @@ <h4>Recent Results</h4>
                 this.confettiEnabled = e.target.checked;
                 localStorage.setItem('confettiEnabled', this.confettiEnabled)
             });
+            spinDurationSelect.addEventListener('change', e => {
+                this.spinDuration = parseInt(e.target.value);
+                localStorage.setItem('spinDuration', this.spinDuration)
+            });
             this.canvas.addEventListener('click', () => {
                 if (!this.spinning && this.segments.length >= 2) this.spin()
             });
             soundToggle.checked = this.soundEnabled;
-            confettiToggle.checked = this.confettiEnabled
+            confettiToggle.checked = this.confettiEnabled;
+            spinDurationSelect.value = this.spinDuration
         }
 
         addSegment() {
@@ -626,30 +711,43 @@ <h4>Recent Results</h4>
         spin() {
             if (this.spinning || this.segments.length < 2) return;
             this.spinning = true;
-            this.spinSpeed = 0.25 + Math.random() * 0.3;
+            this.spinStartTime = Date.now();
+            this.startRotation = this.rotation;
+            const minRotations = this.spinDuration <= 2 ? 3 : this.spinDuration <= 4 ? 5 : 8;
+            const maxRotations = this.spinDuration <= 2 ? 5 : this.spinDuration <= 4 ? 8 : 12;
+            const totalRotations = minRotations + Math.random() * (maxRotations - minRotations);
+            const randomOffset = Math.random() * 2 * Math.PI;
+            this.targetRotation = this.startRotation + totalRotations * 2 * Math.PI + randomOffset;
             const spinBtn = document.getElementById('spinBtn');
             spinBtn.disabled = true;
             spinBtn.textContent = '🎲 Spinning...';
             this.canvas.classList.add('spinning');
-            if (this.soundEnabled) this.playSpinSound();
+            if (this.soundEnabled) this.sound.spin(this.spinDuration * 1000, this.spinDuration <= 2 ? 40 : this.spinDuration <= 4 ? 30 : 25);
             this.animate()
         }
 
+        easeOut(t) {
+            return 1 - Math.pow(1 - t, 3)
+        }
+
         animate() {
-            if (this.spinning) {
-                this.rotation += this.spinSpeed;
-                this.spinSpeed *= this.friction;
-                if (this.spinSpeed < this.minSpeed) {
-                    this.spinning = false;
-                    this.spinSpeed = 0;
-                    const spinBtn = document.getElementById('spinBtn');
-                    spinBtn.disabled = false;
-                    spinBtn.textContent = '🎲 Spin the Wheel';
-                    this.canvas.classList.remove('spinning');
-                    this.showResult()
-                }
+            if (!this.spinning) return;
+            const elapsed = (Date.now() - this.spinStartTime) / 1000;
+            const progress = Math.min(elapsed / this.spinDuration, 1);
+            if (progress >= 1) {
+                this.spinning = false;
+                this.rotation = this.targetRotation;
+                const spinBtn = document.getElementById('spinBtn');
+                spinBtn.disabled = false;
+                spinBtn.textContent = '🎲 Spin the Wheel';
+                this.canvas.classList.remove('spinning');
+                this.sound.stop();
+                this.showResult()
+            } else {
+                const easedProgress = this.easeOut(progress);
+                this.rotation = this.startRotation + (this.targetRotation - this.startRotation) * easedProgress;
                 this.draw();
-                if (this.spinning) requestAnimationFrame(() => this.animate())
+                requestAnimationFrame(() => this.animate())
             }
         }
 
@@ -666,7 +764,6 @@ <h4>Recent Results</h4>
             if (this.history.length > 20) this.history = this.history.slice(0, 20);
             this.updateHistory();
             this.saveToStorage();
-            if (this.soundEnabled) setTimeout(() => this.playWinSound(), 200);
             if (this.confettiEnabled) setTimeout(() => this.showConfetti(), 300)
         }
 
@@ -723,42 +820,6 @@ <h4>Recent Results</h4>
             this.ctx.stroke()
         }
 
-        playSpinSound() {
-            try {
-                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                const oscillator = audioContext.createOscillator();
-                const gainNode = audioContext.createGain();
-                oscillator.connect(gainNode);
-                gainNode.connect(audioContext.destination);
-                oscillator.frequency.setValueAtTime(150, audioContext.currentTime);
-                oscillator.frequency.exponentialRampToValueAtTime(80, audioContext.currentTime + 0.8);
-                gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
-                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.8);
-                oscillator.start(audioContext.currentTime);
-                oscillator.stop(audioContext.currentTime + 0.8)
-            } catch (e) {
-            }
-        }
-
-        playWinSound() {
-            try {
-                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                const notes = [523.25, 659.25, 783.99];
-                notes.forEach((freq, i) => {
-                    const oscillator = audioContext.createOscillator();
-                    const gainNode = audioContext.createGain();
-                    oscillator.connect(gainNode);
-                    gainNode.connect(audioContext.destination);
-                    oscillator.frequency.setValueAtTime(freq, audioContext.currentTime + i * 0.1);
-                    gainNode.gain.setValueAtTime(0.15, audioContext.currentTime + i * 0.1);
-                    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + i * 0.1 + 0.3);
-                    oscillator.start(audioContext.currentTime + i * 0.1);
-                    oscillator.stop(audioContext.currentTime + i * 0.1 + 0.3)
-                })
-            } catch (e) {
-            }
-        }
-
         showConfetti() {
             const colors = ['#3182ce', '#38a169', '#e53e3e', '#d69e2e', '#805ad5', '#dd6b20'];
             for (let i = 0; i < 30; i++) {
@@ -779,7 +840,9 @@ <h4>Recent Results</h4>
 
         saveToStorage() {
             localStorage.setItem('wheelSegments', JSON.stringify(this.segments));
-            localStorage.setItem('wheelHistory', JSON.stringify(this.history))
+            localStorage.setItem('wheelHistory', JSON.stringify(this.history));
+            localStorage.setItem('spinDuration', this.spinDuration);
+            localStorage.setItem('soundEnabled', this.soundEnabled)
         }
 
         reset() {
