diff --git a/bun.lockb b/bun.lockb
index d8dead7..25c74d4 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/index.html b/index.html
index 3ddb60f..fb6f04e 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,14 @@
-
+
-
-
-
-
- KlectrDesktop
-
-
-
-
-
-
-
-
+
+
+
+
+
+ KlectrDesktop
+
+
+
+
+
diff --git a/package.json b/package.json
index a1feedf..7b181a7 100644
--- a/package.json
+++ b/package.json
@@ -1,15 +1,15 @@
{
"name": "klectrdesktop",
- "module": "index.ts",
+ "private": true,
+ "version": "0.0.1",
"type": "module",
- "main": "dist/index.js",
"scripts": {
- "start": "bun index.ts"
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview"
},
"devDependencies": {
- "@types/bun": "^1.1.4"
- },
- "peerDependencies": {
- "typescript": "^5.0.0"
+ "typescript": "^5.2.2",
+ "vite": "^5.2.0"
}
}
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index af79c39..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import OS from "./os/index";
-import UI from "./ui/index";
-
-const os = new OS()
-const ui = new UI()
-
-os.addUi(ui)
-ui.addOs(os)
-
-os.start()
-ui.start()
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..fb99293
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,11 @@
+import OS from "./os/index.js";
+import UI from "./ui/index.js";
+
+const os = new OS();
+const ui = new UI();
+
+os.addUi(ui);
+ui.addOs(os);
+
+os.start();
+ui.start();
diff --git a/src/os/applications.js b/src/os/applications.js
deleted file mode 100644
index bc20fbd..0000000
--- a/src/os/applications.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default class Applications {
- constructor() {
- this.applications = []
- }
-
- addApplication(application) {
- this.applications.push(application)
- }
-
- getApplications() {
- return this.applications
- }
-}
diff --git a/src/os/applications.ts b/src/os/applications.ts
new file mode 100644
index 0000000..71c8f88
--- /dev/null
+++ b/src/os/applications.ts
@@ -0,0 +1,14 @@
+export default class Applications {
+ applications: unknown[];
+ constructor() {
+ this.applications = [];
+ }
+
+ addApplication(application: unknown) {
+ this.applications.push(application);
+ }
+
+ getApplications() {
+ return this.applications;
+ }
+}
diff --git a/src/os/cursor.js b/src/os/cursor.js
deleted file mode 100644
index 15cd134..0000000
--- a/src/os/cursor.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default class Cursor {
- constructor() {
- document.addEventListener('mousemove', this.start.bind(this))
- }
-
- /** @param {MouseEvent} e */
- start(e) {
- // console.log(e)
- }
-}
diff --git a/src/os/cursor.ts b/src/os/cursor.ts
new file mode 100644
index 0000000..db625ea
--- /dev/null
+++ b/src/os/cursor.ts
@@ -0,0 +1,9 @@
+export default class Cursor {
+ constructor() {
+ document.addEventListener("mousemove", this.start.bind(this));
+ }
+
+ start(e: MouseEvent) {
+ console.log(e);
+ }
+}
diff --git a/src/os/filesystem.js b/src/os/filesystem.js
deleted file mode 100644
index 532023e..0000000
--- a/src/os/filesystem.js
+++ /dev/null
@@ -1,25 +0,0 @@
-export default class Filesystem {
- constructor() {
- this.files = []
- }
-
- /** @param {string} path */
- addFile(path) {
- this.files.push(path)
- }
-
- /** @param {string} path */
- removeFile(path) {
- this.files = this.files.filter(file => file !== path)
- }
-
- /** @param {string} path */
- getFile(path) {
- return this.files.find(file => file === path)
- }
-
- /** @param {string} path */
- getFiles() {
- return this.files
- }
-}
diff --git a/src/os/filesystem.ts b/src/os/filesystem.ts
new file mode 100644
index 0000000..b3d86a1
--- /dev/null
+++ b/src/os/filesystem.ts
@@ -0,0 +1,23 @@
+export default class Filesystem {
+ files: unknown[];
+
+ constructor() {
+ this.files = [];
+ }
+
+ addFile(path: string) {
+ this.files.push(path);
+ }
+
+ removeFile(path: string) {
+ this.files = this.files.filter((file) => file !== path);
+ }
+
+ getFile(path: string) {
+ return this.files.find((file) => file === path);
+ }
+
+ getFiles() {
+ return this.files;
+ }
+}
diff --git a/src/os/index.js b/src/os/index.js
deleted file mode 100644
index 9e4fd9c..0000000
--- a/src/os/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Cursor from "./cursor"
-import Filesystem from "./filesystem"
-import Applications from "./applications"
-
-export default class OS {
- ui
- cursor
- filesystem
- applications
-
- constructor() {
- this.cursor = new Cursor()
- this.filesystem = new Filesystem()
- this.applications = new Applications()
- }
-
- /** @param {UI} ui */
- addUi(ui) {
- this.ui = ui
- }
-
- start() {
- console.log('start os')
- return this
- }
-}
diff --git a/src/os/index.ts b/src/os/index.ts
new file mode 100644
index 0000000..d1eafc8
--- /dev/null
+++ b/src/os/index.ts
@@ -0,0 +1,26 @@
+import Cursor from "./cursor";
+import Filesystem from "./filesystem";
+import Applications from "./applications";
+import UI from "../ui";
+
+export default class OS {
+ ui: UI | undefined;
+ cursor: Cursor;
+ filesystem: Filesystem;
+ applications: Applications;
+
+ constructor() {
+ this.cursor = new Cursor();
+ this.filesystem = new Filesystem();
+ this.applications = new Applications();
+ }
+
+ addUi(ui: UI) {
+ this.ui = ui;
+ }
+
+ start() {
+ console.log("start os");
+ return this;
+ }
+}
diff --git a/src/ui/component.js b/src/ui/component.js
deleted file mode 100644
index 4c5c60a..0000000
--- a/src/ui/component.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default class Component {
- /** @type {HTMLDivElement}*/
- element = document.createElement("div")
-
-
- /** @param {HTMLElement} child*/
- addChild(child) {
- this.element.appendChild(child)
- }
-
- start() {
- return this.element
- }
-
-}
diff --git a/src/ui/component.ts b/src/ui/component.ts
new file mode 100644
index 0000000..9ec9942
--- /dev/null
+++ b/src/ui/component.ts
@@ -0,0 +1,11 @@
+export default class Component {
+ element: HTMLDivElement = document.createElement("div");
+
+ addChild(child: HTMLDivElement) {
+ this.element.appendChild(child);
+ }
+
+ start() {
+ return this.element;
+ }
+}
diff --git a/src/ui/desktop.js b/src/ui/desktop.js
deleted file mode 100644
index 63840e2..0000000
--- a/src/ui/desktop.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import Component from "./component"
-
-export default class Desktop extends Component {
-
- constructor() {
- super()
- this.element.id = 'desktop'
- this.element.style.height = '100%'
- this.element.style.width = '100%'
- this.element.style.display = 'grid'
- this.element.style.gap = '10px'
-
- this.element.style.display = 'grid'
- this.element.style.gridAutoFlow = 'column'
-
- this.element.style.gridTemplateColumns = 'repeat(auto-fill, minmax(80px, 1fr))'
- this.element.style.gridTemplateRows = 'repeat(auto-fill, minmax(80px, 1fr))'
-
- for (let i = 0; i < 50; i++) {
- const component = new Component()
- component.element.innerText = i
- component.element.style.border = '1px solid white'
- }
- }
-
- addApplicationIcon() {
- // reaches into the OS and adds an icon to the desktop
- // this is a placeholder for now
- }
-
- start() {
- return this.element
- }
-}
diff --git a/src/ui/desktop.ts b/src/ui/desktop.ts
new file mode 100644
index 0000000..1c3d41d
--- /dev/null
+++ b/src/ui/desktop.ts
@@ -0,0 +1,35 @@
+import Component from "./component";
+
+export default class Desktop extends Component {
+ constructor() {
+ super();
+ this.element.id = "desktop";
+ this.element.style.height = "100%";
+ this.element.style.width = "100%";
+ this.element.style.display = "grid";
+ this.element.style.gap = "10px";
+
+ this.element.style.display = "grid";
+ this.element.style.gridAutoFlow = "column";
+
+ this.element.style.gridTemplateColumns =
+ "repeat(auto-fill, minmax(80px, 1fr))";
+ this.element.style.gridTemplateRows =
+ "repeat(auto-fill, minmax(80px, 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() {
+ // reaches into the OS and adds an icon to the desktop
+ // this is a placeholder for now
+ }
+
+ start() {
+ return this.element;
+ }
+}
diff --git a/src/ui/index.js b/src/ui/index.js
deleted file mode 100644
index ad21f62..0000000
--- a/src/ui/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import OS from "../os/index"
-import Component from "./component";
-import NavBar from "./nav";
-import TopBar from "./topbar";
-import Desktop from "./desktop";
-
-export default class UI extends Component {
- os
- topbar
- navbar
- desktop
-
- constructor() {
- super()
-
- this.element.style.height = '100vh'
- this.element.style.width = '100vw'
- }
-
- /** @param {OS} os */
- addOs(os) {
- this.os = os
- }
-
- start() {
- console.log("start ui")
- this.element.id = 'ui'
- document.body.appendChild(this.element)
-
- this.topbar = new TopBar()
- this.addChild(this.topbar.start())
-
- this.navbar = new NavBar()
- this.desktop = new Desktop()
-
- 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)`
- this.addChild(desktop_container)
-
- desktop_container.appendChild(this.navbar.start())
- desktop_container.appendChild(this.desktop.start())
-
- return this.element
- }
-}
diff --git a/src/ui/index.ts b/src/ui/index.ts
new file mode 100644
index 0000000..0682e17
--- /dev/null
+++ b/src/ui/index.ts
@@ -0,0 +1,46 @@
+import OS from "../os/index";
+import Component from "./component";
+import NavBar from "./nav";
+import TopBar from "./topbar";
+import Desktop from "./desktop";
+
+export default class UI extends Component {
+ os?: OS;
+ topbar?: TopBar;
+ navbar?: NavBar;
+ desktop?: Desktop;
+
+ constructor() {
+ super();
+
+ this.element.style.height = "100vh";
+ this.element.style.width = "100vw";
+ }
+
+ addOs(os: OS) {
+ this.os = os;
+ }
+
+ start() {
+ console.log("start ui");
+ this.element.id = "ui";
+ document.body.appendChild(this.element);
+
+ this.topbar = new TopBar();
+ this.addChild(this.topbar.start());
+
+ this.navbar = new NavBar();
+ this.desktop = new Desktop();
+
+ 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)`;
+ this.addChild(desktop_container);
+
+ desktop_container.appendChild(this.navbar.start());
+ desktop_container.appendChild(this.desktop.start());
+
+ return this.element;
+ }
+}
diff --git a/src/ui/nav.js b/src/ui/nav.ts
similarity index 100%
rename from src/ui/nav.js
rename to src/ui/nav.ts
diff --git a/src/ui/topbar.js b/src/ui/topbar.ts
similarity index 100%
rename from src/ui/topbar.js
rename to src/ui/topbar.ts
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..75abdef
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}