remove useless import

.gitea/workflows/ci.yml

@@ -69,11 +69,13 @@ jobs:
           password: ${{ secrets.GARRISON_DOCKER_PASSWORD }}
           script: |
             cd monitor-im-flur
-            hyprctl dispatch exec 'pkill firefox'
-            hyprctl dispatch exec 'firefox -kiosk localhost:9123'
             git clean -dfx
             git reset --hard HEAD
             git pull
             docker-compose pull
             docker-compose down
             docker-compose up -d
+            export HYPRLAND_INSTANCE_SIGNATURE=$(hyprctl instances -j | jq '.[0].instance' | tr -d "'\"")
+            hyprctl dispatch exec 'pkill firefox'
+            hyprctl dispatch exec 'firefox -kiosk localhost:9123'
+            

src/components/Amogus/Amogus.tsx

@@ -11,81 +11,122 @@ 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 initialCrewmates: Amogus[] = [
+const makeInitialCrewmates = (): Amogus[] => {
-    { key: "a", isImposter: true, posX: 10, posY: 20, speedX: 10, speedY: 30 },
+    return [
-    {
+        makeCrewmate(true),
-        key: "b",
+        makeCrewmate(false),
-        isImposter: false,
+        makeCrewmate(false),
-        posX: 400,
+        makeCrewmate(false),
-        posY: 200,
+        makeCrewmate(false),
-        speedX: 10,
+        makeCrewmate(false),
-        speedY: -20,
+        makeCrewmate(false),
-    },
+        makeCrewmate(false),
-    {
+        makeCrewmate(false),
-        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 randNum = (min: number, max: number): number =>
-    const { innerWidth: width, innerHeight: height } = window;
+    Math.random() * (max - min) + min;
-    const newCrewmates = list.slice();
+
-    for (const c of newCrewmates) {
+const makeCrewmate = (imposter: boolean): Amogus => ({
-        let newX = c.posX + c.speedX;
+    isImposter: imposter,
-        let newY = c.posY + c.speedY;
+    posX: randNum(0, width - amogusWidth),
-        if (newX > width - 90) {
+    posY: randNum(0, height - amogusHeight),
-            newX = width - 90;
+    speedX: Math.random() > 0.5 ? randNum(3, 10) : randNum(-3, -10),
-            c.speedX *= -1;
+    speedY: Math.random() > 0.5 ? randNum(3, 10) : randNum(-3, -10),
+});
+
+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) => ({
+        ...c,
+        posX: c.posX + c.speedX,
+        posY: c.posY + c.speedY,
+    }));
+
+const doCollisionWalls = (crewmates: Amogus[]) =>
+    crewmates.map((c) => {
+        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 (newX < 0) {
+        if (intersections.some((o) => Math.abs(o.posY - c.posY) < 50)) {
-            newX = 0;
+            return { ...c, speedY: c.speedY * -1 };
-            c.speedX *= -1;
         }
-        if (newY > height - 120) {
+        return c;
-            newY = height - 120;
+    });
-            c.speedY *= -1;
+
-        }
+const doKills = (crewmates: Amogus[]) => {
-        if (newY < 0) {
+    const imposters = crewmates.filter((c) => c.isImposter);
-            newY = 0;
+    const alive = crewmates
-            c.speedY *= -1;
+        .filter((c) => !c.isImposter)
-        }
+        .filter((c) => imposters.every((i) => !intersect(i, c)));
-        c.posX = newX;
+    return imposters.concat(alive);
-        c.posY = newY;
-    }
-    return newCrewmates;
 };
 
+const checkReset = (crewmates: Amogus[]) =>
+    crewmates.every((c) => c.isImposter) ? makeInitialCrewmates() : crewmates;
+
+const renderCrewmate = (crewmate: Amogus, key: number) => (
+    <div
+        key={key}
+        className={style.container}
+        style={{ top: crewmate.posY, left: crewmate.posX }}
+    >
+        <img src={getImage(crewmate)} alt="Amogus" />
+    </div>
+);
+
 export default function Amogus() {
-    const [crewmates, setCrewmates] = useState(initialCrewmates);
+    const [crewmates, setCrewmates] = useState(() => makeInitialCrewmates());
 
     useEffect(() => {
         const timer = setInterval(() => {
-            const c = crewmates;
+            setCrewmates((c) => doMove(c));
-            setCrewmates(stepCrewmates(c));
+            setCrewmates((c) => doCollisionWalls(c));
-        }, 100);
+            setCrewmates((c) => doCollisionOthers(c));
+            setCrewmates((c) => doKills(c));
+            setCrewmates((c) => checkReset(c));
+        }, 50);
         return () => {
             clearInterval(timer);
         };
-    }, [crewmates]);
+    }, []);
 
-    return <>{crewmates.map((c) => makeCrewmate(c))}</>;
+    return <>{crewmates.map((c, index) => renderCrewmate(c, index))}</>;
 }

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

@@ -1,5 +1,4 @@
 import FourTwenty from "@components/FourTwenty/FourTwenty";
-import classNames from "classnames";
 import { useEffect, useState } from "react";
 import Amogus from "@/components/Amogus/Amogus";
 import Card from "@/components/Card/Card";
@@ -60,16 +59,9 @@ export default function Dashboard() {
                             <Weather />
                         </Card>
 
-                        <div
+                        <Card icon="🍁" name="420">
-                            className={classNames(
+                            <FourTwenty />
-                                style.bouncingWindow,
+                        </Card>
-                                style.hidden,
-                            )}
-                        >
-                            <Card icon="🍁" name="420">
-                                <FourTwenty />
-                            </Card>
-                        </div>
                     </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);
-    }
-}

src/components/Flatastic/Flatastic.tsx

@@ -1,19 +1,53 @@
+import classNames from "classnames";
 import { useEffect } from "react";
 import { useFlatasticStore } from "@/store/flatastic";
-
 import type { FlatasticChore, FlatasticUser } from "@/types/flatasticChore";
-
 import style from "./style.module.css";
 
+function choreItem(chore: FlatasticChore, idToNameMap: Record<number, string>) {
+    let className = "";
+    let timeLeftInDays = null;
+
+    if (chore.rotationTime === -1) {
+        className = "irregular";
+    } else {
+        className = chore.timeLeftNext <= 0 ? "due" : "notDue";
+        timeLeftInDays = (
+            <span className={style.timeLeft}>
+                {Math.abs(Math.floor(chore.timeLeftNext / (60 * 60 * 24)))}d
+            </span>
+        );
+    }
+
+    return (
+        <li
+            key={chore.id}
+            className={classNames(style.chore, style[className])}
+        >
+            <span className={style.userName}>
+                {`${idToNameMap[chore.currentUser]}`}
+            </span>
+            : {chore.title} {timeLeftInDays} {"🪙".repeat(chore.points)}
+        </li>
+    );
+}
+
 export default function Flatastic() {
     const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
     const flatasticData = useFlatasticStore((state) => state.flatasticData);
     const chores = (flatasticData?.chores as FlatasticChore[]) || [];
+    const regularChores: FlatasticChore[] = [];
+    const irregularChores: FlatasticChore[] = [];
 
-    chores.sort(
+    chores.forEach((chore) => {
-        (a, b) =>
+        if (chore.rotationTime === -1) {
-            a.timeLeftNext - b.timeLeftNext && b.rotationTime - a.rotationTime,
+            irregularChores.push(chore);
-    );
+        } else {
+            regularChores.push(chore);
+        }
+    });
+
+    regularChores.sort((a, b) => a.lastDoneDate - b.lastDoneDate);
 
     const users = flatasticData?.users;
     const idToNameMap: Record<number, string> = {};
@@ -23,44 +57,28 @@ export default function Flatastic() {
 
     useEffect(() => {
         fetchFlatasticData();
+
         const interval = setInterval(() => {
             fetchFlatasticData();
         }, 60000);
+
         return () => clearInterval(interval);
     }, [fetchFlatasticData]);
 
-    const choresRender = chores.map((chore) => {
+    const regularChoresRender = regularChores.map((chore) => {
-        let className = "";
+        return choreItem(chore, idToNameMap);
-        let timeLeftInDays = null;
+    });
 
-        if (chore.rotationTime === -1) {
+    const irregularChoresRender = irregularChores.map((chore) => {
-            className = "irregular";
+        return choreItem(chore, idToNameMap);
-        } else {
-            className = chore.timeLeftNext <= 0 ? "due" : "notDue";
-            timeLeftInDays = (
-                <span className={style.timeLeft}>
-                    {Math.abs(Math.floor(chore.timeLeftNext / (60 * 60 * 24)))}d
-                </span>
-            );
-        }
-
-        return (
-            <li
-                key={chore.id}
-                className={[style.chore, style[className]].join(" ")}
-            >
-                <span className={style.userName}>
-                    {`${idToNameMap[chore.currentUser]}`}
-                </span>
-                : {chore.title} {timeLeftInDays} {"🪙".repeat(chore.points)}
-            </li>
-        );
     });
 
     return (
         <div className={style.container}>
             <h1>Chores</h1>
-            <ul className={style.choreList}>{choresRender}</ul>
+            <ul className={style.choreList}>
+                {[...regularChoresRender, ...irregularChoresRender]}
+            </ul>
         </div>
     );
 }

src/types/flatasticChore.ts

@@ -16,7 +16,7 @@ interface FlatasticChore {
     points: number;
     rotationTime: number;
     currentUser: number;
-    lastDoneDate: string;
+    lastDoneDate: number;
     timeLeftNext: number;
 }