feat: Right/Wrong sound effects

Author: MiniCodeMonkey

config/jeopardy.php

@@ -31,48 +31,22 @@
 
     'game_settings' => [
         'daily_double_min_value' => 300,
-        'lightning_round_time_limit' => 30,
-        'points_multiplier' => 1,
-    ],
-
-    'sound_effects' => [
-        'daily_double' => 'sounds/daily-double.mp3',
     ],
 
     'categories' => [
-        'Taylor\'s Version' => [
-            'clues' => [
-                100 => [
-                    'question' => 'Swift\'s emotional 2012 album title describes what developers see when tests fail',
-                    'answer' => 'What is "Red"?',
-                ],
-                300 => [
-                    'question' => 'Taylor Otwell\'s take on server management and deployment, this SaaS platform lets you provision and manage servers without the command line hassle',
-                    'answer' => 'What is Laravel Forge?',
-                ],
-                500 => [
-                    'question' => 'Taylor\'s 2014 hit about relationships gone wrong also describes what PHP displays when you echo an uninitialized variable',
-                    'answer' => 'What is "Blank Space"?',
-                ],
-                1000 => [
-                    'question' => 'Before creating Laravel, Taylor Otwell programmed in this 1960s business language',
-                    'answer' => 'What is COBOL?',
-                ],
-            ],
-        ],
         '404: Category Not Found' => [
             'clues' => [
                 100 => [
-                    'question' => 'This HTTP status code is returned when the client should authenticate itself',
-                    'answer' => 'What is 401 (Unauthorized)?',
+                    'question' => 'This Laravel tool provides an interactive shell for testing code',
+                    'answer' => 'What is Tinker?',
                 ],
                 300 => [
-                    'question' => 'This package provides a beautiful debugging interface to inspect errors',
-                    'answer' => 'What is Debugbar for Laravel?',
+                    'question' => 'This Laravel blade directive is used to display unescaped HTML content',
+                    'answer' => 'What is "{!! !!}"?',
                 ],
                 500 => [
-                    'question' => 'This error occurs when PHP runs out of allocated memory',
-                    'answer' => 'What is "Fatal error: Allowed Memory Size of X Bytes Exhausted"?',
+                    'question' => 'This HTTP header is commonly missing when CORS errors occur',
+                    'answer' => 'What is "Access-Control-Allow-Origin"?',
                 ],
                 1000 => [
                     'question' => 'This HTTP status code means "I\'m a teapot" and was an April Fool\'s joke',
@@ -95,7 +69,7 @@
                     'answer' => 'What is Washington, DC?',
                 ],
                 1000 => [
-                    'question' => 'This entrepreneur had the vision for the first Laracon.', // Hint: He is also knwn as the "Godfather of Laravel"
+                    'question' => 'This entrepreneur had the vision for the first Laracon.', // Hint: He is also known as the "Godfather of Laravel"
                     'answer' => 'Who is Ian Landsman?',
                 ],
             ],
@@ -140,6 +114,26 @@
                 ],
             ],
         ],
+        'Taylor\'s Version' => [
+            'clues' => [
+                100 => [
+                    'question' => 'Swift\'s emotional 2012 album title describes what developers see when tests fail',
+                    'answer' => 'What is "Red"?',
+                ],
+                300 => [
+                    'question' => 'Taylor Otwell\'s take on server management and deployment, this SaaS platform lets you provision and manage servers without the command line hassle',
+                    'answer' => 'What is Laravel Forge?',
+                ],
+                500 => [
+                    'question' => 'Taylor\'s 2014 hit about relationships gone wrong also describes what PHP displays when you echo an uninitialized variable',
+                    'answer' => 'What is "Blank Space"?',
+                ],
+                1000 => [
+                    'question' => 'Before creating Laravel, Taylor Otwell programmed in this 1960s business language',
+                    'answer' => 'What is COBOL?',
+                ],
+            ],
+        ],
         'Eloquently Speaking' => [
             'clues' => [
                 100 => [
@@ -170,7 +164,7 @@
         ['question' => 'What is the default Laravel testing framework?', 'answer' => 'Pest or PHPUnit'],
         ['question' => 'What is Laravel\'s real-time event broadcasting tool?', 'answer' => 'Echo'],
         ['question' => 'What is Laravel\'s blade directive for CSRF protection?', 'answer' => '@csrf'],
-        ['question' => 'Who is the found of Laravel News?', 'answer' => 'Eric Barnes'],
+        ['question' => 'Who is the founder of Laravel News?', 'answer' => 'Eric Barnes'],
 
         // Laravel Commands
         ['question' => 'What is the command to list all routes?', 'answer' => 'php artisan route:list'],
@@ -187,7 +181,7 @@
         ['question' => 'What is the HTTP status code for forbidden?', 'answer' => '403'],
 
         // Frontend/CSS
-        ['question' => 'What is the CSS framework used in this project?', 'answer' => 'Tailwind'],
+        ['question' => 'What is the CSS framework used in this project?', 'answer' => 'Tailwind CSS'],
         ['question' => 'What is the JavaScript framework used for reactivity in Livewire?', 'answer' => 'Alpine.js'],
         ['question' => 'What is the Tailwind CSS utility for spacing between flex items?', 'answer' => 'gap'],
         ['question' => 'What is Tailwind\'s dark mode prefix?', 'answer' => 'dark:'],
@@ -207,7 +201,7 @@
         ['question' => 'What database typically uses port 6379?', 'answer' => 'Redis'],
 
         // Additional Laravel-specific questions
-        ['question' => 'What method skips X rows in an Eloquent query?', 'answer' => 'offset()'],
+        ['question' => 'What method skips X rows in an Eloquent query?', 'answer' => 'offset() or skip()'],
         ['question' => 'What artisan command rolls back the last migration batch?', 'answer' => 'migrate:rollback'],
         ['question' => 'What facade provides access to the cache?', 'answer' => 'Cache'],
         ['question' => 'What middleware verifies CSRF tokens on POST requests?', 'answer' => 'VerifyCsrfToken'],

package.json

@@ -3,7 +3,7 @@
     "type": "module",
     "scripts": {
         "build": "vite build",
-        "dev": "vite"
+        "dev": "vite --host"
     },
     "dependencies": {
         "@tailwindcss/vite": "^4.1.11",

public/sounds/answer-correct.wav

@@ -10,7 +10,23 @@ export function initBuzzerListener(gameId) {
         .listen('.buzzer.pressed', (e) => {
             console.log('Buzzer pressed event received:', e);
             playBuzzerSound(e.teamName);
-        });
+        })
+        .listen('ScoreUpdated', (e) => {
+            let soundFile = e.correct ? 'answer-correct' : 'answer-incorrect';
+
+            const audio = document.getElementById(soundFile);
+            if (audio) {
+                audio.currentTime = 0; // Reset to start
+                audio.play().catch(error => {
+                    console.error('Error playing buzzer sound:', error);
+
+                    // Show user-friendly error message
+                    if (error.name === 'NotAllowedError') {
+                        showAudioPermissionMessage();
+                    }
+                });
+            }
+        })
 
     // Also listen on the general buzzers channel
     window.Echo.channel('buzzers')
@@ -42,7 +58,7 @@ function playBuzzerSound(teamName) {
             audio.currentTime = 0; // Reset to start
             audio.play().catch(error => {
                 console.error('Error playing buzzer sound:', error);
-                
+
                 // Show user-friendly error message
                 if (error.name === 'NotAllowedError') {
                     showAudioPermissionMessage();
@@ -58,7 +74,7 @@ function showAudioPermissionMessage() {
     if (existingMessage) {
         existingMessage.remove();
     }
-    
+
     // Create message element
     const message = document.createElement('div');
     message.id = 'audio-permission-message';
@@ -81,7 +97,7 @@ function showAudioPermissionMessage() {
         max-width: 90%;
         text-align: center;
     `;
-    
+
     message.innerHTML = `
         <div style="display: flex; align-items: center; gap: 12px;">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -92,7 +108,7 @@ function showAudioPermissionMessage() {
             <span>🔊 Click anywhere on the page to enable buzzer sounds</span>
         </div>
     `;
-    
+
     // Add CSS animation
     const style = document.createElement('style');
     style.textContent = `
@@ -108,10 +124,10 @@ function showAudioPermissionMessage() {
         }
     `;
     document.head.appendChild(style);
-    
+
     // Add to page
     document.body.appendChild(message);
-    
+
     // Initialize audio on click
     const initAudio = () => {
         // Pre-play all audio elements with volume 0 to initialize them
@@ -124,19 +140,19 @@ function showAudioPermissionMessage() {
                 audio.volume = 1;
             }).catch(e => console.log('Audio init skipped:', audio.id));
         });
-        
+
         // Remove message with fade out
         message.style.animation = 'slideDown 0.3s ease-out reverse';
         setTimeout(() => message.remove(), 300);
-        
+
         // Remove click listener
         document.removeEventListener('click', initAudio);
         console.log('Audio system initialized');
     };
-    
+
     // Add click listener to entire document
     document.addEventListener('click', initAudio);
-    
+
     // Auto-hide after 10 seconds
     setTimeout(() => {
         if (document.getElementById('audio-permission-message')) {
@@ -151,4 +167,4 @@ document.addEventListener('DOMContentLoaded', () => {
     if (window.gameId) {
         initBuzzerListener(window.gameId);
     }
-});
+});

public/sounds/answer-incorrect.wav

@@ -13,4 +13,10 @@
 </audio>
 <audio id="buzzer-illuminate" preload="auto">
     <source src="/sounds/buzzer/illuminate.wav" type="audio/wav">
-</audio>
+</audio>
+<audio id="answer-correct" preload="auto">
+    <source src="/sounds/answer-correct.wav" type="audio/wav">
+</audio>
+<audio id="answer-incorrect" preload="auto">
+    <source src="/sounds/answer-incorrect.wav" type="audio/wav">
+</audio>

public/sounds/buzzer.mp3

@@ -17,5 +17,12 @@ export default defineConfig({
     ],
     server: {
         cors: true,
+        host: true,
+        port: 5173,
+        hmr: {
+            host: 'sierra.local',
+            protocol: 'http',
+            clientPort: 5173,
+        },
     },
 });