history show is now 1 based

cd can now display folders in blue

src/rt/elements/stdout.ts

@@ -26,6 +26,12 @@ function stdout_grid<T extends HTMLElement>(left: string[], right: string[], hea
 	return wrap_indicator
 }
 
+function stdout_horizontal_elements<T extends HTMLElement>(elements: T[]) {
+	const h_elements_out = horizontal()
+	h_elements_out.append(...elements)
+	return h_elements_out
+}
+
 function stdout_horizontal(strs: string[]) {
 	const p = create("p")
 	strs.forEach((str, i) => {
@@ -48,7 +54,8 @@ export default function stdout(str: string) {
 }
 
 export {
-	stdout_grid,
+	stdout_horizontal_elements,
 	stdout_horizontal,
+	stdout_grid,
 	stdout_bold
 }

src/rt/shell/command/builtin/cd.ts

@@ -1,13 +1,15 @@
 import { set_working_dir, SetDirStatus } from "../../fs/fn"
 import type { Args, Term } from "../list"
 
+import stdout from "../../../elements/stdout"
+
 export default function cd(term: Term, args: Args): boolean {
 	const new_dir_status = set_working_dir(args[1])
 
 	if (new_dir_status === SetDirStatus.NotADirectory) {
-		// return <p>{"cd: \""}{bold(args[1])}{"\" is not a directory"}</p>
+		term.appendChild(stdout(`cd: "${args[1]}" is not a directory`))
 	} else if (new_dir_status === SetDirStatus.NotFound) {
-		// return <p>{"cd: The directory \""}{bold(args[1])}{"\" does not exist"}</p>
+		term.appendChild(stdout(`cd: The directory "${args[1]}" does not exist`))
 	}
 	return true
 }

src/rt/shell/command/builtin/history.ts

@@ -7,7 +7,7 @@ import history from "../../history";
 const history_command = new SubCommand("Show and manipulate command history")
 
 history_command.add("show", "Show the history", function(term: Term, _args: Args) {
-	history.file.inner.forEach((entry, ind) => term.appendChild(stdout(`${ind} ${entry}`)))
+	history.file.inner.forEach((entry, ind) => term.appendChild(stdout(`${ind+1} ${entry}`)))
 })
 
 history_command.add("clear", "Delete the entire command history", function(term: Term, _args: Args) {

src/rt/shell/command/builtin/ls.ts

@@ -1,11 +1,30 @@
 import type { Args, Term } from "../list";
+import { blue } from "../../color";
+import { get_working_dir_entries } from "../../fs/fn";
+import { EntryType, FsEntry } from "../../fs/fs";
+
+import stdout, { stdout_horizontal_elements } from "../../../elements/stdout";
+import create from "../../../elements/create";
+
+const element_collection = <T extends HTMLElement>(): T[] => []
+
+function show_directory(entry: FsEntry) {
+	const p = create("p")
+	p.append(blue(entry.name, true), "/")
+	return p
+}
 
 export default function ls(term: Term, args: Args): boolean {
-	// if (args[1] === undefined) {
-	// 	for (const dir_name in working_dir) {
-
-	// 	}
-	// 	return <p>{`${working_dir}`}</p>
-	// }
+	const ls_elements = element_collection()
+	if (args[1] === undefined) {
+		get_working_dir_entries().forEach(entry => {
+			if (entry.type === EntryType.Directory) {
+				ls_elements.push(show_directory(entry))
+			} else if (entry.type === EntryType.File) {
+				ls_elements.push(stdout(entry.name))
+			}
+		})
+	}
+	term.appendChild(stdout_horizontal_elements(ls_elements))
 	return true
 }

src/rt/shell/fs/fn.ts

@@ -1,4 +1,4 @@
-import { EntryType, fs, type FsEntrySignature } from "./fs"
+import { EntryType, fs, type FsDirectory, type FsEntry } from "./fs"
 
 let working_dir = ["/", "home", "user"]
 
@@ -21,7 +21,7 @@ const enum SetDirStatus {
 	NotADirectory
 }
 interface FsIterEntry {
-	readonly entry: FsEntrySignature | null,
+	readonly entry: FsDirectory | null,
 	readonly status: SetDirStatus
 }
 function iter_fs_to_goal(w_dir_clone: string[]): FsIterEntry {
@@ -41,7 +41,7 @@ function iter_fs_to_goal(w_dir_clone: string[]): FsIterEntry {
 			if (found.name === w_dir_clone[w_dir_clone.length-1]) {
 				return { entry: next_iter, status: SetDirStatus.Valid }
 			} else {
-				next_iter = found.inner as FsEntrySignature
+				next_iter = found.inner as FsDirectory
 			}
 		}
 	}
@@ -61,15 +61,21 @@ function set_working_dir(name: string): SetDirStatus {
 	return iter_status.status
 }
 
-function working_dir_entries() {
+function get_working_dir_entries(): FsEntry[] {
+	const entries: FsEntry[] = []
 	const w_dir_clone = [...working_dir]
 	const iter_status = iter_fs_to_goal(w_dir_clone)
 
+	if (iter_status.entry && iter_status.entry.inner) {
+		iter_status.entry.inner.forEach(dir => entries.push(dir))
+	}
+	return entries
 }
 
 export {
 	get_working_dir_name,
 	get_working_dir_name_full,
+	get_working_dir_entries,
 	set_working_dir,
 	SetDirStatus
 }

src/rt/shell/fs/fs.ts

@@ -8,7 +8,8 @@ const enum Permissions {
 	rw
 }
 
-type FsEntrySignature = Entry<Entry<{}>[]> //I did this!
+type FsEntry = Entry<{}>
+type FsDirectory = Entry<FsEntry[]>
 
 const user = [
 	Entry("about_me.txt", "about me inside", Permissions.rw),
@@ -44,7 +45,8 @@ function Entry<T = File>(name: string, inner: T, permissions: Permissions): Entr
 
 export {
 	fs,
-	type FsEntrySignature,
+	type FsDirectory,
+	type FsEntry,
 	EntryType,
 	Permissions,
 	Entry

src/scss/elements/terminal.scss

@@ -1,3 +1,5 @@
+@use "../variables.scss";
+
 @mixin text-styles {
 	.red   { color: rgb(var(--color-red)) }
 	.green { color: rgb(var(--color-green)) }
@@ -30,17 +32,13 @@
 @mixin formatting {
 	@include stdout-layouts;
 	@include term-elements;
+	@include text-styles;
 
+	p, a, span {
+		font-size: variables.$default-font-size
+	}
 	p {
-		@include text-styles;
-
-		font-size: 1.2rem;
 		margin: 5px;
-
-		span { font-size: inherit; }
-		a {
-			font-size: inherit;
-			&:hover { text-decoration: underline; }
-		}
+		a:hover { text-decoration: underline; }
 	}
 }

src/scss/variables.scss

@@ -1,3 +1,5 @@
+$default-font-size: 1.2rem;
+
 $header-Y: 30px;
 $footer-Y: 30px;
 $component-padding: 20px;