Compare commits
27 Commits
930a844749
...
better-dep
| Author | SHA1 | Date | |
|---|---|---|---|
| 2c805ab513 | |||
| 2b21310dfb | |||
| 756e709181 | |||
| 9872b64fbd | |||
| b6c9c51ec3 | |||
| 83f872577b | |||
| 2b489e83ba | |||
| 6189b80ff1 | |||
| df2999516d | |||
| 24f0aa75d5 | |||
| 8f9b2c6abe | |||
| 6595a7f8bb | |||
| c95c9de320 | |||
| f7de45e47c | |||
| 7556d0496a | |||
| 7d68cce351 | |||
| e051a1aa4f | |||
| e9ef31e7ee | |||
| bba4960276 | |||
| b1d639f618 | |||
| 1702e0c408 | |||
| f87d3da269 | |||
| bbee38af9b | |||
| 55d86dbcaf | |||
| e366379a57 | |||
| 19aa35195f | |||
| 4926c3b388 |
23
.github/workflows/ci.yml
vendored
23
.github/workflows/ci.yml
vendored
@@ -18,6 +18,8 @@ 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:
|
||||||
@@ -31,15 +33,16 @@ jobs:
|
|||||||
image: oven/bun
|
image: oven/bun
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v4
|
||||||
- name: Install Biome
|
- name: Setup Biome
|
||||||
run: bun install -g biome
|
uses: biomejs/setup-biome@v2
|
||||||
- name: Run Biome lint
|
with:
|
||||||
run: biome lint --write
|
version: latest
|
||||||
- name: Run Biome format check
|
token: ${{ secrets.BIOME_TOKEN }}
|
||||||
run: biome format --write
|
- name: Run Biome
|
||||||
|
run: biome ci .
|
||||||
|
|
||||||
build-and-push-docker:
|
create-and-publish-docker-image:
|
||||||
needs: [build]
|
needs: [lint]
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v4
|
||||||
@@ -57,7 +60,6 @@ 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:
|
||||||
@@ -67,7 +69,8 @@ jobs:
|
|||||||
password: ${{ secrets.GARRISON_DOCKER_PASSWORD }}
|
password: ${{ secrets.GARRISON_DOCKER_PASSWORD }}
|
||||||
script: |
|
script: |
|
||||||
cd monitor-im-flur
|
cd monitor-im-flur
|
||||||
echo "Deploying Docker container..."
|
hyprctl dispatch exec 'pkill firefox'
|
||||||
|
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
|
||||||
|
|||||||
@@ -1,11 +1,5 @@
|
|||||||
FROM oven/bun as builder
|
|
||||||
WORKDIR /app
|
|
||||||
COPY . .
|
|
||||||
RUN bun install
|
|
||||||
RUN bun run build
|
|
||||||
|
|
||||||
FROM nginx:alpine
|
FROM nginx:alpine
|
||||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
COPY ./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;"]
|
||||||
@@ -6,7 +6,7 @@
|
|||||||
},
|
},
|
||||||
"files": {
|
"files": {
|
||||||
"ignoreUnknown": false,
|
"ignoreUnknown": false,
|
||||||
"includes": ["**","!**/dist"]
|
"includes": ["**", "!**/dist"]
|
||||||
},
|
},
|
||||||
"formatter": {
|
"formatter": {
|
||||||
"enabled": true,
|
"enabled": true,
|
||||||
|
|||||||
12
githooks/pre-commit
Executable file
12
githooks/pre-commit
Executable 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
|
||||||
@@ -16,7 +16,7 @@ http {
|
|||||||
index index.html;
|
index index.html;
|
||||||
|
|
||||||
location / {
|
location / {
|
||||||
try_files $uri $uri/ /index.html;
|
try_files $uri $uri/ /index.html /git-hash.js;
|
||||||
}
|
}
|
||||||
|
|
||||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
#!/bin/bash
|
|
||||||
11
pipeline/create-git-hash-html.sh
Executable file
11
pipeline/create-git-hash-html.sh
Executable 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
BIN
public/img/amogus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
public/img/imposter.png
Normal file
BIN
public/img/imposter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 MiB |
3
setup.sh
Executable file
3
setup.sh
Executable file
@@ -0,0 +1,3 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
git config --local core.hooksPath githooks
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3N2JmOTk1ODI3MzA0ZWIzOWYwNThjMzQ4YTY3ZDJkYyIsImlhdCI6MTc1NjQ3NTM4OSwiZXhwIjoyMDcxODM1Mzg5fQ.TZZ4SUGlERuIVrhzC_wfCN-qS1wSAKNN9uMMDjkqOgA";
|
const token =
|
||||||
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3N2JmOTk1ODI3MzA0ZWIzOWYwNThjMzQ4YTY3ZDJkYyIsImlhdCI6MTc1NjQ3NTM4OSwiZXhwIjoyMDcxODM1Mzg5fQ.TZZ4SUGlERuIVrhzC_wfCN-qS1wSAKNN9uMMDjkqOgA";
|
||||||
|
|
||||||
async function fetchTentHumidity() {
|
async function fetchTentHumidity() {
|
||||||
const url =
|
const url = `https://home.rivercry.com/api/states/sensor.third_reality_inc_3rths0224z_luftfeuchtigkeit_2`;
|
||||||
`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
Normal file
91
src/components/Amogus/Amogus.tsx
Normal file
@@ -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))}</>;
|
||||||
|
}
|
||||||
4
src/components/Amogus/style.module.css
Normal file
4
src/components/Amogus/style.module.css
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
.container {
|
||||||
|
z-index: 100;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
@@ -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} isActive={active} />
|
<CardHeader icon={icon} content={name} active={active} />
|
||||||
)}
|
) : null}
|
||||||
<div className={style.cardContent}>{children}</div>
|
<div className={style.cardContent}>{children}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -5,7 +5,6 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
margin: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardRow {
|
.cardRow {
|
||||||
|
|||||||
@@ -1,17 +1,14 @@
|
|||||||
import classNames from "classnames/bind";
|
import classNames from "classnames";
|
||||||
|
|
||||||
import style from "./style.module.css";
|
import style from "./style.module.css";
|
||||||
|
|
||||||
const styles = {
|
export default function CardHeader({ icon, content, active = false }) {
|
||||||
container: style.container,
|
|
||||||
active: style.active,
|
|
||||||
};
|
|
||||||
|
|
||||||
const cx = classNames.bind(styles);
|
|
||||||
|
|
||||||
export default function CardHeader({ icon, content, isActive = false }) {
|
|
||||||
return (
|
return (
|
||||||
<div className={cx("container", { active: isActive })}>
|
<div
|
||||||
|
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>
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
|
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,
|
||||||
@@ -42,29 +44,43 @@ export default function Dashboard() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`${style.dashboard} ${scheme}`}>
|
<div className={`${style.dashboard} ${scheme}`}>
|
||||||
<CardColumn>
|
<Amogus />
|
||||||
<Card icon="🚊" name="Timetable">
|
<div className={style.body}>
|
||||||
<Timetable />
|
<CardColumn>
|
||||||
</Card>
|
<Card icon="🚊" name="Timetable">
|
||||||
|
<Timetable />
|
||||||
<CardRow>
|
|
||||||
<Card icon="🕐" name="Clock">
|
|
||||||
<Datetime />
|
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card icon="🌤" name="Weather">
|
<CardRow>
|
||||||
<Weather />
|
<Card icon="🕐" name="Clock">
|
||||||
|
<Datetime />
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<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>
|
||||||
</CardRow>
|
|
||||||
|
|
||||||
<Card icon="🔔" name="Terminal" active={true}>
|
<Card icon="🧹" name="Flatastic">
|
||||||
<Terminal />
|
<Flatastic />
|
||||||
</Card>
|
</Card>
|
||||||
|
</CardColumn>
|
||||||
<Card icon="🧹" name="Flatastic">
|
</div>
|
||||||
<Flatastic />
|
|
||||||
</Card>
|
|
||||||
</CardColumn>
|
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -5,6 +5,12 @@
|
|||||||
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;
|
||||||
@@ -19,3 +25,30 @@
|
|||||||
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -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";
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import style from "./style.module.css";
|
|
||||||
|
|
||||||
import weedImage from "/img/weed.png";
|
import weedImage from "/img/weed.png";
|
||||||
|
import style from "./style.module.css";
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
37
src/components/FourTwenty/FourTwenty.tsx
Normal file
37
src/components/FourTwenty/FourTwenty.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
5
src/components/FourTwenty/style.module.css
Normal file
5
src/components/FourTwenty/style.module.css
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
.container img {
|
||||||
|
all: unset;
|
||||||
|
object-fit: contain;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
@@ -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()],
|
||||||
|
|||||||
Reference in New Issue
Block a user