fix: 🐛 Sounds not working in web build

✅ Closes: #111

CHANGELOG.md

@@ -4,6 +4,7 @@ Lost Dutchman Mine Change Log
 0.2.2 April 21, 2024
 -------------------
 
+- Bug #111: Fix sounds on web version (MadejaMaciej)
 - Enh #112: Change dimensions and margins (MadejaMaciej)
 - Enh #23: Implement changing city map to terrain map when reaching bands (MadejaMaciej)
 - Enh #129: Change font to Lost Pixelised Font (MadejaMaciej)

code-desktop/src/components/Main.tsx

@@ -4,9 +4,11 @@ import Menu from "./ui/Menu";
 import PauseScreen from "./ui/PauseScreen";
 import Game from "./game/Game";
 import SplashScreen from "./ui/SplashScreen";
+import StartGame from "./ui/StartGame";
 import player from "../services/player";
 import { setText } from "../context/language";
 import { getWindowDimensions } from "../utils/window";
+import { isElectron } from "../utils/isElectron";
 import { SavedGame } from "../types/game";
 
 // Holder for resize window timeout
@@ -24,7 +26,7 @@ function Main() {
         width: window.innerWidth,
     });
     // Variable to store current screen
-    const [screen, setScreen] = useState('splash');
+    const [screen, setScreen] = useState(isElectron() ? 'splash' : 'browser-welcome-screen');
     // Variable to store game state (aca game save)
     const [gameState, setGameState] = useState({
         uuid: v4(),
@@ -125,16 +127,15 @@ function Main() {
         if (opacity < 1 && !isOwnOpacity) {
             requestAnimationFrame(animationFrame);
         }
-    }, [isOwnOpacity]);
+    }, [screen, isOwnOpacity]);
 
     // Function to animate splash screen
     const setSplashAnimationLoop = useCallback(() => {
+        if (screen !== 'splash') return;
         requestAnimationFrame(animationFrame);
-    }, [isOwnOpacity]);
+    }, [screen ,isOwnOpacity]);
 
     useEffect(() => {
-        setSplashAnimationLoop();
-
         function handleResize() {
             if (timeoutId) {
                 clearTimeout(timeoutId);
@@ -153,12 +154,20 @@ function Main() {
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    }, [isOwnOpacity]);
+    }, []);
+
+    useEffect(() => {
+        setSplashAnimationLoop();
+    }, [isOwnOpacity, screen])
 
     useEffect(() => {
         // Set document title based on language
         document.title = 'Lost Dutchman Mine';
-    }, [language])
+    }, [language]);
+
+    if (screen === 'browser-welcome-screen') {
+        return <StartGame setScreen={setScreen} />
+    }
 
     if (screen === 'splash') {
         return <SplashScreen 

code-desktop/src/components/ui/StartGame.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+import Title from "../common/Title";
+import Subtitle from "../common/Subtitle";
+import { StartScreenProps } from "../../types/menu";
+import { version } from "../../../package.json";
+
+function StartGame({ setScreen }: StartScreenProps) {
+
+    useEffect(() => {
+        const handleKeyPress = () => {
+            setScreen('splash');
+        }
+
+        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener('mousedown', handleKeyPress);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener('mousedown', handleKeyPress);
+        }
+    }, [])
+
+    return (
+        <div>
+            <Title text="Press any button to start a game" />
+            <Subtitle text={version} classes="white absolute bottom-with-small-margin left no-margin z-index-1 text-shadow" />
+        </div>
+    )
+}
+
+export default StartGame;

code-desktop/src/types/menu.d.ts

@@ -54,6 +54,10 @@ export type DownMenuButtonProps = {
     valueToPass?: unknown,
 }
 
+export type StartScreenProps = {
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+}
+
 export type LanguageProps = {
     language: string;
     setLanguage: React.Dispatch<React.SetStateAction<string>>;

code-desktop/src/utils/isElectron.ts

@@ -0,0 +1,18 @@
+export const isElectron = () => {
+    // Renderer process
+    if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
+        return true;
+    }
+
+    // Main process
+    if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
+        return true;
+    }
+
+    // Detect the user agent when the `nodeIntegration` option is set to true
+    if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
+        return true;
+    }
+
+    return false;
+}