Expanded virtual drive content

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;
 }

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
 			/>
 		</span>
@@ -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}$ `;
 

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}`;
 	}
 }

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<Object>} 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<String>} folders 
+	 * @returns {VirtualFolder}
+	 */
+	createFolders(folders) {
+		folders.forEach((name) => {
+			this.createFolder(name);
+		});
+		return this;
 	}
 
 	/**

src/hooks/VirtualRootContext.js

@@ -4,22 +4,81 @@ import { VirtualRoot } from "../features/virtual-drive/virtual-root.js";
 const VirtualRootContext = createContext();
 
 /**
- * @returns {React.Provider<VirtualRoot>}
+ * @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<VirtualRoot>}
+ */
+export function VirtualRootProvider({ children }) {
+	const virtualRoot = new VirtualRoot();
+
+	initVirtualRoot(virtualRoot);
 
 	return (
 		<VirtualRootContext.Provider value={virtualRoot}>