Amogus cleanup

src/components/Amogus/Amogus.tsx

@@ -4,7 +4,6 @@ import imposter from "/img/imposter.png";
 import style from "./style.module.css";
 
 type Amogus = {
-    key: string;
     isImposter: boolean;
     posX: number;
     posY: number;
@@ -12,11 +11,14 @@ type Amogus = {
     speedY: number;
 };
 
+const amogusWidth = 70;
+const amogusHeight = 70;
+
 const { innerWidth: width, innerHeight: height } = window;
 
 const getImage = (sus: Amogus) => (sus.isImposter ? imposter : amogus);
 
-const makeInitialCrewmates: Amogus[] = () => {
+const makeInitialCrewmates = (): Amogus[] => {
     return [
         makeCrewmate(true),
         makeCrewmate(false),
@@ -24,22 +26,26 @@ const makeInitialCrewmates: Amogus[] = () => {
         makeCrewmate(false),
         makeCrewmate(false),
         makeCrewmate(false),
+        makeCrewmate(false),
+        makeCrewmate(false),
+        makeCrewmate(false),
     ];
 };
 
-const randNum: number = (min: number, max: number) =>
+const randNum = (min: number, max: number): number =>
     Math.random() * (max - min) + min;
 
-const makeCrewmate: Amogus = (imposter: boolean) => ({
+const makeCrewmate = (imposter: boolean): Amogus => ({
     isImposter: imposter,
-    posX: randNum(0, width - 90),
-    posY: randNum(0, height - 120),
-    speedX: Math.random() > 0.5 ? randNum(5, 15) : randNum(-5, -15),
-    speedY: Math.random() > 0.5 ? randNum(5, 15) : randNum(-5, -15),
+    posX: randNum(0, width - amogusWidth),
+    posY: randNum(0, height - amogusHeight),
+    speedX: Math.random() > 0.5 ? randNum(3, 10) : randNum(-3, -10),
+    speedY: Math.random() > 0.5 ? randNum(3, 10) : randNum(-3, -10),
 });
 
-const intersect: Bool = (c1: Crewmate, c2: Crewmate) =>
-    Math.abs(c1.posX - c2.posX) < 80 && Math.abs(c1.posY - c2.posY) < 90;
+const intersect = (c1: Amogus, c2: Amogus): boolean =>
+    Math.abs(c1.posX - c2.posX) < amogusWidth - 20 &&
+    Math.abs(c1.posY - c2.posY) < amogusHeight - 20;
 
 const doMove = (crewmates: Amogus[]) =>
     crewmates.map((c) => ({
@@ -48,19 +54,43 @@ const doMove = (crewmates: Amogus[]) =>
         posY: c.posY + c.speedY,
     }));
 
-const doCollision = (crewmates: Amogus[]) =>
+const doCollisionWalls = (crewmates: Amogus[]) =>
     crewmates.map((c) => {
-        if (c.posX > width - 90) {
-            return { ...c, posX: width - 90, speedX: c.speedX * -1 };
-        } else if (c.posX < 0) {
-            return { ...c, posX: 0, speedX: c.speedX * -1 };
-        } else if (c.posY > height - 120) {
-            return { ...c, posY: height - 120, speedY: c.speedY * -1 };
-        } else if (c.posY < 0) {
-            return { ...c, posY: 0, speedY: c.speedY * -1 };
+        if (c.posX > width - amogusWidth) {
+            return {
+                ...c,
+                posX: width - amogusWidth,
+                speedX: c.speedX * -1,
+            };
+        } else if (c.posX < -20) {
+            return { ...c, posX: -20, speedX: c.speedX * -1 };
+        } else if (c.posY > height - amogusHeight) {
+            return {
+                ...c,
+                posY: height - amogusHeight,
+                speedY: c.speedY * -1,
+            };
+        } else if (c.posY < -20) {
+            return { ...c, posY: -20, speedY: c.speedY * -1 };
         } else return c;
     });
 
+// TODO: This is ugly
+const doCollisionOthers = (crewmates: Amogus[]) =>
+    crewmates.map((c) => {
+        const intersections = crewmates
+            .filter((o) => o !== c) // don't collide with yourself pls
+            .filter((o) => intersect(c, o));
+
+        if (intersections.some((o) => Math.abs(o.posX - c.posX) < 50)) {
+            return { ...c, speedX: c.speedX * -1 };
+        }
+        if (intersections.some((o) => Math.abs(o.posY - c.posY) < 50)) {
+            return { ...c, speedY: c.speedY * -1 };
+        }
+        return c;
+    });
+
 const doKills = (crewmates: Amogus[]) => {
     const imposters = crewmates.filter((c) => c.isImposter);
     const alive = crewmates
@@ -88,7 +118,8 @@ export default function Amogus() {
     useEffect(() => {
         const timer = setInterval(() => {
             setCrewmates((c) => doMove(c));
-            setCrewmates((c) => doCollision(c));
+            setCrewmates((c) => doCollisionWalls(c));
+            setCrewmates((c) => doCollisionOthers(c));
             setCrewmates((c) => doKills(c));
             setCrewmates((c) => checkReset(c));
         }, 50);

src/components/Amogus/style.module.css

@@ -1,4 +1,8 @@
 .container {
     z-index: 100;
     position: absolute;
+    scale: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }

src/components/Dashboard/Dashboard.tsx

@@ -60,16 +60,9 @@ export default function Dashboard() {
                             <Weather />
                         </Card>
 
-                        <div
-                            className={classNames(
-                                style.bouncingWindow,
-                                style.hidden,
-                            )}
-                        >
-                            <Card icon="🍁" name="420">
-                                <FourTwenty />
-                            </Card>
-                        </div>
+                        <Card icon="🍁" name="420">
+                            <FourTwenty />
+                        </Card>
                     </CardRow>
 
                     <Card icon="🔔" name="Terminal" active={true}>

src/components/Dashboard/style.module.css

@@ -25,30 +25,3 @@
 .night {
     background-color: #2a3f55;
 }
-
-.amogus {
-    z-index: 100;
-    position: absolute;
-    scale: 60%;
-    animation:
-        x 10s linear infinite alternate,
-        y 7s linear infinite alternate;
-}
-
-@keyframes x {
-    from {
-        left: 0;
-    }
-    to {
-        left: calc(100vw - 70px);
-    }
-}
-
-@keyframes y {
-    from {
-        top: 0;
-    }
-    to {
-        top: calc(100vh - 90px);
-    }
-}