Add Card components

.devcontainer/devcontainer.json

@@ -1,55 +1,57 @@
 {
-    "name": "bun",
+  "name": "bun",
-    "image": "oven/bun:debian",
+  "image": "oven/bun:debian",
-    "privileged": true,
+  "privileged": true,
-    "features": {
+  "features": {
-        "ghcr.io/devcontainers/features/common-utils:1": {
+    "ghcr.io/devcontainers/features/common-utils:1": {
-            "version": "latest",
+      "version": "latest",
-            "configureZshAsDefaultShell": true,
+      "configureZshAsDefaultShell": true,
-            "username": "bun",
+      "username": "bun",
-            "userUid": "1000",
+      "userUid": "1000",
-            "userGid": "1000"
+      "userGid": "1000"
-        },
-        "ghcr.io/rocker-org/devcontainer-features/apt-packages:1": {
-            "packages": "stow,tmux,ripgrep,python3-venv,python3-virtualenv"
-        }
     },
-    "remoteUser": "bun",
+    "ghcr.io/rocker-org/devcontainer-features/apt-packages:1": {
-    "workspaceFolder": "/home/bun/ws",
+      "packages":  "stow,tmux,ripgrep,python3-venv,python3-virtualenv"
-    "workspaceMount": "source=${localWorkspaceFolder},target=/home/bun/ws,type=bind",
+    },
-    "containerEnv": {},
+  },
-    "runArgs": [
+  "remoteUser": "bun",
-        "--net=host",
+  "workspaceFolder": "/home/bun/ws",
-        "-e",
+  "workspaceMount": "source=${localWorkspaceFolder},target=/home/bun/ws,type=bind",
-        "DISPLAY=${env:DISPLAY}",
+  "containerEnv": {
-        "-e",
+  },
-        "TERM=${env:TERM}",
+  "runArgs": [
-        "-e",
+    "--net=host",
-        "SHELL=${env:SHELL}",
+    "-e",
-        "-v",
+    "DISPLAY=${env:DISPLAY}",
-        "${env:SSH_AUTH_SOCK}:/tmp/ssh-agent.socket",
+    "-e",
-        "-e",
+    "TERM=${env:TERM}",
-        "SSH_AUTH_SOCK=/tmp/ssh-agent.socket"
+    "-e",
-    ],
+    "SHELL=${env:SHELL}",
-    "mounts": [
+    "-v",
-        {
+    "${env:SSH_AUTH_SOCK}:/tmp/ssh-agent.socket",
-            "source": "/tmp/.X11-unix",
+    "-e",
-            "target": "/tmp/.X11-unix",
+    "SSH_AUTH_SOCK=/tmp/ssh-agent.socket"
-            "type": "bind",
+  ],
-            "consistency": "cached"
+  "mounts": [
-        },
+    {
-        {
+      "source": "/tmp/.X11-unix",
-            "source": "/dev/dri",
+      "target": "/tmp/.X11-unix",
-            "target": "/dev/dri",
+      "type": "bind",
-            "type": "bind",
+      "consistency": "cached"
-            "consistency": "cached"
+    },
-        },
+    {
-        {
+      "source": "/dev/dri",
-            "source": "/dev/shm",
+      "target": "/dev/dri",
-            "target": "/dev/shm",
+      "type": "bind",
-            "type": "bind",
+      "consistency": "cached"
-            "consistency": "cached"
+    },
-        }
+    {
-    ],
+      "source": "/dev/shm",
-    "postCreateCommand": {}
+      "target": "/dev/shm",
+      "type": "bind",
+      "consistency": "cached"
+    }
+  ],
+  "postCreateCommand": {
+  }
 }

.github/workflows/ci.yml

@@ -16,8 +16,10 @@ jobs:
       - uses: actions/checkout@v4
       - name: Install Biome
         run: bun install -g biome
-      - name: Biome CI
+      - name: Biome Check
-        run: biome ci
+        run: biome check
+      - name: Biome Lint
+        run: biome lint
 
   build:
     runs-on: ubuntu-latest

src/App.tsx

@@ -3,7 +3,11 @@ import "@/App.css";
 import Dashboard from "@/components/Dashboard/Dashboard";
 
 function App() {
-    return <Dashboard />;
+    return (
+        <>
+            <Dashboard />
+        </>
+    );
 }
 
 export default App;

src/components/Card/Card.tsx

@@ -0,0 +1,5 @@
+import style from "./style.module.css";
+
+export default function Card({ active, children }) {
+    return <div className={style.card}>{children}</div>;
+}

src/components/Card/style.module.css

@@ -0,0 +1,14 @@
+.card {
+    flex-direction: column;
+    justify-content: flex-start;
+    background-color: #c0c0c0;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid #828282;
+    border-right: 2px solid #828282;
+    margin: 10px;
+}
+
+.cardContent {
+    padding: 1px 100px 30px 100px;
+}

src/components/CardHeader/CardHeader.tsx

@@ -0,0 +1,16 @@
+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={style.title}>
+                <div className={style.icon}>{icon}</div>
+                <div className={style.content}>{content}</div>
+            </div>
+        </div>
+    );
+}

src/components/CardHeader/style.module.css

@@ -0,0 +1,27 @@
+.container {
+    height: 28px;
+    display: flex;
+    flex-direction: row;
+    margin: 2px;
+    justify-content: space-between;
+    align-items: center;
+    color: #c0c0c0;
+    background-color: #808080;
+}
+
+.active {
+    color: white;
+    background-color: #000082;
+}
+
+.title {
+    display: flex;
+    flex-direction: row;
+    font-weight: bold;
+    gap: 7px;
+    padding-left: 5px;
+}
+
+.icon {
+    font-size: 10pt;
+}

src/components/Dashboard/Dashboard.tsx

@@ -1,42 +1,67 @@
-import Datetime from "@/components/Datetime/Datetime";
+import { useEffect, useState } from "react";
+
+import Card from "@/components/Card/Card";
+import CardColumn from "@/components/CardColumn/CardColumn";
+import CardHeader from "@/components/CardHeader/CardHeader";
 import Flatastic from "@/components/Flatastic/Flatastic";
-import Footer from "@/components/Footer/Footer";
+import HomeAssistant from "@/components/HomeAssistant/HomeAssistant";
-import Terminal from "@/components/Terminal/Terminal";
 import Timetable from "@/components/Timetable/Timetable";
+import Datetime from "@/components/Datetime/Datetime";
+import Terminal from "@/components/Terminal/Terminal";
+import Footer from "@/components/Footer/Footer";
 
 import style from "./style.module.css";
 
 export default function Dashboard() {
+    const schemes = [style.day, style.evening, style.night];
+    const [schemeIndex, setSchemeIndex] = useState(0);
+    const scheme = schemes[schemeIndex];
+
+    // change background color based on time of day
+    const time = useEffect(() => {
+        const timer = setInterval(
+            () => {
+                let d = new Date();
+                let hour = d.getHours();
+                if (hour >= 7 && hour < 16) {
+                    setSchemeIndex(0);
+                } else if (hour >= 16 && hour < 23) {
+                    setSchemeIndex(1);
+                } else {
+                    setSchemeIndex(2);
+                }
+            },
+            20 * 60 * 1000,
+        );
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+
     return (
-        <div className={style.dashboard}>
+        <div className={`${style.dashboard} ${scheme}`}>
             <div className={style.cardWrapper}>
-                <div className={style.card}>
+                <Card>
-                    <div className={style.cardHeaderInactive}>🚊 Timetable</div>
+                    <CardHeader icon="🚊" content="Timetable" />
-                    <div className={style.cardContent}>
+                    <Timetable />
-                        <Timetable />
+                </Card>
-                    </div>
-                </div>
 
-                <div className={style.clock}>
+                <div className={style.small}>
-                    <div className={style.card}>
+                    <Card>
-                        <div className={style.cardHeaderInactive}>🕐 Clock</div>
+                        <CardHeader icon="🕐" content="Clock" />
                         <Datetime />
-                    </div>
+                    </Card>
                 </div>
 
-                <div className={style.card}>
+                <Card>
-                    <div className={style.terminal}>
+                    <CardHeader icon="🔔" content="Terminal" active={true} />
-                        <div className={style.cardHeader}>🔔 Terminal</div>
+                    <Terminal />
-                        <Terminal />
+                </Card>
-                    </div>
-                </div>
 
-                <div className={style.card}>
+                <Card>
-                    <div className={style.cardHeaderInactive}>🧹 Flatastic</div>
+                    <CardHeader icon="🧹" content="Flatastic" />
-                    <div className={style.cardContent}>
+                    <Flatastic />
-                        <Flatastic />
+                </Card>
-                    </div>
-                </div>
             </div>
 
             <div className={style.footer}>

src/components/Dashboard/style.module.css

@@ -2,9 +2,24 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    transition: 0.5s;
+}
+
+/* 7 to 16  */
+.day {
     background-color: #007c7d;
 }
 
+/* 16 to 23 */
+.evening {
+    background-color: #3b5773;
+}
+
+/* 23 to 8 */
+.night {
+    background-color: #2a3f55;
+}
+
 .cardWrapper {
     margin: 30px;
     height: 100%;
@@ -14,42 +29,14 @@
     justify-content: flex-start;
 }
 
-.card {
+.small {
-    flex-direction: column;
-    justify-content: flex-start;
-    background-color: #c0c0c0;
-    border-top: 2px solid white;
-    border-left: 2px solid white;
-    border-bottom: 2px solid #828282;
-    border-right: 2px solid #828282;
-}
-
-.cardContent {
-    padding: 1px 100px 30px 100px;
-}
-
-.cardHeader {
-    height: 30px;
-    color: white;
-    background-color: #000082;
-    text-align: left;
-    padding-left: 5px;
-    font-weight: bold;
-}
-
-.cardHeaderInactive {
-    height: 30px;
-    color: #c0c0c0;
-    background-color: #808080;
-    text-align: left;
-    padding-left: 5px;
-    font-weight: bold;
-}
-
-.clock {
     width: 45%;
 }
 
+.terminal {
+    margin: 2px;
+}
+
 .footer {
     background-color: #c0c0c0;
 }

src/components/Datetime/Datetime.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from "react";
 import style from "./style.module.css";
 
+import { useState, useEffect } from "react";
+
 export default function Datetime() {
     const locale = "de";
     const [today, setDate] = useState(new Date());
@@ -26,7 +27,7 @@ export default function Datetime() {
     return (
         <div className={style.container}>
             <div className={style.icon}>
-                <img src="src/assets/clock.png" alt="Clock" />
+                <img src="src/assets/clock.png" />
             </div>
             <div className={style.textContainer}>
                 <div className={style.time}>

src/components/Datetime/style.module.css

@@ -1,21 +1,22 @@
 .container {
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    align-items: center;
+  align-items: center;
-    padding-right: 25px;
+  padding-right: 25px;
+
 }
 
 img {
-    height: 100px;
+  height: 100px;
-    scale: 130%;
+  scale: 130%;
-    object-fit: cover;
+  object-fit: cover;
 }
 
 .textContainer {
-    font-size: 16pt;
+  font-size: 16pt;
-    font-weight: bold;
+  font-weight: bold;
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
 }
 
 .divider {

src/components/Flatastic/Flatastic.tsx

@@ -1,64 +1,42 @@
 import { useEffect } from "react";
 import { useFlatasticStore } from "@/store/flatastic";
 
-import type { FlatasticChore, FlatasticUser } from "@/types/flatasticChore";
+import type { FlatasticChore } from "@/types/flatasticChore";
 
 import style from "./style.module.css";
 
+const idToNameMap: Record<number, string> = {
+    1836104: "Gruber",
+    1836101: "Darius",
+    1593610: "Arif",
+    1860060: "Rishab",
+};
+
 export default function Flatastic() {
-    const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
+    const fetchChores = useFlatasticStore((state) => state.fetch);
-    const flatasticData = useFlatasticStore((state) => state.flatasticData);
+    const chores = useFlatasticStore((state) => state.chores);
-    const chores = (flatasticData?.chores as FlatasticChore[]) || [];
-    chores.sort(
-        (a, b) =>
-            a.timeLeftNext - b.timeLeftNext && b.rotationTime - a.rotationTime,
-    );
-    const users = flatasticData?.users;
-    const idToNameMap: Record<number, string> = {};
-    users.forEach((user: FlatasticUser) => {
-        idToNameMap[user.id] = user.firstName;
-    });
 
     useEffect(() => {
-        fetchFlatasticData();
+        fetchChores();
         const interval = setInterval(() => {
-            fetchFlatasticData();
+            fetchChores();
         }, 60000);
         return () => clearInterval(interval);
-    }, [fetchFlatasticData]);
+    }, [fetchChores]);
-
-    const choresRender = chores.map((chore) => {
-        let className = "";
-        let timeLeftInDays = null;
-
-        if (chore.rotationTime === -1) {
-            className = "irregular";
-        } else {
-            className = chore.timeLeftNext <= 0 ? "due" : "notDue";
-            timeLeftInDays = <span className={style.timeLeft}>
-                {Math.abs(
-                    Math.floor(chore.timeLeftNext / (60 * 60 * 24)),
-                )}d
-            </span>;
-        }
-
-        return (
-            <li
-                key={chore.id}
-                className={[style.chore, style[className]].join(" ")}
-            >
-                <span className={style.userName}>
-                    {`${idToNameMap[chore.currentUser]}`}
-                </span>
-                : {chore.title} {timeLeftInDays} {"🪙".repeat(chore.points)}
-            </li>
-        );
-    });
 
     return (
-        <div>
+        <div className={style.container}>
             <h1>Chores</h1>
-            <ul className={style.choreList}>{choresRender}</ul>
+            <ul className={style.choreList}>
+                {chores.map((chore: FlatasticChore) => (
+                    <li key={chore.id} className={style.chore}>
+                        <span className={style.userName}>
+                            {idToNameMap[chore.currentUser]}
+                        </span>
+                        : {chore.title} - {"🪙".repeat(chore.points)}
+                    </li>
+                ))}
+            </ul>
         </div>
     );
 }

src/components/Flatastic/style.module.css

@@ -1,3 +1,7 @@
+.container {
+    padding: 1px 100px 30px 100px;
+}
+
 .choreList {
     list-style-type: none;
     display: flex;
@@ -20,19 +24,3 @@
 .userName {
     font-weight: bold;
 }
-
-.irregular {
-    background-color: #aaaaaa;
-}
-
-.due {
-    background-color: #e4877e;
-}
-
-.notDue {
-    background-color: #a6cfa6;
-}
-
-.timeLeft {
-    font-weight: bold;
-}

src/components/Footer/Footer.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import Marquee from "react-fast-marquee";
 
-import pasta from "./pasta.ts";
+import Datetime from "@/components/Datetime/Datetime";
+
 import style from "./style.module.css";
 
 export default function Footer() {
@@ -12,16 +13,22 @@ export default function Footer() {
                     <img
                         className={style.startIcon}
                         src="src/assets/weed.png"
-                        alt="4:20"
                     />
                     Start
                 </div>
-                <span className={style.divider}></span>
                 <div className={style.windows}>
-                    <span className={style.window}>🚊 Timetable</span>
+                    <span className={style.window}>
-                    <span className={style.window}>🕐 Clock</span>
+                        <span className={style.windowIcon}>🚊</span>Timetable
-                    <span className={style.windowActive}>🔔 Terminal</span>
+                    </span>
-                    <span className={style.window}>🧹 Flatastic</span>
+                    <span className={style.window}>
+                        <span className={style.windowIcon}>🕐</span>Clock
+                    </span>
+                    <span className={style.windowActive}>
+                        <span className={style.windowIcon}>🔔</span>Terminal
+                    </span>
+                    <span className={style.window}>
+                        <span className={style.windowIcon}>🧹</span>Flatastic
+                    </span>
                 </div>
             </div>
         </div>

src/components/Footer/pasta.ts

@@ -1,9 +0,0 @@
-const pasta = [
-    'Ok, so I was playing the hit game Among Us the other day, and when the game started, a red bean-shaped character that appeared to be wearing a spacesuit told me "shh," while having his index finger in front of where his mouth should be. I believe this act made this red bean character extremely suspicious. To understand why this red bean character is suspicious, we first must understand how the game “Among Us” works. The game consists of 10 bean-shaped characters, called crewmates, that are given tasks for them to complete. As these characters do their tasks, they may witness abnormal things that are not supposed to happen, such as the lights turning off on their own, sudden reactor meltdown and other crewmates dying. These acts show that there is an imposter among the crewmates that is sabotaging and is trying to kill everyone. Now why is this important to determine why the red bean is suspicious? Well now we know how the game works, now we must analyze the red bean’s actions. At the beginning of the game, the red bean tells us “shh” while having his index finger in front of where his mouth should be. This action suggests that the red bean wants us to be quiet, or keep our mouths shut. Now why would the red bean want us to do this? This could be because the red bean wants to limit our communication in order to prevent us from spreading information. What information does the red bean want to prevent from spreading? We can assume that the reason why the red bean wants to prevent us from spreading information, is because he is actually the imposter, and he is planning on committing the crimes mentioned earlier. He does not want others to find out about actions he will cause, therefore he does not want us to communicate with each other. This concludes the reason for why I believe the red bean from the hit game Among Us is suspicious. So if you happen to see a red bean-shaped character wearing a spacesuit, please be careful.',
-    "「真正的Emo」只有DC的硬核emo和90年代末 的 Screamo 局,而所謂的「中西部 Emo」 不過 是被真正 Emo所影響的另類搖滾罷了。每次聽到 有人說什麼 My Chemical Romance 不是正宗的 Emo,但又覺得 Sunny Day Real Estate 是的時 候,我他媽就覺得有夠智障,因為他們和 My Chemical Romance 其實一樣都是假 Emo(只能 說他們是被emo影響的樂團)。真正的 Emo 應該 聽起來很強烈、甚至帶著一些憤怒的活力!假 Emo則軟弱、自卑,那些廢物把精力和情感錯誤 地注入音樂當中,只能說他們所謂的emo是失敗 的嘗試罷了。一些真正的Emo 團包括Pg 99、 Rites of Spring、Cap'n Jazz(絕對是中西部樂 團圈裡面唯一真正的 Emo 樂團)和Loma Prieta。那些假的 Emo 團像是 American Football My Chemical Romance Mineral... 等。EMO就該屬於硬核,不是獨立曲風、更別說 是流行龐克、另類搖滾、或是他媽的任何其他主 流類型!!!",
-    '"YoU tOucHEd ThAt BlOcK So yOu HavE tO PuLl tHat OnE Out" Go fuck yourself, that\'s not how the fucking game is played, you dumb, the fuck, asshole. Quoted from the official Jenga rules: "Players may tap a block to find a loose one. Any blocks moved but not played should be replaced, unless doing so would make the tower fall." You\'ve never even fucking read the rules have you, you shithead idiot. What, is the game over in 3 seconds, if you just so happen to touch a load bearing block first? FUCKING NO DUMBASS. Learn to read you illiterate fuck.',
-    "I can't fucking take it any more. Among Us has singlehandedly ruined my life. The other day my teacher was teaching us Greek Mythology and he mentioned a pegasus and I immediately thought 'Pegasus? more like Mega Sus!!!!' and I've never wanted to kms more. I can't look at a vent without breaking down and fucking crying. I can't eat pasta without thinking 'IMPASTA??? THATS PRETTY SUS!!!!' Skit 4 by Kanye West. The lyrics ruined me. A Mongoose, or the 25th island of greece. The scientific name for pig. I can't fucking take it anymore. Please fucking end my suffering.",
-    "What the fuck did you just fucking say about me, you little bitch? I'll have you know I graduated top of my class in the Navy Seals, and I've been involved in numerous secret raids on Al-Quaeda, and I have over 300 confirmed kills. I am trained in gorilla warfare and I'm the top sniper in the entire US armed forces. You are nothing to me but just another target. I will wipe you the fuck out with precision the likes of which has never been seen before on this Earth, mark my fucking words. You think you can get away with saying that shit to me over the Internet? Think again, fucker. As we speak I am contacting my secret network of spies across the USA and your IP is being traced right now so you better prepare for the storm, maggot. The storm that wipes out the pathetic little thing you call your life. You're fucking dead, kid. I can be anywhere, anytime, and I can kill you in over seven hundred ways, and that's just with my bare hands. Not only am I extensively trained in unarmed combat, but I have access to the entire arsenal of the United States Marine Corps and I will use it to its full extent to wipe your miserable ass off the face of the continent, you little shit. If only you could have known what unholy retribution your little \"clever\" comment was about to bring down upon you, maybe you would have held your fucking tongue. But you couldn't, you didn't, and now you're paying the price, you goddamn idiot. I will shit fury all over you and you will drown in it. You're fucking dead, kiddo.",
-];
-
-export default pasta;

src/components/Footer/style.module.css

@@ -1,5 +1,5 @@
 .container {
-    height: 35px;
+    height: 30px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -9,44 +9,37 @@
 }
 
 .taskbar {
-    font-weight: bold;
     display: flex;
     flex-direction: row;
     text-align: left;
 }
 
 .startButton {
+    font-weight: bold;
     display: inline-flex;
     justify-content: space-around;
     align-items: center;
-    width: 100px;
+    width: 80px;
     border-top: 2px solid white;
     border-left: 2px solid white;
     border-bottom: 2px solid #828282;
     border-right: 2px solid #828282;
+    margin-right: 10px;
 }
 
 .startIcon {
-    height: 30px;
+    height: 20px;
-}
-
-.divider {
-    margin: auto 8px;
-    width: 4px;
-    height: 25px;
-    border-top: 2px solid white;
-    border-left: 2px solid white;
-    border-bottom: 2px solid #828282;
-    border-right: 2px solid #828282;
 }
 
 .windows {
     display: flex;
     flex-direction: row;
+    align-items: center;
     gap: 5px;
 }
 
 .window {
+    height: 25px;
     min-width: 150px;
     padding-left: 10px;
     display: inline-flex;
@@ -57,6 +50,11 @@
     border-right: 2px solid #828282;
 }
 
+.windowIcon {
+    font-size: 11pt;
+    margin-right: 5px;
+}
+
 .windowActive {
     min-width: 150px;
     padding-left: 10px;

src/components/Terminal/Terminal.tsx

@@ -84,9 +84,8 @@ export default function Terminal() {
             </div>
             <div className={style.msg}>{text}</div>
             <div className={style.input}>
-                <span className={style.prompt}>
+                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>
-                    [sus@home ~/hallway]{"$"}
+                {" █"}
-                </span>{" "}
             </div>
         </div>
     );

src/components/Terminal/pasta.ts

@@ -1,7 +1,7 @@
 const pasta = [
     'Ok, so I was playing the hit game Among Us the other day, and when the game started, a red bean-shaped character that appeared to be wearing a spacesuit told me "shh," while having his index finger in front of where his mouth should be. I believe this act made this red bean character extremely suspicious. To understand why this red bean character is suspicious, we first must understand how the game “Among Us” works. The game consists of 10 bean-shaped characters, called crewmates, that are given tasks for them to complete. As these characters do their tasks, they may witness abnormal things that are not supposed to happen, such as the lights turning off on their own, sudden reactor meltdown and other crewmates dying. These acts show that there is an imposter among the crewmates that is sabotaging and is trying to kill everyone. Now why is this important to determine why the red bean is suspicious? Well now we know how the game works, now we must analyze the red bean’s actions. At the beginning of the game, the red bean tells us “shh” while having his index finger in front of where his mouth should be. This action suggests that the red bean wants us to be quiet, or keep our mouths shut. Now why would the red bean want us to do this? This could be because the red bean wants to limit our communication in order to prevent us from spreading information. What information does the red bean want to prevent from spreading? We can assume that the reason why the red bean wants to prevent us from spreading information, is because he is actually the imposter, and he is planning on committing the crimes mentioned earlier. He does not want others to find out about actions he will cause, therefore he does not want us to communicate with each other. This concludes the reason for why I believe the red bean from the hit game Among Us is suspicious. So if you happen to see a red bean-shaped character wearing a spacesuit, please be careful.',
     "「真正的Emo」只有DC的硬核emo和90年代末 的 Screamo 局,而所謂的「中西部 Emo」 不過 是被真正 Emo所影響的另類搖滾罷了。每次聽到 有人說什麼 My Chemical Romance 不是正宗的 Emo,但又覺得 Sunny Day Real Estate 是的時 候,我他媽就覺得有夠智障,因為他們和 My Chemical Romance 其實一樣都是假 Emo(只能 說他們是被emo影響的樂團)。真正的 Emo 應該 聽起來很強烈、甚至帶著一些憤怒的活力!假 Emo則軟弱、自卑,那些廢物把精力和情感錯誤 地注入音樂當中,只能說他們所謂的emo是失敗 的嘗試罷了。一些真正的Emo 團包括Pg 99、 Rites of Spring、Cap'n Jazz(絕對是中西部樂 團圈裡面唯一真正的 Emo 樂團)和Loma Prieta。那些假的 Emo 團像是 American Football My Chemical Romance Mineral... 等。EMO就該屬於硬核,不是獨立曲風、更別說 是流行龐克、另類搖滾、或是他媽的任何其他主 流類型!!!",
-    '"YoU tOucHEd ThAt BlOcK So yOu HavE tO PuLl tHat OnE Out" Go fuck yourself, that\'s not how the fucking game is played, you dumb, the fuck, asshole. Quoted from the official Jenga rules: "Players may tap a block to find a loose one. Any blocks moved but not played should be replaced, unless doing so would make the tower fall." You\'ve never even fucking read the rules have you, you shithead idiot. What, is the game over in 3 seconds, if you just so happen to touch a load bearing block first? FUCKING NO DUMBASS. Learn to read you illiterate fuck.',
+    '\"YoU tOucHEd ThAt BlOcK So yOu HavE tO PuLl tHat OnE Out" Go fuck yourself, that\'s not how the fucking game is played, you dumb, the fuck, asshole. Quoted from the official Jenga rules: "Players may tap a block to find a loose one. Any blocks moved but not played should be replaced, unless doing so would make the tower fall." You\'ve never even fucking read the rules have you, you shithead idiot. What, is the game over in 3 seconds, if you just so happen to touch a load bearing block first? FUCKING NO DUMBASS. Learn to read you illiterate fuck.',
     "I can't fucking take it any more. Among Us has singlehandedly ruined my life. The other day my teacher was teaching us Greek Mythology and he mentioned a pegasus and I immediately thought 'Pegasus? more like Mega Sus!!!!' and I've never wanted to kms more. I can't look at a vent without breaking down and fucking crying. I can't eat pasta without thinking 'IMPASTA??? THATS PRETTY SUS!!!!' Skit 4 by Kanye West. The lyrics ruined me. A Mongoose, or the 25th island of greece. The scientific name for pig. I can't fucking take it anymore. Please fucking end my suffering.",
     "What the fuck did you just fucking say about me, you little bitch? I'll have you know I graduated top of my class in the Navy Seals, and I've been involved in numerous secret raids on Al-Quaeda, and I have over 300 confirmed kills. I am trained in gorilla warfare and I'm the top sniper in the entire US armed forces. You are nothing to me but just another target. I will wipe you the fuck out with precision the likes of which has never been seen before on this Earth, mark my fucking words. You think you can get away with saying that shit to me over the Internet? Think again, fucker. As we speak I am contacting my secret network of spies across the USA and your IP is being traced right now so you better prepare for the storm, maggot. The storm that wipes out the pathetic little thing you call your life. You're fucking dead, kid. I can be anywhere, anytime, and I can kill you in over seven hundred ways, and that's just with my bare hands. Not only am I extensively trained in unarmed combat, but I have access to the entire arsenal of the United States Marine Corps and I will use it to its full extent to wipe your miserable ass off the face of the continent, you little shit. If only you could have known what unholy retribution your little \"clever\" comment was about to bring down upon you, maybe you would have held your fucking tongue. But you couldn't, you didn't, and now you're paying the price, you goddamn idiot. I will shit fury all over you and you will drown in it. You're fucking dead, kiddo.",
 ];

src/components/Timetable/Timetable.tsx

@@ -18,7 +18,7 @@ export default function Timetable() {
     }, [fetchTimetable]);
 
     return (
-        <div className={style.wrapper}>
+        <div className={style.container}>
             <h1>Departures</h1>
             <DepartureList
                 departures={pStreet.departureList}

src/components/Timetable/style.module.css

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

src/components/TimetableRow/TimetableRow.tsx

@@ -29,12 +29,15 @@ const lineNumberToStyle = (number) => {
     switch (number) {
         case "S2":
             return styles.S2;
+            break;
         case "S5":
         case "S51":
             return styles.S5;
+            break;
         case "S1":
         case "S11":
             return styles.S1;
+            break;
         default:
             return styles.lineNumberDefault;
     }

src/index.css

@@ -1,11 +1,9 @@
 :root {
-    font-family: Arial, sans-serif;
+    font-family: Noto Sans Condensed, sans-serif;
     line-height: 1.5;
     font-weight: 400;
 
     color-scheme: light dark;
-    color: #213547;
-    background-color: #ffffff;
 
     font-synthesis: none;
     text-rendering: optimizeLegibility;
@@ -13,12 +11,6 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-}
-
 body {
     margin: 0;
     display: flex;
@@ -31,22 +23,3 @@ h1 {
     font-size: 3.2em;
     line-height: 1.1;
 }
-
-button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    background-color: #f9f9f9;
-    cursor: pointer;
-    transition: border-color 0.25s;
-}
-button:hover {
-    border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-}

src/store/flatastic.ts

@@ -1,23 +1,12 @@
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 import Flatastic from "@/api/flatastic";
-import type { FlatasticChore, FlatasticUser } from "@/types/flatasticChore";
+import type { FlatasticChore } from "@/types/flatasticChore";
-
-// biome-ignore format: deep
-function parseInformationData(data): FlatasticUser[] {
-    return data.flatmates.map((user: { id: string; firstName: string }) => ({
-        id: user.id as string,
-        firstName: user.firstName as string,
-    }));
-}
 
 const useFlatasticStore = create(
     devtools(
         (set) => ({
-            flatasticData: {
+            chores: [],
-                chores: [] as FlatasticChore[],
-                users: [] as FlatasticUser[],
-            },
             fetch: async () => {
                 if (!import.meta.env.VITE_FLATTASTIC_API_KEY) {
                     throw new Error("Flatastic API Key is not set");
@@ -26,14 +15,9 @@ const useFlatasticStore = create(
                     import.meta.env.VITE_FLATTASTIC_API_KEY,
                 );
                 const data = await flatastic.getTaskList();
-                const dataB = await flatastic.getInformation();
 
-                set({
+                console.log("Flatastic chores fetched:", data);
-                    flatasticData: {
+                set({ chores: data as FlatasticChore[] });
-                        chores: data as FlatasticChore[],
-                        users: parseInformationData(dataB),
-                    },
-                });
             },
         }),
         {

src/store/kvv.ts

@@ -16,6 +16,11 @@ const useKVVStore = create(
                 const hStreetJson = await hStreetData.json();
                 const pStreetJson = await pStreetData.json();
 
+                console.log("KVV departures fetched:", {
+                    hStreet: hStreetJson,
+                    pStreet: pStreetJson,
+                });
+
                 set({
                     hStreet: hStreetJson as DepartureType[],
                     pStreet: pStreetJson as DepartureType[],

src/types/flatasticChore.ts

@@ -1,13 +1,3 @@
-interface Flatastic {
-    users: Array<FlatasticUser>;
-    chores: Array<FlatasticChore>;
-}
-
-interface FlatasticUser {
-    id: number;
-    firstName: string;
-}
-
 interface FlatasticChore {
     id: number;
     title: string;
@@ -20,4 +10,4 @@ interface FlatasticChore {
     timeLeftNext: number;
 }
 
-export type { Flatastic, FlatasticChore, FlatasticUser };
+export type { FlatasticChore };