Adding extra info in the "help" command output (jacksonbenete#27)

Author: Lucas-C

.eslintrc

@@ -46,6 +46,7 @@
         "UsernameIsEmptyError": false
     },
     "rules": {
+        "array-element-newline": ["error", "consistent"],
         "complexity": 0,
         "id-blacklist": 0,
         "id-match": 0,

src/glitch-img.js

@@ -26,6 +26,10 @@ function glitchImage( imgElem ) { /* eslint-disable-line no-unused-vars */
                 imgElem.remove();
                 const glitch = new Glitch( loadedImg, sketch );
                 sketch.draw = () => {
+                    if ( !document.body.contains( canvas.elt ) ) {
+                        sketch.remove();
+                        return;
+                    }
                     sketch.clear();
                     sketch.background( 0 ); // fill canvas in black
                     glitch.show();

src/kernel.js

@@ -280,7 +280,13 @@ system = {
                 const commands = Object.keys( system ).filter( ( cmd ) => cmd !== "dumpdb" );
                 Array.prototype.push.apply( commands, Object.keys( programs ).filter( ( pName ) => !programs[ pName ].secretCommand ) );
                 commands.sort();
-                resolve( [ "You can read the help of a specific command by entering as follows: 'help commandName'", "List of useful commands:", `<div class="ls-files">${ commands.join( "<br>" ) }</div>` ] );
+                resolve( [
+                    "You can read the help of a specific command by entering as follows: 'help commandName'",
+                    "List of useful commands:",
+                    `<div class="ls-files">${ commands.join( "<br>" ) }</div>`,
+                    "You can navigate in the commands usage history using the UP & DOWN arrow keys.",
+                    "The TAB key will provide command auto-completion."
+                ] );
             } else if ( args[ 0 ] === "clear" ) {
                 resolve( [ "Usage:", "> clear", "The clear command will completely wipeout the entire screen, but it will not affect the history." ] );
             } else if ( args[ 0 ] === "date" ) {
@@ -296,11 +302,23 @@ system = {
             } else if ( args[ 0 ] === "mail" ) {
                 resolve( [ "Usage:", "> mail", "If you're logged in you can list your mail messages if any." ] );
             } else if ( args[ 0 ] === "ping" ) {
-                resolve( [ "Usage:", "> ping address", "The ping command will try to reach a valid address.", "If the ping doesn't return a valid response, the address may be incorrect, may not exist or can't be reached locally." ] );
+                resolve( [
+                    "Usage:",
+                    "> ping address",
+                    "The ping command will try to reach a valid address.",
+                    "If the ping doesn't return a valid response, the address may be incorrect, may not exist or can't be reached locally."
+                ] );
             } else if ( args[ 0 ] === "read" ) {
                 resolve( [ "Usage:", "> read x", "If you're logged in you can read your mail messages if any." ] );
             } else if ( args[ 0 ] === "telnet" ) {
-                resolve( [ "Usage:", "> telnet address", "> telnet address@password", "You can connect to a valid address to access a specific server if the server is at internet.", "Intranet servers can only be accessed locally.", "You may need a password if it isn't a public server." ] );
+                resolve( [
+                    "Usage:",
+                    "> telnet address",
+                    "> telnet address@password",
+                    "You can connect to a valid address to access a specific server if the server is at internet.",
+                    "Intranet servers can only be accessed locally.",
+                    "You may need a password if it isn't a public server."
+                ] );
             } else if ( args[ 0 ] === "whoami" ) {
                 resolve( [ "Usage:", "> whoami", "Display the server you are currently connected to, and the login you are registered with." ] );
             } else if ( args[ 0 ] in softwareInfo ) {
@@ -526,7 +544,7 @@ function allowedSoftwares() {
     for ( const app in softwareInfo ) {
         const program = softwareInfo[ app ];
         if (
-            ( !program.location || program.location.includes( serverDatabase.serverAddress ) || program.location.includes( "all" ) ) &&
+            ( !program.location || program.location.includes( serverDatabase.serverAddress ) ) &&
             ( !program.protection || program.protection.includes( userDatabase.userId ) )
         ) {
             softwares[ app ] = program;

src/particle-img.js

@@ -12,50 +12,57 @@ const DETAIL = 1;
  */
 function particleImage( imgElem ) { /* eslint-disable-line no-unused-vars */
     const particulesCount = imgElem.dataset.particules ? Number( imgElem.dataset.particules ) : 5000;
-    imgElem.addEventListener( "load", () => {
-        const canvas = document.createElement( "canvas" );
-        imgElem.parentNode.appendChild( canvas );
-        const ctx = canvas.getContext( "2d" );
-        canvas.width = imgElem.width;
-        canvas.height = imgElem.height;
+    return new Promise( ( resolve ) => {
+        imgElem.addEventListener( "load", () => {
+            const canvas = document.createElement( "canvas" );
+            imgElem.parentNode.appendChild( canvas );
+            const ctx = canvas.getContext( "2d" );
+            canvas.width = imgElem.width;
+            canvas.height = imgElem.height;
 
-        ctx.drawImage( imgElem, 0, 0, canvas.width, canvas.height );
-        imgElem.remove();
-        const pixels = ctx.getImageData( 0, 0, canvas.width, canvas.height );
-        ctx.clearRect( 0, 0, canvas.width, canvas.height );
+            ctx.drawImage( imgElem, 0, 0, canvas.width, canvas.height );
+            imgElem.remove();
+            const pixels = ctx.getImageData( 0, 0, canvas.width, canvas.height );
+            ctx.clearRect( 0, 0, canvas.width, canvas.height );
 
-        const grid = [];
-        for ( let y = 0; y < canvas.height; y += DETAIL ) {
-            const row = [];
-            for ( let x = 0; x < canvas.width; x += DETAIL ) {
-                const red = pixels.data[ ( y * 4 * pixels.width ) + ( x * 4 ) ];
-                const green = pixels.data[ ( y * 4 * pixels.width ) + ( x * 4 + 1 ) ];
-                const blue = pixels.data[ ( y * 4 * pixels.width ) + ( x * 4 + 2 ) ];
-                const color = `rgb(${ red },${ green },${ blue })`;
-                const brightness = calculateBrightness( red, green, blue ) / 100;
-                const cell = [ color, brightness ];
-                row.push( cell );
+            const grid = [];
+            for ( let y = 0; y < canvas.height; y += DETAIL ) {
+                const row = [];
+                for ( let x = 0; x < canvas.width; x += DETAIL ) {
+                    const red = pixels.data[ ( y * 4 * pixels.width ) + ( x * 4 ) ];
+                    const green = pixels.data[ ( y * 4 * pixels.width ) + ( x * 4 + 1 ) ];
+                    const blue = pixels.data[ ( y * 4 * pixels.width ) + ( x * 4 + 2 ) ];
+                    const color = `rgb(${ red },${ green },${ blue })`;
+                    const brightness = calculateBrightness( red, green, blue ) / 100;
+                    const cell = [ color, brightness ];
+                    row.push( cell );
+                }
+                grid.push( row );
+            }
+            const particlesArray = [];
+            for ( let i = 0; i < particulesCount; i++ ) {
+                particlesArray.push( new Particle( canvas.width, canvas.height ) );
             }
-            grid.push( row );
-        }
-        const particlesArray = [];
-        for ( let i = 0; i < particulesCount; i++ ) {
-            particlesArray.push( new Particle( canvas.width, canvas.height ) );
-        }
 
-        function animate() {
-            ctx.globalAlpha = 0.05;
-            ctx.fillStyle = "rgb(0, 0, 0)";
-            ctx.fillRect( 0, 0, canvas.width, canvas.height );
-            ctx.globalAlpha = 0.2;
-            for ( let i = 0; i < particlesArray.length; i++ ) {
-                particlesArray[ i ].update( grid );
-                ctx.globalAlpha = particlesArray[ i ].speed * 0.3;
-                particlesArray[ i ].draw( grid, ctx );
+            function animate() {
+                if ( !document.body.contains( canvas ) ) {
+                    return;
+                }
+                ctx.globalAlpha = 0.05;
+                ctx.fillStyle = "rgb(0, 0, 0)";
+                ctx.fillRect( 0, 0, canvas.width, canvas.height );
+                ctx.globalAlpha = 0.2;
+                for ( let i = 0; i < particlesArray.length; i++ ) {
+                    particlesArray[ i ].update( grid );
+                    ctx.globalAlpha = particlesArray[ i ].speed * 0.3;
+                    particlesArray[ i ].draw( grid, ctx );
+                }
+                requestAnimationFrame( animate );
             }
-            requestAnimationFrame( animate );
-        }
-        animate();
+            animate();
+
+            resolve( canvas );
+        } );
     } );
 }