Klectr/KDesktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit with existing code

Browse Source
This commit is contained in:
Triston Armstrong 2024-06-19 14:46:29 -05:00
commit 2654a25c31
20 changed files with 513 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
.gitignore vendored Normal file
View File

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

15
404.html Normal file
View File

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

15
README.md Normal file
View File

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

BIN
assets/wallpaper.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
assets/wallpaper2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
bun.lockb Executable file
View File

Binary file not shown.

21
index.css Normal file
View File

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

16
index.html Normal file
View File

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

36
index.ts Normal file
View File

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

15
package.json Normal file
View File

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

11
src/index.js Normal file
View File

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

13
src/os/applications.js Normal file
View File

@ -0,0 +1,13 @@
export default class Applications {
constructor() {
this.applications = []
}
addApplication(application) {
this.applications.push(application)
}
getApplications() {
return this.applications
}
}

10
src/os/cursor.js Normal file
View File

@ -0,0 +1,10 @@
export default class Cursor {
constructor() {
document.addEventListener('mousemove', this.start.bind(this))
}
/** @param {MouseEvent} e */
start(e) {
// console.log(e)
}
}

25
src/os/filesystem.js Normal file
View File

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

26
src/os/index.js Normal file
View File

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

15
src/ui/component.js Normal file
View File

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

34
src/ui/desktop.js Normal file
View File

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

47
src/ui/index.js Normal file
View File

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

22
src/ui/nav.js Normal file
View File

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

17
src/ui/topbar.js Normal file
View File

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