Bouncing Amogus

2025-08-31 18:13:08 +02:00
11 changed files with 118 additions and 149 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -18,8 +18,6 @@ jobs:
        run: bun install
      - name: Build
        run: bun run build
-      - name: Write Git-Hash into html
-        run: ./pipeline/create-git-hash-html.sh
      - name: Create Build Artifact
        uses: christopherhx/gitea-upload-artifact@v4
        with:
@@ -41,8 +39,8 @@ jobs:
      - name: Run Biome
        run: biome ci .

-  create-and-publish-docker-image:
-    needs: [lint]
+  build-and-push-docker:
+    needs: [build]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
@@ -60,6 +58,7 @@ jobs:
        run: docker build -t git.rivercry.com/wg/monitor-im-flur .
      - name: Push Docker image
        run: docker push git.rivercry.com/wg/monitor-im-flur
+      
      - name: Deploy via SSH
        uses: appleboy/ssh-action@v0.1.10
        with:
@@ -69,13 +68,10 @@ jobs:
          password: ${{ secrets.GARRISON_DOCKER_PASSWORD }}
          script: |
            cd monitor-im-flur
+            echo "Deploying Docker container..."
            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'
-            
--- a/8
+++ b/8
@@ -1,5 +1,11 @@
+FROM oven/bun as builder
+WORKDIR /app
+COPY . .
+RUN bun install
+RUN bun run build
+
 FROM nginx:alpine
-COPY ./dist /usr/share/nginx/html
+COPY --from=builder /app/dist /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/nginx.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
--- a/githooks/pre-commit
+++ b/githooks/pre-commit
@@ -1,12 +0,0 @@
-#!/bin/sh
-
-echo "Running pre-commit hooks..."
-
-biome check --write
-biome lint --write
-
-if git diff --quiet; then
-  exit 0
-else
-  git add -u
-fi
--- a/nginx.conf
+++ b/nginx.conf
@@ -16,7 +16,7 @@ http {
        index index.html;

        location / {
-            try_files $uri $uri/ /index.html /git-hash.js;
+            try_files $uri $uri/ /index.html;
        }

        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
--- a/pipeline/build-image.sh
+++ b/pipeline/build-image.sh
@@ -0,0 +1 @@
+#!/bin/bash
--- a/pipeline/create-git-hash-html.sh
+++ b/pipeline/create-git-hash-html.sh
@@ -1,11 +0,0 @@
-#!/bin/sh
-
-echo "<!DOCTYPE html>
-<html>
-<head>
-    <title>Git Hash</title>
-</head>
-<body>
-    <pre>GITHUB_SHA = '$GITHUB_SHA';</pre>
-</body>
-</html>" > dist/git-hash.html
--- a/setup.sh
+++ b/setup.sh
@@ -1,3 +0,0 @@
-#!/bin/sh
-
-git config --local core.hooksPath githooks
--- a/src/components/Amogus/Amogus.tsx
+++ b/src/components/Amogus/Amogus.tsx
@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
+
+import style from "./style.module.css";
+
 import amogus from "/img/amogus.png";
 import imposter from "/img/imposter.png";
-import style from "./style.module.css";

 type Amogus = {
    isImposter: boolean;
@@ -11,122 +13,81 @@ 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[] => {
-    return [
-        makeCrewmate(true),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-        makeCrewmate(false),
-    ];
-};
+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 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) => (
+const makeCrewmate = (crewmate: Amogus) => {
+    const image = getImage(crewmate);
+    return (
        <div
-        key={key}
+            key={crewmate.key}
            className={style.container}
            style={{ top: crewmate.posY, left: crewmate.posX }}
        >
-        <img src={getImage(crewmate)} alt="Amogus" />
+            <img src={image} alt="Amogus" />
        </div>
-);
+    );
+};
+
+const stepCrewmates = (list: Amogus[]) => {
+    const { innerWidth: width, innerHeight: height } = window;
+    const newCrewmates = list.slice();
+    for (let 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(() => makeInitialCrewmates());
+    const [crewmates, setCrewmates] = useState(initialCrewmates);

    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);
+            let c = crewmates;
+            setCrewmates(stepCrewmates(c));
+        }, 100);
        return () => {
            clearInterval(timer);
        };
    }, []);

-    return <>{crewmates.map((c, index) => renderCrewmate(c, index))}</>;
+    return <>{crewmates.map((c) => makeCrewmate(c))}</>;
 }
--- a/src/components/Amogus/style.module.css
+++ b/src/components/Amogus/style.module.css
@@ -1,8 +1,4 @@
 .container {
  z-index: 100;
  position: absolute;
-    scale: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -1,7 +1,7 @@
-import FourTwenty from "@components/FourTwenty/FourTwenty";
 import classNames from "classnames";
+
+import FourTwenty from "@components/FourTwenty/FourTwenty";
 import { useEffect, useState } from "react";
-import Amogus from "@/components/Amogus/Amogus";
 import Card from "@/components/Card/Card";
 import {
    CardColumn,
@@ -13,6 +13,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 "@/components/Amogus/Amogus";

 import style from "./style.module.css";

@@ -60,9 +61,16 @@ export default function Dashboard() {
                            <Weather />
                        </Card>

+                        <div
+                            className={classNames(
+                                style.bouncingWindow,
+                                style.hidden,
+                            )}
+                        >
                            <Card icon="🍁" name="420">
                                <FourTwenty />
                            </Card>
+                        </div>
                    </CardRow>

                    <Card icon="🔔" name="Terminal" active={true}>
--- a/src/components/Dashboard/style.module.css
+++ b/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);
+    }
+}