diff --git a/assets/apps.svg b/assets/apps.svg index b07ee19..7f68c72 100644 --- a/assets/apps.svg +++ b/assets/apps.svg @@ -1,9 +1,8 @@ - - - - - - - - + + + + + diff --git a/assets/documents.svg b/assets/documents.svg new file mode 100644 index 0000000..cdea0b1 --- /dev/null +++ b/assets/documents.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/file.svg b/assets/file.svg new file mode 100644 index 0000000..440cc71 --- /dev/null +++ b/assets/file.svg @@ -0,0 +1 @@ + diff --git a/assets/folder.svg b/assets/folder.svg new file mode 100644 index 0000000..1529f6b --- /dev/null +++ b/assets/folder.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/go-home.svg b/assets/go-home.svg new file mode 100644 index 0000000..e8d2c46 --- /dev/null +++ b/assets/go-home.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/home.svg b/assets/home.svg new file mode 100644 index 0000000..ba93b9e --- /dev/null +++ b/assets/home.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/homebank.svg b/assets/homebank.svg deleted file mode 100644 index 73984a2..0000000 --- a/assets/homebank.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/image_outline.svg b/assets/image_outline.svg new file mode 100644 index 0000000..702383b --- /dev/null +++ b/assets/image_outline.svg @@ -0,0 +1 @@ + diff --git a/assets/images.svg b/assets/images.svg new file mode 100644 index 0000000..7982e6a --- /dev/null +++ b/assets/images.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/wallpaper.jpg b/assets/wallpaper.jpg deleted file mode 100644 index 11fb83a..0000000 Binary files a/assets/wallpaper.jpg and /dev/null differ diff --git a/assets/wallpaper2.jpg b/assets/wallpaper2.jpg deleted file mode 100644 index f2ad5a9..0000000 Binary files a/assets/wallpaper2.jpg and /dev/null differ diff --git a/index.css b/index.css index c5fc2f9..c53d687 100644 --- a/index.css +++ b/index.css @@ -13,13 +13,23 @@ html { } body { - background-image: url("./assets/wallpaper3.png"); - background-size: cover; - background-repeat: no-repeat; width: 100vw; height: 100vh; - background-position: center; overflow: hidden; padding: 0; margin: 0; } + +#wallpaper { + position: fixed; + top: -1; + left: -1; + width: 101vw; + height: 101vh; + background-image: url("./assets/wallpaper7.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + z-index: -1; + filter: blur(2px); +} diff --git a/index.html b/index.html index fb6f04e..b45edc4 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ KlectrDesktop +
diff --git a/src/os/applications.ts b/src/os/applications.ts index e4c7f29..3b8f1c5 100644 --- a/src/os/applications.ts +++ b/src/os/applications.ts @@ -4,9 +4,11 @@ import FileManager from "./applications/fileManager"; export default class Applications { /** currently openedd applications */ applications: Application[]; + os: OS; - constructor() { - this.applications = []; + constructor(os: OS) { + this.applications = [new FileManager("File Manager", this)]; + this.os = os; } addApplication(application: Application) { @@ -22,8 +24,13 @@ export default class Applications { console.log("skipping file manager"); return } - const app = new FileManager() + const app = new FileManager("File Manager", this) this.applications.push(app); return app } + + end_application(application: Application) { + this.applications = this.applications.filter(app => app !== application); + this.os.ui.updateDesktop(); + } } diff --git a/src/os/applications/application.ts b/src/os/applications/application.ts index c210bc4..39408b0 100644 --- a/src/os/applications/application.ts +++ b/src/os/applications/application.ts @@ -1,7 +1,16 @@ +import Window from "../../ui/window"; +import Applications from "../applications"; + export default class Application { name: string; - constructor(name: string) { + parent: Applications; + ui_element: Window; + + constructor(name: string, parent: Applications) { this.name = name; + this.parent = parent + this.ui_element = new Window(this); + this.init() } getName() { @@ -19,4 +28,12 @@ export default class Application { run() { console.log(`Running ${this.getName()}`); } + + remove_window() { + this.parent.end_application(this); + } + + init(){ + console.log(`Initializing ${this.getName()}`); + } } diff --git a/src/os/applications/fileManager.ts b/src/os/applications/fileManager.ts index bb68d25..e2d8af5 100644 --- a/src/os/applications/fileManager.ts +++ b/src/os/applications/fileManager.ts @@ -4,21 +4,50 @@ export default class FileManager extends Application { /** the ui element for this application */ - ui_element: Window; icon: string = "📁"; - constructor() { - super("File Manager"); - this.ui_element = new Window(this); - } - getDescription() { return "This is a file manager"; } + + init_window_ui() { + this.ui_element.add_content(` +
+
+ +
+ + +
+
+ + Folder 1 +
+
+
+`); + } /** returns the ui for this application */ run(){ const el = this.ui_element.start() return el } + + init(){ + this.init_window_ui() + } } diff --git a/src/os/index.ts b/src/os/index.ts index 9a761ef..f07d7a5 100644 --- a/src/os/index.ts +++ b/src/os/index.ts @@ -10,9 +10,9 @@ export default class OS { applications: Applications; constructor() { - this.cursor = new Cursor(); - this.filesystem = new Filesystem(); - this.applications = new Applications(); + this.cursor = new Cursor(this); + this.filesystem = new Filesystem(this); + this.applications = new Applications(this); } addUi(ui: UI) { @@ -20,7 +20,6 @@ export default class OS { } start() { - console.log("start os"); return this; } diff --git a/src/ui/desktop.ts b/src/ui/desktop.ts index 11710ac..899d5c2 100644 --- a/src/ui/desktop.ts +++ b/src/ui/desktop.ts @@ -29,7 +29,7 @@ export default class Desktop extends Component { const windows = this.os.applications.getApplications() console.log(windows) this.shortcuts_container.element.replaceChildren(...this.shortcuts.map(s => s.start())); - this.windows_container.element.replaceChildren(...windows.map(w => w.ui_element.start())); + this.windows_container.element.replaceChildren(...windows.map(w => w.run())); } addApplicationShortcut(shortcut: DesktopShortcut) { @@ -44,7 +44,7 @@ export default class Desktop extends Component { initDesktopShortcuts() { this.addApplicationShortcut( - new DesktopShortcut("../../assets/homebank.svg", "Home", this.os, 'file_manager'), + new DesktopShortcut("../../assets/home.svg", "Home", this.os, 'file_manager'), ); this.addApplicationShortcut( new DesktopShortcut("../../assets/image.svg", "fun.png", this.os, 'image_viewer'), diff --git a/src/ui/nav.ts b/src/ui/nav.ts index ac4f52b..b9da56b 100644 --- a/src/ui/nav.ts +++ b/src/ui/nav.ts @@ -5,7 +5,7 @@ export default class NavBar extends Component { constructor() { super() - this.element.classList.add('flex', 'flex-column', 'w-20', 'h-full', 'bg-[#000a]', '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(){ @@ -40,7 +40,7 @@ class Application extends Component { start() { this.setup_click_handler() this.element.innerHTML = ` - + ` return this.element } diff --git a/src/ui/topbar.ts b/src/ui/topbar.ts index 8d862ef..8f2ef2b 100644 --- a/src/ui/topbar.ts +++ b/src/ui/topbar.ts @@ -12,7 +12,7 @@ export default class TopBar extends Component { add_time(){ const date = new Date() this.time = new Component() - this.time.element.classList.add( "text-white", "text-center", "cursor-default") + this.time.element.classList.add( "text-white", "text-center", "cursor-default", "text-xs") this.time.element.innerText = format(date, "MMM dd H:mm aa") this.element.appendChild(this.time.start()) diff --git a/src/ui/window.ts b/src/ui/window.ts index 4a4c562..4b5f59c 100644 --- a/src/ui/window.ts +++ b/src/ui/window.ts @@ -10,13 +10,12 @@ export default class Window { resize_start_pos: { x: number, y: number } = { x: 0, y: 0 }; constructor(application: Application) { - this.element.classList.add("bg-[#ccc]", "absolute", "rounded-lg", "shadow-xl"); + this.element.classList.add("bg-[#333]", "absolute", "rounded-xl", "shadow-sm"); this.element.style.width = `${this.initial_size.w}px`; this.element.style.height = `${this.initial_size.h}px`; this.application = application; this._add_header(); - this._add_content("This is a test"); this._add_resize_handles(); this._handle_drag() } @@ -25,9 +24,10 @@ export default class Window { this.header = new Component() this.header.element.id = "header"; this.header.element.classList.add( - "bg-[#333]", "py-1","px-4", "text-sm", "text-[#eee]", "rounded-t", "text-center", "cursor-move", "flex", "justify-between", - "items-center" + "bg-[#333]", "py-1","px-4", "text-sm", "text-[#eee]", "rounded-t-xl", "text-center", "cursor-move", "flex", "justify-between", + "items-center", "border-b", "border-[#444]", ); + this.header.element.style.height = "2rem" this.element.appendChild(this.header.start()); const window_title = new Component('window-title') @@ -38,8 +38,9 @@ export default class Window { close_btn_container.element.classList.add("flex-1", "justify-end", "flex") const closeButton= document.createElement('button') - closeButton.textContent = "X" - closeButton.classList.add("hover:rounded-full", "hover:bg-[#f554]", "w-6", "h-6", "hover", "font-red") + closeButton.onclick = this._handle_close.bind(this); + closeButton.textContent = "x" + closeButton.classList.add("hover:rounded-full", "hover:bg-[#111]", "w-6", "h-6", "hover", "font-red", "flex", "justify-center", "transition-all") const dummy = document.createElement('div') dummy.classList.add("flex-1") @@ -86,10 +87,14 @@ export default class Window { } } - private _add_content(content: string): HTMLDivElement { + private _handle_close(): void { + this.application.remove_window(this); + } + + add_content(content: string): HTMLDivElement { const content_element = document.createElement("div"); - content_element.classList.add("bg-[#eee]", "p-2", "text-sm", "text-[#333]"); - content_element.innerText = content; + content_element.style.height = "calc(100% - 2rem)" + content_element.innerHTML = content; this.element.appendChild(content_element); return content_element; }