From 30046b6f77c0b0e14827712302cc0f33fbad3284 Mon Sep 17 00:00:00 2001 From: Prozilla Date: Sun, 16 Jul 2023 14:58:31 +0200 Subject: [PATCH] Added window opening and closing --- README.md | 2 +- src/App.js | 22 ++++------ src/components/TaskBar.css | 1 + src/components/TaskBar.js | 11 ++--- src/components/Window.js | 7 +++- src/components/WindowsView.js | 18 ++++++++ src/hooks/WindowsContext.js | 26 ++++++++++++ src/hooks/WindowsManagerContext.js | 27 ++++++++++++ src/modules/applications/application.js | 12 +----- src/modules/applications/applications.js | 3 +- src/modules/windows/windows.js | 53 +++++++++++++++++------- 11 files changed, 133 insertions(+), 49 deletions(-) create mode 100644 src/components/WindowsView.js create mode 100644 src/hooks/WindowsContext.js create mode 100644 src/hooks/WindowsManagerContext.js diff --git a/README.md b/README.md index ca8f3a1..7223d1c 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ProzillaOS is a web operating system inspired by Ubuntu Linux and Windows made with React by Prozilla. It aims to function much like a real operating system, with the exception of running entirely on the web. -> Please note that ProzillaOS is far from complete and many additional features will be added in the future. +> Please note that ProzillaOS is a WIP and far from complete and many additional features will be added in the future. ## Features diff --git a/src/App.js b/src/App.js index 493fd24..fd7e897 100644 --- a/src/App.js +++ b/src/App.js @@ -1,22 +1,16 @@ -import { useEffect, useState } from "react"; import "./App.css"; import { TaskBar } from "./components/TaskBar.js"; -import WindowsManager from "./modules/windows/windows.js"; - -export const windowsManager = new WindowsManager(); +import { WindowsManagerProvider } from "./hooks/WindowsManagerContext.js"; +import { WindowsView } from "./components/WindowsView.js"; function App() { - const [windows, setWindows] = useState([]); - - useEffect(() => { - setWindows(Object.values(windowsManager.windows)); - }, []); - return ( -
- - {windows} -
+ +
+ + +
+ ); } diff --git a/src/components/TaskBar.css b/src/components/TaskBar.css index 3133f72..b16e951 100644 --- a/src/components/TaskBar.css +++ b/src/components/TaskBar.css @@ -23,6 +23,7 @@ cursor: pointer; border: none; outline: none; + transition: background-color 100ms ease-in-out; } .Task-bar button:hover { diff --git a/src/components/TaskBar.js b/src/components/TaskBar.js index cd99278..0877e3f 100644 --- a/src/components/TaskBar.js +++ b/src/components/TaskBar.js @@ -4,10 +4,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBatteryFull, faSearch, faVolumeHigh, faWifi } from "@fortawesome/free-solid-svg-icons"; import { ReactSVG } from "react-svg"; import ApplicationsManager from "../modules/applications/applications.js"; -import { windowsManager } from "../App.js"; +import { useWindowsManager } from "../hooks/WindowsManagerContext.js"; export function TaskBar() { const [date, setDate] = useState(new Date()); + const windowsManager = useWindowsManager(); useEffect(() => { setInterval(() => { @@ -21,11 +22,11 @@ export function TaskBar() { - {ApplicationsManager.APPLICATIONS.forEach((app) => - - )} + ); + })}
-
diff --git a/src/components/WindowsView.js b/src/components/WindowsView.js new file mode 100644 index 0000000..a8e5c72 --- /dev/null +++ b/src/components/WindowsView.js @@ -0,0 +1,18 @@ +import { Window } from "./Window.js"; +import { useWindows } from "../hooks/WindowsContext.js"; + +export function WindowsView() { + const windows = useWindows(); + + return (
+ {windows.map(({ id, app, size, position}) => + + )} +
); +} \ No newline at end of file diff --git a/src/hooks/WindowsContext.js b/src/hooks/WindowsContext.js new file mode 100644 index 0000000..6600837 --- /dev/null +++ b/src/hooks/WindowsContext.js @@ -0,0 +1,26 @@ +import { createContext, useCallback, useContext, useState } from "react"; + +const WindowsContext = createContext(); + +/** + * @returns {React.Provider} + */ +export function WindowsProvider({ children, windowsManager }) { + const [windows, setWindows] = useState([]); + + const updateWindows = useCallback((updatedWindows) => { + setWindows(Object.values(updatedWindows)); + }, []); + + windowsManager.setUpdateWindows(updateWindows); + + return ( + + {children} + + ); +} + +export function useWindows() { + return useContext(WindowsContext); +} \ No newline at end of file diff --git a/src/hooks/WindowsManagerContext.js b/src/hooks/WindowsManagerContext.js new file mode 100644 index 0000000..e8a90d6 --- /dev/null +++ b/src/hooks/WindowsManagerContext.js @@ -0,0 +1,27 @@ +import { createContext, useContext } from "react"; +import WindowsManager from "../modules/windows/windows.js"; +import { WindowsProvider } from "./WindowsContext.js"; + +const WindowsManagerContext = createContext(); + +/** + * @returns {React.Provider} + */ +export function WindowsManagerProvider({ children }) { + const windowsManager = new WindowsManager(); + + return ( + + + {children} + + + ); +} + +/** + * @returns {WindowsManager} + */ +export function useWindowsManager() { + return useContext(WindowsManagerContext); +} \ No newline at end of file diff --git a/src/modules/applications/application.js b/src/modules/applications/application.js index 1de2473..4a3369b 100644 --- a/src/modules/applications/application.js +++ b/src/modules/applications/application.js @@ -1,13 +1,5 @@ export default class Application { - constructor(name, id) { - Object.assign(this, { name, id }); - } - - start() { - - } - - stop() { - + constructor(name, id, windowContent) { + Object.assign(this, { name, id, windowContent }); } } \ No newline at end of file diff --git a/src/modules/applications/applications.js b/src/modules/applications/applications.js index 0843719..0f85435 100644 --- a/src/modules/applications/applications.js +++ b/src/modules/applications/applications.js @@ -1,3 +1,4 @@ +/* eslint-disable eqeqeq */ import Application from "./application.js"; export default class ApplicationsManager { @@ -9,7 +10,7 @@ export default class ApplicationsManager { let application = null; this.APPLICATIONS.forEach((app) => { - if (app.id === id) { + if (app.id == id) { application = app; return; } diff --git a/src/modules/windows/windows.js b/src/modules/windows/windows.js index 0c1de6f..8833a47 100644 --- a/src/modules/windows/windows.js +++ b/src/modules/windows/windows.js @@ -1,40 +1,61 @@ -import { Window } from "../../components/Window.js"; import ApplicationsManager from "../applications/applications.js"; import Vector2 from "../math/vector2.js"; export default class WindowsManager { - windows = {}; + constructor() { + this.windows = {}; + this.updateWindows = () => {}; + console.log("Windows manager init"); + } open(appId) { - const appData = ApplicationsManager.getApplication(appId); + const app = ApplicationsManager.getApplication(appId); const size = new Vector2(800, 400); const position = new Vector2(300, 200); let id = 0; - while (Object.keys(this.windows).includes(id)) { + while (this.windowIds.includes(id.toString())) { id++; } - console.log(`Opening window ${id}:${appData.id}`); + console.log(`Opening window ${id}:${app.id}`); - this.windows[id] = ; + this.windows[id.toString()] = { + id, + app, + size, + position + }; + + this.updateWindows(this.windows); + + // console.log(this); } close(windowId) { - if (!Object.keys(this.windows).includes(windowId)) - return; + windowId = windowId.toString(); + if (!this.windowIds.includes(windowId)) { + console.log(`Failed to close window ${windowId}: window not found`); + return; + } + console.log(`Closing window ${windowId}`); delete this.windows[windowId]; + + this.updateWindows(this.windows); + // console.log(this); } - get windowsCount() { - return Object.keys(this.windows).length; + setUpdateWindows(updateWindows) { + this.updateWindows = updateWindows; + } + + get windowIds() { + return Object.keys(this.windows); + } + + get windowsData() { + return Object.values(this.windows); } } \ No newline at end of file