Bad collision

src/components/Amogus/Amogus.tsx

@@ -4,6 +4,7 @@ import imposter from "/img/imposter.png";
 import style from "./style.module.css";
 
 type Amogus = {
+    key: string;
     isImposter: boolean;
     posX: number;
     posY: number;
@@ -18,7 +19,7 @@ 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),
@@ -32,10 +33,10 @@ const makeInitialCrewmates = (): Amogus[] => {
     ];
 };
 
-const randNum = (min: number, max: number): number =>
+const randNum: number = (min: number, max: number) =>
     Math.random() * (max - min) + min;
 
-const makeCrewmate = (imposter: boolean): Amogus => ({
+const makeCrewmate: Amogus = (imposter: boolean) => ({
     isImposter: imposter,
     posX: randNum(0, width - amogusWidth),
     posY: randNum(0, height - amogusHeight),
@@ -43,7 +44,7 @@ const makeCrewmate = (imposter: boolean): Amogus => ({
     speedY: Math.random() > 0.5 ? randNum(3, 10) : randNum(-3, -10),
 });
 
-const intersect = (c1: Amogus, c2: Amogus): boolean =>
+const intersect: Bool = (c1: Crewmate, c2: Crewmate) =>
     Math.abs(c1.posX - c2.posX) < amogusWidth - 20 &&
     Math.abs(c1.posY - c2.posY) < amogusHeight - 20;
 
@@ -75,20 +76,17 @@ const doCollisionWalls = (crewmates: Amogus[]) =>
         } 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))
-            .filter((o) => intersect(c, o));
+            .filter((o) => Math.abs(o.posX - c.posX) > 1e-3) // don't collide with yourself pls
-
+            .filter((o) => Math.abs(o.posY - c.posY) > 1e-3);
         if (intersections.some((o) => Math.abs(o.posX - c.posX) < 50)) {
             return { ...c, speedX: c.speedX * -1 };
-        }
+        } else if (intersections.some((o) => Math.abs(o.posY - c.posY) < 50)) {
-        if (intersections.some((o) => Math.abs(o.posY - c.posY) < 50)) {
             return { ...c, speedY: c.speedY * -1 };
-        }
+        } else return c;
-        return c;
     });
 
 const doKills = (crewmates: Amogus[]) => {

src/components/Dashboard/Dashboard.tsx

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

src/components/Dashboard/style.module.css

@@ -25,3 +25,30 @@
 .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);
+    }
+}

vite.config.ts

@@ -1,10 +1,9 @@
 import path from "node:path";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
-import mkcert from "vite-plugin-mkcert";
 
 export default defineConfig({
-    plugins: [react(), mkcert()],
+    plugins: [react()],
     resolve: {
         alias: {
             "@": path.resolve(__dirname, "src"),