Merge pull request #4 from johanwulf/terminal-colors

feat: added terminal colors customisation with alacritty.yml file
johanwulf · Sep 9, 2023 · 7590291 · 7590291
2 parents 150999b + 66c806a
commit 7590291
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 7 deletions.
diff --git a/constants/commands.ts b/constants/commands.ts
@@ -46,4 +46,20 @@ export const fileSystem: File[] = [
                 echo "Please do not run any commands that would break my lovely website."
                 echo "If you need help, type "help" and press enter"`,
     },
+    {
+        name: ".config",
+        type: FileType.FOLDER,
+        path: "~",
+    },
+    {
+        name: "alacritty.json",
+        type: FileType.FILE,
+        path: "~/.config",
+        content: JSON.stringify({
+            colors: {
+                titlebar: "#222436",
+                background: "#1a1b26",
+            },
+        }),
+    },
 ];
diff --git a/src/App.scss b/src/App.scss
@@ -9,7 +9,6 @@
 }
 
 .terminal-window {
-    background: #1a1b26;
     font-family: NerdFont;
     color: #a9b1d6;
     height: 100%;
@@ -72,7 +71,6 @@
     > .title-bar {
         position: sticky;
         top: 0;
-        background: #222436;
         display: flex;
         flex-direction: row;
         justify-content: space-between;

diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,10 @@ function App() {
     const [broken, setBroken] = useState(false);
     const [old, setOld] = useState(false);
     const [nano, setNano] = useState<any | null>(null);
-
+    const [colors, setColors] = useState<any>({
+        titlebar: "#222436",
+        background: "#1a1b26",
+    });
     const inputRef = useRef<HTMLInputElement>(null);
     const terminalRef = useRef<HTMLDivElement>(null);
 
@@ -20,6 +23,29 @@ function App() {
         }
     }, []);
 
+    useEffect(() => {
+        const file = files.find((e) => e.name === "alacritty.json");
+        if (!file || !file.content) {
+            setColors({
+                titlebar: "#222436",
+                background: "#1a1b26",
+            });
+        } else {
+            const c = JSON.parse(file.content ?? "");
+            if (!c.colors.titlebar || !c.colors.background) {
+                setColors({
+                    titlebar: "#222436",
+                    background: "#1a1b26",
+                });
+            } else {
+                setColors({
+                    titlebar: c.colors.titlebar,
+                    background: c.colors.background,
+                });
+            }
+        }
+    }, [files]);
+
     const [log, setLog] = useState<LogEntry[]>(JSON.parse(localStorage.getItem("broken") ?? "false") ? [] : [InitialLogEntry]);
 
     useEffect(() => {
@@ -87,7 +113,14 @@ function App() {
                     }
                     break;
                 case "ls":
-                    newLogEntry.output = entry.map((e) => e.name).join(" ");
+                    const files = entry.map((e) => e.name);
+                    if (!arg1) {
+                        newLogEntry.output = files.filter((e) => e.charAt(0) !== ".").join(" ");
+                    } else if (arg1 === "-a") {
+                        newLogEntry.output = files.join(" ");
+                    } else {
+                        newLogEntry.output = `zsh: unknown argument ${arg1}`;
+                    }
                     break;
                 case "clear":
                     setLog([]);
@@ -172,8 +205,8 @@ function App() {
     }
 
     return (
-        <div className={old ? "broken-terminal-window" : "terminal-window"}>
-            <div className="title-bar">
+        <div className={old ? "broken-terminal-window" : "terminal-window"} style={{ background: colors.background }}>
+            <div className="title-bar" style={{ background: colors.titlebar }}>
                 <div className="title-bar-buttons">
                     <div className="title-bar-buttons-red"></div>
                     <div className="title-bar-buttons-yellow"></div>
@@ -214,7 +247,7 @@ function App() {
                         className="nano-text"
                         autoFocus
                         value={nano?.content ?? ""}
-                        onChange={(e) => setNano((old: any) => ({ ...old, content: e.target.value }))}
+                        onChange={(e) => setNano((old: any) => ({ ...old, content: e.target.value.trim() }))}
                         onKeyDown={handleKeyDown}
                     />
                 </div>