diff --git a/public/media/Banner.png b/public/media/Banner.png new file mode 100644 index 0000000..96c52f8 Binary files /dev/null and b/public/media/Banner.png differ diff --git a/public/media/Banner2.png b/public/media/Banner2.png new file mode 100644 index 0000000..6f480b5 Binary files /dev/null and b/public/media/Banner2.png differ diff --git a/public/media/wallpapers/Wallpaper2.png b/public/media/wallpapers/Wallpaper2.png new file mode 100644 index 0000000..0125b70 Binary files /dev/null and b/public/media/wallpapers/Wallpaper2.png differ diff --git a/public/media/wallpapers/Wallpaper3.png b/public/media/wallpapers/Wallpaper3.png new file mode 100644 index 0000000..f2c214d Binary files /dev/null and b/public/media/wallpapers/Wallpaper3.png differ diff --git a/public/media/wallpapers/Wallpaper4.png b/public/media/wallpapers/Wallpaper4.png new file mode 100644 index 0000000..bc9e735 Binary files /dev/null and b/public/media/wallpapers/Wallpaper4.png differ diff --git a/public/media/wallpapers/wallpaper-2.webp b/public/media/wallpapers/wallpaper-2.webp deleted file mode 100644 index 722691a..0000000 Binary files a/public/media/wallpapers/wallpaper-2.webp and /dev/null differ diff --git a/public/media/wallpapers/wallpaper-1.png b/public/media/wallpapers/wallpaper1.png similarity index 100% rename from public/media/wallpapers/wallpaper-1.png rename to public/media/wallpapers/wallpaper1.png diff --git a/src/App.css b/src/App.css index 500b85c..93219b4 100644 --- a/src/App.css +++ b/src/App.css @@ -4,7 +4,7 @@ left: 0; width: 100%; height: 100%; - background-image: url("/public/media/wallpapers/wallpaper-1.png"); + background-image: url("/public/media/wallpapers/wallpaper1.png"); background-size: cover; text-align: center; } diff --git a/src/components/applications/terminal/Terminal.js b/src/components/applications/terminal/Terminal.js index 97b485b..67bbbe8 100644 --- a/src/components/applications/terminal/Terminal.js +++ b/src/components/applications/terminal/Terminal.js @@ -21,7 +21,7 @@ function InputLine({ value, prefix, onChange, onKeyUp, onKeyDown }) { onKeyUp={onKeyUp} onKeyDown={onKeyDown} spellCheck={false} - autoComplete={null} + autoComplete="off" autoFocus /> @@ -32,7 +32,7 @@ export function Terminal() { const [inputValue, setInputValue] = useState(""); const [history, setHistory] = useState([]); const virtualRoot = useVirtualRoot(); - const [currentDirectory, setCurrentDirectory] = useState(virtualRoot); + const [currentDirectory, setCurrentDirectory] = useState(virtualRoot.navigate("~")); const prefix = `user@prozilla-os:${currentDirectory.formattedPath}$ `; diff --git a/src/features/virtual-drive/virtual-file.js b/src/features/virtual-drive/virtual-file.js index fe5192f..319413e 100644 --- a/src/features/virtual-drive/virtual-file.js +++ b/src/features/virtual-drive/virtual-file.js @@ -3,10 +3,15 @@ import { VirtualBase } from "./virtual-base.js"; export class VirtualFile extends VirtualBase { constructor(name, extension) { super(name); - this.extension = extension; + this.extension = extension ?? ""; + } + + setSource(source) { + this.source = source; + return this; } get id() { - return this.name + this.extension; + return `${this.name}.${this.extension}`; } } \ No newline at end of file diff --git a/src/features/virtual-drive/virtual-folder.js b/src/features/virtual-drive/virtual-folder.js index ba62a63..f392122 100644 --- a/src/features/virtual-drive/virtual-folder.js +++ b/src/features/virtual-drive/virtual-folder.js @@ -54,18 +54,53 @@ export class VirtualFolder extends VirtualBase { return resultFolder; } - createFile(name, extension) { + /** + * @param {String} name + * @param {String} extension + * @param {Function} callback + * @returns {VirtualFolder} + */ + createFile(name, extension, callback) { const newFile = new VirtualFile(name, extension); this.files.push(newFile); newFile.parent = this; - return newFile; + callback?.(newFile); + return this; } - createFolder(name) { + /** + * @param {Array} files + * @returns {VirtualFolder} + */ + createFiles(files) { + files.forEach(({name, extension}) => { + this.createFile(name, extension); + }); + return this; + } + + /** + * @param {String} name + * @returns {VirtualFolder} + * @param {Function} callback + */ + createFolder(name, callback) { const newFolder = new VirtualFolder(name); this.subFolders.push(newFolder); newFolder.parent = this; - return newFolder; + callback?.(newFolder); + return this; + } + + /** + * @param {Array} folders + * @returns {VirtualFolder} + */ + createFolders(folders) { + folders.forEach((name) => { + this.createFolder(name); + }); + return this; } /** diff --git a/src/hooks/VirtualRootContext.js b/src/hooks/VirtualRootContext.js index 31a05e6..c46fc5a 100644 --- a/src/hooks/VirtualRootContext.js +++ b/src/hooks/VirtualRootContext.js @@ -4,22 +4,81 @@ import { VirtualRoot } from "../features/virtual-drive/virtual-root.js"; const VirtualRootContext = createContext(); /** - * @returns {React.Provider} + * @param {VirtualRoot} virtualRoot */ -export function VirtualRootProvider({ children }) { - const virtualRoot = new VirtualRoot().setAlias("/"); +function initVirtualRoot(virtualRoot) { + virtualRoot.setAlias("/"); + + virtualRoot.createFolder("bin", (folder) => { + folder.createFiles([ + { name: "echo" }, + { name: "cd" }, + { name: "ls" }, + { name: "clear" }, + ]); + }); + + virtualRoot.createFolder("dev", (folder) => { + folder.createFiles([ + { name: "null" }, + { name: "zero" }, + { name: "random" }, + ]); + }); - virtualRoot.createFolder("bin"); - virtualRoot.createFolder("dev"); virtualRoot.createFolder("etc"); - virtualRoot.createFolder("usr"); - virtualRoot.createFolder("home").createFolder("prozilla-os").setAlias("~"); + + virtualRoot.createFolder("usr", (folder) => { + folder.createFolders(["bin", "sbin", "lib", "share"]); + }); + + + virtualRoot.createFolder("home", (folder) => { + folder.createFolder("prozilla-os", (folder) => { + folder.setAlias("~") + .createFolder("Images", (folder) => { + folder.createFile("Wallpaper_1", "png", (file) => { + file.setSource("/public/media/wallpapers/wallpaper-1.png") + }).createFile("Wallpaper_2", "png", (file) => { + file.setSource("/public/media/wallpapers/wallpaper-2.png") + }).createFile("Wallpaper_3", "png", (file) => { + file.setSource("/public/media/wallpapers/wallpaper-3.png") + }).createFile("Wallpaper_4", "png", (file) => { + file.setSource("/public/media/wallpapers/wallpaper-4.png") + }) + }) + .createFolder("Documents") + .createFolder("Desktop"); + }); + }); + virtualRoot.createFolder("lib"); virtualRoot.createFolder("sbin"); virtualRoot.createFolder("tmp"); virtualRoot.createFolder("var"); + virtualRoot.createFolder("boot"); - console.log(virtualRoot.subFolders); + virtualRoot.createFolder("proc", (folder) => { + folder.createFiles([ + { name: "cpuinfo" }, + { name: "meminfo" }, + ]); + }); + + virtualRoot.createFolder("var"); + virtualRoot.createFolder("opt"); + virtualRoot.createFolder("media"); + virtualRoot.createFolder("mnt"); + virtualRoot.createFolder("srv"); +} + +/** + * @returns {React.Provider} + */ +export function VirtualRootProvider({ children }) { + const virtualRoot = new VirtualRoot(); + + initVirtualRoot(virtualRoot); return (