terminal: Made cmatrix adapt to size

Author: Prozilla

package.json

@@ -51,9 +51,9 @@
 		"pnpm": "^9.15.9"
 	},
 	"devDependencies": {
-		"@prozilla-os/dev-tools": "workspace:*",
 		"@changesets/cli": "^2.29.8",
 		"@eslint/js": "^9.39.2",
+		"@prozilla-os/dev-tools": "workspace:*",
 		"@types/eslint": "^8.56.12",
 		"@types/gh-pages": "^6.1.0",
 		"@types/node": "^20.19.30",
@@ -81,7 +81,7 @@
 			"last 1 safari version"
 		]
 	},
-	"packageManager": "pnpm@10.29.3",
+	"packageManager": "pnpm@10.33.0",
 	"pnpm": {
 		"overrides": {
 			"prozilla-os": "workspace:*",

packages/apps/terminal/src/components/Terminal.tsx

@@ -2,13 +2,13 @@ import { MouseEventHandler, MutableRefObject, useEffect, useRef, useState } from
 import styles from "./Terminal.module.css";
 import { OutputLine } from "./OutputLine";
 import { InputLine } from "./InputLine";
-import { App, SettingsManager, useSettingsManager, useSystemManager, useVirtualRoot, VirtualFolder, WindowProps } from "@prozilla-os/core";
+import { useSettingsManager, useSystemManager, useVirtualRoot, VirtualFolder, WindowProps } from "@prozilla-os/core";
 import { HOSTNAME, USERNAME, WELCOME_MESSAGE } from "../constants/terminal.const";
 import { Stream } from "../core/stream";
 import { CommandResponse } from "../core/command";
 import { formatError } from "../core/_utils/terminal.utils";
 import { CommandsManager } from "../core/commands";
-import { ANSI, clamp, removeFromArray } from "@prozilla-os/shared";
+import { Ansi, ANSI, clamp, removeFromArray, Vector2 } from "@prozilla-os/shared";
 
 export interface TerminalProps extends WindowProps {
 	path?: string;
@@ -32,13 +32,14 @@ export function Terminal({ app, path: startPath, input, setTitle, close: exit, a
 	}]);
 	const virtualRoot = useVirtualRoot();
 	const [currentDirectory, setCurrentDirectory] = useState<VirtualFolder>(virtualRoot?.navigate(startPath ?? "~") as VirtualFolder);
-	const inputRef = useRef(null);
+	const inputRef = useRef<HTMLInputElement>(null);
 	const [historyIndex, setHistoryIndex] = useState(0);
 	const [stream, setStream] = useState<Stream | null>(null);
 	const [streamOutput, setStreamOutput] = useState<string | null>(null);
-	const ref = useRef(null);
+	const ref = useRef<HTMLDivElement>(null);
 	const [streamFocused, setStreamFocused] = useState(false);
 	const settingsManager = useSettingsManager();
+	const sizeRef = useRef(Vector2.ZERO);
 
 	useEffect(() => {
 		if (currentDirectory != null)
@@ -49,11 +50,12 @@ export function Terminal({ app, path: startPath, input, setTitle, close: exit, a
 		if (!inputRef.current || !active)
 			return;
 
-		(inputRef.current as unknown as HTMLInputElement).focus();
+		inputRef.current.focus();
 	}, [inputRef, active]);
 
 	const scrollDown = () => {
-		(ref.current as unknown as HTMLDivElement).scrollTop = (ref.current as unknown as HTMLDivElement).scrollHeight;
+		if (ref.current)
+			ref.current.scrollTop = ref.current.scrollHeight;
 	};
 
 	useEffect(() => {
@@ -71,8 +73,33 @@ export function Terminal({ app, path: startPath, input, setTitle, close: exit, a
 		scrollDown();
 	}, [inputValue]);
 
-	const prefix = `${ANSI.fg.cyan + USERNAME}@${HOSTNAME + ANSI.reset}:`
-		+ `${ANSI.fg.blue + ((currentDirectory?.root || currentDirectory == null) ? "/" : currentDirectory?.path) + ANSI.reset}$ `;
+	useEffect(() => {
+		if (!ref.current) return;
+
+		const measure = () => {
+			if (!ref.current) return;
+
+			const style = getComputedStyle(ref.current);
+			const fontSize = parseFloat(style.fontSize);
+			const charWidth = 0.585 * fontSize;
+			const charHeight = 1.25 * fontSize;
+			const { width, height } = ref.current.getBoundingClientRect();
+
+			sizeRef.current.set(
+				Math.ceil(width / charWidth),
+				Math.ceil(height / charHeight)
+			);
+		};
+
+		const observer = new ResizeObserver(measure);
+		observer.observe(ref.current);
+		measure();
+
+		return () => observer.disconnect();
+	}, [ref]);
+
+	const prefix = Ansi.cyan(`${USERNAME}@${HOSTNAME}`) + ":"
+		+ Ansi.blue(`${((currentDirectory?.root || currentDirectory == null) ? "/" : currentDirectory?.path)}`) + "$ ";
 
 	const updatedHistory = history;
 	const pushHistory = (entry: HistoryEntry) => {
@@ -100,7 +127,7 @@ export function Terminal({ app, path: startPath, input, setTitle, close: exit, a
 		let lastOutput: CommandResponse | null = null;
 
 		stream.onAsync(Stream.SEND_EVENT, async (text) => {
-			let output: CommandResponse = text as CommandResponse;
+			let output: CommandResponse = text;
 
 			for (const pipe of pipes) {
 				if (output instanceof Stream)
@@ -110,7 +137,7 @@ export function Terminal({ app, path: startPath, input, setTitle, close: exit, a
 				output = await handleInput(output ? `${pipe} ${output as string}` : pipe);
 			}
 
-			if ((output as unknown) instanceof Stream) {
+			if (output instanceof Stream) {
 				stream.stop();
 				promptOutput(ANSI.fg.red + "Stream failed");
 				return;
@@ -214,9 +241,10 @@ export function Terminal({ app, path: startPath, input, setTitle, close: exit, a
 				exit,
 				inputs,
 				timestamp,
-				settingsManager: settingsManager as SettingsManager,
+				settingsManager: settingsManager!,
 				systemManager,
-				app: app as App,
+				app: app!,
+				size: sizeRef.current,
 			});
 
 			if (response == null)
@@ -354,7 +382,7 @@ export function Terminal({ app, path: startPath, input, setTitle, close: exit, a
 			onClick={(event) => {
 				if (window.getSelection()?.toString() === "") {
 					event.preventDefault();
-					(inputRef.current as HTMLInputElement | null)?.focus();
+					(inputRef.current)?.focus();
 				}
 			}}
 		>

packages/apps/terminal/src/core/command.ts

@@ -1,4 +1,4 @@
-import { App, SettingsManager, SystemManager, VirtualFolder, VirtualRoot } from "@prozilla-os/core";
+import { App, SettingsManager, SystemManager, Vector2, VirtualFolder, VirtualRoot } from "@prozilla-os/core";
 import { Stream } from "./stream";
 import { Dispatch, SetStateAction } from "react";
 import { HistoryEntry } from "../components/Terminal";
@@ -26,9 +26,14 @@ export type ExecuteParams = {
 	settingsManager: SettingsManager,
 	systemManager: SystemManager,
 	app: App,
+	readonly size: Vector2
 };
 
-type Execute = (args?: string[], params?: ExecuteParams) => CommandResponse | Promise<CommandResponse>;
+type Execute = (
+		((args: string[], params: ExecuteParams) => CommandResponse | Promise<CommandResponse>)
+		| ((args: string[]) => CommandResponse | Promise<CommandResponse>)
+		| (() => CommandResponse | Promise<CommandResponse>)
+	);
 
 type Manual = {
 	purpose?: string,

packages/apps/terminal/src/core/commands/cat.ts

@@ -1,6 +1,6 @@
 import { VirtualFile } from "@prozilla-os/core";
 import { formatError } from "../_utils/terminal.utils";
-import { Command, ExecuteParams } from "../command";
+import { Command } from "../command";
 
 export const cat = new Command()
 	.setRequireArgs(true)
@@ -9,9 +9,8 @@ export const cat = new Command()
 		usage: "cat [options] [files]",
 		description: "Concetenate files to standard output.",
 	})
-	.setExecute(function(this: Command, args, params) {
-		const { currentDirectory, options } = params as ExecuteParams;
-		const fileId = (args as string[])[0];
+	.setExecute(function(this: Command, args, { currentDirectory, options }) {
+		const fileId = args[0];
 		const { name, extension } = VirtualFile.splitId(fileId);
 		const file = currentDirectory.findFile(name, extension);
 

packages/apps/terminal/src/core/commands/cd.ts

@@ -1,20 +1,19 @@
 import { VirtualFile, VirtualFolder } from "@prozilla-os/core";
 import { formatError } from "../_utils/terminal.utils";
-import { Command, ExecuteParams } from "../command";
+import { Command } from "../command";
 
 export const cd = new Command()
 	.setManual({
 		purpose: "Change the current directory",
 		usage: "cd [PATH]",
 		description: "Change working directory to given path (the home directory by default).",
 	})
-	.setExecute(function(this: Command, args, params) {
-		const { currentDirectory, setCurrentDirectory } = params as ExecuteParams;
-		const path = (args as string[])[0] ?? "~";
+	.setExecute(function(this: Command, args, { currentDirectory, setCurrentDirectory }) {
+		const path = args[0] ?? "~";
 		let destination = currentDirectory.navigate(path);
 
 		if (!destination)
-			return formatError(this.name, `${(args as string[])[0]}: No such file or directory`);
+			return formatError(this.name, `${(args)[0]}: No such file or directory`);
 
 		if (destination instanceof VirtualFile)
 			destination = destination.parent as VirtualFolder;

packages/apps/terminal/src/core/commands/clear.ts

@@ -1,11 +1,10 @@
-import { Command, ExecuteParams } from "../command";
+import { Command } from "../command";
 
 export const clear = new Command()
 	.setManual({
 		purpose: "Clear terminal screen",
 	})
-	.setExecute(function(_args, params) {
-		const { pushHistory } = params as ExecuteParams;
+	.setExecute(function(_args, { pushHistory }) {
 		pushHistory?.({
 			clear: true,
 			isInput: false,

packages/apps/terminal/src/core/commands/cmatrix.ts

@@ -4,12 +4,10 @@ import { Command } from "../command";
 import { Stream } from "../stream";
 
 const ANIMATION_SPEED = 1.25;
-const SCREEN_WIDTH = 75;
-const SCREEN_HEIGHT = 20;
 const CHARACTERS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.*\\/()#@&$!?%°:<>[]";
 
 const PARTICLES = {
-	framesBetweenSpawn: 30,
+	spawnRate: 30,
 	fallSpeed: 1,
 	minSize: 5,
 	maxSize: 25,
@@ -20,11 +18,25 @@ type Particle = {
 	size: number;
 };
 
-function generateScreen(frame: number, screen: string[][], particles: Particle[]): string {
+function initializeScreen(size: Vector2) {
+	const screen: string[][] = [];
+	for (let y = 0; y < size.y; y++) {
+		const row: string[] = [];
+		for (let x = 0; x < size.x; x++) {
+			row.push(" ");
+		}
+		screen.push(row);
+	}
+	return screen;
+}
+
+function generateScreen(frame: number, screen: string[][], particles: Particle[], size: Vector2): string {
+	const framesBetweenSpawn = Math.round(5000 / (PARTICLES.spawnRate * size.x));
+
 	// Spawn new particles
-	if (frame % PARTICLES.framesBetweenSpawn) {
+	if (framesBetweenSpawn === 0 || frame % framesBetweenSpawn === 0) {
 		const newParticle: Particle = {
-			position: new Vector2(randomRange(0, SCREEN_WIDTH), SCREEN_HEIGHT).round(),
+			position: new Vector2(randomRange(0, size.x - 1), size.y).round(),
 			size: Math.round(randomRange(PARTICLES.minSize, PARTICLES.maxSize)),
 		};
 		particles.push(newParticle);
@@ -39,12 +51,12 @@ function generateScreen(frame: number, screen: string[][], particles: Particle[]
 			const positionX = particle.position.x;
 			const positionY = particle.position.y + i + particle.size;
 
-			if (positionY < SCREEN_HEIGHT && positionY >= 0)
+			if (positionY < size.y && positionY >= 0)
 				screen[positionY][positionX] = " ";
 		}
 
 		// Remove offscreen particles
-		if (particle.position.y + particle.size <= 0 || particle.position.x >= SCREEN_WIDTH)
+		if (particle.position.y + particle.size <= 0 || particle.position.x >= size.x)
 			return removeFromArray(particle, particles);
 
 		for (let i = 0; i < particle.size; i++) {
@@ -57,7 +69,7 @@ function generateScreen(frame: number, screen: string[][], particles: Particle[]
 			const positionX = particle.position.x;
 			const positionY = particle.position.y + i;
 
-			if (positionX < SCREEN_WIDTH && positionY < SCREEN_HEIGHT && positionY >= 0) {
+			if (positionX < size.x && positionY < size.y && positionY >= 0) {
 				screen[positionY][positionX] = color + character + ANSI.reset;
 			}
 		}
@@ -71,23 +83,20 @@ export const cmatrix = new Command()
 		purpose: "Show a scrolling 'Matrix' like screen",
 		usage: "cmatrix",
 	})
-	.setExecute(function() {
+	.setExecute(function(_args, { size }) {
 		const stream = new Stream();
 		const particles: Particle[] = [];
 
 		// Create screen
-		const screen: string[][] = [];
-		for (let y = 0; y < SCREEN_HEIGHT; y++) {
-			const row: string[] = [];
-			for (let x = 0; x < SCREEN_WIDTH; x++) {
-				row.push(" ");
-			}
-			screen.push(row);
-		}
+		let screen = initializeScreen(size);
 
 		let frame = 0;
 		const interval = setInterval(() => {
-			const text = generateScreen(frame, screen, particles);
+			if (screen.length != size.y || (screen.length != 0 ? screen[0].length : 0) != size.x) {
+				screen = initializeScreen(size);
+			}
+
+			const text = generateScreen(frame, screen, particles, size);
 			stream.send(text);
 			frame++;
 		}, 100 / ANIMATION_SPEED);

packages/apps/terminal/src/core/commands/compgen.ts

@@ -1,13 +1,12 @@
-import { Command, ExecuteParams } from "../command";
+import { Command } from "../command";
 import { CommandsManager } from "../commands";
 
 export const compgen = new Command()
 	.setManual({
 		purpose: "Display a list of all commands",
 	})
 	.setRequireOptions(true)
-	.setExecute(function(_args, params) {
-		const { options } = params as ExecuteParams;
+	.setExecute(function(_args, { options }) {
 		if (options?.includes("c")) {
 			return CommandsManager.COMMANDS.map((command) => command.name).sort().join("\n");
 		}

packages/apps/terminal/src/core/commands/cowsay.ts

@@ -1,5 +1,5 @@
 import { MAX_WIDTH } from "../../constants/terminal.const";
-import { Command, ExecuteParams } from "../command";
+import { Command } from "../command";
 
 const COW = `
         \\   ^__^
@@ -15,8 +15,7 @@ export const cowsay = new Command()
 		usage: "cowsay text",
 		description: "Show ASCII art of a cow saying something.",
 	})
-	.setExecute(function(_args, params) {
-		const { rawInputValue } = params as ExecuteParams;
+	.setExecute(function(_args, { rawInputValue }) {
 
 		// Separate input value into lines
 		const segments = rawInputValue?.split(" ");

packages/apps/terminal/src/core/commands/dir.ts

@@ -1,11 +1,10 @@
-import { Command, ExecuteParams } from "../command";
+import { Command } from "../command";
 
 export const dir = new Command()
 	.setManual({
 		purpose: "List all directories in the current directory",
 	})
-	.setExecute(function(_args, params) {
-		const { currentDirectory } = params as ExecuteParams;
+	.setExecute(function(_args, { currentDirectory }) {
 		const folderNames = currentDirectory.subFolders.map((folder) => folder.id);
 
 		if (folderNames.length === 0)