🌈 New HELP command and some amends

src/components/TerminalOutput.vue

@@ -35,13 +35,17 @@ export default defineComponent({
 
 p
   font-size: $font-size-output
+  white-space: pre
+  overflow-x: auto
 
 .terminal-command-group
   display: flex
   width: auto
   align-items: center
   font-size: $font-size
   margin-bottom: 5px
+
+
 .error
   color: $colour-as-error
 .success

src/components/TerminalWindowComponent.vue

@@ -18,7 +18,7 @@ import TerminalInsertField from "@/components/TerminalInsertField.vue";
 import TerminalBlinkingCaret from "@/components/TerminalBlinkingCaret.vue";
 import {parse} from "@/scripts/parser";
 import {defineComponent} from "vue";
-import {indexCommands} from "@/scripts/commands/export";
+import indexCommands from "@/scripts/commands/export";
 import TerminalOutput from "./TerminalOutput.vue";
 import { CommandResponse } from "@/scripts/command";
 

src/main.ts

@@ -1,4 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
+const font = new FontFace('Anonymous Pro', 'url(./fonts/Anonymous_Pro-Regular.ttf)')
+document.fonts.add(font);
+
 createApp(App).mount('#app')
+
+

src/scripts/command.ts

@@ -17,9 +17,8 @@ export interface KeyDescription {
     keyDescription: string
 }
 export class Command {
-    name?: string;
-    description?: string;
-    helpCommandDescription?: string;
+    name!: string;
+    description!: string;
     argumentDescription?: KeyDescription[];
     flagDescription?: KeyDescription[];
     optionsDescription?: KeyDescription[];
@@ -34,6 +33,7 @@ export class Command {
 
 export interface Commands {
     name: string;
-    ifMatches: (command: CommandInterface) => Command;   
+    ifMatches: (command: CommandInterface) => Command;
+    helpCommand: string;
 }
 

src/scripts/commands/echo.ts

@@ -2,14 +2,15 @@ import {Command, CommandResponse} from "@/scripts/command";
 import {CommandInterface} from "@/scripts/parser";
 
 export class Echo implements Command {
-    public argumentDescription: { key: string; keyDescription: string }[] = [
+     argumentDescription: { key: string; keyDescription: string }[] = [
         {
             keyDescription: "The message to echo",
             key: "message",
         }
     ]
-    public description = 'Echo a message'
-    public name = 'echo'
+     description = 'Echo a message'
+     name = 'echo'
+
     constructor(public command:CommandInterface) {}
 
     async execute(): Promise<CommandResponse> {

src/scripts/commands/export.ts

@@ -3,30 +3,53 @@ import {Echo} from "@/scripts/commands/echo";
 import { CommandInterface } from "../parser";
 import {Weather} from "@/scripts/commands/weather";
 import {Search} from "@/scripts/commands/search";
-const commands: Commands[] = [
+import {Help} from "@/scripts/commands/help";
+
+
+export const commands: Commands[] = [
     {
         name: 'echo',
         ifMatches: (command: CommandInterface) => {
             return new Echo(command);
-        }
+        },
+        helpCommand: `Usage: 
+        echo <message>`
     },
     {
         name: 'weather',
         ifMatches: (command) => {
             return new Weather(command);
-        }
+        },
+        helpCommand: `Usage:
+        weather <city>`
     },
     {
         name: "search",
         ifMatches: (command => {
             return new Search(command);
-        })
+        }),
+        helpCommand: `search <query>
+         
+         Options: 
+         --setengine=<engine> : Sets the default Search engine
+         --engine=<engine> : Sets the search engine to use for this search
+         
+         Flags:
+         
+         -n : Open the result in a new tab`
+    },
+    {
+        name: "help",
+        ifMatches: (command) => {
+            return new Help(command)
+        },
+        helpCommand: `Help???`
     }
 ];
 
 
 
-export const indexCommands = (cmnd: CommandInterface): Promise<Command> => {
+export default   (cmnd: CommandInterface): Promise<Command> => {
 
     return new Promise((resolve, reject) => {
         commands.forEach(command => {
@@ -50,3 +73,19 @@ export const indexCommands = (cmnd: CommandInterface): Promise<Command> => {
     })
 }
 
+
+export const getHelpMessage = (command: string): string => {
+    let message = '';
+
+
+    for(let i = 0; i <= commands.length; i++){
+        if(commands[i].name.toLowerCase() === command){
+            message = commands[i].helpCommand;
+            break;
+        } else {
+            message = `Command does not exist.`;
+        }
+    }
+
+    return message;
+}

src/scripts/commands/help.ts

@@ -0,0 +1,66 @@
+import {Command, CommandResponse} from "@/scripts/command";
+import {CommandInterface} from "@/scripts/parser";
+import {getHelpMessage} from "@/scripts/commands/export";
+import {commands} from "@/scripts/commands/export";
+
+export class Help implements Command {
+  name = 'help';
+  description = "Help Command"
+  argumentDescription = [
+      {
+          key: "command",
+          keyDescription: "Command to get help for."
+      }
+  ]
+
+
+  constructor(public command:CommandInterface) {}
+
+
+    getCommands(){
+      console.log(commands);
+      const commandNames: Array<string> = [];
+      for(let i = 0; i < commands.length; i++) {
+          commandNames.push(commands[i].name);
+      }
+      return commandNames;
+    }
+
+
+     async execute(): Promise<CommandResponse> {
+
+      if(this.command.arguments?.length !== 0){
+          const message =  getHelpMessage(this.command.argumentsAsString as string);
+          return{
+              command: this.command.command,
+              fullCommand: this.command.fullCommand,
+              returnValue: {
+                  type: 'success',
+                  furtherDetails: `Help command for ${this.command}`
+              },
+              output: message,
+              showAsRawHTML: false
+          }
+      } else {
+          let commandsString = `List of commands: \n`;
+          const commandsArray = this.getCommands();
+          console.log(commandsArray);
+          commandsArray.forEach(cmd => {
+            commandsString += `<span style="font-size: 20px"><em>${cmd}</em>\n</span>`;
+          });
+
+          return{
+              command: this.command.command,
+              fullCommand: this.command.fullCommand,
+              returnValue: {
+                  type: 'success',
+                  furtherDetails: `List commands`
+              },
+              showAsRawHTML: true,
+              output: commandsString,
+          }
+      }
+
+  }
+
+}

src/scripts/commands/search.ts

@@ -8,15 +8,35 @@ export class Search implements Command {
     constructor(public command: CommandInterface) {
     }
 
-    public name = 'search'
-    public description = 'Use a search engine to search a query.'
+    name = 'search'
+    description = 'Use a search engine to search a query.'
 
-    public argumentDescription = [
+    argumentDescription = [
         {
             key: "query",
             keyDescription: "Search query"
         }
     ]
+
+    flagDescription = [
+        {
+            key: "-n",
+            keyDescription: "Open the query in a new tab."
+        }
+    ];
+
+    optionsDescription = [
+        {
+            key: '--setengine',
+            keyDescription: "Sets the default search engine"
+        },
+        {
+            key: "--engine",
+            keyDescription: "Sets the engine to use for this specific search"
+        }
+    ];
+
+
     getDefaultSearchEngine(){
         let defaultEng = localStorage.getItem('defaultSearchEngine')
 

src/scripts/commands/weather.ts

@@ -2,15 +2,18 @@ import {Command, CommandResponse} from "@/scripts/command";
 import {CommandInterface} from "@/scripts/parser";
 
 export class Weather implements Command {
-    public argumentDescription = [
+     argumentDescription = [
         {
             key: "city",
             keyDescription: "City to look for the report, you don't need to pass in this parameter necessarily."
         }
     ];
-    public description = 'Fetch your weather report, from wttr.in of course.'
-    public name = 'weather'
-    constructor(public command:CommandInterface) {}
+     description = 'Fetch your weather report, from wttr.in of course.'
+     name = 'weather'
+
+
+
+    constructor( public command:CommandInterface) {}
 
     async execute(): Promise<CommandResponse> {
 

src/styles/flamingo.sass

@@ -1,3 +1,7 @@
+@font-face
+  font-family: Anonymous Pro
+  src: url("@/fonts/AnonymousPro-Regular.ttf")
+
 
 $terminal-win-height: 70vh
 $terminal-win-width: 70vw
@@ -13,9 +17,6 @@ $colour-as-success: #95ca63
 $font-family: "Anonymous Pro", monospace
 
 
-@font-face
-  font-family: Anonymous Pro
-  src: url("@/fonts/AnonymousPro-Regular.ttf")
 
 
 

src/styles/glass.sass

@@ -1,3 +1,6 @@
+@font-face
+  font-family: Anonymous Pro
+  src: url("@/fonts/AnonymousPro-Regular.ttf")
 
 $terminal-win-height: 70vh
 $terminal-win-width: 70vw
@@ -13,9 +16,7 @@ $font-family:  "Anonymous Pro", monospace
 
 
 
-@font-face
-  font-family: Anonymous Pro
-  src: url("@/fonts/AnonymousPro-Regular.ttf")
+
 
 
 

src/styles/vue-neu.sass

@@ -1,3 +1,7 @@
+@font-face
+  font-family: Anonymous Pro
+  src: url("@/fonts/AnonymousPro-Regular.ttf")
+
 $terminal-win-height: 70vh
 $terminal-win-width: 70vw
 $padding: 10px
@@ -11,10 +15,6 @@ $colour-as-success: #3ef644
 $font-family:  "Anonymous Pro", monospace
 
 
-@font-face
- font-family: Anonymous Pro
- src: url("@/fonts/AnonymousPro-Regular.ttf")
-
 
 
 @mixin TerminalWindowComponentStyling