(v0.3.7-beta) Default Settings + Others

Instead of hardcoding the positions of the windows based on a fixed height and width ive now made it so that i   can just change the width and height to  do that. The vars are in `App.js` as `WINDOW_DEFAULTS`. Made minor changes to progresspanel css

Author: rupnil-codes

README.md

@@ -74,14 +74,15 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [X] Fix the Hex in README.txt & Add full url not just /../.. (Fixed v0.1.7.6)
 - [X] CRITICAL: THE COLORS OF UI ARE BY DEFAULT BLACK MAKE IT WHITE. (Bug reported by: Felix Gao) (Fixed v0.1.7.8(1))
 - [ ] GAME IMPROVEMENT: time pressure. increment like 2 min for each puzzle start with 7 min or sm.
-- [ ] Fix puzzle numbering.
+- [X] Fix puzzle numbering.
 - [ ] Add a way to track progress.
 - [ ] Add a puzzle 1.txt or sm; time count starts after opening that file.
 - [ ] Lock some apps (Hacked yk)
 - [ ] Stress test the terminal.
 - [X] Add games like MC(https://classic.minecraft.net/) and sm others. (Added v0.3.2)
 - [ ] the grid snapping is offset from the place where icons snap when u release (Snxhit_)
 - [ ] Cmd opens on login and then the notepad opens automatically, remove the alert thing.
+- [ ] WINDOW_DEFAULTS: Now the position of the windows change with the width and height, added the vars in App.js (Done v0.3.7)
 
 
 Playtesters & Contributors: Flux3tor, Snxhit_, Matthias, Nx75, Keyboard1000n17, abtheinnovator, redac1ed, TruthEntity, SeradedStripes

src/core/WindowManager.jsx

@@ -3,6 +3,8 @@ import { Rnd } from "react-rnd";
 import "../styles/core/WindowManager.css"
 import {X, Square, Copy, Minus, Plus} from 'lucide-react';
 
+import {WINDOW_DEFAULTS} from "../data/Apps.js";
+
 export default function AppWindow({
     title,
     AppComponent,
@@ -18,10 +20,10 @@ export default function AppWindow({
     posX,
     posY
 }) {
-    const DEFAULT_WIDTH = 600;
-    const DEFAULT_HEIGHT = 400;
-    const TASKBAR_HEIGHT = 48;
-    const PADDING = 36;
+    const DEFAULT_WIDTH = WINDOW_DEFAULTS.WIDTH;
+    const DEFAULT_HEIGHT = WINDOW_DEFAULTS.HEIGHT;
+    const TASKBAR_HEIGHT = WINDOW_DEFAULTS.TASKBAR_HEIGHT;
+    const PADDING = WINDOW_DEFAULTS.OFFSET;
 
     const [state, setState] = useState({
         x: posX,

src/data/Apps.js

@@ -14,6 +14,13 @@ export function getNextZ() {
     return INITIAL_Z;
 }
 
+export const WINDOW_DEFAULTS = {
+    WIDTH: 750,
+    HEIGHT: 450,
+    OFFSET: 30,
+    TASKBAR_HEIGHT: 48
+};
+
 export const APP_REGISTRY = {
     explorer: {
         title: "Explorer",

src/routes/desktop.jsx

@@ -3,7 +3,7 @@ import '../styles/routes/desktop.css';
 import { Search } from 'lucide-react';
 import {createRef, useRef, useState, useMemo, useEffect} from "react";
 
-import { APP_REGISTRY, INITIAL_Z, getNextZ } from "../data/Apps.js";
+import {APP_REGISTRY, INITIAL_Z, getNextZ, WINDOW_DEFAULTS} from "../data/Apps.js";
 import AppWindow from "../core/WindowManager.jsx";
 
 import Draggable from 'react-draggable';
@@ -119,13 +119,13 @@ function Desktop() {
 
         if (!apps[name].isOpen) {
             if (openApps.length === 0) {
-                newX = (window.innerWidth / 2) - 300;
-                newY = (window.innerHeight / 2) - 250;
+                newX = (window.innerWidth / 2) - (WINDOW_DEFAULTS.WIDTH / 2);
+                newY = (window.innerHeight / 2) - (WINDOW_DEFAULTS.HEIGHT / 2) - (WINDOW_DEFAULTS.TASKBAR_HEIGHT);
             } else {
-                newX = lastPos.current.x + OFFSET;
-                newY = lastPos.current.y + OFFSET;
-                if (newY > window.innerHeight - 500) newY = 100;
-                if (newX > window.innerWidth - 700) newX = 100;
+                newX = lastPos.current.x + WINDOW_DEFAULTS.OFFSET;
+                newY = lastPos.current.y + WINDOW_DEFAULTS.OFFSET;
+                if (newY > window.innerHeight - WINDOW_DEFAULTS.HEIGHT) newY = 100;
+                if (newX > window.innerWidth - WINDOW_DEFAULTS.WIDTH) newX = 100;
             }
             lastPos.current = { x: newX, y: newY };
         }

src/styles/components/ProgressPanel.css

@@ -28,14 +28,14 @@
 .progress-button-active {
     padding: 0.7rem 1.2rem;
 
-    backdrop-filter: blur(2rem) brightness(3);
+    backdrop-filter: blur(2rem) brightness(1.5);
 
     border: 1px solid wheat;
 }
 .progress-button:hover {
     padding: 0.7rem 1.2rem;
 
-    backdrop-filter: blur(2rem) brightness(3);
+    backdrop-filter: blur(2rem) brightness(2);
 }
 
 .progress-container {
@@ -54,7 +54,7 @@
 
 .progress-sidebar {
     border-radius: 0.625rem;
-    backdrop-filter: blur(2rem) brightness(2);
+    backdrop-filter: blur(2rem) brightness(1.5);
     width: 18rem;
     height: 65%;