Adding support for server .iconSize & .headerExtraHTML

jacksonbenete · May 15, 2024 · 16c6054 · 16c6054
1 parent 8a4135e
commit 16c6054
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@ You can host it on Github Pages for a free and fast experience and can share the
 <!-- toc -->
 
 - [Latest News](#latest-news)
+- [Quick launch](#quick-launch)
 - [How to Configure](#how-to-configure)
 - [Customization](#customization)
   * [manifest.json](#manifestjson)
@@ -26,7 +27,6 @@ You can host it on Github Pages for a free and fast experience and can share the
   * [History](#history)
   * [Other Functions](#other-functions)
 - [How to Install](#how-to-install)
-  * [How to Configure for localhost](#how-to-configure-for-localhost)
 - [Future of the Project](#future-of-the-project)
 - [Customization / what to do with this](#customization--what-to-do-with-this)
 - [Acknowledgement](#acknowledgement)
@@ -88,7 +88,7 @@ That is, you can't access data of a user configured on `mailserver.json` while y
 The basic configuration at `manifest.json` is what you need to change to customize your terminal.
 You can change the terminal year date, the server name, a customized icon, the terminal identification
 (this is what is written just before the cursor), as well as the default user id and name (normally this will be "user",
-but it can be whatever you want) and if you want a random number to be displayed right in front of the default username (`randomSeed`).
+but it can be whatever you want).
 Note however that, once you login to the server, the username will change.
 
 ```json
@@ -102,8 +102,7 @@ Note however that, once you login to the server, the username will change.
         "userId": "user",
         "password": "",
         "userName": "anonymous"
-    },
-    "randomSeed": true
+    }
 }
 ```
 ---
@@ -120,8 +119,7 @@ Note however that, once you login to the server, the username will change.
         "userId": "user",
         "password": "",
         "userName": "anonymous"
-    },
-    "randomSeed": false
+    }
 }
 ```
 ---

diff --git a/config/network/111.222.3.4/manifest.json b/config/network/111.222.3.4/manifest.json
@@ -7,6 +7,5 @@
         "userId": "user",
         "password": "",
         "userName": "anonymous"
-    },
-    "randomSeed": true
+    }
 }
diff --git a/config/network/fbi.gov/manifest.json b/config/network/fbi.gov/manifest.json
@@ -2,6 +2,5 @@
     "serverAddress": "fbi.gov",
     "serverName": "Federal Bureau of Investigation",
     "iconName": "fbi.png",
-    "terminalID": "fbi",
-    "randomSeed": true
+    "terminalID": "fbi"
 }
diff --git a/config/network/localhost/manifest.json b/config/network/localhost/manifest.json
@@ -8,7 +8,6 @@
         "password": "",
         "userName": "anonymous"
     },
-    "randomSeed": true,
     "initialHistory": {
         "user": [
             "login admin@admin"

diff --git a/src/glitch-img.js b/src/glitch-img.js
@@ -23,11 +23,11 @@ function glitchImage( imgElem ) { /* eslint-disable-line no-unused-vars */
                 Object.values( imgElem.style ).forEach( ( prop ) => {
                     canvas.elt.style[ prop ] = imgElem.style[ prop ];
                 } );
-                if (imgElem.height) {
-                    canvas.elt.style.height = `${imgElem.height}px`;
+                if ( imgElem.height ) {
+                    canvas.elt.style.height = `${ imgElem.height }px`;
                 }
-                if (imgElem.width) {
-                    canvas.elt.style.width = `${imgElem.width}px`;
+                if ( imgElem.width ) {
+                    canvas.elt.style.width = `${ imgElem.width }px`;
                 }
                 const glitch = new Glitch( loadedImg, sketch );
                 imgElem.remove();

diff --git a/src/kernel.js b/src/kernel.js
@@ -6,15 +6,15 @@ let userList = [];
 let mailList = [];
 let cmdLine_;
 let output_;
-let serverDate = {day: "", month: "", year: "", reference: ""};
+let serverDate = { day: "", month: "", year: "", reference: "" };
 
 function initDateObject() {
-  const date = new Date();
-  let day = serverDatabase.day ? serverDatabase.day : date.getDate();
-  let month = serverDatabase.month ? serverDatabase.month : date.getMonth() + 1;
-  let year = serverDatabase.year ? serverDatabase.year : date.getFullYear();
-  let reference = serverDatabase.reference ? serverDatabase.reference : "(Solar System Standard Time)"
-  serverDate = {day: day, month: month, year: year, reference: reference}
+    const date = new Date();
+    const day = serverDatabase.day ? serverDatabase.day : date.getDate();
+    const month = serverDatabase.month ? serverDatabase.month : date.getMonth() + 1;
+    const year = serverDatabase.year ? serverDatabase.year : date.getFullYear();
+    const reference = serverDatabase.reference ? serverDatabase.reference : "(Solar System Standard Time)";
+    serverDate = { day, month, year, reference };
 }
 
 function debugObject( obj ) {
@@ -36,12 +36,15 @@ function setHeader( msg = "⠀" ) {
     const promptText = `[${ userDatabase.userName }@${ serverDatabase.terminalID }] # `;
 
     initDateObject();
-    const dateStr = serverDate.day + "/" + serverDate.month + "/" + serverDate.year;
+    const dateStr = `${ serverDate.day }/${ serverDate.month }/${ serverDate.year }`;
+    const imgUrl = `config/network/${ serverDatabase.serverAddress }/${ serverDatabase.iconName }`;
+    const imgSize = serverDatabase.iconSize || 100;
     const header = `
-    <img src="config/network/${ serverDatabase.serverAddress }/${ serverDatabase.iconName }"
-         width="100" height="100" style="float: left; padding: 0px 10px 20px 0px" class="${serverDatabase.iconClass || ''}">
+    <img src="${ imgUrl }" width="${ imgSize }" height="${ imgSize }"
+         style="float: left; padding-right: 10px" class="${ serverDatabase.iconClass || "" }">
     <h2 style="letter-spacing: 4px">${ serverDatabase.serverName }</h2>
     <p>Logged in: ${ serverDatabase.serverAddress } ( ${ dateStr } ) </p>
+    ${ serverDatabase.headerExtraHTML || "" }
     <p>Enter "help" for more information.</p>
     `;
     // Clear content:
@@ -50,7 +53,7 @@ function setHeader( msg = "⠀" ) {
     if ( term ) {
         term.loadHistoryFromLocalStorage( serverDatabase.initialHistory );
     }
-    output( [ header, msg ] ).then(() => applySFX( $( "output img" )[0] ) );
+    output( [ header, msg ] ).then( () => applySFX( $( "output img" )[ 0 ] ) );
     $( ".prompt" ).html( promptText );
 }
 
@@ -173,7 +176,7 @@ function kernel( app, args ) {
     if ( systemApp ) {
         const appDisabled = allowedSoftwares()[ app ] === null;
         if ( appDisabled ) {
-            return Promise.reject(new CommandNotFoundError( app ));
+            return Promise.reject( new CommandNotFoundError( app ) );
         }
         return systemApp( args );
     }
@@ -227,7 +230,8 @@ kernel.connectToServer = function connectToServer( serverAddress, userName, pass
             } else {
                 reject( new ServerRequireUsernameError( serverAddress ) );
             }
-        } ).fail( () => {
+        } ).fail( ( ...args ) => {
+            console.error( "[connectToServer] Failure:", args );
             reject( new AddressNotFoundError( serverAddress ) );
         } );
     } );
@@ -249,14 +253,14 @@ kernel.init = function init( cmdLineContainer, outputContainer ) {
         $.when(
             $.get( "config/software.json", ( softwareData ) => {
                 softwareInfo = softwareData;
-                kernel.connectToServer( defaultServerAddress )
-            } ),
+                kernel.connectToServer( defaultServerAddress );
+            } )
         )
             .done( () => {
                 resolve( true );
             } )
             .fail( ( err, msg, details ) => {
-                console.error( err, msg, details );
+                console.error( "[init] Failure:", err, msg, details );
                 reject( new JsonFetchParseError( msg ) );
             } );
     } );
@@ -299,9 +303,9 @@ system = {
 
     date() {
         return new Promise( ( resolve ) => {
-            let date = new Date();
-            let time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
-            resolve( String( serverDate.month + " " + serverDate.day + " " + serverDate.year + " " + time + " " + serverDate.reference ) );
+            const date = new Date();
+            const time = `${ date.getHours() }:${ date.getMinutes() }:${ date.getSeconds() }`;
+            resolve( String( `${ serverDate.month } ${ serverDate.day } ${ serverDate.year } ${ time } ${ serverDate.reference }` ) );
         } );
     },
 

diff --git a/src/terminal.js b/src/terminal.js
@@ -4,6 +4,9 @@
  * Base code created by @AndrewBarfield, further development by @jacksonbenete & @Lucas-C.
  * This should contain all the basic code for the terminal behavior.
  */
+const UP_ARROW_KEYCODE = 38;
+const DOWN_ARROW_KEYCODE = 40;
+
 function Terminal() {
     let history_ = [];
     let histpos_ = 0;
@@ -33,38 +36,35 @@ function Terminal() {
      *
      * You can navigate by pressing the up and down arrow for see or repeat previous commands.
      *
-     * @todo I don't get why the "Up arrow" aren't setting the cursor to end of input
-     *
      * @param {Event} e
      */
     function historyHandler_( e ) {
-        if ( history_.length ) {
-            if ( e.keyCode === 38 || e.keyCode === 40 ) {
-                if ( history_[ histpos_ ] ) {
-                    history_[ histpos_ ] = this.value;
-                } else {
-                    histtemp_ = this.value;
-                }
-            }
-
-            if ( e.keyCode === 38 ) { // Up arrow
-                histpos_--;
-                if ( histpos_ < 0 ) {
-                    histpos_ = 0;
-                }
-            } else if ( e.keyCode === 40 ) { // Down arrow
-                histpos_++;
-
-                // This avoid to repeat the history from the beggining
-                if ( histpos_ > history_.length ) {
-                    histpos_ = history_.length;
-                }
+        if ( history_.length === 0 || ( e.keyCode !== UP_ARROW_KEYCODE && e.keyCode !== DOWN_ARROW_KEYCODE ) ) {
+            return;
+        }
+        if ( history_[ histpos_ ] ) {
+            history_[ histpos_ ] = this.value;
+        } else {
+            histtemp_ = this.value;
+        }
+        if ( e.keyCode === UP_ARROW_KEYCODE ) {
+            histpos_--;
+            if ( histpos_ < 0 ) {
+                histpos_ = 0;
             }
-
-            if ( e.keyCode === 38 || e.keyCode === 40 ) {
-                this.value = history_[ histpos_ ] ? history_[ histpos_ ] : histtemp_;
+        } else if ( e.keyCode === DOWN_ARROW_KEYCODE ) {
+            histpos_++;
+            // This avoid to repeat the history from the beggining
+            if ( histpos_ > history_.length ) {
+                histpos_ = history_.length;
             }
         }
+        this.value = history_[ histpos_ ] ? history_[ histpos_ ] : histtemp_;
+        // Trick to move cursor to end of input, cf. https://stackoverflow.com/a/10576409/636849
+        setTimeout( () => {
+            /* eslint-disable-next-line no-multi-assign */
+            this.selectionStart = this.selectionEnd = 10000;
+        }, 10 );
     }
 
     /**
@@ -137,7 +137,12 @@ function Terminal() {
                         output( result );
                     } )
                     .catch( ( error ) => {
-                        output( error.message );
+                        if ( error.constructor.name === "Error" ) { // untyped = unexpected error
+                            console.exception( error );
+                            output( `kernel failure - ${ error.constructor.name }: ${ error.message }` );
+                        } else {
+                            output( error.message );
+                        }
                     } );
             } catch ( error ) {
                 // If the user enter a empty line, it will just ignore and output a new line