refactoring some stuff

This commit is contained in:
Triston Armstrong 2024-06-25 22:08:51 -04:00
parent 0f4e13f6b0
commit 46d046b349
No known key found for this signature in database
GPG Key ID: FADE6AC6F956FC52
8 changed files with 60 additions and 37 deletions

BIN
bun.lockb

Binary file not shown.

View File

@ -27,6 +27,7 @@ export default class Application {
run() {
console.log(`Running ${this.getName()}`);
return this.ui_element.element
}
remove_window() {

View File

@ -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) {

View File

@ -1,15 +1,16 @@
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("w-full", "h-full", "gap-8", "p-2");
@ -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()
}

View File

@ -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,21 +8,24 @@ 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");
this.element.classList.add("text-white", "cursor-pointer", "flex");
this.element.classList.add("flex-col", "justify-center", "items-center", "p-2");
const _icon = document.createElement("img");
const _title = document.createElement("p");
_icon.src = this.icon;
_icon.style.width = "60px";
_title.textContent = this.title;
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);

View File

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

View File

@ -1,9 +1,9 @@
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]')
}
@ -25,7 +25,7 @@ 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')

View File

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