refactor: use vanilla rendering

src/components/MusicPlayer.tsx

@@ -1,6 +1,19 @@
-import { useState } from "react";
 import { useTerminal } from "~/context/TerminalContext";
-import { Text } from "./Text";
+import { TerminalCanvas } from "~/utils/terminal/canvas";
+import { TerminalBoxElement } from "~/utils/terminal/elements/box";
+
+const theme = {
+  black: "#45475a",
+  red: "#f38ba8",
+  green: "#a6e3a1",
+  yellow: "#f9e2af",
+  blue: "#89bafa",
+  magenta: "#f5c2e7",
+  cyan: "#94e2d5",
+  white: "#bac2de",
+  grey: "#585B70",
+  lightGrey: "#a6adc8",
+};
 
 const formatDurationMSS = (duration: number) => {
   const minutes = Math.floor(duration / 60);
@@ -16,91 +29,50 @@ export const MusicPlayer = (props: {
   duration: number;
   played: number;
 }) => {
-  const terminal = useTerminal();
+  props;
+  formatDurationMSS;
 
-  const [isPlaying, setIsPlaying] = useState(false);
-  setIsPlaying;
+  const { cols } = useTerminal();
+  const canvas = new TerminalCanvas(cols, 5);
 
-  const innerWidth = terminal.cols - 2;
-
-  const timeString = `${formatDurationMSS(props.played)}/${formatDurationMSS(
-    props.duration,
-  )}`;
-  const barSize = Math.max(
-    1,
-    Math.floor((props.played / props.duration) * innerWidth),
-  );
-
-  const beforeText_pos = innerWidth / 2 - timeString.length / 2;
-  const beforeText_filled = Math.min(barSize, beforeText_pos);
-  const beforeText_empty = beforeText_pos - beforeText_filled;
-
-  const afterText_pos = innerWidth / 2 + timeString.length / 2;
-  const afterText_filled = Math.max(
+  canvas.writeElement(
+    new TerminalBoxElement(canvas.width, canvas.height),
+    0,
     0,
-    Math.min(barSize, innerWidth - timeString.length) - afterText_pos,
   );
-  const afterText_empty =
-    innerWidth - afterText_pos - afterText_filled + 1 - (innerWidth % 2);
 
-  return (
-    <p className="h-fit w-full select-none whitespace-pre pl-1 font-medium">
-      {/* Top bar */}
-      <>
-        <Text>┌</Text>
-        <Text fg="color5">Playback</Text>
-        <Text>{"─".repeat(Math.max(0, innerWidth - 8))}┐</Text>
-        <br />
-      </>
+  canvas.write(1, 0, "Playback".substring(0, Math.min(8, canvas.width - 2)), {
+    foreground: theme.magenta,
+  });
 
-      <>
-        <Text>│</Text>
-        <Text fg="color6" bold>
-          {isPlaying ? "\udb81\udc0a" : "\udb80\udfe4"} {props.title} -{" "}
-          {props.artist}
-        </Text>
-        <Text>
-          {" ".repeat(
-            Math.max(
-              0,
-              innerWidth - props.title.length - props.artist.length - 5,
-            ),
-          )}
-          │
-        </Text>
-        <br />
-      </>
+  const inner = new TerminalCanvas(canvas.width - 2, canvas.height - 2);
+  // Title and Artist
+  inner.write(2, 0, "Last Tango in Kyoto · Floating Bits", {
+    foreground: theme.cyan,
+    fontWeight: 800,
+  });
+  inner.apply(0, 0, {
+    char: "\udb81\udc0a",
+    foreground: theme.cyan,
+    fontWeight: 800,
+  });
 
-      <>
-        <Text>│</Text>
-        <Text fg="color3">
-          {props.album}
-          {" ".repeat(innerWidth - props.album.length)}
-        </Text>
-        <Text>│</Text>
-        <br />
-      </>
+  // Album
+  inner.write(0, 1, "Last Tango in Kyoto", { foreground: theme.yellow });
 
-      <>
-        <Text>│</Text>
-        <Text bg="color2">{" ".repeat(beforeText_filled)}</Text>
-        <Text bg="color8">{" ".repeat(beforeText_empty)}</Text>
-        {timeString.split("").map((x, i) => (
-          <Text
-            key={i}
-            bg={beforeText_pos + i <= barSize ? "color2" : "color8"}
-            fg={beforeText_pos + i <= barSize ? "color8" : "color2"}
-          >
-            {x}
-          </Text>
-        ))}
-        <Text bg="color2">{" ".repeat(afterText_filled)}</Text>
-        <Text bg="color8">{" ".repeat(afterText_empty)}</Text>
-        <Text>│</Text>
-        <br />
-      </>
+  // Bar
+  const percentage = 45;
+  inner.write(0, 2, " ".repeat(inner.width), {
+    foreground: theme.green,
+    background: theme.black,
+  });
+  inner.write(0, 2, " ".repeat((inner.width / 100) * percentage), {
+    foreground: theme.black,
+    background: theme.green,
+  });
+  const time = "1:10/1:51";
+  inner.write(inner.width / 2 - time.length / 2, 2, time);
 
-      <Text>└{"─".repeat(innerWidth)}┘</Text>
-    </p>
-  );
+  canvas.writeElement(inner, 1, 1);
+  return <p>{canvas.render()}</p>;
 };

src/components/Terminal.tsx

@@ -53,7 +53,7 @@ export const Terminal = (props: {
       <div
         ref={terminalRef}
         className={clsx(
-          "overflow-hidden rounded-lg border-2 border-borderInactive bg-background bg-opacity-80 text-lg text-color7 text-foreground shadow-window transition-colors duration-[500ms] ease-out hover:border-borderActive hover:duration-[200ms]",
+          "overflow-hidden whitespace-pre rounded-lg border-2 border-borderInactive bg-background bg-opacity-80 text-lg text-color7 text-foreground shadow-window transition-colors duration-[500ms] ease-out hover:border-borderActive hover:duration-[200ms]",
           props.className,
         )}
         style={{ backdropFilter: "blur(2px)" }}