New Terminal

src/components/Terminal/Terminal.tsx

@@ -1,10 +1,24 @@
-import { useEffect } from "react";
 import { useHomeAssistantStore } from "@/store/homeAssistant";
+import { useEffect, useState } from "react";
 
-import pasta from "./pasta.ts";
 import style from "./style.module.css";
+import pasta from "./pasta.ts";
 
 export default function Terminal() {
+    const [index, setIndex] = useState(0);
+
+    // random shitpost every minute
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setIndex(Math.floor(Math.random() * pasta.length));
+        }, 60 * 1000);
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+
+    const text = pasta[index];
+
     const fetchHomeAssistantData = useHomeAssistantStore(
         (state) => state.fetch,
     );
@@ -23,19 +37,52 @@ export default function Terminal() {
 
     return (
         <div className={style.container}>
-            <span className={style.title}>
-                -[#rauchen]---muehlburger-bubatz-buben.de-
-            </span>
-            <span className={style.infoMessage}>
-                <span className={style.bubatzBot}>[BubatzBot]:</span>
-                **UPDATE** Tent: <b>{tentTemperature}°C</b>,{" "}
-                <b>{tentHumidity}%</b>
-            </span>
-
-            <span className={style.message}>
-                <span className={style.pastaBot}>[anonymous]:</span>
-                <span className={style.pasta}>{pasta[0]}</span>
-            </span>
+            <div className={style.input}>
+                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>{" "}
+                tentfetch
+            </div>
+            <div className={style.fetch}>
+                <span>
+                    <pre>
+                        {"      "}-///:.{"      "}
+                        <span className={style.username}>tent</span>@
+                        <span className={style.hostname}>home</span>
+                    </pre>
+                </span>
+                <span>
+                    <pre>
+                        {"     "}smhhhhmh\`{"   "}os{"        "}Arch Linux
+                    </pre>
+                </span>
+                <span>
+                    <pre>
+                        {"    "}:N{"      "}Ns{"    "}temp{"      "}
+                        <span className={style.temp}>{tentTemperature}°C</span>
+                    </pre>
+                </span>
+                <span>
+                    <pre>
+                        {"    "}hNNmmmmNNN{"    "}humidity{"  "}
+                        <span className={style.humidity}>{tentHumidity}%</span>
+                    </pre>
+                </span>
+                <span>
+                    <pre>
+                        {"    "}NNssussNNN{"    "}plants{"    "}
+                        <span className={style.plants}>4</span>
+                    </pre>
+                </span>
+                <span>
+                    <pre>
+                        {"  "}sNn:{"    "}sNNo
+                    </pre>
+                </span>
+            </div>
+            <div className={style.input}>
+                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>{" "}
+                cat msg.txt
+            </div>
+            <div className={style.msg}>{text}</div>
         </div>
     );
 }

src/components/Terminal/style.module.css

@@ -2,32 +2,48 @@
   display: flex;
   flex-direction: column;
   font-family: monospace;
-  font-size: 12pt;
-
+  font-size: 10pt;
   background-color: black;
   color: white;
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 285px;
+  height: 290px;
   overflow: hidden;
 }
 
-.title {
-  color: thistle;
-  margin-bottom: 12pt;
+.fetch {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 10px;
 }
 
-.bubatzBot {
-  color: skyblue;
-  padding-right: 5px
-}
-
-.pastaBot {
-  color: bisque;
-  padding-right: 5px
-}
-
-.infoMessage {
+.prompt {
   color: lightgreen;
 }
+
+.username {
+  color: violet;
+}
+
+.hostname {
+  color: skyblue;
+}
+
+.temp {
+  color: pink;
+  font-weight: bold;
+}
+
+.humidity {
+  color: skyblue;
+  font-weight: bold;
+}
+
+.plants {
+  color: lightgreen;
+}
+
+pre {
+  margin: 0;
+}