add githooks and setup.sh

.github/workflows/ci.yml

@@ -42,7 +42,7 @@ jobs:
         run: biome ci .
 
   create-and-publish-docker-image:
-    needs: [lint]
+    needs: [build]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -69,13 +69,11 @@ 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

@@ -1,132 +0,0 @@
-import { useEffect, useState } from "react";
-import amogus from "/img/amogus.png";
-import imposter from "/img/imposter.png";
-import style from "./style.module.css";
-
-type Amogus = {
-    isImposter: boolean;
-    posX: number;
-    posY: number;
-    speedX: number;
-    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[] => {
-    return [
-        makeCrewmate(true),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-    ];
-};
-
-const randNum = (min: number, max: number): number =>
-    Math.random() * (max - min) + min;
-
-const makeCrewmate = (imposter: boolean): Amogus => ({
-    isImposter: imposter,
-    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 = (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 (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
-        .filter((c) => !c.isImposter)
-        .filter((c) => imposters.every((i) => !intersect(i, c)));
-    return imposters.concat(alive);
-};
-
-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(() => makeInitialCrewmates());
-
-    useEffect(() => {
-        const timer = setInterval(() => {
-            setCrewmates((c) => doMove(c));
-            setCrewmates((c) => doCollisionWalls(c));
-            setCrewmates((c) => doCollisionOthers(c));
-            setCrewmates((c) => doKills(c));
-            setCrewmates((c) => checkReset(c));
-        }, 50);
-        return () => {
-            clearInterval(timer);
-        };
-    }, []);
-
-    return <>{crewmates.map((c, index) => renderCrewmate(c, index))}</>;
-}

src/components/Amogus/style.module.css

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

src/components/Dashboard/Dashboard.tsx

@@ -1,7 +1,5 @@
 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";
 import {
     CardColumn,
@@ -13,7 +11,7 @@ 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 style from "./style.module.css";
 
 export default function Dashboard() {
@@ -44,7 +42,9 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
-            <Amogus />
+            <div className={style.amogus}>
+                <img src={amogus} alt="Amogus" />
+            </div>
             <div className={style.body}>
                 <CardColumn>
                     <Card icon="🚊" name="Timetable">
@@ -59,7 +59,6 @@ export default function Dashboard() {
                         <Card icon="🌤" name="Weather">
                             <Weather />
                         </Card>
-
                         <Card icon="🍁" name="420">
                             <FourTwenty />
                         </Card>

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);
+    }
+}