dont publish if lint fails

.github/workflows/ci.yml

@@ -18,6 +18,8 @@ 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:
@@ -31,15 +33,16 @@ jobs:
       image: oven/bun
     steps:
       - uses: actions/checkout@v4
-      - name: Install Biome
-        run: bun install -g biome
-      - name: Run Biome lint
-        run: biome lint .
-      - name: Run Biome format check
-        run: biome format .
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          version: latest
+          token: ${{ secrets.BIOME_TOKEN }}
+      - name: Run Biome
+        run: biome ci .
 
-  build-and-push-docker:
-    needs: [build]
+  create-and-publish-docker-image:
+    needs: [lint]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -57,7 +60,6 @@ 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:
@@ -67,8 +69,11 @@ jobs:
           password: ${{ secrets.GARRISON_DOCKER_PASSWORD }}
           script: |
             cd monitor-im-flur
-            echo "Deploying Docker container..."
+            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 stop || true
-            docker-compose rm || true
-            docker-compose up -d
+            docker-compose down
+            docker-compose up -d

Dockerfile

@@ -1,7 +1,5 @@
-FROM nginx
-
+FROM nginx:alpine
 COPY ./dist /usr/share/nginx/html
-
+COPY nginx.conf /etc/nginx/nginx.conf
 EXPOSE 80
-
 CMD ["nginx", "-g", "daemon off;"]

biome.json

@@ -6,7 +6,7 @@
     },
     "files": {
         "ignoreUnknown": false,
-        "includes": ["!**/dist/**"]
+        "includes": ["**", "!**/dist"]
     },
     "formatter": {
         "enabled": true,

bun.lock

@@ -37,6 +37,7 @@
         "typescript": "~5.8.3",
         "typescript-eslint": "^8.35.1",
         "vite": "^7.0.4",
+        "vite-plugin-mkcert": "^1.17.8",
       },
     },
   },
@@ -293,10 +294,14 @@
 
     "async-function": ["async-function@1.0.0", "", {}, "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA=="],
 
+    "asynckit": ["asynckit@0.4.0", "", {}, "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="],
+
     "available-typed-arrays": ["available-typed-arrays@1.0.7", "", { "dependencies": { "possible-typed-array-names": "^1.0.0" } }, "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ=="],
 
     "axe-core": ["axe-core@4.10.3", "", {}, "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg=="],
 
+    "axios": ["axios@1.11.0", "", { "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.4", "proxy-from-env": "^1.1.0" } }, "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA=="],
+
     "axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
 
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
@@ -321,6 +326,8 @@
 
     "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
 
+    "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
+
     "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
 
     "confusing-browser-globals": ["confusing-browser-globals@1.0.11", "", {}, "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA=="],
@@ -345,6 +352,8 @@
 
     "define-properties": ["define-properties@1.2.1", "", { "dependencies": { "define-data-property": "^1.0.1", "has-property-descriptors": "^1.0.0", "object-keys": "^1.1.1" } }, "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg=="],
 
+    "delayed-stream": ["delayed-stream@1.0.0", "", {}, "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="],
+
     "doctrine": ["doctrine@2.1.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw=="],
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
@@ -435,8 +444,12 @@
 
     "flatted": ["flatted@3.3.3", "", {}, "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="],
 
+    "follow-redirects": ["follow-redirects@1.15.11", "", {}, "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ=="],
+
     "for-each": ["for-each@0.3.5", "", { "dependencies": { "is-callable": "^1.2.7" } }, "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg=="],
 
+    "form-data": ["form-data@4.0.4", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "hasown": "^2.0.2", "mime-types": "^2.1.12" } }, "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow=="],
+
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
     "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
@@ -577,6 +590,10 @@
 
     "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
 
+    "mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],
+
+    "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
+
     "minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
 
     "minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
@@ -637,6 +654,8 @@
 
     "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
 
+    "proxy-from-env": ["proxy-from-env@1.1.0", "", {}, "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="],
+
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
@@ -759,6 +778,8 @@
 
     "vite": ["vite@7.0.5", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", "picomatch": "^4.0.2", "postcss": "^8.5.6", "rollup": "^4.40.0", "tinyglobby": "^0.2.14" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-1mncVwJxy2C9ThLwz0+2GKZyEXuC3MyWtAAlNftlZZXZDP3AJt5FmwcMit/IGGaNZ8ZOB2BNO/HFUB+CpN0NQw=="],
 
+    "vite-plugin-mkcert": ["vite-plugin-mkcert@1.17.8", "", { "dependencies": { "axios": "^1.8.3", "debug": "^4.4.0", "picocolors": "^1.1.1" }, "peerDependencies": { "vite": ">=3" } }, "sha512-S+4tNEyGqdZQ3RLAG54ETeO2qyURHWrVjUWKYikLAbmhh/iJ+36gDEja4OWwFyXNuvyXcZwNt5TZZR9itPeG5Q=="],
+
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
 
     "which-boxed-primitive": ["which-boxed-primitive@1.1.1", "", { "dependencies": { "is-bigint": "^1.1.0", "is-boolean-object": "^1.2.1", "is-number-object": "^1.1.1", "is-string": "^1.1.1", "is-symbol": "^1.1.1" } }, "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA=="],

githooks/pre-commit

@@ -0,0 +1,12 @@
+#!/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

index.html

@@ -1,4 +1,3 @@
-<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />

nginx.conf

@@ -0,0 +1,27 @@
+worker_processes 1;
+
+events { worker_connections 1024; }
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+    sendfile        on;
+    keepalive_timeout  65;
+
+    server {
+        listen 80;
+        server_name _;
+
+        root /usr/share/nginx/html;
+        index index.html;
+
+        location / {
+            try_files $uri $uri/ /index.html /git-hash.js;
+        }
+
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            expires 1y;
+            log_not_found off;
+        }
+    }
+}

package.json

@@ -42,6 +42,7 @@
         "prettier": "3.6.2",
         "typescript": "~5.8.3",
         "typescript-eslint": "^8.35.1",
-        "vite": "^7.0.4"
+        "vite": "^7.0.4",
+        "vite-plugin-mkcert": "^1.17.8"
     }
 }

pipeline/build-image.sh

@@ -1 +0,0 @@
-#!/bin/bash

pipeline/create-git-hash-html.sh

@@ -0,0 +1,11 @@
+#!/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

setup.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+git config --local core.hooksPath githooks

src/api/homeAssistant.ts

@@ -1,9 +1,8 @@
 const token =
-    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJkMjQ1OTg0YjliYzE0OTNjYTdmZDJmNTA3ODgzN2U1YSIsImlhdCI6MTc1MzQwMjAzNiwiZXhwIjoyMDY4NzYyMDM2fQ.fnLSFKPdk8lkAEB-4ekdGUJ1PSCBxcAyasQF1PyrD3k";
+    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3N2JmOTk1ODI3MzA0ZWIzOWYwNThjMzQ4YTY3ZDJkYyIsImlhdCI6MTc1NjQ3NTM4OSwiZXhwIjoyMDcxODM1Mzg5fQ.TZZ4SUGlERuIVrhzC_wfCN-qS1wSAKNN9uMMDjkqOgA";
 
 async function fetchTentHumidity() {
-    const url =
-        "/api/states/sensor.third_reality_inc_3rths0224z_luftfeuchtigkeit_2";
+    const url = `https://home.rivercry.com/api/states/sensor.third_reality_inc_3rths0224z_luftfeuchtigkeit_2`;
     const response = await fetch(url, {
         method: "GET",
         headers: {
@@ -16,7 +15,7 @@ async function fetchTentHumidity() {
 }
 
 async function fetchTentTemperature() {
-    const url = "/api/states/sensor.third_reality_inc_3rths0224z_temperatur_2";
+    const url = `https://home.rivercry.com/api/states/sensor.third_reality_inc_3rths0224z_temperatur_2`;
     const response = await fetch(url, {
         method: "GET",
         headers: {

src/components/Amogus/Amogus.tsx

@@ -0,0 +1,91 @@
+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 getImage = (sus: Amogus) => (sus.isImposter ? imposter : amogus);
+
+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 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 { innerWidth: width, innerHeight: height } = window;
+    const newCrewmates = list.slice();
+    for (const 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(initialCrewmates);
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            const c = crewmates;
+            setCrewmates(stepCrewmates(c));
+        }, 100);
+        return () => {
+            clearInterval(timer);
+        };
+    }, [crewmates]);
+
+    return <>{crewmates.map((c) => makeCrewmate(c))}</>;
+}

src/components/Amogus/style.module.css

@@ -0,0 +1,4 @@
+.container {
+    z-index: 100;
+    position: absolute;
+}

src/components/Card/Card.tsx

@@ -1,11 +1,26 @@
+import CardHeader from "@/components/CardHeader/CardHeader";
+
 import style from "./style.module.css";
 
 export default function Card({
-    active,
+    icon,
+    name,
     children,
+    active = false,
+    header = true,
 }: {
+    icon: string;
+    name: string;
     active?: boolean;
+    header?: boolean;
     children: React.ReactNode;
 }) {
-    return <div className={style.card}>{children}</div>;
+    return (
+        <div className={style.card}>
+            {header ? (
+                <CardHeader icon={icon} content={name} active={active} />
+            ) : null}
+            <div className={style.cardContent}>{children}</div>
+        </div>
+    );
 }

src/components/Card/style.module.css

@@ -1,4 +1,5 @@
 .card {
+    display: flex;
     flex-direction: column;
     justify-content: flex-start;
     background-color: #c0c0c0;
@@ -10,5 +11,6 @@
 }
 
 .cardContent {
-    padding: 1px 100px 30px 100px;
+    display: flex;
+    height: 100%;
 }

src/components/CardContainers/CardContainers.tsx

@@ -0,0 +1,9 @@
+import style from "./style.module.css";
+
+export function CardRow({ children }) {
+    return <div className={style.cardRow}>{children}</div>;
+}
+
+export function CardColumn({ children }) {
+    return <div className={style.cardColumn}>{children}</div>;
+}

src/components/CardContainers/style.module.css

@@ -0,0 +1,16 @@
+.cardColumn {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 30px;
+}
+
+.cardRow {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 30px;
+}

src/components/CardHeader/CardHeader.tsx

@@ -1,12 +1,14 @@
+import classNames from "classnames";
+
 import style from "./style.module.css";
 
 export default function CardHeader({ icon, content, active = false }) {
-    let containerClass = style.container;
-    if (active) {
-        containerClass += ` ${style.active}`;
-    }
     return (
-        <div className={containerClass}>
+        <div
+            className={classNames(style.container, {
+                [`${style.active}`]: active,
+            })}
+        >
             <div className={style.title}>
                 <div className={style.icon}>{icon}</div>
                 <div className={style.content}>{content}</div>

src/components/Dashboard/Dashboard.tsx

@@ -1,13 +1,19 @@
+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 CardHeader from "@/components/CardHeader/CardHeader";
+import {
+    CardColumn,
+    CardRow,
+} from "@/components/CardContainers/CardContainers";
 import Datetime from "@/components/Datetime/Datetime";
 import Flatastic from "@/components/Flatastic/Flatastic";
 import Footer from "@/components/Footer/Footer";
 import Terminal from "@/components/Terminal/Terminal";
 import Timetable from "@/components/Timetable/Timetable";
-import Weather from "../Weather/Weather";
+import Weather from "@/components/Weather/Weather";
+
 import style from "./style.module.css";
 
 export default function Dashboard() {
@@ -38,36 +44,45 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
-            <div className={style.cardWrapper}>
-                <Card>
-                    <CardHeader icon="🚊" content="Timetable" />
-                    <Timetable />
-                </Card>
-                <div className={style.clockAndWeather}>
-                    <div className={style.small}>
-                        <Card>
-                            <CardHeader icon="🕐" content="Clock" />
+            <Amogus />
+            <div className={style.body}>
+                <CardColumn>
+                    <Card icon="🚊" name="Timetable">
+                        <Timetable />
+                    </Card>
+
+                    <CardRow>
+                        <Card icon="🕐" name="Clock">
                             <Datetime />
                         </Card>
-                    </div>
-                    <Card>
-                        <CardHeader icon="🌤️" content="Weather" />
-                        <Weather />
-                    </Card>
-                </div>
-                <Card>
-                    <CardHeader icon="🔔" content="Terminal" active={true} />
-                    <Terminal />
-                </Card>
 
-                <Card>
-                    <CardHeader icon="🧹" content="Flatastic" />
-                    <Flatastic />
-                </Card>
-            </div>
-            <div className={style.footer}>
-                <Footer />
+                        <Card icon="🌤" name="Weather">
+                            <Weather />
+                        </Card>
+
+                        <div
+                            className={classNames(
+                                style.bouncingWindow,
+                                style.hidden,
+                            )}
+                        >
+                            <Card icon="🍁" name="420">
+                                <FourTwenty />
+                            </Card>
+                        </div>
+                    </CardRow>
+
+                    <Card icon="🔔" name="Terminal" active={true}>
+                        <Terminal />
+                    </Card>
+
+                    <Card icon="🧹" name="Flatastic">
+                        <Flatastic />
+                    </Card>
+                </CardColumn>
             </div>
+
+            <Footer />
         </div>
     );
 }

src/components/Dashboard/style.module.css

@@ -5,6 +5,12 @@
     transition: 0.5s;
 }
 
+.body {
+    height: 100%;
+    padding: 30px;
+    overflow: scroll;
+}
+
 /* 7 to 16  */
 .day {
     background-color: #007c7d;
@@ -20,28 +26,29 @@
     background-color: #2a3f55;
 }
 
-.clockAndWeather {
-    display: flex;
-    align-items: center;
+.amogus {
+    z-index: 100;
+    position: absolute;
+    scale: 60%;
+    animation:
+        x 10s linear infinite alternate,
+        y 7s linear infinite alternate;
 }
 
-.cardWrapper {
-    margin: 30px;
-    height: 100%;
-    gap: 30px;
-    flex-direction: column;
-    display: flex;
-    justify-content: flex-start;
+@keyframes x {
+    from {
+        left: 0;
+    }
+    to {
+        left: calc(100vw - 70px);
+    }
 }
 
-.small {
-    width: 45%;
-}
-
-.terminal {
-    margin: 2px;
-}
-
-.footer {
-    background-color: #c0c0c0;
+@keyframes y {
+    from {
+        top: 0;
+    }
+    to {
+        top: calc(100vh - 90px);
+    }
 }

src/components/Datetime/Datetime.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import clockImage from "/img/clock.png"
+import clockImage from "/img/clock.png";
 
 import style from "./style.module.css";
 

src/components/Footer/Footer.tsx

@@ -1,10 +1,7 @@
+import weedImage from "/img/weed.png";
 import style from "./style.module.css";
 
-import weedImage from "/img/weed.png"
-
 export default function Footer() {
-
-
     return (
         <div className={style.container}>
             <div className={style.taskbar}>
@@ -29,6 +26,9 @@ export default function Footer() {
                     <span className={style.window}>
                         <span className={style.windowIcon}>🧹</span>Flatastic
                     </span>
+                    <span className={style.window}>
+                        <span className={style.windowIcon}>⛅</span>Weather
+                    </span>
                 </div>
             </div>
         </div>

src/components/Footer/style.module.css

@@ -1,11 +1,12 @@
 .container {
+    background-color: #c0c0c0;
     height: 30px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
-    margin: 2px;
+    padding: 2px;
 }
 
 .taskbar {

src/components/FourTwenty/FourTwenty.tsx

@@ -0,0 +1,37 @@
+import style from "./style.module.css";
+
+// function Timer({ hours, minutes }: { hours: number; minutes: number }) {
+//     const x = hours > 0 ? `${hours}h ` : "";
+//     const y = minutes > 0 ? `${minutes % 60}m` : "";
+
+//     return (
+//         <div>
+//             <p>
+//                 {x}
+//                 {y}
+//             </p>
+//         </div>
+//     );
+// }
+
+// function FourTwentyLoading() {}
+
+function FourTwentySmoking() {
+    return (
+        <div className={style.container}>
+            <img
+                className={style.image}
+                src="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMjFlYnhzYzJnc3ZzejBnOGZzcHFpNGpxOHNrN2dwcnZ3NmZ2eWJ0dyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5xaOcLRnsWIB0CkfE3u/giphy.gif"
+                alt="Smoking"
+            />
+        </div>
+    );
+}
+
+export default function FourTwenty() {
+    return (
+        <div>
+            <FourTwentySmoking />
+        </div>
+    );
+}

src/components/FourTwenty/style.module.css

@@ -0,0 +1,5 @@
+.container img {
+    all: unset;
+    object-fit: contain;
+    width: 200px;
+}

src/components/Timetable/style.module.css

@@ -1,3 +1,4 @@
 .container {
     padding: 1px 100px 30px 100px;
+    width: 100%;
 }

vite.config.ts

@@ -1,9 +1,10 @@
 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()],
+    plugins: [react(), mkcert()],
     resolve: {
         alias: {
             "@": path.resolve(__dirname, "src"),
@@ -15,14 +16,4 @@ export default defineConfig({
             "@slices": path.resolve(__dirname, "src/store/slices"),
         },
     },
-    server: {
-        proxy: {
-            "/api": {
-                target: "https://home.rivercry.com",
-                changeOrigin: true,
-                secure: false,
-                rewrite: (path) => path.replace(/^\/api/, "/api"),
-            },
-        },
-    },
 });