////
// DOM helpers and cached elements

// elements we know will be there... right?
export const cmdLine = $("command-line") as HTMLDivElement
export const cmdTextbox = $("command-textbox") as HTMLTextAreaElement
export const scrollback = $("scrollback") as HTMLUListElement

// finds an element by ID
export function $(id: string): HTMLElement | null {
    return document.getElementById(id)
}

// creates an HTML element, optinally with one or more classes
// shortcut:
//   $$("span.input.green") = <span class="input green"></span>
//   $$(".input.green") = <div class="input green"></div>
export const $$ = (tag: string, innerHTML = ""): HTMLElement => {
    let name: string | undefined = tag
    let classList: string[] = []

    if (tag.startsWith("."))
        tag = "div" + tag

    if (tag.includes("."))
        [name, ...classList] = tag.split(".").map(x => x.trim())

    const el = document.createElement(name!)
    if (innerHTML) el.innerHTML = innerHTML
    if (classList.length) el.classList.add(...classList)
    return el
}