From 4950695388c6a68edb9e76e045294c0bd0de49be Mon Sep 17 00:00:00 2001 From: rhpidfyre Date: Sun, 23 Feb 2025 18:58:32 -0500 Subject: [PATCH] wrap indicator for grid --- src/rt/elements/create.ts | 6 ++---- src/rt/elements/layout.ts | 21 +++++++++++++++++++++ src/rt/elements/stdout.ts | 29 ++++++++++++++++++++--------- src/rt/elements/wrapindicator.ts | 9 +++++++++ src/rt/shell/command/subcommand.ts | 17 +++++++++-------- src/scss/elements/header.scss | 20 ++++++++++++-------- src/scss/elements/terminal.scss | 16 ++++++++++++---- src/scss/variables.scss | 12 ++++++------ 8 files changed, 91 insertions(+), 39 deletions(-) create mode 100644 src/rt/elements/layout.ts create mode 100644 src/rt/elements/wrapindicator.ts diff --git a/src/rt/elements/create.ts b/src/rt/elements/create.ts index 0c70b66..1c4e18c 100644 --- a/src/rt/elements/create.ts +++ b/src/rt/elements/create.ts @@ -1,9 +1,7 @@ -function create(element: T, className?: string): HTMLElementTagNameMap[T] { +export default function create(element: T, className?: string): HTMLElementTagNameMap[T] { const new_element = document.createElement(element) if (className) { new_element.className = className } return new_element -} - -export default create \ No newline at end of file +} \ No newline at end of file diff --git a/src/rt/elements/layout.ts b/src/rt/elements/layout.ts new file mode 100644 index 0000000..d05635b --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/src/rt/elements/stdout.ts b/src/rt/elements/stdout.ts index 3cfa53c..f8677b0 100644 --- a/src/rt/elements/stdout.ts +++ b/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(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[]) { diff --git a/src/rt/elements/wrapindicator.ts b/src/rt/elements/wrapindicator.ts new file mode 100644 index 0000000..83f8503 --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/src/rt/shell/command/subcommand.ts b/src/rt/shell/command/subcommand.ts index ce99bc2..fef4d8e 100644 --- a/src/rt/shell/command/subcommand.ts +++ b/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) { diff --git a/src/scss/elements/header.scss b/src/scss/elements/header.scss index be8f4dc..8ef13b3 100644 --- a/src/scss/elements/header.scss +++ b/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; } - } - } } } diff --git a/src/scss/elements/terminal.scss b/src/scss/elements/terminal.scss index 3566d62..94bd8b2 100644 --- a/src/scss/elements/terminal.scss +++ b/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 { diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 5bb0cd3..1e281dd 100644 --- a/src/scss/variables.scss +++ b/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; } \ No newline at end of file