From 46d046b349641c3a55588d4e584cf20a9ed4ea7a Mon Sep 17 00:00:00 2001 From: Triston Date: Tue, 25 Jun 2024 22:08:51 -0400 Subject: [PATCH] refactoring some stuff --- bun.lockb | Bin 62150 -> 62166 bytes src/os/applications/application.ts | 5 +++-- src/ui/component.ts | 8 +++++--- src/ui/desktop.ts | 13 +++++++------ src/ui/desktop_shortcut.ts | 28 ++++++++++++++++------------ src/ui/index.ts | 16 ++++++++++------ src/ui/nav.ts | 12 ++++++------ src/util/element.ts | 15 +++++++++++++-- 8 files changed, 60 insertions(+), 37 deletions(-) diff --git a/bun.lockb b/bun.lockb index 66add3c93ab7ddd4aa899bc33a355731df01bcce..fcdc13486805cacfa220343161ccae84e2a202c5 100755 GIT binary patch delta 327 zcmX^1l=<3I<_Ug`ZX5lB7clObym*1H;7kSv21X!u0b&rCIhk>xaQ!SG3na=6#DPEz z0<(b_B*p^7bAT8GKr~1VD-h2IVvrn&W&&b1AYKT>ATbaP(#sCSi-8y@Za{6Qn0$1h`sNo4b(jP}_AdZpkPOI<#giqM*iTMbqQbdi z36Ki}4>nI+63@&fumZyUvuE8@HjS$?qz1=wAcsX>TOos Hx77pyK<+i+ diff --git a/src/os/applications/application.ts b/src/os/applications/application.ts index 39408b0..997811e 100644 --- a/src/os/applications/application.ts +++ b/src/os/applications/application.ts @@ -20,20 +20,21 @@ export default class Application { getDescription() { return "This is a base class for all applications"; } - + getIcon() { return "💻"; } run() { console.log(`Running ${this.getName()}`); + return this.ui_element.element } remove_window() { this.parent.end_application(this); } - init(){ + init() { console.log(`Initializing ${this.getName()}`); } } diff --git a/src/ui/component.ts b/src/ui/component.ts index ffae41f..47e36a5 100644 --- a/src/ui/component.ts +++ b/src/ui/component.ts @@ -1,10 +1,12 @@ import { el } from "../util/element"; export default class Component { - element: HTMLDivElement = el("div"); + element: ReturnType; - constructor(id: string) { - this.element.id = id + constructor(id: string, tag?: keyof HTMLElementTagNameMap) { + this.element = el(tag ?? "div", { + id: id + }) } addChild(child: HTMLElement) { diff --git a/src/ui/desktop.ts b/src/ui/desktop.ts index d38496e..32947bb 100644 --- a/src/ui/desktop.ts +++ b/src/ui/desktop.ts @@ -1,17 +1,18 @@ import Component from "./component"; import DesktopShortcut from "./desktop_shortcut"; import Window from "./window"; +import OS from "../os" export default class Desktop extends Component { shortcuts: DesktopShortcut[] = []; - shortcuts_container: HTMLDivElement; - windows_container: HTMLDivElement; + shortcuts_container: Component; + windows_container: Component; os: OS; constructor(os: OS) { - super(); + super('desktop'); this.os = os - this.element.classList.add("grid","grid-flow-col", "grid-cols-1"); + this.element.classList.add("grid", "grid-flow-col", "grid-cols-1"); this.element.classList.add("w-full", "h-full", "gap-8", "p-2"); this.element.id = "desktop"; @@ -36,8 +37,8 @@ export default class Desktop extends Component { this.updateDesktop() } - addOpenedWindow(w: Window) { - this.windows.push(w); + addOpenedWindow(_w: Window) { + // this.windows.push(w); this.updateDesktop() } diff --git a/src/ui/desktop_shortcut.ts b/src/ui/desktop_shortcut.ts index da2688e..1186443 100644 --- a/src/ui/desktop_shortcut.ts +++ b/src/ui/desktop_shortcut.ts @@ -1,5 +1,6 @@ import OS from "../os"; import Component from "./component"; +import { el } from "../util/element" export default class DesktopShortcut extends Component { icon: string; @@ -7,22 +8,25 @@ export default class DesktopShortcut extends Component { os: OS constructor(icon: string, title: string, os: OS, id: string) { - super(); + super('desktop-shortcut'); this.icon = icon; this.title = title; - this.id = id; + this.element.id = id; this.os = os; - this.element.classList.add("text-white", "cursor-pointer", "flex", "flex-col", "justify-center", "items-center", "p-2"); - - const _icon = document.createElement("img"); - const _title = document.createElement("p"); + this.element.classList.add("text-white", "cursor-pointer", "flex"); + this.element.classList.add("flex-col", "justify-center", "items-center", "p-2"); - _icon.src = this.icon; - _icon.style.width = "60px"; - - _title.textContent = this.title; - _title.classList.add( "font-bold", "text-md", "mt-1", "break-normal"); + const _icon = el("img", { + src: this.icon, + style: { + width: "60px" + } + }); + const _title = el("p", { + textContent: this.title + }); + _title.classList.add("font-bold", "text-md", "mt-1", "break-normal"); this.addChild(_icon); this.addChild(_title); @@ -38,7 +42,7 @@ export default class DesktopShortcut extends Component { return this.title; } - getIcon() { + getIcon() { return this.icon; } diff --git a/src/ui/index.ts b/src/ui/index.ts index cff7822..dd3e33f 100644 --- a/src/ui/index.ts +++ b/src/ui/index.ts @@ -3,6 +3,7 @@ import Component from "./component"; import NavBar from "./nav"; import TopBar from "./topbar"; import Desktop from "./desktop"; +import { el } from "../util/element"; export default class UI extends Component { os?: OS; @@ -11,7 +12,7 @@ export default class UI extends Component { desktop?: Desktop; constructor() { - super(); + super('ui'); this.element.style.height = "100vh"; this.element.style.width = "100vw"; @@ -31,10 +32,13 @@ export default class UI extends Component { this.navbar = new NavBar(); this.desktop = new Desktop(this.os); - const desktop_container = document.createElement("div"); - desktop_container.id = "desktop_container"; - desktop_container.style.display = "flex"; - desktop_container.style.height = `calc(100vh - ${this.topbar.element.clientHeight}px)`; + const desktop_container = el("div", { + id: "desktop_container", + style: { + display: 'flex', + height: `calc(100vh - ${this.topbar.element.clientHeight}px)` + } + }); desktop_container.appendChild(this.navbar.start()); desktop_container.appendChild(this.desktop.start()); @@ -44,6 +48,6 @@ export default class UI extends Component { } updateDesktop() { - this.desktop.updateDesktop(); + this.desktop?.updateDesktop(); } } diff --git a/src/ui/nav.ts b/src/ui/nav.ts index b9da56b..4446a1a 100644 --- a/src/ui/nav.ts +++ b/src/ui/nav.ts @@ -1,14 +1,14 @@ import Component from "./component" export default class NavBar extends Component { - applications: HTMLDivElement[] = []; + applications: HTMLElement[] = []; constructor() { - super() + super('navbar') - this.element.classList.add('flex', 'flex-column', 'w-14', 'h-full', 'bg-[#444]', 'justify-center','py-2', 'z-[12]') + this.element.classList.add('flex', 'flex-column', 'w-14', 'h-full', 'bg-[#444]', 'justify-center', 'py-2', 'z-[12]') } - init(){ + init() { this.applications.push(new Application("../../assets/apps.svg").start()) this.applications.forEach(app => this.element.appendChild(app)) } @@ -25,13 +25,13 @@ export default class NavBar extends Component { class Application extends Component { icon: string; constructor(icon: string) { - super(); + super('application'); this.icon = icon; this.element.classList.add('cursor-pointer') } - setup_click_handler(){ + setup_click_handler() { this.element.addEventListener('click', () => { console.log('clicked') }) diff --git a/src/util/element.ts b/src/util/element.ts index 86d5667..a5d8de0 100644 --- a/src/util/element.ts +++ b/src/util/element.ts @@ -1,4 +1,15 @@ -export const el = (tag: T, props?: Partial) => { - return document.createElement(tag, props as ElementCreationOptions); +/** Create a new element +* @param tag the html element to use +* @param props the standard html props you would normally set */ +export const el = (tag: T, props?: CustomHtmlElementTagNameMap): HTMLElementTagNameMap[T] => { + const element = document.createElement(tag); + if (!props) return element + Object.entries(props).forEach(([x, y]: [string, any]) => { + element[x as keyof CustomHtmlElementTagNameMap] = y + }) + return element } +type CustomHtmlElementTagNameMap = Partial> & { + style?: Partial +}