fix: 🐛 Splashcreen fade effects + placing and style of the text

✅ Closes: #82

CHANGELOG.md

@@ -4,7 +4,7 @@ Lost Dutchman Mine Change Log
 0.0.3 April 7, 2024
 -------------------
 
-
+- Enh #82: Adjustments to splash screen (MadejaMaciej)
 
 0.0.2 March 24, 2024
 -------------------

code-desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "california-49er-desktop-v1",
   "productName": "california-49er-desktop-v1",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Lost dutchman mine game for desktop.",
   "main": ".webpack/main",
   "scripts": {

code-desktop/src/components/Main.tsx

@@ -11,11 +11,12 @@ import { SavedGame } from "../types/game";
 
 // Holder for resize window timeout
 let timeoutId: NodeJS.Timeout = null;
+let lastTick = 0;
+let opacity = 0.2;
 
 function Main() {
-    // Variable for animation of splash screen
-    const [splashScreenOpacity, setSplashScreenOpacity] = useState(0.5);
-    // Variable to calculate delta time for splash screen animation (so it will always play in the same speed)
+    const [isOwnOpacity, setIsOwnOpacity] = useState(false);
+    // Variable for rerendering while opacity changes.
     const [lastUpdate, setLastUpdate] = useState(new Date().getTime());
     // Variable to store window dimensions and adjust what we see accordingly
     const [windowDimensions, setWindowDimensions] = useState({
@@ -105,19 +106,33 @@ function Main() {
         }
     }, [gameState, setScreen, setError]);
 
+    const setSplashScreenOpacity = useCallback((to: number) => {
+        if (to > 1) to = 1;
+        if (to < 0) to = 0;
+        opacity = to;
+    }, []);
+
+    const animationFrame = useCallback((tick: number) => {
+        if (screen !== 'splash') return;
+        if (isOwnOpacity) return;
+        if (lastTick === 0) lastTick = tick;
+        const delta = tick - lastTick;
+        lastTick = tick;
+        setSplashScreenOpacity(opacity + (0.03 * delta / 100));
+        setLastUpdate(new Date().getTime());
+
+        if (opacity < 1 && !isOwnOpacity) {
+            requestAnimationFrame(animationFrame);
+        }
+    }, [isOwnOpacity]);
+
     // Function to animate splash screen
-    const setSplashInterval = useCallback(() => {
-        setInterval(() => {
-            const now = new Date().getTime();
-            const delta = now - lastUpdate;
-            const deltaModifier = delta / 100
-            setLastUpdate(now);
-            setSplashScreenOpacity(splashScreenOpacity + (0.01 * deltaModifier));
-        }, 20);
-    }, [])
+    const setSplashAnimationLoop = useCallback(() => {
+        requestAnimationFrame(animationFrame);
+    }, [isOwnOpacity]);
 
     useEffect(() => {
-        setSplashInterval();
+        setSplashAnimationLoop();
 
         function handleResize() {
             if (timeoutId) {
@@ -137,26 +152,24 @@ function Main() {
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    }, []);
-
-    useEffect(() => {
-        // Clear animation interval when splash screen is fully visible
-        if (splashScreenOpacity >= 1 && screen === 'splash') {
-            const interval_id = setInterval(function(){}, Number.MAX_SAFE_INTEGER);
-
-            for (let i = 1; i < Number(interval_id); i += 1) {
-                clearInterval(i);
-            }
-        }
-    }, [splashScreenOpacity]);
+    }, [isOwnOpacity]);
 
     useEffect(() => {
         // Set document title based on language
         document.title = setText('title');
     }, [language])
 
     if (screen === 'splash') {
-        return <SplashScreen windowDimensions={windowDimensions} opacity={splashScreenOpacity} setScreen={setScreen} />;
+        return <SplashScreen 
+            windowDimensions={windowDimensions} 
+            opacity={opacity} 
+            setOpacity={setSplashScreenOpacity} 
+            setScreen={setScreen} 
+            setLastUpdate={setLastUpdate}
+            isOwnOpacity={isOwnOpacity}
+            setIsOwnOpacity={setIsOwnOpacity}
+            lastUpdate={lastUpdate}
+        />;
     }
 
     if (screen === 'game') {

code-desktop/src/components/game/Game.tsx

@@ -40,12 +40,6 @@ function Game({ savedGame, setGameState, windowDimensions, saveGame, loadGame }:
             document.removeEventListener('keydown', (e) => player.setKeyPressed(e.key));
             document.removeEventListener('keyup', (e) => player.setKeyPressed(null));
             document.removeEventListener('click', (e) => player.mouseMoveHandler(e, windowDimensions.width, canvasWidth));
-
-            const interval_id = setInterval(function(){}, Number.MAX_SAFE_INTEGER);
-
-            for (let i = 1; i < Number(interval_id); i += 1) {
-                clearInterval(i);
-            }
         }
     }, [windowDimensions, canvasWidth, opened])
 

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

@@ -1,15 +1,45 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useCallback } from "react";
 import Subtitle from "../common/Subtitle";
 import splash from "../../images/ui/cover.png";
 import introSound from "../../sounds/intro.wav";
 import { version } from "../../../package.json";
 import { SplashScreenProps } from "../../types/menu";
 
-function SplashScreen({ windowDimensions, opacity, setScreen }: SplashScreenProps) {
+let lastTick = 0;
+let ownOpacity = 1;
+
+function SplashScreen({ windowDimensions, opacity, setScreen, setLastUpdate, setIsOwnOpacity, isOwnOpacity, lastUpdate }: SplashScreenProps) {
+    const setOpacity = useCallback((value: number) => {
+        if (value > 1) value = 1;
+        if (value < 0) value = 0;
+        ownOpacity = value;
+    }, []);
+
+    const animationFrame = useCallback((tick: number) => {
+        if (lastTick === 0) lastTick = tick;
+        const delta = tick - lastTick;
+        lastTick = tick;
+        setOpacity(ownOpacity - (0.1 * delta / 100));
+        setLastUpdate(new Date().getTime());
+
+        if (ownOpacity > 0.2) {
+            requestAnimationFrame(animationFrame);
+        } else {
+            setScreen('menu');
+        }
+    }, [isOwnOpacity]);
+
+    // Function to animate splash screen
+    const setSplashAnimationLoop = useCallback(() => {
+        setIsOwnOpacity(true);
+        ownOpacity = opacity;
+        requestAnimationFrame(animationFrame);
+    }, [lastUpdate]);
+
     useEffect(() => {
         // On any press even, change splash screen to menu
         const handleKeyPress = () => {
-            setScreen('menu');
+            setSplashAnimationLoop();
         }
 
         document.addEventListener('keydown', handleKeyPress);
@@ -19,7 +49,7 @@ function SplashScreen({ windowDimensions, opacity, setScreen }: SplashScreenProp
             document.removeEventListener('keydown', handleKeyPress);
             document.removeEventListener('mousedown', handleKeyPress);
         }
-    }, [setScreen]);
+    }, [setScreen, lastUpdate]);
 
     return (
         <div>
@@ -28,12 +58,12 @@ function SplashScreen({ windowDimensions, opacity, setScreen }: SplashScreenProp
                 alt="Background splash screen" 
                 width={windowDimensions.width} 
                 height={windowDimensions.height} 
-                style={{ opacity, transition: 'linear' }}
+                style={{ opacity: isOwnOpacity ? ownOpacity : opacity, transition: 'linear' }}
             />
 
-            <audio autoPlay src={introSound} onEnded={() => setScreen('menu')}></audio>
-            <Subtitle text="Press any key to start" classes="white absolute bottom right z-index-1" />
-            <Subtitle text={`Game version: ${version}`} classes="white absolute bottom left z-index-1" />
+            <audio autoPlay src={introSound} onEnded={() => setSplashAnimationLoop()}></audio>
+            <Subtitle text="(press any key or click to continue)" classes="white absolute top-with-small-margin no-margin left z-index-1 text-shadow" />
+            <Subtitle text={version} classes="white absolute bottom-with-small-margin left no-margin z-index-1 text-shadow" />
         </div>
     )
 }

code-desktop/src/styles/index.css

@@ -65,6 +65,22 @@ body {
   top: 20px;
 }
 
+.top-with-small-margin {
+  top: 5px;
+}
+
+.bottom-with-small-margin {
+  bottom: 5px;
+}
+
+.no-margin {
+  margin: 0;
+}
+
+.text-shadow {
+  text-shadow: #000 2px 2px 2px;
+}
+
 .z-index-1 {
   z-index: 1;
 }

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

@@ -22,6 +22,11 @@ export type SplashScreenProps = {
     windowDimensions: WindowDimensions,
     opacity: number,
     setScreen: Function,
+    setOpacity: Function,
+    setLastUpdate: Function,
+    isOwnOpacity: boolean,
+    setIsOwnOpacity: Function,
+    lastUpdate: number,
 }
 
 export type DownMenuButtonProps = {