fix: check for command in text input

css/style.css

@@ -94,13 +94,11 @@ input {
 .image-grid {
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
     gap: 5px;
 }
 
 .image-grid>* {
-    max-width: 50%;
+    max-width: 100%;
     max-height: 50%;
 }
 

index.html

@@ -20,8 +20,7 @@
             <h1>welcome to my website</h1>
             <h2 id="switch_theme">switch theme</h2>
 
-            <p>press <kbd>Enter</kbd> to run command</p>
-            <p>use <span id="help">'help'</span> to list all commands</p>
+            <p>type <span id="help">'help'</span> to list all commands</p>
             <span>[guest@website ~]$ </span>
             <input type="text" id="command">
         </div>

js/data.js

@@ -16,21 +16,12 @@ const MUSIC_METADATA = [
             'Metallica'
         ]
     },
-    {
-        name: 'gothic metal',
-        aliases: ['gm', 'goth', 'gothic'],
-        artists: [
-            'Draconian',
-            'Beseech',
-            'To/Die/For',
-            'For My Pain...',
-            'Entwine'
-        ]
-    },
     {
         name: 'depressive suicidal black metal',
         aliases: ['dsbm'],
         artists: [
+            'Totalselfhatred',
+            'Lifelover',
             'минута агонии',
             'Decalius'
         ]
@@ -45,22 +36,8 @@ const MUSIC_METADATA = [
             'Watain',
             'Bathory',
             'Carpathian Forest',
-            'Darkthrone'
-        ]
-    },
-    {
-        name: 'nu metal',
-        aliases: ['nm', 'nu'],
-        artists: [
-            'Slipknot',
-            'Evanescence'
-        ]
-    },
-    {
-        name: 'other genres',
-        aliases: [],
-        artists: [
-            'Rammstein'
+            'Darkthrone',
+            'Rotting Christ'
         ]
     }
 ]

js/script.js

@@ -5,13 +5,13 @@ function updateAge() {
 }
 
 // process command function
-function processCommand() {
-    const [commandName, ...args] = command.value.split(' ') || [command.value]
+function processCommand(input) {
+    const [commandName, ...args] = input.split(' ') || [input]
     const suppliedCommand = COMMANDS.find(c => c.name === commandName)
 
     if (!suppliedCommand) {
-        result.textContent = 'invalid command';
-        return
+        result.textContent = '';
+        return;
     }
 
     const { arguments, output } = suppliedCommand;
@@ -66,9 +66,7 @@ command?.addEventListener('focusout', () => {
     setTimeout(() => command.focus(), 0);
 })
 
-command?.addEventListener('keydown', e => {
-    if (e.key === 'Enter') processCommand()
-})
+command?.addEventListener('input', () => processCommand(command.value))
 
 // run all tasks
 if (typeof age !== 'undefined') runEvery(updateAge, 10 * 1000)
@@ -82,5 +80,11 @@ if (theme === 'dark')
 // listen to help tooltip
 help.addEventListener('click', () => {
     command.value = 'help';
-    processCommand();
+    processCommand('help');
 })
+
+// ignore context menu
+document.addEventListener('contextmenu', e => e.preventDefault());
+
+// check for command in input
+if (command?.value) processCommand(command.value);