Amogus cleanup

.gitea/workflows/ci.yml

@@ -18,10 +18,12 @@ 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:
-          name: build
+          name: dist
           path: dist
 
   lint:
@@ -31,22 +33,23 @@ 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
       - uses: christopherhx/gitea-download-artifact@v4
         with:
-          name: build
-          path: build
+          name: dist
+          path: dist
       - name: Log in to Docker Registry
         uses: docker/login-action@v2
         with:
@@ -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,13 @@ 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 stop || true
-            docker-compose rm || true
-            docker-compose up -d
+            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'
+            

Dockerfile

@@ -1,9 +1,5 @@
-FROM oven/bun:latest
-
-WORKDIR /app
-
-COPY . .
-
-RUN bun install
-
-CMD ["bun", "run", "dev", "--host"]
+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

@@ -1,29 +1,27 @@
+worker_processes 1;
+
+events { worker_connections 1024; }
+
 http {
+    include       mime.types;
+    default_type  application/octet-stream;
+    sendfile        on;
+    keepalive_timeout  65;
 
-  include mime.types;
+    server {
+        listen 80;
+        server_name _;
 
-  set_real_ip_from        0.0.0.0/0;
-  real_ip_recursive       on;
-  real_ip_header          X-Forward-For;
-  limit_req_zone          $binary_remote_addr zone=mylimit:10m rate=10r/s;
+        root /usr/share/nginx/html;
+        index index.html;
 
-  server {
-    listen 80;
-    server_name localhost;
-    root /proxy;
-    limit_req zone=mylimit burst=70 nodelay;
-
-    location / {
-            root   /usr/share/nginx/html;
-            index  index.html index.htm;
-            try_files $uri /index.html;   
+        location / {
+            try_files $uri $uri/ /index.html /git-hash.js;
         }
 
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/html;
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            expires 1y;
+            log_not_found off;
+        }
     }
-  }
 }
-
-events {}

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

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

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/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/components/Amogus/Amogus.tsx

@@ -0,0 +1,132 @@
+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

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

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,38 @@ 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>
+
+                        <Card icon="🍁" name="420">
+                            <FourTwenty />
+                        </Card>
+                    </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;
@@ -19,29 +25,3 @@
 .night {
     background-color: #2a3f55;
 }
-
-.clockAndWeather {
-    display: flex;
-    align-items: center;
-}
-
-.cardWrapper {
-    margin: 30px;
-    height: 100%;
-    gap: 30px;
-    flex-direction: column;
-    display: flex;
-    justify-content: flex-start;
-}
-
-.small {
-    width: 45%;
-}
-
-.terminal {
-    margin: 2px;
-}
-
-.footer {
-    background-color: #c0c0c0;
-}

src/components/Datetime/Datetime.tsx

@@ -1,4 +1,7 @@
 import { useEffect, useState } from "react";
+
+import clockImage from "/img/clock.png";
+
 import style from "./style.module.css";
 
 export default function Datetime() {
@@ -26,7 +29,7 @@ export default function Datetime() {
     return (
         <div className={style.container}>
             <div className={style.icon}>
-                <img src="src/assets/clock.png" alt="Clock" />
+                <img src={clockImage} alt="Clock" />
             </div>
             <div className={style.textContainer}>
                 <div className={style.time}>

src/components/Footer/Footer.tsx

@@ -1,3 +1,4 @@
+import weedImage from "/img/weed.png";
 import style from "./style.module.css";
 
 export default function Footer() {
@@ -7,7 +8,7 @@ export default function Footer() {
                 <div className={style.startButton}>
                     <img
                         className={style.startIcon}
-                        src="src/assets/weed.png"
+                        src={weedImage}
                         alt="4:20"
                     />
                     Start
@@ -25,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,10 +1,10 @@
 import path from "node:path";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
+import mkcert from "vite-plugin-mkcert";
 
-// https://vite.dev/config/
 export default defineConfig({
-    plugins: [react()],
+    plugins: [react(), mkcert()],
     resolve: {
         alias: {
             "@": path.resolve(__dirname, "src"),
@@ -16,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"),
-            },
-        },
-    },
 });