Bouncing Amogus

src/components/Amogus/Amogus.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+
+import style from "./style.module.css";
+
+import amogus from "/img/amogus.png";
+import imposter from "/img/imposter.png";
+
+type Amogus = {
+    isImposter: boolean;
+    posX: number;
+    posY: number;
+    speedX: number;
+    speedY: number;
+};
+
+const getImage = (sus: Amogus) => (sus.isImposter ? imposter : amogus);
+
+const initialCrewmates: Amogus[] = [
+    { key: "a", isImposter: true, posX: 10, posY: 20, speedX: 10, speedY: 30 },
+    {
+        key: "b",
+        isImposter: false,
+        posX: 400,
+        posY: 200,
+        speedX: 10,
+        speedY: -20,
+    },
+    {
+        key: "c",
+        isImposter: false,
+        posX: 900,
+        posY: 200,
+        speedX: -20,
+        speedY: 10,
+    },
+];
+
+const makeCrewmate = (crewmate: Amogus) => {
+    const image = getImage(crewmate);
+    return (
+        <div
+            key={crewmate.key}
+            className={style.container}
+            style={{ top: crewmate.posY, left: crewmate.posX }}
+        >
+            <img src={image} alt="Amogus" />
+        </div>
+    );
+};
+
+const stepCrewmates = (list: Amogus[]) => {
+    const { innerWidth: width, innerHeight: height } = window;
+    const newCrewmates = list.slice();
+    for (const c of newCrewmates) {
+        let newX = c.posX + c.speedX;
+        let newY = c.posY + c.speedY;
+        if (newX > width - 90) {
+            newX = width - 90;
+            c.speedX *= -1;
+        }
+        if (newX < 0) {
+            newX = 0;
+            c.speedX *= -1;
+        }
+        if (newY > height - 120) {
+            newY = height - 120;
+            c.speedY *= -1;
+        }
+        if (newY < 0) {
+            newY = 0;
+            c.speedY *= -1;
+        }
+        c.posX = newX;
+        c.posY = newY;
+    }
+    return newCrewmates;
+};
+
+export default function Amogus() {
+    const [crewmates, setCrewmates] = useState(initialCrewmates);
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            const c = crewmates;
+            setCrewmates(stepCrewmates(c));
+        }, 100);
+        return () => {
+            clearInterval(timer);
+        };
+    }, [crewmates]);
+
+    return <>{crewmates.map((c) => makeCrewmate(c))}</>;
+}

src/components/Amogus/style.module.css

@@ -0,0 +1,4 @@
+.container {
+    z-index: 100;
+    position: absolute;
+}

src/components/Dashboard/Dashboard.tsx

@@ -1,3 +1,5 @@
+import classNames from "classnames";
+
 import FourTwenty from "@components/FourTwenty/FourTwenty";
 import { useEffect, useState } from "react";
 import Card from "@/components/Card/Card";
@@ -11,7 +13,8 @@ import Footer from "@/components/Footer/Footer";
 import Terminal from "@/components/Terminal/Terminal";
 import Timetable from "@/components/Timetable/Timetable";
 import Weather from "@/components/Weather/Weather";
-import amogus from "/img/amogus.png";
+import Amogus from "@/components/Amogus/Amogus";
+
 import style from "./style.module.css";
 
 export default function Dashboard() {
@@ -42,9 +45,7 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
-            <div className={style.amogus}>
-                <img src={amogus} alt="Amogus" />
-            </div>
+            <Amogus />
             <div className={style.body}>
                 <CardColumn>
                     <Card icon="🚊" name="Timetable">
@@ -59,9 +60,17 @@ export default function Dashboard() {
                         <Card icon="🌤" name="Weather">
                             <Weather />
                         </Card>
-                        <Card icon="🍁" name="420">
-                            <FourTwenty />
-                        </Card>
+
+                        <div
+                            className={classNames(
+                                style.bouncingWindow,
+                                style.hidden,
+                            )}
+                        >
+                            <Card icon="🍁" name="420">
+                                <FourTwenty />
+                            </Card>
+                        </div>
                     </CardRow>
 
                     <Card icon="🔔" name="Terminal" active={true}>