From 47525f13472564e58ba4066286a97e205dff6f1a Mon Sep 17 00:00:00 2001
From: Prozilla <business@prozilla.dev>
Date: Tue, 8 Aug 2023 15:24:12 +0200
Subject: [PATCH] Improved windows rendering

---
 .../media/applications/icons/calculator.svg   | 44 +++++++++++++++++++
 .../applications/calculator/Calculator.jsx    |  7 +++
 .../calculator/Calculator.module.css          |  0
 .../applications/settings/Settings.jsx        |  7 ++-
 .../applications/settings/Settings.module.css |  2 +-
 src/components/task-bar/menus/HomeMenu.jsx    |  4 +-
 src/components/windows/Window.jsx             |  6 +--
 src/features/applications/applications.js     | 20 +++++++--
 src/features/windows/windows.js               | 20 ++++++---
 9 files changed, 95 insertions(+), 15 deletions(-)
 create mode 100644 public/media/applications/icons/calculator.svg
 create mode 100644 src/components/applications/calculator/Calculator.jsx
 create mode 100644 src/components/applications/calculator/Calculator.module.css

diff --git a/public/media/applications/icons/calculator.svg b/public/media/applications/icons/calculator.svg
new file mode 100644
index 0000000..613f4c0
--- /dev/null
+++ b/public/media/applications/icons/calculator.svg
@@ -0,0 +1,44 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M168.75 0H31.25C21.25 0 12.5 8.75 12.5 18.75V181.25C12.5 191.25 21.25 200 31.25 200H168.75C178.75 200 187.5 191.25 187.5 181.25V18.75C187.5 8.75 178.75 0 168.75 0ZM62.5 170C62.5 172.5 60 175 57.5 175H42.5C40 175 37.5 172.5 37.5 170V155C37.5 152.5 40 150 42.5 150H57.5C60 150 62.5 152.5 62.5 155V170ZM62.5 120C62.5 122.5 60 125 57.5 125H42.5C40 125 37.5 122.5 37.5 120V105C37.5 102.5 40 100 42.5 100H57.5C60 100 62.5 102.5 62.5 105V120ZM112.5 170C112.5 172.5 110 175 107.5 175H92.5C90 175 87.5 172.5 87.5 170V155C87.5 152.5 90 150 92.5 150H107.5C110 150 112.5 152.5 112.5 155V170ZM112.5 120C112.5 122.5 110 125 107.5 125H92.5C90 125 87.5 122.5 87.5 120V105C87.5 102.5 90 100 92.5 100H107.5C110 100 112.5 102.5 112.5 105V120ZM162.5 170C162.5 172.5 160 175 157.5 175H142.5C140 175 137.5 172.5 137.5 170V105C137.5 102.5 140 100 142.5 100H157.5C160 100 162.5 102.5 162.5 105V170ZM162.5 70C162.5 72.5 160 75 157.5 75H42.5C40 75 37.5 72.5 37.5 70V30C37.5 27.5 40 25 42.5 25H157.5C160 25 162.5 27.5 162.5 30V70Z" fill="#222F3E"/>
+<g filter="url(#filter0_d_116_74)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M157.5 175C160 175 162.5 172.5 162.5 170V105C162.5 102.5 160 100 157.5 100H142.5C140 100 137.5 102.5 137.5 105V170C137.5 172.5 140 175 142.5 175H157.5Z" fill="#2E86DE"/>
+</g>
+<g filter="url(#filter1_d_116_74)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.5 175C60 175 62.5 172.5 62.5 170V155C62.5 152.5 60 150 57.5 150H42.5C40 150 37.5 152.5 37.5 155V170C37.5 172.5 40 175 42.5 175H57.5ZM57.5 125C60 125 62.5 122.5 62.5 120V105C62.5 102.5 60 100 57.5 100H42.5C40 100 37.5 102.5 37.5 105V120C37.5 122.5 40 125 42.5 125H57.5ZM107.5 175C110 175 112.5 172.5 112.5 170V155C112.5 152.5 110 150 107.5 150H92.5C90 150 87.5 152.5 87.5 155V170C87.5 172.5 90 175 92.5 175H107.5ZM107.5 125C110 125 112.5 122.5 112.5 120V105C112.5 102.5 110 100 107.5 100H92.5C90 100 87.5 102.5 87.5 105V120C87.5 122.5 90 125 92.5 125H107.5Z" fill="#8395A7"/>
+</g>
+<g filter="url(#filter2_d_116_74)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M157.5 75C160 75 162.5 72.5 162.5 70V30C162.5 27.5 160 25 157.5 25H42.5C40 25 37.5 27.5 37.5 30V70C37.5 72.5 40 75 42.5 75H157.5Z" fill="#48DBFB"/>
+</g>
+<defs>
+<filter id="filter0_d_116_74" x="117.5" y="80" width="65" height="115" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="10"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_116_74"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_116_74" result="shape"/>
+</filter>
+<filter id="filter1_d_116_74" x="17.5" y="80" width="115" height="115" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="10"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_116_74"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_116_74" result="shape"/>
+</filter>
+<filter id="filter2_d_116_74" x="17.5" y="5" width="165" height="90" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="10"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_116_74"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_116_74" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/components/applications/calculator/Calculator.jsx b/src/components/applications/calculator/Calculator.jsx
new file mode 100644
index 0000000..cfff69e
--- /dev/null
+++ b/src/components/applications/calculator/Calculator.jsx
@@ -0,0 +1,7 @@
+import styles from "./Calculator.module.css";
+
+export function Calculator() {
+	return (
+		<div></div>
+	);
+}
\ No newline at end of file
diff --git a/src/components/applications/calculator/Calculator.module.css b/src/components/applications/calculator/Calculator.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/applications/settings/Settings.jsx b/src/components/applications/settings/Settings.jsx
index 68ca9c0..9ee2cc3 100644
--- a/src/components/applications/settings/Settings.jsx
+++ b/src/components/applications/settings/Settings.jsx
@@ -62,7 +62,12 @@ function StorageTab({ virtualRoot }) {
 		</div>
 		<div className={styles["Option"]}>
 			<p className={styles["Label"]}>Manage data</p>
-			<Button className={`${styles.Button} ${styles["Button-red"]}`}>Reset</Button>
+			<Button
+				className={`${styles.Button} ${styles["Button-red"]}`}
+				onClick={() => { virtualRoot.reset?.(); }}
+			>
+				Reset
+			</Button>
 		</div>
 	</>);
 }
diff --git a/src/components/applications/settings/Settings.module.css b/src/components/applications/settings/Settings.module.css
index 62b7fa5..348e332 100644
--- a/src/components/applications/settings/Settings.module.css
+++ b/src/components/applications/settings/Settings.module.css
@@ -119,7 +119,7 @@
 	cursor: pointer;
 }
 
-.Button:hover, .Button:focus-visible-visible {
+.Button:hover, .Button:focus-visible {
 	background-color: var(--hover-color);
 }
 
diff --git a/src/components/task-bar/menus/HomeMenu.jsx b/src/components/task-bar/menus/HomeMenu.jsx
index 352243b..3f71214 100644
--- a/src/components/task-bar/menus/HomeMenu.jsx
+++ b/src/components/task-bar/menus/HomeMenu.jsx
@@ -9,6 +9,7 @@ import { closeTab } from "../../../features/utils/browser.js";
 import { useKeyboardListener } from "../../../hooks/utils/keyboard.js";
 import { useVirtualRoot } from "../../../hooks/virtual-drive/VirtualRootContext.js";
 import { useEffect, useState } from "react";
+import Vector2 from "../../../features/math/vector2.js";
 
 /**
  * @param {object} props 
@@ -72,7 +73,8 @@ export function HomeMenu({ active, setActive, search }) {
 						setActive(false);
 						windowsManager.open("text-editor", {
 							mode: "view",
-							file: virtualRoot.navigate("~/Documents").findFile("info", "md")
+							file: virtualRoot.navigate("~/Documents").findFile("info", "md"),
+							size: new Vector2(575, 675),
 						});
 					}}>
 						<FontAwesomeIcon icon={faCircleInfo}/>
diff --git a/src/components/windows/Window.jsx b/src/components/windows/Window.jsx
index 6f121f5..90d001e 100644
--- a/src/components/windows/Window.jsx
+++ b/src/components/windows/Window.jsx
@@ -1,7 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./Window.module.css";
-import { faMinus, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import { faMinus, faWindowMaximize as fasWindowMaximize, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { ReactSVG } from "react-svg";
 import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js";
 import Draggable from "react-draggable";
@@ -10,6 +9,7 @@ import { useEffect, useRef, useState } from "react";
 import Application from "../../features/applications/application.js";
 
 import Vector2 from "../../features/math/vector2.js";
+import { faWindowMaximize } from "@fortawesome/free-regular-svg-icons";
 
 /**
  * @param {object} props
@@ -123,7 +123,7 @@ export function Window({ id, app, size, position, focused = false, onInteract, o
 						<FontAwesomeIcon icon={faMinus}/>
 					</button>
 					<button title="Maximize" tabIndex={0} onClick={() => setMaximized(!maximized)}>
-						<FontAwesomeIcon icon={faSquare}/>
+						<FontAwesomeIcon icon={maximized ? fasWindowMaximize : faWindowMaximize}/>
 					</button>
 					<button title="Close" tabIndex={0} id="close-window" onClick={close}>
 						<FontAwesomeIcon icon={faXmark}/>
diff --git a/src/features/applications/applications.js b/src/features/applications/applications.js
index 494625f..ee8a3f2 100644
--- a/src/features/applications/applications.js
+++ b/src/features/applications/applications.js
@@ -5,24 +5,36 @@ import { WebView } from "../../components/applications/.templates/WebView.jsx";
 import { Terminal } from "../../components/applications/terminal/Terminal.jsx";
 import { TextEditor } from "../../components/applications/text-editor/TextEditor.jsx";
 import { Settings } from "../../components/applications/settings/Settings.jsx";
+import { Calculator } from "../../components/applications/calculator/Calculator.jsx";
+import Vector2 from "../math/vector2.js";
 
 export default class ApplicationsManager {
 	static APPLICATIONS = [
 		new Application("Terminal", "terminal", Terminal),
 		new Application("Settings", "settings", Settings),
 		// new Application("Browser", "browser"),
+		new Application("Calculator", "calculator", Calculator, { size: new Vector2(400, 600) }),
 		new Application("Text Editor", "text-editor", TextEditor),
 		// new Application("Code Editor", "code-editor"),
 		new Application("File Explorer", "file-explorer", FileExplorer),
 		new Application("Media Viewer", "media-viewer", MediaViewer),
-		new Application("Wordle", "wordle", WebView, { source: "https://prozilla.dev/wordle" }),
-		new Application("Balls", "balls", WebView, { source: "https://prozilla.dev/ball-maze" }),
-		new Application("Minesweeper", "minesweeper", WebView, { source: "https://prozilla.dev/minesweeper" }),
+		new Application("Wordle", "wordle", WebView, {
+			source: "https://prozilla.dev/wordle",
+			size: new Vector2(400, 650)
+		}),
+		new Application("Balls", "balls", WebView, {
+			source: "https://prozilla.dev/ball-maze",
+			size: new Vector2(600, 600)
+		}),
+		new Application("Minesweeper", "minesweeper", WebView, {
+			source: "https://prozilla.dev/minesweeper",
+			size: new Vector2(500, 580)
+		}),
 	];
 
 	/**
 	 * @param {string} id 
-	 * @returns {Application}
+	 * @returns {Application | null}
 	 */
 	static getApplication(id) {
 		let application = null;
diff --git a/src/features/windows/windows.js b/src/features/windows/windows.js
index cd1af70..234a3c3 100644
--- a/src/features/windows/windows.js
+++ b/src/features/windows/windows.js
@@ -3,6 +3,9 @@ import { randomRange } from "../math/random.js";
 import Vector2 from "../math/vector2.js";
 import { VirtualFile } from "../virtual-drive/virtual-file.js";
 
+export const SCREEN_MARGIN = 32;
+export const TASKBAR_HEIGHT = 48;
+
 export default class WindowsManager {
 	constructor() {
 		this.windows = {};
@@ -12,12 +15,19 @@ export default class WindowsManager {
 	/**
 	 * @param {string} appId 
 	 * @param {object | null} options 
-	 * @returns {object}
+	 * @returns {object | null}
 	 */
 	open(appId, options) {
 		const app = ApplicationsManager.getApplication(appId);
-		const size = new Vector2(700, 400);
-		const position = new Vector2(randomRange(50, 600), randomRange(50, 450));
+
+		if (app == null) {
+			console.warn(`Failed to open app ${appId}: app not found`);
+			return;
+		}
+
+		const size = options?.size ?? app.windowOptions?.size ?? new Vector2(700, 400);
+		const position = new Vector2(randomRange(SCREEN_MARGIN, window.innerWidth - size.x - SCREEN_MARGIN),
+			randomRange(SCREEN_MARGIN, window.innerHeight - size.y - SCREEN_MARGIN - TASKBAR_HEIGHT));
 
 		let id = 0;
 		while (this.windowIds.includes(id.toString())) {
@@ -59,7 +69,7 @@ export default class WindowsManager {
 		windowId = windowId.toString();
 
 		if (!this.windowIds.includes(windowId)) {
-			console.log(`Failed to close window ${windowId}: window not found`);
+			console.warn(`Failed to close window ${windowId}: window not found`);
 			return;
 		}
 		
@@ -77,7 +87,7 @@ export default class WindowsManager {
 		windowId = windowId.toString();
 
 		if (!this.windowIds.includes(windowId)) {
-			console.log(`Failed to focus window ${windowId}: window not found`);
+			console.warn(`Failed to focus window ${windowId}: window not found`);
 			return;
 		}