From 80f6e8ea809f3288ca87a3b1bbcbfed065af21fb Mon Sep 17 00:00:00 2001
From: Prozilla <business@prozilla.dev>
Date: Sun, 23 Jul 2023 20:35:34 +0200
Subject: [PATCH] Added window draw order

---
 docs/features/windows/README.md          | 4 ++--
 src/components/windows/Window.jsx        | 4 +++-
 src/components/windows/Window.module.css | 2 +-
 src/components/windows/WindowsView.jsx   | 7 ++++++-
 src/features/windows/windows.js          | 8 +++++++-
 src/hooks/windows/WindowsContext.js      | 1 +
 6 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/docs/features/windows/README.md b/docs/features/windows/README.md
index 44cc6c1..68eb775 100644
--- a/docs/features/windows/README.md
+++ b/docs/features/windows/README.md
@@ -8,6 +8,6 @@ The windows components are used to view and interact with running applications.
 
 - [x] Maximize (fullscreen)
 - [ ] Minimize
-- [x] Resize
+- [ ] Resize
 - [x] Multiple windows of the same app
-- [ ] Draw order
\ No newline at end of file
+- [x] Draw order
\ No newline at end of file
diff --git a/src/components/windows/Window.jsx b/src/components/windows/Window.jsx
index 4570360..683ab49 100644
--- a/src/components/windows/Window.jsx
+++ b/src/components/windows/Window.jsx
@@ -7,7 +7,7 @@ import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js"
 import Draggable from "react-draggable";
 import { useEffect, useRef, useState } from "react";
 
-export function Window({ id, app, size, position, focused = false }) {
+export function Window({ id, app, size, position, focused = false, onInteract }) {
 	const windowsManager = useWindowsManager();
 	const nodeRef = useRef(null);
 	const [maximized, setMaximized] = useState(false);
@@ -47,6 +47,7 @@ export function Window({ id, app, size, position, focused = false }) {
 			cancel="button"
 			nodeRef={nodeRef}
 			disabled={maximized}
+			onMouseDown={onInteract}
 		>
 			<div
 				className={classNames.join(" ")}
@@ -55,6 +56,7 @@ export function Window({ id, app, size, position, focused = false }) {
 					width: maximized ? screenWidth : size.x,
 					height: maximized ? screenHeight : size.y,
 				}}
+				onClick={onInteract}
 			>
 				<div className={`${styles.Header} Handle`}>
 					<ReactSVG className={styles["Window-icon"]} src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
diff --git a/src/components/windows/Window.module.css b/src/components/windows/Window.module.css
index 42766be..c5ecff2 100644
--- a/src/components/windows/Window.module.css
+++ b/src/components/windows/Window.module.css
@@ -8,7 +8,7 @@
 	display: flex;
 	flex-direction: column;
 	background-color: var(--background-color-c);
-	animation: pop-in 200ms ease-in-out;
+	/* animation: pop-in 200ms ease-in-out; */
 }
 
 @keyframes pop-in {
diff --git a/src/components/windows/WindowsView.jsx b/src/components/windows/WindowsView.jsx
index 3286ea6..998ed47 100644
--- a/src/components/windows/WindowsView.jsx
+++ b/src/components/windows/WindowsView.jsx
@@ -1,12 +1,17 @@
 import { Window } from "./Window.jsx";
 import { useWindows } from "../../hooks/windows/WindowsContext.js";
+import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js";
 
 export function WindowsView() {
 	const windows = useWindows();
+	const windowsManager = useWindowsManager();
 
 	return (<div>
-		{windows.map(({ id, app, size, position}) => 
+		{windows.sort((windowA, windowB) =>
+			windowA.lastInteraction - windowB.lastInteraction
+		).map(({ id, app, size, position }, index) => 
 			<Window
+				onInteract={() => { windowsManager.focus(windows[index]); }}
 				id={id}
 				key={id}
 				app={app}
diff --git a/src/features/windows/windows.js b/src/features/windows/windows.js
index 6bc07fb..0040bf7 100644
--- a/src/features/windows/windows.js
+++ b/src/features/windows/windows.js
@@ -25,7 +25,8 @@ export default class WindowsManager {
 			id,
 			app,
 			size,
-			position
+			position,
+			lastInteraction: 0
 		};
 
 		this.updateWindows(this.windows);
@@ -47,6 +48,11 @@ export default class WindowsManager {
 		// console.log(this);
 	}
 
+	focus(window) {
+		window.lastInteraction = new Date().valueOf();
+		this.updateWindows(this.windows);
+	}
+
 	isAppActive(appId) {
 		let active = false;
 
diff --git a/src/hooks/windows/WindowsContext.js b/src/hooks/windows/WindowsContext.js
index 6600837..7fa6f21 100644
--- a/src/hooks/windows/WindowsContext.js
+++ b/src/hooks/windows/WindowsContext.js
@@ -9,6 +9,7 @@ export function WindowsProvider({ children, windowsManager }) {
 	const [windows, setWindows] = useState([]);
 
 	const updateWindows = useCallback((updatedWindows) => {
+		// console.log(updatedWindows);
 		setWindows(Object.values(updatedWindows));
 	}, []);