feat(rendering): component based

src/components/MusicPlayer.tsx

@@ -1,6 +1,9 @@
 import { useTerminal } from "~/context/TerminalContext";
-import { TerminalCanvas } from "~/utils/terminal/canvas";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
 import { TerminalBoxElement } from "~/utils/terminal/elements/box";
+import { TerminalCanvas } from "./terminal/TerminalCanvas";
+import { TerminalText } from "./terminal/TerminalText";
+import { useEffect, useState } from "react";
 
 const theme = {
   black: "#45475a",
@@ -21,19 +24,44 @@ const formatDurationMSS = (duration: number) => {
 
   return `${minutes}:${seconds.toString().padStart(2, "0")}`;
 };
-
 export const MusicPlayer = (props: {
   title: string;
   artist: string;
   album: string;
   duration: number;
   played: number;
+}) => {
+  const { cols } = useTerminal();
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCount(c => c + 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  });
+
+  return (
+    <TerminalCanvas width={cols} height={5}>
+      <TerminalText x={1} y={0}>
+        Playback
+      </TerminalText>
+    </TerminalCanvas>
+  );
+};
+export const MusicPlayer2 = (props: {
+  title: string;
+  artist: string;
+  album: string;
+  duration: number;
+  played: number;
 }) => {
   props;
   formatDurationMSS;
 
   const { cols } = useTerminal();
-  const canvas = new TerminalCanvas(cols, 5);
+  const canvas = new TerminalRenderer(cols, 5);
 
   canvas.writeElement(
     new TerminalBoxElement(canvas.width, canvas.height),
@@ -45,7 +73,7 @@ export const MusicPlayer = (props: {
     foreground: theme.magenta,
   });
 
-  const inner = new TerminalCanvas(canvas.width - 2, canvas.height - 2);
+  const inner = new TerminalRenderer(canvas.width - 2, canvas.height - 2);
   // Title and Artist
   inner.write(2, 0, "Last Tango in Kyoto · Floating Bits", {
     foreground: theme.cyan,

src/components/Terminal.tsx

@@ -8,10 +8,7 @@ export const Terminal = (props: {
 }) => {
   const terminalRef = useRef<HTMLDivElement>(null);
 
-  const [size, setSize] = useState<{ cols: number; rows: number }>({
-    cols: -1,
-    rows: -1,
-  });
+  const [size, setSize] = useState<{ cols: number; rows: number }>();
 
   useEffect(() => {
     const precision = 300;
@@ -58,7 +55,7 @@ export const Terminal = (props: {
         )}
         style={{ backdropFilter: "blur(2px)" }}
       >
-        {size.cols > -1 && props.children}
+        {size && props.children}
       </div>
     </TerminalContextProvider>
   );

src/components/terminal/TerminalCanvas.tsx

@@ -0,0 +1,23 @@
+import React, { type ReactNode, useEffect, useState } from "react";
+import { TerminalCanvasContextProvider } from "~/context/TerminalCanvasContext";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+
+export const TerminalCanvas = (props: {
+  width: number;
+  height: number;
+  children?: Array<ReactNode> | ReactNode;
+}) => {
+  const [canvas] = useState(new TerminalRenderer(props.width, props.height));
+  const [render, setRender] = useState<Array<ReactNode>>([]);
+
+  useEffect(() => {
+    setRender(canvas.render());
+  }, [canvas, props.children]);
+
+  return (
+    <TerminalCanvasContextProvider value={canvas}>
+      {props.children}
+      {render}
+    </TerminalCanvasContextProvider>
+  );
+};

src/components/terminal/TerminalText.tsx

@@ -0,0 +1,16 @@
+import { useTerminalCanvas } from "~/context/TerminalCanvasContext";
+
+export const TerminalText = (props: {
+  x: number;
+  y: number;
+  children: Array<string> | string;
+}) => {
+  const canvas = useTerminalCanvas();
+
+  const text = Array.isArray(props.children)
+    ? props.children.join("")
+    : props.children;
+  canvas.write(props.x, props.y, text);
+
+  return null;
+};