41 Commits

Author SHA1 Message Date
cb4ce4188e Amogus cleanup
All checks were successful
CI / build (pull_request) Successful in 12s
CI / lint (pull_request) Successful in 10s
CI / create-and-publish-docker-image (pull_request) Successful in 14s
CI / build (push) Successful in 12s
CI / lint (push) Successful in 9s
CI / create-and-publish-docker-image (push) Successful in 12s
2025-09-01 20:24:19 +02:00
53db7e795c Bad collision 2025-09-01 20:24:19 +02:00
3606f9b043 restart firefox after pull 2025-09-01 20:24:19 +02:00
5da900c1c3 Enhance Amogus 2025-09-01 20:24:19 +02:00
8653365af1 rename github folder
All checks were successful
CI / build (push) Successful in 13s
CI / lint (push) Successful in 9s
CI / create-and-publish-docker-image (push) Successful in 14s
2025-08-31 23:55:45 +02:00
d914f47640 Merge branch 'better-deploy'
Some checks failed
CI / build (push) Successful in 15s
CI / lint (push) Successful in 13s
CI / create-and-publish-docker-image (push) Has been cancelled
2025-08-31 21:04:52 +02:00
668d260fd6 fix typo in ci
All checks were successful
CI / build (push) Successful in 15s
CI / lint (push) Successful in 10s
CI / create-and-publish-docker-image (push) Successful in 18s
2025-08-31 18:36:41 +02:00
03dc0984f3 quic commit
Some checks failed
CI / build (push) Successful in 13s
CI / lint (push) Successful in 9s
CI / create-and-publish-docker-image (push) Failing after 16s
2025-08-31 18:26:33 +02:00
0d94904c50 set HYPRLAND_INSTANCE_SIGNATURE
Some checks failed
CI / build (push) Successful in 13s
CI / create-and-publish-docker-image (push) Failing after 7s
CI / lint (push) Successful in 8s
2025-08-31 18:25:32 +02:00
2c805ab513 dont publish if lint fails
All checks were successful
CI / build (push) Successful in 13s
CI / lint (push) Successful in 9s
CI / create-and-publish-docker-image (push) Successful in 11s
CI / build (pull_request) Successful in 12s
CI / lint (pull_request) Successful in 9s
CI / create-and-publish-docker-image (pull_request) Successful in 12s
2025-08-31 18:22:15 +02:00
2b21310dfb add githooks and setup.sh 2025-08-31 18:22:15 +02:00
756e709181 correct permission on shell script 2025-08-31 18:22:15 +02:00
9872b64fbd create git hash html 2025-08-31 18:22:15 +02:00
b6c9c51ec3 docker image now uses dist folder from build step for deploy 2025-08-31 18:22:15 +02:00
83f872577b ensure git-hash.js is in dist folder 2025-08-31 18:22:15 +02:00
2b489e83ba write git sha env variable into docker container 2025-08-31 18:22:15 +02:00
6189b80ff1 Bouncing Amogus
All checks were successful
CI / build (push) Successful in 12s
CI / lint (push) Successful in 11s
CI / create-and-publish-docker-image (push) Successful in 19s
2025-08-31 18:21:01 +02:00
df2999516d auto restart firefox after publish; write git hash into file for server
All checks were successful
CI / build (push) Successful in 13s
CI / lint (push) Successful in 10s
CI / create-and-publish-docker-image (push) Successful in 18s
2025-08-31 16:48:10 +02:00
24f0aa75d5 code style fix
All checks were successful
CI / build (push) Successful in 12s
CI / lint (push) Successful in 9s
CI / build-and-push-docker (push) Successful in 18s
2025-08-31 16:02:49 +02:00
8f9b2c6abe uncomment (the most) important code
Some checks failed
CI / build (push) Successful in 13s
CI / lint (push) Failing after 9s
CI / build-and-push-docker (push) Successful in 19s
2025-08-31 16:01:43 +02:00
6595a7f8bb fix code style issues
All checks were successful
CI / build (push) Successful in 13s
CI / lint (push) Successful in 9s
CI / build-and-push-docker (push) Successful in 18s
2025-08-31 15:59:22 +02:00
c95c9de320 fix code style issues 2025-08-31 15:58:58 +02:00
f7de45e47c add small 420 widget 2025-08-31 15:58:31 +02:00
7556d0496a Amogus 2025-08-31 01:10:19 +02:00
7d68cce351 fix code style 2025-08-30 23:51:26 +02:00
e051a1aa4f add token for biome 2025-08-30 23:51:26 +02:00
e9ef31e7ee use biome giithub action 2025-08-30 23:51:26 +02:00
bba4960276 use bunx to run biome 2025-08-30 23:51:26 +02:00
b1d639f618 run bun install before lint 2025-08-30 23:51:26 +02:00
1702e0c408 run multiple lint commands in one sub step 2025-08-30 23:51:26 +02:00
f87d3da269 Add missing semicolon 2025-08-30 23:33:55 +02:00
bbee38af9b Change margin to padding becaue I am dumb 2025-08-30 23:29:46 +02:00
55d86dbcaf fix ci
All checks were successful
CI / build (push) Successful in 12s
CI / lint (push) Successful in 9s
CI / build-and-push-docker (push) Successful in 18s
2025-08-30 23:24:51 +02:00
e366379a57 fix typo in docker-compose file 2025-08-30 23:24:51 +02:00
19aa35195f add nginx file to docker container 2025-08-30 23:24:51 +02:00
4926c3b388 Fix header and make content scroll on overflow 2025-08-30 23:17:10 +02:00
45a02b84f2 Fix timetable width
All checks were successful
CI / build (push) Successful in 11s
CI / lint (push) Successful in 8s
CI / build-and-push-docker (push) Successful in 12s
2025-08-30 22:52:18 +02:00
7face12353 use docker compose down command to stop container 2025-08-30 22:34:33 +02:00
59dc667c15 Fix card header alignment and add weather to footer 2025-08-30 22:30:17 +02:00
0347ead200 Add headers to card component 2025-08-30 22:04:30 +02:00
9dbb0d6b4d Card container components for a cleaner dashboard 2025-08-30 21:24:48 +02:00
27 changed files with 365 additions and 92 deletions

View File

@@ -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 --write
- name: Run Biome format check
run: biome format --write
- 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,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'

View File

@@ -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;"]

View File

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

12
githooks/pre-commit Executable file
View File

@@ -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

27
nginx.conf Normal file
View File

@@ -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;
}
}
}

View File

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

View File

@@ -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

BIN
public/img/amogus.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

BIN
public/img/imposter.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 MiB

3
setup.sh Executable file
View File

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

View File

@@ -1,8 +1,8 @@
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3N2JmOTk1ODI3MzA0ZWIzOWYwNThjMzQ4YTY3ZDJkYyIsImlhdCI6MTc1NjQ3NTM4OSwiZXhwIjoyMDcxODM1Mzg5fQ.TZZ4SUGlERuIVrhzC_wfCN-qS1wSAKNN9uMMDjkqOgA";
const token =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3N2JmOTk1ODI3MzA0ZWIzOWYwNThjMzQ4YTY3ZDJkYyIsImlhdCI6MTc1NjQ3NTM4OSwiZXhwIjoyMDcxODM1Mzg5fQ.TZZ4SUGlERuIVrhzC_wfCN-qS1wSAKNN9uMMDjkqOgA";
async function fetchTentHumidity() {
const url =
`https://home.rivercry.com/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: {

View File

@@ -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))}</>;
}

View File

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

View File

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

View File

@@ -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%;
}

View File

@@ -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>;
}

View File

@@ -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;
}

View File

@@ -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>

View File

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

View File

@@ -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;
}

View File

@@ -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";

View File

@@ -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>

View File

@@ -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 {

View File

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

View File

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

View File

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

View File

@@ -1,7 +1,7 @@
import path from "node:path";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import mkcert from 'vite-plugin-mkcert'
import mkcert from "vite-plugin-mkcert";
export default defineConfig({
plugins: [react(), mkcert()],