lint

Half-Shot · Feb 19, 2025 · 27a5493 · 27a5493
1 parent 9474704
commit 27a5493
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 72 deletions.
diff --git a/src/frontend/components/app.tsx b/src/frontend/components/app.tsx
@@ -7,7 +7,7 @@ import { GameReactChannel } from "../../interop/gamechannel";
 import type { AssetData } from "../../assets/manifest";
 import { useObservableEagerState } from "observable-hooks";
 import { getClientConfigHook, useGameSettingsHook } from "../../settings";
-import { AnimatePresence, MotionConfig } from "framer-motion";
+import { MotionConfig } from "framer-motion";
 import {
   IRunningGameInstance,
   LocalGameInstance,
@@ -87,12 +87,10 @@ export function App() {
     [setClientConfig],
   );
 
-
   let root = null;
   if (!assetsLoaded) {
     root = null;
-  }
-  else if (gameState) {
+  } else if (gameState) {
     root = (
       <IngameView
         scenario={gameState.scenario}
@@ -102,17 +100,19 @@ export function App() {
       />
     );
   } else {
-    root = <Menu
-      onNewGame={onNewGame}
-      setClientConfig={setConfig}
-      lobbyGameRoomId={lobbyGameRoomId}
-      client={client}
-    />;
+    root = (
+      <Menu
+        onNewGame={onNewGame}
+        setClientConfig={setConfig}
+        lobbyGameRoomId={lobbyGameRoomId}
+        client={client}
+      />
+    );
   }
 
   return (
     <MotionConfig reducedMotion={settings.reduceMotion ? "always" : "user"}>
-      <LoadingPage visible={!assetsLoaded} progress={assetProgress}/>
+      <LoadingPage visible={!assetsLoaded} progress={assetProgress} />
       {root}
     </MotionConfig>
   );

diff --git a/src/frontend/components/atoms/loading.tsx b/src/frontend/components/atoms/loading.tsx
@@ -1,33 +1,51 @@
-import { useEffect, useRef } from "preact/hooks"
-import video from "../../../assets/ui/loading.webm"
+import { useEffect, useRef } from "preact/hooks";
+import video from "../../../assets/ui/loading.webm";
 
 const VIDEO_TIME_S = 3;
 
-export function Loading({progress, className, loadingDone}: {progress: number, className?: string, loadingDone: () => void}) {
-    const videoRef = useRef<HTMLVideoElement|null>(null);
+export function Loading({
+  progress,
+  className,
+  loadingDone,
+}: {
+  progress: number;
+  className?: string;
+  loadingDone: () => void;
+}) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
 
-    useEffect(() => {
-        if (!videoRef.current) {
-            return;
-        }
-        videoRef.current.addEventListener('ended', () => {
-            loadingDone();
-        })
-    }, [videoRef]);
+  useEffect(() => {
+    if (!videoRef.current) {
+      return;
+    }
+    videoRef.current.addEventListener("ended", () => {
+      loadingDone();
+    });
+  }, [videoRef]);
 
-    useEffect(() => {
-        if (!videoRef.current) {
-            return;
-        }
-        const expectedProgress = VIDEO_TIME_S * progress;
-        const currentTime = videoRef.current.currentTime;
-        if (expectedProgress > currentTime) {
-            videoRef.current.playbackRate = expectedProgress-currentTime > 2 ? 3 : 1;
-            videoRef.current.play();
-        } else if (currentTime >= expectedProgress) {
-            videoRef.current.pause();
-        }
-    }, [videoRef, progress]);
+  useEffect(() => {
+    if (!videoRef.current) {
+      return;
+    }
+    const expectedProgress = VIDEO_TIME_S * progress;
+    const currentTime = videoRef.current.currentTime;
+    if (expectedProgress > currentTime) {
+      videoRef.current.playbackRate =
+        expectedProgress - currentTime > 2 ? 3 : 1;
+      videoRef.current.play();
+    } else if (currentTime >= expectedProgress) {
+      videoRef.current.pause();
+    }
+  }, [videoRef, progress]);
 
-    return <video style={{maxWidth: "500px", width: "15vw"}} className={className} ref={videoRef} src={video} controls={false} preload="auto"></video>
-}
+  return (
+    <video
+      style={{ maxWidth: "500px", width: "15vw" }}
+      className={className}
+      ref={videoRef}
+      src={video}
+      controls={false}
+      preload="auto"
+    ></video>
+  );
+}
diff --git a/src/frontend/components/loading-page.tsx b/src/frontend/components/loading-page.tsx
@@ -1,38 +1,50 @@
-import { useCallback, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { Loading } from "./atoms/loading";
 import styles from "./loading-page.module.css";
-import { AnimatePresence, delay, useAnimate, usePresence } from "framer-motion";
+import { useAnimate } from "framer-motion";
 
-export function LoadingPage({progress, visible}: {visible: boolean, progress: number}) {
-    const [scope, animate] = useAnimate();
-    const [isLoadingDone, setLoadingDone] = useState(false);
+export function LoadingPage({
+  progress,
+  visible,
+}: {
+  visible: boolean;
+  progress: number;
+}) {
+  const [scope, animate] = useAnimate();
+  const [isLoadingDone, setLoadingDone] = useState(false);
 
-    useEffect(() => {
-        if (!scope.current) {
-            return;
-        }
-        async function runAnim() {
-            if (visible) {
-                await animate(
-                    "video",
-                    { opacity: 1 },
-                    { delay: 0, duration: 0.250, ease: "easeIn" },
-                );
-            } else if (isLoadingDone) {
-                await animate(
-                    scope.current,
-                    { opacity: 0 },
-                    { delay: 0.5, duration: 0.5, ease: "easeIn" },
-                );
-                console.log('safetoremove');
-            }
-        }
-        void runAnim();
-    }, [visible, isLoadingDone, scope.current]);
-
-    return <>
-        <main className={styles.main} ref={scope}>
-            <Loading className={styles.loading} progress={progress} loadingDone={() => setLoadingDone(true)}/>
-        </main>
-    </>;
-}
+  useEffect(() => {
+    if (!scope.current) {
+      return;
+    }
+    async function runAnim() {
+      if (visible) {
+        await animate(
+          "video",
+          { opacity: 1 },
+          { delay: 0, duration: 0.25, ease: "easeIn" },
+        );
+      } else if (isLoadingDone) {
+        await animate(
+          scope.current,
+          { opacity: 0 },
+          { delay: 0.5, duration: 0.5, ease: "easeIn" },
+        );
+        console.log("safetoremove");
+      }
+    }
+    void runAnim();
+  }, [visible, isLoadingDone, scope.current]);
+
+  return (
+    <>
+      <main className={styles.main} ref={scope}>
+        <Loading
+          className={styles.loading}
+          progress={progress}
+          loadingDone={() => setLoadingDone(true)}
+        />
+      </main>
+    </>
+  );
+}