Added window transformations

package-lock.json

@@ -17,6 +17,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-draggable": "^4.4.5",
         "react-scripts": "5.0.1",
         "react-svg": "^16.1.18",
         "web-vitals": "^2.1.4"
@@ -6024,6 +6025,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -14556,6 +14565,19 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
+      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",

package.json

@@ -12,6 +12,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.5",
     "react-scripts": "5.0.1",
     "react-svg": "^16.1.18",
     "web-vitals": "^2.1.4"

src/components/TaskBar.css

@@ -13,6 +13,7 @@
 	width: 100%;
 	height: var(--task-bar-height);
 	background-color: var(--task-bar-color);
+	z-index: 10;
 }
 
 .Task-bar button {

src/components/TaskBar.js

@@ -34,7 +34,7 @@ export function Taskbar() {
 				<button>
 					<FontAwesomeIcon icon={faVolumeHigh}/>
 				</button>
-				<button>
+				<button style={{ userSelect: "none" }}>
 					{date.toLocaleString("en-US", {
 						hour: "numeric",
 						minute: "numeric",

src/components/Window.css

@@ -4,10 +4,13 @@
 }
 
 .Window-container {
-	position: absolute;
 	background-color: var(--background-color-c);
 }
 
+.Window-container.Maximized {
+	transform: none !important;
+}
+
 .Header {
 	display: flex;
 	align-items: center;

src/components/Window.js

@@ -4,37 +4,68 @@ import { faMinus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import { ReactSVG } from "react-svg";
 import { useWindowsManager } from "../hooks/WindowsManagerContext.js";
+import Draggable from "react-draggable";
+import { useEffect, useRef, useState } from "react";
 
-export function Window({ id, app, size, position, focused = false, minimized = false, maximized = false }) {
+export function Window({ id, app, size, position, focused = false, minimized = false }) {
 	const windowsManager = useWindowsManager();
+	const nodeRef = useRef(null);
+	const [maximized, setMaximized] = useState(false);
+
+	const [screenWidth, setScreenWidth] = useState(100);
+    const [screenHeight, setScreenHeight] = useState(100);
+
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver((event) => {
+            setScreenWidth(event[0].contentBoxSize[0].inlineSize);
+            setScreenHeight(event[0].contentBoxSize[0].blockSize);
+        });
+
+        resizeObserver.observe(document.getElementById("root"));
+    });
 
 	return (
-		<div
+		<Draggable
-			key={id}
+			axis="both"
-			className="Window-container"
+			handle=".Header"
-			style={{
+			defaultPosition={{ x: position.x, y: position.y }}
-				width: size.x,
+			position={null}
-				height: size.y,
+			scale={1}
-				left: position.x,
+			bounds={{
-				top: position.y,
+				top: 0,
+				bottom: screenHeight - 55,
+				left: -size.x + 85,
+				right: screenWidth - 5
 			}}
+			cancel="button"
+			nodeRef={nodeRef}
+			disabled={maximized}
 		>
-			<div className="Header">
+			<div
-				<ReactSVG className="Window-icon" src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
+				className={`Window-container ${maximized ? "Maximized" : ""}`}
-				<p>{app.name}</p>
+				ref={nodeRef}
-				<button>
+				style={{
-					<FontAwesomeIcon icon={faMinus}/>
+					width: maximized ? screenWidth : size.x,
-				</button>
+					height: maximized ? screenHeight : size.y,
-				<button>
+				}}
-					<FontAwesomeIcon icon={faSquare}/>
+			>
-				</button>
+				<div className="Header">
-				<button onClick={() => { windowsManager.close(id); }}>
+					<ReactSVG className="Window-icon" src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
-					<FontAwesomeIcon icon={faXmark}/>
+					<p>{app.name}</p>
-				</button>
+					<button>
-			</div>
+						<FontAwesomeIcon icon={faMinus}/>
-			<div className="Window-content">
+					</button>
+					<button onClick={() => setMaximized(!maximized)}>
+						<FontAwesomeIcon icon={faSquare}/>
+					</button>
+					<button onClick={() => { windowsManager.close(id); }}>
+						<FontAwesomeIcon icon={faXmark}/>
+					</button>
+				</div>
+				<div className="Window-content">
 					
+				</div>
 			</div>
-		</div>
+		</Draggable>
 	);
 }

src/modules/windows/windows.js

@@ -51,7 +51,6 @@ export default class WindowsManager {
 		let active = false;
 
 		Object.values(this.windows).forEach((window) => {
-			console.log(window.app.id, appId);
 			if (window.app.id === appId) {
 				active = true;
 				return;