refactoring some stuff

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()}`);
   }
 }

src/ui/component.ts

@@ -1,10 +1,12 @@
 import { el } from "../util/element";
 
 export default class Component {
-  element: HTMLDivElement = el("div");
+  element: ReturnType<typeof el>;
 
-  constructor(id: string) {
-    this.element.id = id
+  constructor(id: string, tag?: keyof HTMLElementTagNameMap) {
+    this.element = el(tag ?? "div", {
+      id: id
+    })
   }
 
   addChild(child: HTMLElement) {

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()
   }
 

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;
   }
 

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();
   }
 }

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')
     })

src/util/element.ts

@@ -1,4 +1,15 @@
-export const el = <T extends keyof HTMLElementTagNameMap>(tag: T, props?: Partial<HTMLElementTagNameMap[T]>) => {
-  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 = <T extends keyof HTMLElementTagNameMap>(tag: T, props?: CustomHtmlElementTagNameMap<T>): HTMLElementTagNameMap[T] => {
+  const element = document.createElement(tag);
+  if (!props) return element
+  Object.entries(props).forEach(([x, y]: [string, any]) => {
+    element[x as keyof CustomHtmlElementTagNameMap<T>] = y
+  })
+  return element
 }
 
+type CustomHtmlElementTagNameMap<T extends keyof HTMLElementTagNameMap> = Partial<Omit<HTMLElementTagNameMap[T], 'style'>> & {
+  style?: Partial<CSSStyleDeclaration>
+}