Add greeter and fix keyboard animation

src/_renderer.js

@@ -40,7 +40,7 @@ window.onerror = (msg, path, line, col, error) => {
 };
 
 // Startup boot log
-let resumeInit, initUI, initMods;
+let resumeInit, initUI, initMods, initGreeter;
 let bootScreen = document.getElementById("boot_screen");
 let log = fs.readFileSync(path.join(__dirname, 'assets/misc/boot_log.txt')).toString().split('\n');
 let i = 0;
@@ -120,9 +120,9 @@ initUI = () => {
     document.body.innerHTML += `<section class="mod_column" id="mod_column_left">
         <h3 class="title"><p>PANEL</p><p>SYSTEM</p></h3>
     </section>
-    <section id="main_shell" style="height:0%;width:0%;opacity:0;">
+    <section id="main_shell" class="greeting" style="height:0%;width:0%;opacity:0;">
         <h3 class="title" style="opacity:0;"><p>TERMINAL</p><p>MAIN SHELL</p></h3>
-        <pre id="terminal"></pre>
+        <h1 id="main_shell_greeting"></h1>
     </section>
     <section class="mod_column" id="mod_column_right">
         <h3 class="title"><p>PANEL</p><p>NETWORK</p></h3>
@@ -142,27 +142,18 @@ initUI = () => {
             setTimeout(() => {
                 document.getElementById("main_shell").setAttribute("style", "");
                 setTimeout(() => {
-                    window.term = new Terminal({
-                        role: "client",
-                        parentId: "terminal"
-                    });
-                    // Prevent losing hardware keyboard focus on the terminal when using touch keyboard
-                    window.onmouseup = (e) => {
-                        window.term.term.focus();
-                    };
+                    initGreeter();
+
+                    document.getElementById("keyboard").setAttribute("style", "");
+                    document.getElementById("keyboard").setAttribute("class", "animation_state_1");
                     setTimeout(() => {
-                        document.getElementById("keyboard").setAttribute("style", "");
-                        document.getElementById("keyboard").setAttribute("class", "animation_state_1");
+                        document.getElementById("keyboard").setAttribute("class", "animation_state_1 animation_state_2");
                         setTimeout(() => {
-                            document.getElementById("keyboard").setAttribute("class", "animation_state_1 animation_state_2");
-                            setTimeout(() => {
-                                document.getElementById("keyboard").setAttribute("class", "");
-                                window.term.fit();
-                                initMods();
-                            }, 1100);
-                        }, 100);
-                    }, 50);
-                }, 260);
+                            document.getElementById("keyboard").setAttribute("class", "");
+                            initMods();
+                        }, 1100);
+                    }, 100);
+                }, 270);
             }, 10);
         }, 200);
     }, 10);
@@ -186,6 +177,42 @@ initMods = () => {
     });
 };
 
+initGreeter = () => {
+    let shell_container = document.getElementById("main_shell");
+    let greeter = document.getElementById("main_shell_greeting");
+
+    require("systeminformation").users()
+        .then((userlist) => {
+            greeter.innerHTML += `Welcome back, <em>${userlist[0].user}</em>`;
+        })
+        .catch(() => {
+            greeter.innerHTML += `We||//c0m€ _b@-K;; <em>##ERr0r</em>`;
+        })
+    .then(() => {
+        greeter.setAttribute("style", "opacity: 1;");
+        setTimeout(() => {
+            greeter.setAttribute("style", "opacity: 0;");
+            setTimeout(() => {
+                greeter.remove();
+                setTimeout(() => {
+                    shell_container.innerHTML += `<pre id="terminal"></pre>`;
+                    window.term = new Terminal({
+                        role: "client",
+                        parentId: "terminal"
+                    });
+                    // Prevent losing hardware keyboard focus on the terminal when using touch keyboard
+                    window.onmouseup = (e) => {
+                        window.term.term.focus();
+                    };
+                    setTimeout(() => {
+                        window.term.fit();
+                    }, 50);
+                }, 100);
+            }, 500);
+        }, 1100);
+    });
+}
+
 // Prevent showing menu, exiting fullscreen or app with keyboard shortcuts
 window.onkeydown = (e) => {
     if (e.key === "Alt" || e.key === "F11") {

src/assets/css/keyboard.css

@@ -30,7 +30,7 @@ section#keyboard.animation_state_2 > div.keyboard_row:nth-child(4) {
     transition: width .7s cubic-bezier(0.4, 0, 1, 1) .3s, filter .1s linear .8s;
 }
 section#keyboard.animation_state_2 > div.keyboard_row:nth-child(5) {
-    transition: width .6s cubic-bezier(0.4, 0, 1, 1) .4s, filter .1s linear .8s;
+    transition: width .6s cubic-bezier(0.4, 0, 1, 1) .2s, filter .1s linear .6s;
 }
 
 section#keyboard.animation_state_1 > * {

src/assets/css/main_shell.css

@@ -7,6 +7,23 @@ section#main_shell {
     transition: width .5s cubic-bezier(0.4, 0, 1, 1), height .5s cubic-bezier(0.4, 0, 1, 1);
 }
 
+section#main_shell.greeting {
+    display: flex;
+}
+
+h1#main_shell_greeting {
+    font-size: 3.9vh;
+    font-weight: normal;
+    margin: auto;
+    opacity: 0;
+    transition: opacity .5s cubic-bezier(0.4, 0, 1, 1);
+}
+
+h1#main_shell_greeting > em {
+    font-style: normal;
+    font-weight: bold;
+}
+
 section#main_shell > h3.title {
     top: 0.74vh;
     left: 16.5vw;