diff --git a/.gitea/workflows/ci.yml b/.gitea/workflows/ci.yml index 9f083b1..d163181 100644 --- a/.gitea/workflows/ci.yml +++ b/.gitea/workflows/ci.yml @@ -69,12 +69,13 @@ jobs: password: ${{ secrets.GARRISON_DOCKER_PASSWORD }} script: | cd monitor-im-flur - export HYPRLAND_INSTANCE_SIGNATURE=$(hyprctl instances -j | jq '.[0].instance' | tr -d "'\"") - 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 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' + diff --git a/src/components/Amogus/Amogus.tsx b/src/components/Amogus/Amogus.tsx index c55620e..ada808b 100644 --- a/src/components/Amogus/Amogus.tsx +++ b/src/components/Amogus/Amogus.tsx @@ -4,7 +4,6 @@ import imposter from "/img/imposter.png"; import style from "./style.module.css"; type Amogus = { - key: string; isImposter: boolean; posX: number; posY: number; @@ -12,81 +11,122 @@ type Amogus = { speedY: number; }; +const amogusWidth = 70; +const amogusHeight = 70; + +const { innerWidth: width, innerHeight: height } = window; + 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 ( -
- Amogus -
- ); +const makeInitialCrewmates = (): Amogus[] => { + return [ + makeCrewmate(true), + makeCrewmate(false), + makeCrewmate(false), + makeCrewmate(false), + makeCrewmate(false), + makeCrewmate(false), + makeCrewmate(false), + makeCrewmate(false), + makeCrewmate(false), + ]; }; -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; +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 (newX < 0) { - newX = 0; - c.speedX *= -1; + if (intersections.some((o) => Math.abs(o.posY - c.posY) < 50)) { + return { ...c, speedY: c.speedY * -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; + 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) => ( +
+ Amogus +
+); + export default function Amogus() { - const [crewmates, setCrewmates] = useState(initialCrewmates); + const [crewmates, setCrewmates] = useState(() => makeInitialCrewmates()); useEffect(() => { const timer = setInterval(() => { - const c = crewmates; - setCrewmates(stepCrewmates(c)); - }, 100); + setCrewmates((c) => doMove(c)); + setCrewmates((c) => doCollisionWalls(c)); + setCrewmates((c) => doCollisionOthers(c)); + setCrewmates((c) => doKills(c)); + setCrewmates((c) => checkReset(c)); + }, 50); return () => { clearInterval(timer); }; - }, [crewmates]); + }, []); - return <>{crewmates.map((c) => makeCrewmate(c))}; + return <>{crewmates.map((c, index) => renderCrewmate(c, index))}; } diff --git a/src/components/Amogus/style.module.css b/src/components/Amogus/style.module.css index 02b7665..53ffe35 100644 --- a/src/components/Amogus/style.module.css +++ b/src/components/Amogus/style.module.css @@ -1,4 +1,8 @@ .container { z-index: 100; position: absolute; + scale: 50%; + display: flex; + justify-content: center; + align-items: center; } diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx index c951ed8..08602f9 100644 --- a/src/components/Dashboard/Dashboard.tsx +++ b/src/components/Dashboard/Dashboard.tsx @@ -60,16 +60,9 @@ export default function Dashboard() { -
- - - -
+ + + diff --git a/src/components/Dashboard/style.module.css b/src/components/Dashboard/style.module.css index 117536e..fe94495 100644 --- a/src/components/Dashboard/style.module.css +++ b/src/components/Dashboard/style.module.css @@ -25,30 +25,3 @@ .night { 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); - } -}