wg/monitor-im-flur
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: wg:better-deploy
Branches Tags
wg:main wg:windows95 wg:better-deploy wg:flatmates-times wg:ui-update
..
compare: wg:930a844749f9fe1a7e762116ac2f0286cfdeb063
Branches Tags
wg:main wg:windows95 wg:better-deploy wg:flatmates-times wg:ui-update

3 Commits
better-dep ... 930a844749

Author SHA1 Message Date
Arif Hasanic
930a844749 fix ci
All checks were successful
CI / build (push) Successful in 12s
Details
CI / lint (push) Successful in 6s
Details
CI / build-and-push-docker (push) Successful in 19s
Details
2025-08-30 23:21:52 +02:00
Arif Hasanic
6631101d3d fix typo in docker-compose file
All checks were successful
CI / build (push) Successful in 12s
Details
CI / lint (push) Successful in 9s
Details
CI / build-and-push-docker (push) Successful in 17s
Details
2025-08-30 23:12:22 +02:00
Arif Hasanic
01a8f18bae add nginx file to docker container
All checks were successful
CI / build (push) Successful in 13s
Details
CI / lint (push) Successful in 8s
Details
CI / build-and-push-docker (push) Successful in 20s
Details
2025-08-30 23:04:01 +02:00
23 changed files with 61 additions and 264 deletions
Expand all files Collapse all files

23
.github/workflows/ci.yml vendored
View File

@@ -18,8 +18,6 @@ jobs:
run: bun install run: bun install
- name: Build - name: Build
run: bun run build run: bun run build
- name: Write Git-Hash into html
run: ./pipeline/create-git-hash-html.sh
- name: Create Build Artifact - name: Create Build Artifact
uses: christopherhx/gitea-upload-artifact@v4 uses: christopherhx/gitea-upload-artifact@v4
with: with:
@@ -33,16 +31,15 @@ jobs:
image: oven/bun image: oven/bun
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
- name: Setup Biome - name: Install Biome
uses: biomejs/setup-biome@v2 run: bun install -g biome
with: - name: Run Biome lint
version: latest run: biome lint --write
token: ${{ secrets.BIOME_TOKEN }} - name: Run Biome format check
- name: Run Biome run: biome format --write
run: biome ci .
create-and-publish-docker-image: build-and-push-docker:
needs: [lint] needs: [build]
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
@@ -60,6 +57,7 @@ jobs:
run: docker build -t git.rivercry.com/wg/monitor-im-flur . run: docker build -t git.rivercry.com/wg/monitor-im-flur .
- name: Push Docker image - name: Push Docker image
run: docker push git.rivercry.com/wg/monitor-im-flur run: docker push git.rivercry.com/wg/monitor-im-flur
- name: Deploy via SSH - name: Deploy via SSH
uses: appleboy/ssh-action@v0.1.10 uses: appleboy/ssh-action@v0.1.10
with: with:
@@ -69,8 +67,7 @@ jobs:
password: ${{ secrets.GARRISON_DOCKER_PASSWORD }} password: ${{ secrets.GARRISON_DOCKER_PASSWORD }}
script: | script: |
cd monitor-im-flur cd monitor-im-flur
hyprctl dispatch exec 'pkill firefox' echo "Deploying Docker container..."
hyprctl dispatch exec 'firefox -kiosk localhost:9123'
git clean -dfx git clean -dfx
git reset --hard HEAD git reset --hard HEAD
git pull git pull

8
Dockerfile
View File

@@ -1,5 +1,11 @@
FROM oven/bun as builder
WORKDIR /app
COPY . .
RUN bun install
RUN bun run build
FROM nginx:alpine 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 COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80 EXPOSE 80
CMD ["nginx", "-g", "daemon off;"] CMD ["nginx", "-g", "daemon off;"]

12
githooks/pre-commit
View File

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

2
nginx.conf
View File

@@ -16,7 +16,7 @@ http {
index index.html; index index.html;
location / { 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)$ { location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {

1
pipeline/build-image.sh Executable file
View File

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

11
pipeline/create-git-hash-html.sh
View File

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

BIN
public/img/amogus.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 126 KiB

BIN
public/img/imposter.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 MiB

3
setup.sh
View File

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

6
src/api/homeAssistant.ts
View File

@@ -1,8 +1,8 @@
const token = const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3N2JmOTk1ODI3MzA0ZWIzOWYwNThjMzQ4YTY3ZDJkYyIsImlhdCI6MTc1NjQ3NTM4OSwiZXhwIjoyMDcxODM1Mzg5fQ.TZZ4SUGlERuIVrhzC_wfCN-qS1wSAKNN9uMMDjkqOgA";
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3N2JmOTk1ODI3MzA0ZWIzOWYwNThjMzQ4YTY3ZDJkYyIsImlhdCI6MTc1NjQ3NTM4OSwiZXhwIjoyMDcxODM1Mzg5fQ.TZZ4SUGlERuIVrhzC_wfCN-qS1wSAKNN9uMMDjkqOgA";
async function fetchTentHumidity() { 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, { const response = await fetch(url, {
method: "GET", method: "GET",
headers: { headers: {

91
src/components/Amogus/Amogus.tsx
View File

@@ -1,91 +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 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))}</>;
}

4
src/components/Amogus/style.module.css
View File

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

6
src/components/Card/Card.tsx
View File

@@ -17,9 +17,9 @@ export default function Card({
}) { }) {
return ( return (
<div className={style.card}> <div className={style.card}>
{header ? ( {header && (
<CardHeader icon={icon} content={name} active={active} /> <CardHeader icon={icon} content={name} isActive={active} />
) : null} )}
<div className={style.cardContent}>{children}</div> <div className={style.cardContent}>{children}</div>
</div> </div>
); );

1
src/components/CardContainers/style.module.css
View File

@@ -5,6 +5,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: 30px; gap: 30px;
margin: 30px;
} }
.cardRow { .cardRow {

17
src/components/CardHeader/CardHeader.tsx
View File

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

18
src/components/Dashboard/Dashboard.tsx
View File

@@ -1,7 +1,5 @@
import FourTwenty from "@components/FourTwenty/FourTwenty";
import classNames from "classnames";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Amogus from "@/components/Amogus/Amogus";
import Card from "@/components/Card/Card"; import Card from "@/components/Card/Card";
import { import {
CardColumn, CardColumn,
@@ -44,8 +42,6 @@ export default function Dashboard() {
return ( return (
<div className={`${style.dashboard} ${scheme}`}> <div className={`${style.dashboard} ${scheme}`}>
<Amogus />
<div className={style.body}>
<CardColumn> <CardColumn>
<Card icon="🚊" name="Timetable"> <Card icon="🚊" name="Timetable">
<Timetable /> <Timetable />
@@ -59,17 +55,6 @@ export default function Dashboard() {
<Card icon="🌤" name="Weather"> <Card icon="🌤" name="Weather">
<Weather /> <Weather />
</Card> </Card>
<div
className={classNames(
style.bouncingWindow,
style.hidden,
)}
>
<Card icon="🍁" name="420">
<FourTwenty />
</Card>
</div>
</CardRow> </CardRow>
<Card icon="🔔" name="Terminal" active={true}> <Card icon="🔔" name="Terminal" active={true}>
@@ -80,7 +65,6 @@ export default function Dashboard() {
<Flatastic /> <Flatastic />
</Card> </Card>
</CardColumn> </CardColumn>
</div>
<Footer /> <Footer />
</div> </div>

33
src/components/Dashboard/style.module.css
View File

@@ -5,12 +5,6 @@
transition: 0.5s; transition: 0.5s;
} }
.body {
height: 100%;
padding: 30px;
overflow: scroll;
}
/* 7 to 16 */ /* 7 to 16 */
.day { .day {
background-color: #007c7d; background-color: #007c7d;
@@ -25,30 +19,3 @@
.night { .night {
background-color: #2a3f55; 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);
}
}

2
src/components/Datetime/Datetime.tsx
View File

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

3
src/components/Footer/Footer.tsx
View File

@@ -1,6 +1,7 @@
import weedImage from "/img/weed.png";
import style from "./style.module.css"; import style from "./style.module.css";
import weedImage from "/img/weed.png";
export default function Footer() { export default function Footer() {
return ( return (
<div className={style.container}> <div className={style.container}>

37
src/components/FourTwenty/FourTwenty.tsx
View File

@@ -1,37 +0,0 @@
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>
);
}

5
src/components/FourTwenty/style.module.css
View File

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

2
vite.config.ts
View File

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