wrap indicator for grid

src/rt/elements/create.ts

@@ -1,9 +1,7 @@
-function create<T extends keyof HTMLElementTagNameMap>(element: T, className?: string): HTMLElementTagNameMap[T] {
+export default function create<T extends keyof HTMLElementTagNameMap>(element: T, className?: string): HTMLElementTagNameMap[T] {
 	const new_element = document.createElement(element)
 	if (className) {
 		new_element.className = className
 	}
 	return new_element
-}
-
-export default create
+}

src/rt/elements/layout.ts

@@ -0,0 +1,21 @@
+import create from "./create"
+
+const layout = (type: string) => create("div", type)
+
+function horizontal_wrap() {
+	return layout("stdout-horizontal-wrap")
+}
+
+function horizontal() {
+	return layout("stdout-horizontal")
+}
+
+function vertical() {
+	return layout("stdout-vertical")
+}
+
+export {
+	horizontal_wrap,
+	horizontal,
+	vertical
+}

src/rt/elements/stdout.ts

@@ -1,18 +1,29 @@
 import { bold } from "../shell/color";
+import { horizontal, vertical } from "./layout";
 
 import create from "./create";
+import wrapindicator from "./wrapindicator";
 
-function stdout_grid(left: string[], right: string[]) {
-	const root = create("div", "stdout-horizontal")
-	const container_left = create("div", "stdout-vertical")
-	const container_right = create("div", "stdout-vertical")
+function stdout_grid<T extends HTMLElement>(left: string[], right: string[], header?: T) {
+	const wrap_indicator = wrapindicator()
+	const container_left = vertical()
+	const container_right = vertical()
 
-	left.forEach(str => container_left.appendChild(stdout_bold(str)))
-	right.forEach(str => container_right.appendChild(stdout(str)))
+	container_left.append(...left.map(str => stdout_bold(str)))
+	container_right.append(...right.map(str => stdout(str)))
 
-	root.appendChild(container_left)
-	root.appendChild(container_right)
-	return root
+	if (header) {
+		const container_right_header = vertical()
+		const help_container = horizontal()
+		help_container.append(container_left, container_right)
+		container_right_header.append(header, help_container)
+		wrap_indicator.appendChild(container_right_header)
+	} else {
+		const container = horizontal()
+		container.append(container_left, container_right)
+		wrap_indicator.appendChild(container)
+	}
+	return wrap_indicator
 }
 
 function stdout_horizontal(strs: string[]) {

src/rt/elements/wrapindicator.ts

@@ -0,0 +1,9 @@
+import { horizontal_wrap } from "./layout";
+
+import create from "./create";
+
+export default function wrapindicator() {
+	const wi_layout = horizontal_wrap()
+	wi_layout.appendChild(create("div", "wrap-indicator"))
+	return wi_layout
+}

src/rt/shell/command/subcommand.ts

@@ -11,20 +11,21 @@ interface SubCommands {
 	[index: string]: SubCommandAction,
 }
 
+function subcommand_help(data: SubCommands, cmd_description: string, term: Term) {
+	const subcmd_descriptions: string[] = []
+	Object.values(data).forEach(sub_cmd => subcmd_descriptions.push(sub_cmd.description))
+
+	term.appendChild(stdout_grid(Object.keys(data), subcmd_descriptions, stdout(cmd_description)))
+}
+
 const SubCommand = class {
 	public data: SubCommands //data? less goo!
 
-	constructor(description: string) {
+	constructor(cmd_description: string) {
 		this.data = {}
 		this.data.help = {} as SubCommandAction
 		this.data.help.description = "Display help info"
-		this.data.help.inner = (term: Term, _args: Args) => {
-			const descriptions: string[] = []
-			Object.values(this.data).forEach(sub_cmd => descriptions.push(sub_cmd.description))
-
-			term.appendChild(stdout(description))
-			term.appendChild(stdout_grid(Object.keys(this.data), descriptions))
-		}
+		this.data.help.inner = (term: Term, _args: Args) => subcommand_help(this.data, cmd_description, term)
 	}
 
 	public process(term: Term, args: Args) {

src/scss/elements/header.scss

@@ -1,5 +1,15 @@
 @use "../variables.scss";
 
+@mixin navigation-button {
+	button {
+		padding: 0 20px 0 20px;
+		&:hover {
+			background-color: white;
+			& > a { color: black; }
+		}
+	}
+}
+
 @mixin navigation {
 	.header-left {
 		height: 100%;
@@ -7,16 +17,10 @@
 		background-color: rgb(0,0,0);
 	}
 	.header-right {
+		@include navigation-button;
+
 		display: flex;
 		height: 100%;
-
-		button {
-			padding: 0 20px 0 20px;
-			&:hover {
-				background-color: white;
-				& > a { color: black; }
-			}
-		}
 	}
 }
 

src/scss/elements/terminal.scss

@@ -1,8 +1,8 @@
 @mixin text-styles {
-	.red   { color: var(--text-red) }
-	.green { color: var(--text-green) }
-	.blue  { color: var(--text-blue) }
-	.cyan  { color: var(--text-cyan) }
+	.red   { color: rgb(var(--color-red)) }
+	.green { color: rgb(var(--color-green)) }
+	.blue  { color: rgb(var(--color-blue)) }
+	.cyan  { color: rgb(var(--color-cyan)) }
 	.bold  { font-weight: bold; }
 }
 
@@ -12,11 +12,19 @@
 		display: flex;
 		gap: 30px;
 	}
+	.stdout-horizontal-wrap {
+		display: flex;
+		gap: 5px;
+	}
 }
 
 @mixin term-elements {
 	.return { margin-top: 25px; }
 	.shell-prompt { display: flex; }
+	.wrap-indicator {
+		width: 2px;
+		background-color: rgba(var(--color-blue), .3);
+	}
 }
 
 @mixin formatting {

src/scss/variables.scss

@@ -2,13 +2,13 @@ $header-Y: 30px;
 $footer-Y: 30px;
 $component-padding: 20px;
 
-@mixin text-colors {
-	--text-red:   rgb(200, 0, 0);
-	--text-green: rgb(0, 200, 0);
-	--text-blue:  rgb(0, 0, 200);
-	--text-cyan:  rgb(18,167,148);
+@mixin color-matrix {
+	--color-red:   200, 0, 0;
+	--color-green: 0, 200, 0;
+	--color-blue:  0, 0, 200;
+	--color-cyan:  18,167,148;
 }
 
 @mixin css-global {
-	@include text-colors;
+	@include color-matrix;
 }