Skip to content

Commit

Permalink
Move To React: Separate the Apps into different files
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mooshay105
Mooshay105 committed Oct 5, 2024
1 parent a1d8206 commit dd135b2
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 56 deletions.
33 changes: 33 additions & 0 deletions src/components/FirefoxApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from "react";
import minimize from "../assets/img/minimize.png";
import maximize from "../assets/img/maximize.png";
import close from "../assets/img/close.png";

interface AppProps {
windowX: string;
windowY: string;
isOpen: boolean;
isTopWindow: boolean;
closeApp: () => void;
setTopWindow: () => void;
}

const FirefoxApp: React.FC<AppProps> = ({ windowX, windowY, isOpen, isTopWindow, closeApp, setTopWindow }) => {
return (
<div id="firefox" className={isOpen ? "firefoxApp show" : "firefoxApp hide"} style={{ top: windowY, left: windowX, zIndex: isTopWindow ? "3" : "1" }} onClick={setTopWindow}>
<div className="app-header">
<div className="app-title">
<p>Firefox Web Browser</p>
</div>
<div className="app-buttons">
<img src={minimize} width="24px" height="24px" onClick={closeApp} />
<img src={maximize} width="24px" height="24px" />
<img src={close} width="24px" height="24px" onClick={closeApp} />
</div>
</div>
<div className="app-content"> To Do... </div>
</div>
);
};

export default FirefoxApp;
49 changes: 49 additions & 0 deletions src/components/SettingsApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from "react";
import minimize from "../assets/img/minimize.png";
import maximize from "../assets/img/maximize.png";
import close from "../assets/img/close.png";
import users from "../assets/img/users.png";
import system from "../assets/img/system.png";

interface AppProps {
windowX: string;
windowY: string;
isOpen: boolean;
isTopWindow: boolean;
closeApp: () => void;
setTopWindow: () => void;
}

const SettingsApp: React.FC<AppProps> = ({ windowX, windowY, isOpen, isTopWindow, closeApp, setTopWindow }) => {
return (
<div id="settings" className={isOpen ? "settingsApp show" : "settingsApp hide"} style={{ top: windowY, left: windowX, zIndex: isTopWindow ? "3" : "1" }} onClick={setTopWindow}>
<div className="app-header">
<div className="app-title">
<p>Settings</p>
</div>
<div className="app-buttons">
<img src={minimize} width="24px" height="24px" onClick={closeApp} />
<img src={maximize} width="24px" height="24px" />
<img src={close} width="24px" height="24px" onClick={closeApp} />
</div>
</div>
<div className="app-content">
<div className="settings-content">
<div className="settings-Left-Panel">
<div className="menuOption">
<img src={users} width="24px" height="24px" />
<p>Users</p>
</div>
<div className="menuOption">
<img src={system} width="24px" height="24px" />
<p>System</p>
</div>
</div>
<div className="settings-Right-Panel"></div>
</div>
</div>
</div>
);
};

export default SettingsApp;
70 changes: 14 additions & 56 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import Time from "./components/Time";
import FirefoxApp from "./components/FirefoxApp";
import SettingsApp from "./components/SettingsApp";
import firefox from "./assets/img/firefox.png";
import settings from "./assets/img/settings.png";
import minimize from "./assets/img/minimize.png";
import maximize from "./assets/img/maximize.png";
import close from "./assets/img/close.png";
import users from "./assets/img/users.png";
import system from "./assets/img/system.png";
import "./assets/main.css";

function App() {
Expand All @@ -19,7 +16,7 @@ function App() {
const [settingsWindowY, setSettingsWindowY] = useState("70px");
const [topWindow, setTopWindow] = useState("settings");

function openApp(appId: string) {
const openApp = (appId: string) => {
if (appId === "firefox") {
setFirefoxWindowOpen(true);
setTopWindow("firefox");
Expand All @@ -29,36 +26,37 @@ function App() {
} else {
console.log("[Web Linux Kernel] [WARN]: Invalid App ID");
}
}
};

function closeApp(appId: string) {
const closeApp = (appId: string) => {
if (appId === "firefox") {
setFirefoxWindowOpen(false);
} else if (appId === "settings") {
setSettingsWindowOpen(false);
} else {
console.log("[Web Linux Kernel] [WARN]: Invalid App ID");
}
}
};

useEffect(() => {
const headers = document.querySelectorAll(".app-header");

headers.forEach((header) => {
let element = header.parentElement as HTMLElement;
let offsetX: number, offsetY: number, mouseX: number, mouseY: number;
let offsetX: number, offsetY: number;

element.addEventListener("mousedown", (e) => {
offsetX = e.clientX - element.getBoundingClientRect().left;
offsetY = e.clientY - element.getBoundingClientRect().top;

function onMouseMove(e: MouseEvent) {
mouseX = e.clientX;
mouseY = e.clientY;
let left = mouseX - offsetX + "px";
let top = mouseY - offsetY + "px";
const mouseX = e.clientX;
const mouseY = e.clientY;
const left = mouseX - offsetX + "px";
const top = mouseY - offsetY + "px";
element.style.left = left;
element.style.top = top;

if (element.id === "settings") {
setSettingsWindowX(left);
setSettingsWindowY(top);
Expand All @@ -67,8 +65,6 @@ function App() {
setFirefoxWindowX(left);
setFirefoxWindowY(top);
setTopWindow("firefox");
} else {
console.log("[Web Linux Kernel] [WARN]: Invalid App ID");
}
}

Expand All @@ -94,46 +90,8 @@ function App() {
<img src={firefox} width="48px" height="48px" onClick={() => openApp("firefox")} />
<img src={settings} width="48px" height="48px" onClick={() => openApp("settings")} />
</div>
<div id="settings" className={settingsWindowOpen ? "settingsApp show" : "settingsApp hide"} style={{ top: settingsWindowY, left: settingsWindowX, zIndex: topWindow === "settings" ? "3" : "1" }} onClick={() => setTopWindow("settings")}>
<div className="app-header">
<div className="app-title">
<p>Settings</p>
</div>
<div className="app-buttons">
<img src={minimize} width="24px" height="24px" onClick={() => closeApp("settings")} />
<img src={maximize} width="24px" height="24px" />
<img src={close} width="24px" height="24px" onClick={() => closeApp("settings")} />
</div>
</div>
<div className="app-content">
<div className="settings-content">
<div className="settings-Left-Panel">
<div className="menuOption">
<img src={users} width="24px" height="24px" />
<p>Users</p>
</div>
<div className="menuOption">
<img src={system} width="24px" height="24px" />
<p>System</p>
</div>
</div>
<div className="settings-Right-Panel"></div>
</div>
</div>
</div>
<div id="firefox" className={firefoxWindowOpen ? "firefoxApp show" : "firefoxApp hide"} style={{ top: firefoxWindowY, left: firefoxWindowX, zIndex: topWindow === "firefox" ? "3" : "1" }} onClick={() => setTopWindow("firefox")}>
<div className="app-header">
<div className="app-title">
<p>Firefox Web Browser</p>
</div>
<div className="app-buttons">
<img src={minimize} width="24px" height="24px" onClick={() => closeApp("firefox")} />
<img src={maximize} width="24px" height="24px" />
<img src={close} width="24px" height="24px" onClick={() => closeApp("firefox")} />
</div>
</div>
<div className="app-content"> To Do... </div>
</div>
<SettingsApp windowX={settingsWindowX} windowY={settingsWindowY} isOpen={settingsWindowOpen} isTopWindow={topWindow === "settings"} closeApp={() => closeApp("settings")} setTopWindow={() => setTopWindow("settings")} />
<FirefoxApp windowX={firefoxWindowX} windowY={firefoxWindowY} isOpen={firefoxWindowOpen} isTopWindow={topWindow === "firefox"} closeApp={() => closeApp("firefox")} setTopWindow={() => setTopWindow("firefox")} />
</div>
);
}
Expand Down

0 comments on commit dd135b2

Please sign in to comment.