init commit with existing code

2024-06-19 14:46:29 -05:00 · 2024-06-19 14:46:29 -05:00 · 2654a25c31
commit 2654a25c31
20 changed files with 513 additions and 0 deletions
--- a/.gitignore
+++ 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
--- a/404.html
+++ b/404.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>404 Not Found</title>
+  <link href="css/style.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>The page you are looking for doesnt exist</h1>
+</body>
+
+</html>
--- a/README.md
+++ 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.
--- a/assets/wallpaper.jpg
+++ b/assets/wallpaper.jpg
--- a/assets/wallpaper2.jpg
+++ b/assets/wallpaper2.jpg
--- a/bun.lockb
+++ b/bun.lockb
--- a/index.css
+++ 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;
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>KlectrDesktop</title>
+  <link href="./index.css" rel="stylesheet">
+</head>
+
+<body>
+  <noscript>You need to have javascript enbaled for this shit!</noscript>
+  <script type="module" src="./index"></script>
+</body>
+
+</html>
--- a/index.ts
+++ 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"
+      }
+    })
+  }
+})
--- a/package.json
+++ 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"
+  }
+}
--- a/src/index.js
+++ 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()
--- a/src/os/applications.js
+++ 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
+  }
+}
--- a/src/os/cursor.js
+++ 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)
+  }
+}
--- a/src/os/filesystem.js
+++ 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
+  }
+}
--- a/src/os/index.js
+++ 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
+  }
+}
--- a/src/ui/component.js
+++ 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
+  }
+
+}
--- a/src/ui/desktop.js
+++ 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
+  }
+}
--- a/src/ui/index.js
+++ 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
+  }
+}
--- a/src/ui/nav.js
+++ 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
+  }
+
+}
+
--- a/src/ui/topbar.js
+++ 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
+  }
+}
+
+