update some desktop stuff

src/ui/desktop.ts

@@ -1,6 +1,11 @@
 import Component from "./component";
+import DesktopShortcut from "./desktop_shortcut";
+import Window from "./window";
 
 export default class Desktop extends Component {
+  shortcuts: DesktopShortcut[] = [];
+  windows: Window[] = [];
+
   constructor() {
     super();
     this.element.id = "desktop";
@@ -8,28 +13,43 @@ export default class Desktop extends Component {
     this.element.style.width = "100%";
     this.element.style.display = "grid";
     this.element.style.gap = "10px";
+    this.element.style.padding = "10px";
 
     this.element.style.display = "grid";
     this.element.style.gridAutoFlow = "column";
 
     this.element.style.gridTemplateColumns =
-      "repeat(auto-fill, minmax(80px, 1fr))";
+      "repeat(auto-fill, minmax(60px, 1fr))";
     this.element.style.gridTemplateRows =
-      "repeat(auto-fill, minmax(80px, 1fr))";
+      "repeat(auto-fill, minmax(60px, 1fr))";
-
-    for (let i = 0; i < 50; i++) {
-      const component = new Component();
-      component.element.innerText = String(i);
-      component.element.style.border = "1px solid white";
-    }
   }
 
-  addApplicationIcon() {
+  updateDesktop() {
-    // reaches into the OS and adds an icon to the desktop
+    this.element.replaceChildren(...this.shortcuts.map((e) => e.element));
-    // this is a placeholder for now
+  }
+
+  addApplicationShortcut(shortcut: DesktopShortcut) {
+    this.shortcuts.push(shortcut);
+    this.updateDesktop();
+  }
+
+  addOpenedWindow(w: Window) {
+    this.windows.push(w);
+    this.element.appendChild(w.start());
+  }
+
+  initDesktopShortcuts() {
+    this.addApplicationShortcut(
+      new DesktopShortcut("../../assets/home.png", "Home"),
+    );
+    this.addApplicationShortcut(
+      new DesktopShortcut("../../assets/file-image.png", "img_12131995.png"),
+    );
+    this.addOpenedWindow(new Window());
   }
 
   start() {
+    this.initDesktopShortcuts();
     return this.element;
   }
 }

src/ui/desktop_shortcut.ts

@@ -0,0 +1,44 @@
+import Component from "./component";
+
+export default class DesktopShortcut extends Component {
+  icon: string;
+  title: string;
+
+  constructor(icon: string, title: string) {
+    super();
+    this.icon = icon;
+    this.title = title;
+
+    this.element.style.borderRadius = "10px";
+    this.element.style.cursor = "pointer";
+    this.element.style.color = "white";
+    this.element.style.justifyContent = "center";
+    this.element.style.display = "flex";
+    this.element.style.flexDirection = "column";
+    this.element.style.alignItems = "center";
+    this.element.style.padding = "6px";
+
+    this.element.addEventListener("mouseover", () => {
+      this.element.style.border = "1px solid #0000005f";
+    });
+
+    this.element.addEventListener("mouseout", () => {
+      this.element.style.border = "1px solid #00000000";
+    });
+
+    const _icon = document.createElement("img");
+    const _title = document.createElement("p");
+
+    _icon.src = this.icon;
+    _icon.style.width = "30px";
+
+    _title.textContent = this.title;
+    _title.style.margin = "0";
+    _title.style.fontSize = "12px";
+    _title.style.marginTop = "4px";
+    _title.style.wordWrap = "anywhere";
+
+    this.addChild(_icon);
+    this.addChild(_title);
+  }
+}

src/ui/index.ts

@@ -36,10 +36,10 @@ export default class UI extends Component {
     desktop_container.id = "desktop_container";
     desktop_container.style.display = "flex";
     desktop_container.style.height = `calc(100vh - ${this.topbar.element.clientHeight}px)`;
-    this.addChild(desktop_container);
 
     desktop_container.appendChild(this.navbar.start());
     desktop_container.appendChild(this.desktop.start());
+    this.addChild(desktop_container);
 
     return this.element;
   }

src/ui/window.ts

@@ -1,14 +1,19 @@
 export default class Window {
-  element: HTMLDialogElement = document.createElement("dialog");
+  element: HTMLDivElement = document.createElement("div");
   initial_size = { w: 500, h: 500 } as const;
 
   constructor() {
-    this.element.style.backgroundColor = "black";
+    this.element.style.backgroundColor = "#ccc";
-    this.element.style.width = `${this.initial_size.w}`;
+    this.element.style.width = `${this.initial_size.w}px`;
-    this.element.style.height = `${this.initial_size.h}`;
+    this.element.style.height = `${this.initial_size.h}px`;
+    this.element.style.position = "absolute";
+    this.element.style.zIndex = "10";
+    this.element.style.borderRadius = "10px";
+    this.element.style.boxShadow =
+      "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)";
   }
 
-  start(): HTMLDialogElement {
+  start(): HTMLDivElement {
     return this.element;
   }
 }