refactor(rendering): changed my mind, don't use components

src/components/MusicPlayer.tsx

@@ -1,8 +1,6 @@
 import { useTerminal } from "~/context/TerminalContext";
 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 = {
@@ -24,44 +22,24 @@ 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);
+  const canvas = new TerminalRenderer(cols, 5);
 
+  const [played, setPlayed] = useState(0);
   useEffect(() => {
     const interval = setInterval(() => {
-      setCount(c => c + 1);
+      setPlayed(x => Math.min(props.duration, x + 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 TerminalRenderer(cols, 5);
+  }, [setPlayed]);
 
   canvas.writeElement(
     new TerminalBoxElement(canvas.width, canvas.height),
@@ -75,7 +53,7 @@ export const MusicPlayer2 = (props: {
 
   const inner = new TerminalRenderer(canvas.width - 2, canvas.height - 2);
   // Title and Artist
-  inner.write(2, 0, "Last Tango in Kyoto · Floating Bits", {
+  inner.write(2, 0, `${props.title} · ${props.artist}`, {
     foreground: theme.cyan,
     fontWeight: 800,
   });
@@ -86,19 +64,20 @@ export const MusicPlayer2 = (props: {
   });
 
   // Album
-  inner.write(0, 1, "Last Tango in Kyoto", { foreground: theme.yellow });
+  inner.write(0, 1, props.album, { foreground: theme.yellow });
 
   // 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), {
+  inner.write(0, 2, " ".repeat((inner.width * played) / props.duration), {
     foreground: theme.black,
     background: theme.green,
   });
-  const time = "1:10/1:51";
+  const time = `${formatDurationMSS(played)}/${formatDurationMSS(
+    props.duration,
+  )}`;
   inner.write(inner.width / 2 - time.length / 2, 2, time);
 
   canvas.writeElement(inner, 1, 1);

src/pages/index.tsx

@@ -24,7 +24,6 @@ export default function Home() {
               title="Last Tango in Kyoto"
               artist="Floating Bits"
               album="Last Tango in Kyoto"
-              played={50}
               duration={93}
             />
           </Terminal>

src/utils/terminal/renderer.tsx

@@ -89,7 +89,7 @@ export class TerminalRenderer implements TerminalElement {
 
   render(): Array<ReactNode> {
     const nodes: Array<ReactNode> = [];
-    console.log("here2");
+
     for (let y = 0; y < this.height; y++) {
       for (let x = 0; x < this.width; x++) {
         const cell = this.data[y][x];