Added window component without functionality

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",

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",

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

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 (
 		<div className="App">
 			<TaskBar/>
+			<Window
+				app={new Application("Terminal", "terminal")}
+				size={new Vector2(500, 250)}
+				position={new Vector2(100, 50)}
+			/>
 		</div>
 	);
 }

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 {

src/components/TaskBar.js

@@ -23,13 +23,13 @@ export function TaskBar() {
 					<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/file-explorer.svg"}/>
 				</button>
 				<button>
-				<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/terminal.svg"}/>
+					<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/terminal.svg"}/>
 				</button>
 				<button>
-				<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/code-editor.svg"}/>
+					<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/code-editor.svg"}/>
 				</button>
 				<button>
-				<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/media-viewer.svg"}/>
+					<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/media-viewer.svg"}/>
 				</button>
 				<button>
 					<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/browser.svg"}/>

src/components/Window.css

@@ -0,0 +1,57 @@
+:root {
+	--header-height: 1.75rem;
+	--header-button-hover-color: rgba(255, 255, 255, 5%);
+}
+
+.Window-container {
+	position: absolute;
+	background-color: var(--background-color-c);
+}
+
+.Header {
+	display: flex;
+	align-items: center;
+	height: var(--header-height);
+	padding: 0.25rem;
+	padding-right: 0;
+	background-color: var(--background-color-b);
+	cursor: grab;
+}
+
+.Window-icon,
+.Window-icon > div,
+.Window-icon > div > svg {
+	height: 100%;
+	width: auto;
+}
+
+.Window-icon {
+	margin-right: 0.25rem;
+}
+
+.Header > p {
+	user-select: none;
+	margin: 0;
+	margin-right: auto;
+}
+
+.Header > button {
+	margin: 0;
+	padding: 0.5rem;
+}
+
+.Header button {
+	color: var(--foreground-color-a);
+	background: none;
+	cursor: pointer;
+	border: none;
+	outline: none;
+}
+
+.Header button:hover {
+	background-color: var(--header-button-hover-color);
+}
+
+.Window-content {
+
+}

src/components/Window.js

@@ -0,0 +1,36 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./Window.css";
+import { faMinus, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import { ReactSVG } from "react-svg";
+
+export function Window({ app, size, position, focused = false, minimized = false, maximized = false }) {
+	return (
+		<div
+			className="Window-container"
+			style={{
+				width: size.x,
+				height: size.y,
+				left: position.x,
+				top: position.y,
+			}}
+		>
+			<div className="Header">
+				<ReactSVG className="Window-icon" src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
+				<p>{app.name}</p>
+				<button>
+					<FontAwesomeIcon icon={faMinus}/>
+				</button>
+				<button>
+					<FontAwesomeIcon icon={faSquare}/>
+				</button>
+				<button>
+					<FontAwesomeIcon icon={faXmark}/>
+				</button>
+			</div>
+			<div className="Window-content">
+				
+			</div>
+		</div>
+	);
+}

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

src/modules/applications/application.js

@@ -0,0 +1,13 @@
+export default class Application {
+	constructor(name, id) {
+		Object.assign(this, { name, id });
+	}
+
+	start() {
+
+	}
+
+	stop() {
+
+	}
+}

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

src/modules/windows/windows.js

@@ -0,0 +1,5 @@
+export default class WindowsManager {
+	constructor() {
+		this.windows = [];
+	}
+}