From 1f5e43962875c9ec00a2c8b81f7d81fd4a4128f4 Mon Sep 17 00:00:00 2001 From: Prozilla Date: Sat, 15 Jul 2023 20:23:25 +0200 Subject: [PATCH] Added window component without functionality --- package-lock.json | 13 ++++++ package.json | 1 + src/App.css | 22 +++------- src/App.js | 8 ++++ src/components/TaskBar.css | 18 +++++--- src/components/TaskBar.js | 6 +-- src/components/Window.css | 57 +++++++++++++++++++++++++ src/components/Window.js | 36 ++++++++++++++++ src/index.css | 39 +++++++++++++++++ src/modules/applications/application.js | 13 ++++++ src/modules/math/vector2.js | 8 ++++ src/modules/windows/windows.js | 5 +++ 12 files changed, 200 insertions(+), 26 deletions(-) create mode 100644 src/components/Window.css create mode 100644 src/components/Window.js create mode 100644 src/modules/applications/application.js create mode 100644 src/modules/math/vector2.js create mode 100644 src/modules/windows/windows.js diff --git a/package-lock.json b/package-lock.json index 1064f29..84137bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.4.0", + "@fortawesome/free-regular-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^5.16.5", @@ -2402,6 +2403,18 @@ "node": ">=6" } }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz", + "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@fortawesome/free-solid-svg-icons": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz", diff --git a/package.json b/package.json index 41e3882..dfb5fff 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.4.0", + "@fortawesome/free-regular-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^5.16.5", diff --git a/src/App.css b/src/App.css index 6fbbff8..500b85c 100644 --- a/src/App.css +++ b/src/App.css @@ -1,22 +1,10 @@ .App { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; background-image: url("/public/media/wallpapers/wallpaper-1.png"); background-size: cover; text-align: center; - width: 100%; - height: 100%; } - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -.App-header { - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 9c46ccf..8f7dae8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,18 @@ import "./App.css"; import { TaskBar } from "./components/TaskBar.js"; +import { Window } from "./components/Window.js"; +import Application from "./modules/applications/application.js"; +import Vector2 from "./modules/math/vector2.js"; function App() { return (
+
); } diff --git a/src/components/TaskBar.css b/src/components/TaskBar.css index e8cbe23..cfc1adb 100644 --- a/src/components/TaskBar.css +++ b/src/components/TaskBar.css @@ -1,3 +1,9 @@ +:root { + --task-bar-height: 3rem; + --task-bar-color: rgba(0, 0, 0, 75%); + --task-bar-button-hover-color: rgba(255, 255, 255, 5%); +} + .Task-bar { position: fixed; display: flex; @@ -5,20 +11,20 @@ bottom: 0; left: 0; width: 100%; - height: 3rem; - background-color: rgba(0, 0, 0, 75%); + height: var(--task-bar-height); + background-color: var(--task-bar-color); } -button { - color: white; +.Task-bar button { + color: var(--foreground-color-a); background: none; cursor: pointer; border: none; outline: none; } -button:hover { - background-color: rgba(255, 255, 255, 5%); +.Task-bar button:hover { + background-color: var(--task-bar-button-hover-color); } .Program-icons { diff --git a/src/components/TaskBar.js b/src/components/TaskBar.js index 04f8181..783e4c2 100644 --- a/src/components/TaskBar.js +++ b/src/components/TaskBar.js @@ -23,13 +23,13 @@ export function TaskBar() { + + + +
+ +
+ + ); +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index f447707..522db7a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,33 @@ +:root { + --pink-a: #ff9ff3; + --pink-b: #f368e0; + --yellow-a: #feca57; + --yellow-b: #ff9f43; + --red-a: #ff6b6b; + --red-b: #ee5253; + --light-blue-a: #ee5253; + --light-blue-b: #0abde3; + --green-a: #1dd1a1; + --green-b: #10ac84; + --cyan-a: #00d2d3; + --cyan-b: #01a3a4; + --blue-a: #54a0ff; + --blue-b: #2e86de; + --purple-a: #5f27cd; + --purple-b: #341f97; + --grey-a: #c8d6e5; + --grey-b: #8395a7; + --dark-grey-a: hsl(211, 14%, 40%); + --dark-grey-b: hsl(212, 29%, 19%); + --dark-grey-c: hsl(212, 29%, 15%); + --dark-grey-d: hsl(212, 14%, 10%); + + --foreground-color-a: #fff; + --background-color-a: var(--dark-grey-b); + --background-color-b: var(--dark-grey-c); + --background-color-c: var(--dark-grey-d); +} + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', @@ -12,7 +42,16 @@ code { monospace; } +html { + overflow: hidden; +} + html, body, #root { width: 100%; height: 100%; +} + +* { + color: var(--foreground-color-a); + box-sizing: border-box; } \ No newline at end of file diff --git a/src/modules/applications/application.js b/src/modules/applications/application.js new file mode 100644 index 0000000..1de2473 --- /dev/null +++ b/src/modules/applications/application.js @@ -0,0 +1,13 @@ +export default class Application { + constructor(name, id) { + Object.assign(this, { name, id }); + } + + start() { + + } + + stop() { + + } +} \ No newline at end of file diff --git a/src/modules/math/vector2.js b/src/modules/math/vector2.js new file mode 100644 index 0000000..12c831e --- /dev/null +++ b/src/modules/math/vector2.js @@ -0,0 +1,8 @@ +export default class Vector2 { + static ZERO = new Vector2(0, 0); + + constructor(x, y) { + this.x = x; + this.y = y ?? x; + } +} \ No newline at end of file diff --git a/src/modules/windows/windows.js b/src/modules/windows/windows.js new file mode 100644 index 0000000..1992dfe --- /dev/null +++ b/src/modules/windows/windows.js @@ -0,0 +1,5 @@ +export default class WindowsManager { + constructor() { + this.windows = []; + } +} \ No newline at end of file