From 2403816461ba252e7de08253b31efdea9dfb8fb4 Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel.kluge.98@gmx.de>
Date: Thu, 16 Dec 2021 01:03:54 +0100
Subject: [PATCH] Haxxor!

---
 components/REPL/REPLInput.tsx      |  9 ++++++---
 lib/commands/definitions.tsx       |  6 +++---
 pages/index.tsx                    |  5 ++++-
 styles/Home.module.css             |  7 +++++++
 styles/REPL/REPLHistory.module.css |  6 ++++--
 styles/REPL/REPLInput.module.css   | 28 +++++++++++++++++++++++-----
 styles/globals.css                 |  9 +++++++++
 7 files changed, 56 insertions(+), 14 deletions(-)
 create mode 100644 styles/Home.module.css

diff --git a/components/REPL/REPLInput.tsx b/components/REPL/REPLInput.tsx
index d8c2c27..b83b458 100644
--- a/components/REPL/REPLInput.tsx
+++ b/components/REPL/REPLInput.tsx
@@ -38,9 +38,12 @@ const REPLInput: NextPage<{historyCallback: CallableFunction}> = ({historyCallba
         return false;
     };
 
-    return <div className={styles.wrapper}>
-        <input className={styles.in} type={"text"} onChange={replinOnChange} onKeyDown={tabComplete} spellCheck={"false"} />
-        <span className={styles.completionWrapper}><span ref={typed} className={styles.typed}></span><span ref={completion} className={styles.completion}></span></span>
+    return <div className={styles.wrapperwrapper}>
+        <span className={styles.inputstart}>$&nbsp;</span>
+        <div className={styles.wrapper}>
+            <input className={styles.in} type={"text"} onChange={replinOnChange} onKeyDown={tabComplete} spellCheck={"false"} autoFocus />
+            <span className={styles.completionWrapper}><span ref={typed} className={styles.typed}></span><span ref={completion} className={styles.completion}></span></span>
+        </div>
     </div>;
 };
 
diff --git a/lib/commands/definitions.tsx b/lib/commands/definitions.tsx
index f75c140..9956680 100644
--- a/lib/commands/definitions.tsx
+++ b/lib/commands/definitions.tsx
@@ -36,29 +36,29 @@ export function printSyntax(cmd: Command): string[] {
     let flagsDesc = [];
     if (cmd.flags && cmd.flags.length > 0) {
         flagsOption = " [";
+        flagsDesc.push("");
         flagsDesc.push("Flags:");
         cmd.flags.forEach((flag => {
             flagsOption += `-${flag.short} `;
             flagsDesc.push(`\t-${flag.short}\t--${flag.long}\t${flag.desc}`);
         }));
         flagsOption = flagsOption.substring(0, flagsOption.length-1) + "]";
-        flagsDesc.push("");
     }
 
     let subcmdOption = "";
     let subcmdDesc = [];
     if (cmd.subcommands && cmd.subcommands.length > 0) {
         subcmdOption = " [";
+        subcmdDesc.push("");
         subcmdDesc.push("Subcommands:");
         cmd.subcommands.forEach((subcmd => {
             subcmdOption += `${subcmd.name}|`;
             subcmdDesc.push(`\t${subcmd.name}\t${subcmd.desc}`);
         }));
         subcmdOption = subcmdOption.substring(0, subcmdOption.length-1) + "]";
-        subcmdDesc.push("");
     }
 
-    return [`Usage: ${cmd.name}${flagsOption}${subcmdOption}`, ""].concat(flagsDesc).concat(subcmdDesc);   
+    return [`Usage: ${cmd.name}${flagsOption}${subcmdOption}`].concat(flagsDesc).concat(subcmdDesc);   
 }
 
 const about: Command = {
diff --git a/pages/index.tsx b/pages/index.tsx
index b81bd9d..5f446b1 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,9 +1,12 @@
 import type { NextPage } from "next";
 import REPL from "../components/REPL";
+import styles from "../styles/Home.module.css";
 
 const Home: NextPage = () => {
   return (
-    <REPL />
+    <div className={styles.container}>
+      <REPL />
+    </div>
   );
 };
 
diff --git a/styles/Home.module.css b/styles/Home.module.css
new file mode 100644
index 0000000..a41afc5
--- /dev/null
+++ b/styles/Home.module.css
@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    margin: 0;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/styles/REPL/REPLHistory.module.css b/styles/REPL/REPLHistory.module.css
index 397458e..a47ac6d 100644
--- a/styles/REPL/REPLHistory.module.css
+++ b/styles/REPL/REPLHistory.module.css
@@ -1,10 +1,12 @@
 .container {
-    height: 70vh;
     overflow: auto;
     display: flex;
     flex-direction: column-reverse;
+    flex-grow: 2;
+    font-size: 1.25rem;
+    font-family: "CascadiaCode", monospace;
 }
 
 .line {
-    border-bottom: 1px solid #000;
+    padding: 3px 0;
 }
\ No newline at end of file
diff --git a/styles/REPL/REPLInput.module.css b/styles/REPL/REPLInput.module.css
index f2e024e..055dcc6 100644
--- a/styles/REPL/REPLInput.module.css
+++ b/styles/REPL/REPLInput.module.css
@@ -1,18 +1,36 @@
 .wrapper > input, .wrapper > span {
+    padding: .125rem 0;
     font-size: 1.25rem;
-    font-family: "CascadiaCode";
-    padding: .125rem .25rem;
-    width: calc(100% - 1rem);
+    font-family: "CascadiaCode", monospace;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    color: var(--repl-color);
 }
 
 .wrapper {
     position: relative;
-    border: 2px solid #000;
+    flex-grow: 2;
+    display: block;
+}
+
+.wrapperwrapper {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}
+
+.inputstart {
+    padding: .125rem 0;
+    font-size: 1.25rem;
+    font-family: "CascadiaCode", monospace;
 }
 
 .in, .in:focus {
     border: 0;
     outline-width: 0;
+    background: transparent;
 }
 
 .completionWrapper {
@@ -34,5 +52,5 @@
 }
 
 .completion {
-    color: #ccc
+    color: var(--repl-color-hint);
 }
diff --git a/styles/globals.css b/styles/globals.css
index 22d9b4d..808c6a8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -5,4 +5,13 @@
 
 * {
   box-sizing: border-box;
+  --repl-color: #188a18;
+  --repl-color-hint: #092909;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: var(--repl-color);
+  background: #000;
 }
\ No newline at end of file