commit 2654a25c315680285b1d2764c23c3ea6beaa30ca Author: Triston Armstrong Date: Wed Jun 19 14:46:29 2024 -0500 init commit with existing code diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9b1ee42 --- /dev/null +++ b/.gitignore @@ -0,0 +1,175 @@ +# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore + +# Logs + +logs +_.log +npm-debug.log_ +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Caches + +.cache + +# Diagnostic reports (https://nodejs.org/api/report.html) + +report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json + +# Runtime data + +pids +_.pid +_.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover + +lib-cov + +# Coverage directory used by tools like istanbul + +coverage +*.lcov + +# nyc test coverage + +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) + +.grunt + +# Bower dependency directory (https://bower.io/) + +bower_components + +# node-waf configuration + +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) + +build/Release + +# Dependency directories + +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) + +web_modules/ + +# TypeScript cache + +*.tsbuildinfo + +# Optional npm cache directory + +.npm + +# Optional eslint cache + +.eslintcache + +# Optional stylelint cache + +.stylelintcache + +# Microbundle cache + +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history + +.node_repl_history + +# Output of 'npm pack' + +*.tgz + +# Yarn Integrity file + +.yarn-integrity + +# dotenv environment variable files + +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) + +.parcel-cache + +# Next.js build output + +.next +out + +# Nuxt.js build / generate output + +.nuxt +dist + +# Gatsby files + +# Comment in the public line in if your project uses Gatsby and not Next.js + +# https://nextjs.org/blog/next-9-1#public-directory-support + +# public + +# vuepress build output + +.vuepress/dist + +# vuepress v2.x temp and cache directory + +.temp + +# Docusaurus cache and generated files + +.docusaurus + +# Serverless directories + +.serverless/ + +# FuseBox cache + +.fusebox/ + +# DynamoDB Local files + +.dynamodb/ + +# TernJS port file + +.tern-port + +# Stores VSCode versions used for testing VSCode extensions + +.vscode-test + +# yarn v2 + +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +# IntelliJ based IDEs +.idea + +# Finder (MacOS) folder config +.DS_Store diff --git a/404.html b/404.html new file mode 100644 index 0000000..140555d --- /dev/null +++ b/404.html @@ -0,0 +1,15 @@ + + + + + + + 404 Not Found + + + + +

The page you are looking for doesnt exist

+ + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..d549f71 --- /dev/null +++ b/README.md @@ -0,0 +1,15 @@ +# klectrdesktop + +To install dependencies: + +```bash +bun install +``` + +To run: + +```bash +bun run index.ts +``` + +This project was created using `bun init` in bun v1.1.12. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime. diff --git a/assets/wallpaper.jpg b/assets/wallpaper.jpg new file mode 100644 index 0000000..11fb83a Binary files /dev/null and b/assets/wallpaper.jpg differ diff --git a/assets/wallpaper2.jpg b/assets/wallpaper2.jpg new file mode 100644 index 0000000..f2ad5a9 Binary files /dev/null and b/assets/wallpaper2.jpg differ diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..d8dead7 Binary files /dev/null and b/bun.lockb differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..506e9f7 --- /dev/null +++ b/index.css @@ -0,0 +1,21 @@ +* { + box-sizing: border-box; +} + +html { + overflow: hidden; + padding: 0; + margin: 0; +} + +body { + background-image: url("./assets/wallpaper2.jpg"); + background-size: cover; + background-repeat: no-repeat; + width: 100vw; + height: 100vh; + background-position: center; + overflow: hidden; + padding: 0; + margin: 0; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..3ddb60f --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + KlectrDesktop + + + + + + + + + diff --git a/index.ts b/index.ts new file mode 100644 index 0000000..57e37c6 --- /dev/null +++ b/index.ts @@ -0,0 +1,36 @@ +const PORT = 3000 + +Bun.serve({ + port: PORT, + async fetch(request, _server) { + const url = new URL(request.url) + + if (url.pathname === '/') { + return new Response(Bun.file("./index.html")) + } + + + if (url.pathname.endsWith(".css")) { + return new Response(Bun.file(`.${url.pathname}`)) + } + + if (url.pathname.endsWith(".jpg")) { + return new Response(Bun.file(`.${url.pathname}`)) + } + + const urlPath = `./src/${url.pathname}.js` + const file = Bun.file(urlPath) + + + if (!(await file.exists())) { + console.log('here: ', urlPath) + return new Response(Bun.file("./404.html")) + } + + return new Response(file, { + headers: { + "Content-Type": "text/javascript;charset=UTF-8" + } + }) + } +}) diff --git a/package.json b/package.json new file mode 100644 index 0000000..a1feedf --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "klectrdesktop", + "module": "index.ts", + "type": "module", + "main": "dist/index.js", + "scripts": { + "start": "bun index.ts" + }, + "devDependencies": { + "@types/bun": "^1.1.4" + }, + "peerDependencies": { + "typescript": "^5.0.0" + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..af79c39 --- /dev/null +++ b/src/index.js @@ -0,0 +1,11 @@ +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/os/applications.js b/src/os/applications.js new file mode 100644 index 0000000..bc20fbd --- /dev/null +++ b/src/os/applications.js @@ -0,0 +1,13 @@ +export default class Applications { + constructor() { + this.applications = [] + } + + addApplication(application) { + this.applications.push(application) + } + + getApplications() { + return this.applications + } +} diff --git a/src/os/cursor.js b/src/os/cursor.js new file mode 100644 index 0000000..15cd134 --- /dev/null +++ b/src/os/cursor.js @@ -0,0 +1,10 @@ +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/filesystem.js b/src/os/filesystem.js new file mode 100644 index 0000000..532023e --- /dev/null +++ b/src/os/filesystem.js @@ -0,0 +1,25 @@ +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/index.js b/src/os/index.js new file mode 100644 index 0000000..9e4fd9c --- /dev/null +++ b/src/os/index.js @@ -0,0 +1,26 @@ +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/ui/component.js b/src/ui/component.js new file mode 100644 index 0000000..4c5c60a --- /dev/null +++ b/src/ui/component.js @@ -0,0 +1,15 @@ +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/desktop.js b/src/ui/desktop.js new file mode 100644 index 0000000..63840e2 --- /dev/null +++ b/src/ui/desktop.js @@ -0,0 +1,34 @@ +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/index.js b/src/ui/index.js new file mode 100644 index 0000000..ad21f62 --- /dev/null +++ b/src/ui/index.js @@ -0,0 +1,47 @@ +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/nav.js b/src/ui/nav.js new file mode 100644 index 0000000..abb5fe3 --- /dev/null +++ b/src/ui/nav.js @@ -0,0 +1,22 @@ +import Component from "./component" + +export default class NavBar extends Component { + constructor() { + super() + + this.element.style.display = 'flex' + this.element.style.flexDirection = 'column' + this.element.style.backgroundColor = '#000000af'; + this.element.style.backdropFilter = 'blur(10px)'; + this.element.style.height = '100%' + this.element.style.width = '60px' + + } + + start() { + this.element.id = 'navbar' + return this.element + } + +} + diff --git a/src/ui/topbar.js b/src/ui/topbar.js new file mode 100644 index 0000000..24bddc2 --- /dev/null +++ b/src/ui/topbar.js @@ -0,0 +1,17 @@ +import Component from "./component" + +export default class TopBar extends Component { + constructor() { + super() + this.element.style.height = "20px" + this.element.style.width = "100%" + this.element.style.backgroundColor = "black" + } + + start() { + this.element.id = 'topbar' + return this.element + } +} + +