diff --git a/src/components/task-bar/TaskBar.module.css b/src/components/task-bar/TaskBar.module.css index fa95cec..adcbcaa 100644 --- a/src/components/task-bar/TaskBar.module.css +++ b/src/components/task-bar/TaskBar.module.css @@ -105,6 +105,7 @@ .Util-icons { display: flex; + gap: 0; justify-content: flex-end; align-items: center; height: 100%; @@ -115,10 +116,14 @@ .Util-icons > * { height: 100%; + width: min-content; + margin: 0; } .Util-icons > * > svg { height: 1rem; + width: 1rem; + aspect-ratio: 1; } #desktop-button { diff --git a/src/components/windows/Window.jsx b/src/components/windows/Window.jsx index fd4310f..6f121f5 100644 --- a/src/components/windows/Window.jsx +++ b/src/components/windows/Window.jsx @@ -25,6 +25,10 @@ export function Window({ id, app, size, position, focused = false, onInteract, o const windowsManager = useWindowsManager(); const nodeRef = useRef(null); + const [initialised, setInitialised] = useState(false); + const [startSize, setStartSize] = useState(size); + const [startPosition, setStartPosition] = useState(position); + const [maximized, setMaximized] = useState(false); const [minimized, setMinimized] = useState(false); @@ -37,10 +41,31 @@ export function Window({ id, app, size, position, focused = false, onInteract, o const resizeObserver = new ResizeObserver((event) => { setScreenWidth(event[0].contentBoxSize[0].inlineSize); setScreenHeight(event[0].contentBoxSize[0].blockSize); + setInitialised(true); }); resizeObserver.observe(document.getElementById("root")); - }); + }, []); + + useEffect(() => { + if (!initialised) + return; + + if (size.x > screenWidth || size.y > screenHeight) { + setStartSize(new Vector2(screenWidth - 32, screenHeight - 32)); + setStartPosition(new Vector2(16, 16)); + setMaximized(true); + } else { + if (position.x > screenWidth) { + position.x = 0; + setStartPosition(position); + } + if (position.y > screenHeight) { + position.y = 0; + setStartPosition(position); + } + } + }, [initialised, position, size, screenHeight, screenWidth]); const close = (event) => { event?.preventDefault(); @@ -65,13 +90,13 @@ export function Window({ id, app, size, position, focused = false, onInteract, o diff --git a/src/features/windows/windows.js b/src/features/windows/windows.js index 93a9d80..cd1af70 100644 --- a/src/features/windows/windows.js +++ b/src/features/windows/windows.js @@ -1,7 +1,6 @@ import ApplicationsManager from "../applications/applications.js"; import { randomRange } from "../math/random.js"; import Vector2 from "../math/vector2.js"; - import { VirtualFile } from "../virtual-drive/virtual-file.js"; export default class WindowsManager { @@ -112,6 +111,9 @@ export default class WindowsManager { this.updateWindows = updateWindows; } + /** + * @returns {string[]} + */ get windowIds() { return Object.keys(this.windows); } diff --git a/src/styles/global.css b/src/styles/global.css index 15ffa73..f75aa91 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -118,6 +118,14 @@ code { font-family: var(--mono-font-family); } +button { + margin: 0; + border: none; + outline: none; + transition: background-color 100ms ease-in-out; + cursor: pointer; +} + *::selection { color: var(--background-color-c); background-color: var(--grey-b);