(v0.1.6.0-alpha) Terminal + Others

Visual changes to notepad and the system tray.
TERMINAL (Command Prompt). Commands work, custom commands and outputs can be set in Cmd.js. Soo I had faced into this issue where the whole screen was doing sm kind of thing, it was due to a lone div containing a useRef AND the autoFocus in the input. I LEGIT spent 30mins debugging (even asked gemini) without any progress. Finally decided to manually go through EACH LINE commenting then checkng. Finally found the buggy lines anf fixed. I hate my life-

Author: rupnil-codes

README.md

@@ -42,4 +42,5 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [ ] Progress Panel and Hint page with proper functionalities
 - [X] Remove Border on Fullscreen (Fixed v0.1.5.8(2))
 - [ ] BUG: The windows menu opens but the indicator is not shown in the taskbar
-- [ ] Make Progress Panel actually show progress.
+- [ ] Make Progress Panel actually show progress.
+- [ ] Terminal (Proper) Selection, Proper fonts

devlog_template.md

@@ -1,13 +1,8 @@
-## [(v0.1.5.8(1)-alpha)](https://github.com/rupnil-codes/Override.exe/commit/1834df0) Progressing with the Taskbars
----
-### Changelog
-- [(v0.1.5.8(1)-alpha)](https://github.com/rupnil-codes/Override.exe/commit/1834df0) Strikethrough!: Ahhh soo the noteppad was looking kinda bbare so i decided to add thi feature cuz why not!! THis adds strikethrough to the text duhhh-
-- [(v0.1.5.8-alpha)](https://github.com/rupnil-codes/Override.exe/commit/8e3f2d6) Notepad Functions + Progress Panel: FINNALLYY got the notepad stuff to work, like bold, italics, and underline. I removed the H1 cuz it was awful. It is what it is. Also  i added the progress sidebar container.
-- [(v0.1.5.7-alpha)](https://github.com/rupnil-codes/Override.exe/commit/6a0b690) Progress Button: Added the progress button that will open a panel that will show the user how many puzzles are left, how many they have competed, hints, and the elapsed time.
+
 ---
 ### Next Steps:
-- A game sequence (designing)
-- Each App T-T (1.5/6)
+- ~~A game sequence~~ (DESIGNED!)
+- Each App T-T (2/6)
 - Hints and Actual Gameplay
 ---
 ### Notes:

src/App.jsx

@@ -16,8 +16,8 @@ function App() {
                 <ProgressPanel/>
 
                 <Routes>
-                    <Route path="/" Component={LockScreen}/>
-                    <Route path="/desktop" Component={Desktop}/>
+                    <Route path="/desktop" Component={LockScreen}/>
+                    <Route path="/" Component={Desktop}/>
                 </Routes>
             </div>
         </>

src/apps/terminal.jsx

@@ -1,12 +1,81 @@
-import "../styles/apps/terminal.css"
+import React, { useState, useEffect, useRef } from "react";
+import "../styles/apps/terminal.css";
+import { COMMANDS } from "../data/Cmd.js";
 
 function Terminal() {
+    const [history, setHistory] = useState([
+        { type: 'info', content: 'Microsoft Windows [Version 10.0.26200.7840]' },
+        { type: 'info', content: '(c) Microsoft Corporation. All rights reserved.\n ' }
+    ]);
+    const [input, setInput] = useState("");
+
+    const terminalRef = useRef(null);
+    const inputRef = useRef(null);
+    const [lastCmd, setLastCmd] = useState("");
+
+    useEffect(() => {
+        if (terminalRef.current) {
+            terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+        }
+    }, [history]);
+
+    const handleKeyDown = (e) => {
+
+        if (e.key === "ArrowUp") {
+            setInput(lastCmd);
+        }
+
+        if (e.key === "Enter") {
+            setLastCmd(input);
+            const cleanInput = input.trim();
+            const cmd = cleanInput.toLowerCase();
+
+            setInput("");
+
+            if (cmd === "clear" || cmd === "cls") {
+                setHistory([]);
+                return;
+            }
+
+            const newEntry = { type: 'cmd', content: `C:\\Users\\rupnil> ${cleanInput}` };
+            let response = null;
+
+            if (cmd !== "") {
+                if (COMMANDS[cmd]) {
+                    const output = typeof COMMANDS[cmd] === 'function' ? COMMANDS[cmd]() : COMMANDS[cmd]+"\n ";
+                    response = { type: 'output', content: output };
+                } else {
+                    response = { type: 'error', content: `'${cmd}' is not recognized as an internal or external command, \noperable program or batch file.\n ` };
+                }
+            }
+            setHistory(prev => response ? [...prev, newEntry, response] : [...prev, newEntry]);
+        }
+    };
 
     return (
-        <>
-            <p>Terminal</p>
-        </>
-    )
+        <div
+            className="terminal-app terminal-content"
+            ref={terminalRef}
+            onClick={() => inputRef.current?.focus()}
+        >
+            {history.map((line, i) => (
+                <p key={i} className={`line ${line.type}`}>{line.content}</p>
+            ))}
+
+                <div className="input-line">
+                    <span className="prompt">C:\Users\rupnil{'>'}</span>
+                    <input
+                        ref={inputRef}
+                        type="text"
+                        value={input}
+                        onChange={(e) => setInput(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        autoComplete="off"
+                        spellCheck="false"
+                    />
+                </div>
+        </div>
+    );
 }
 
-export default Terminal
+export default Terminal;

src/data/Apps.js

@@ -38,6 +38,7 @@ export const APP_REGISTRY = {
         title: "Terminal",
         component: Terminal,
         imgSrc: "/assets/icons/Terminal.ico",
+        tabs: true,
     },
 
     readme_txt: {

src/data/Cmd.js

@@ -0,0 +1,7 @@
+
+export const COMMANDS = {
+    help: "Available commands: help, clear/cls, about, shiden",
+    about: "Go find out",
+    shiden: "https://flavortown.hackclub.com/projects/10866",
+    "rm -rf": "Are you f**king mad?? This is windows you idiot."
+};

src/styles/apps/readme_txt.css

@@ -6,7 +6,7 @@
     flex-direction: column;
     align-items: center;
 
-    background-color: #181818;
+    background-color: #0e0e0e;
     overflow: hidden;
 
     border-radius: 0 0 8px 8px;
@@ -22,7 +22,8 @@
     justify-content: center;
 
     background-color: #0e0e0e;
-    border: #0e0e0e solid 1px;
+    /*border: #0e0e0e solid 1px;*/
+    border-bottom: var(--border) 1px solid;
 }
 
 .readme-file-edit-view {

src/styles/apps/terminal.css

@@ -0,0 +1,33 @@
+.terminal-app {
+    display: flex;
+    flex-direction: column;
+
+    padding: 1rem;
+
+    font-family: "JetBrains Mono", monospace;
+    font-weight: 250;
+    font-size: 0.9rem;
+
+    height: 100%;
+    overflow-y: auto;
+}
+
+.terminal-app p {
+    white-space: pre-wrap;
+}
+
+.input-line {
+    display: flex;
+    gap: 5px;
+}
+
+.input-line input {
+    background: transparent;
+    border: none;
+    color: white;
+    outline: none;
+    flex: 1;
+    font-family: "JetBrains Mono", monospace;
+    font-size: inherit;
+    font-weight: 250;
+}

src/styles/components/ProgressPanel.css

@@ -93,31 +93,31 @@
     background-color: white;
 }
 
-    .progress-item-container{
-        width: 80%;
-        height: 68%;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.5rem;
-
-        overflow: auto;
-    }
-    .progress-item {
-        height: 3rem;
-        width: 95%;
-
-        margin-right: 0.5rem;
-
-        flex-shrink: 0;
-
-        border-radius: 0.625rem;
-        /*backdrop-filter: brightness(0);*/
-        background-color: var(--border);
-
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-    }
+.progress-item-container{
+    width: 80%;
+    height: 68%;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+
+    overflow: auto;
+}
+.progress-item {
+    height: 3rem;
+    width: 95%;
+
+    margin-right: 0.5rem;
+
+    flex-shrink: 0;
+
+    border-radius: 0.625rem;
+    /*backdrop-filter: brightness(0);*/
+    background-color: var(--border);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}

src/styles/components/SystemTray.css

@@ -9,7 +9,7 @@
     align-items: center;
     justify-content: center;
     padding-right: 0.75rem;
-    /*margin-bottom: 0.2rem;*/
+    margin-bottom: 0.2rem;
 
     gap: 0;
 }