Major improvements and a brand new landing page with login

index.js

@@ -92,7 +92,14 @@ app.get('/', async (req, res) => {
     let login = loginState(req);
 
     if (login != 2) {
-        res.redirect('/login');
+        const locale = new Lang(req.acceptsLanguages());
+
+        res.render('landing', {
+            helpers: {
+                t: (key) => { return locale.t(key) }
+            }
+        });
+        // res.redirect('/login');
     } else if (req.session.nickname == null) {
         auth.getLanguage(req.session.userId).then(language => {
             var locale;
@@ -348,12 +355,18 @@ io.on('connection', async (socket) => {
     const req = socket.request;
     const session = req.session;
     socket.session = session;
+    if (session.loginState != 2) {
+        socket.on('email login', (email, callback) => {
+            callback(session.nickname);
+        });
+    }
+
+    if (!await GInfo.isPlayerInGame(socket)) {
         if (session.nickname == null) {
             socket.disconnect();
             return;
         }
 
-    if (!await GInfo.isPlayerInGame(socket)) {
         socket.on('whats my nick', (callback) => {
             callback(session.nickname);
         });

public/assets/css/board.css

@@ -172,7 +172,7 @@ h1,h2,h3,h4,h5,h6 {
 #secondaryBoard, #board {
     position: absolute;
     transition: transform 0.3s;
-    background: black;
+    background-color: black;
 }
 
 .ownBoardInfo {
@@ -228,7 +228,7 @@ h1,h2,h3,h4,h5,h6 {
     justify-content: center;
     align-items: center;
     text-align: center;
-    background-color: rgb(0, 0, 0, 0.6);
+    background-color: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(20px);
     transition: opacity 0.5s, transform 0.5s;
     z-index: 999;

public/assets/css/landing.css

@@ -0,0 +1,127 @@
+.landing {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    transform: translateY(-3rem);
+    font-size: 1.25em;
+}
+
+.landing p {
+    font-family: 'Roboto Mono', monospace;
+}
+
+.landing span {
+    position: absolute;
+    bottom: 0rem;
+    font-family: 'Roboto Mono', monospace;
+}
+
+.background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+
+    pointer-events: none;
+}
+
+.bgShip {
+    position: absolute;
+    display: flex;
+    gap: 0.4rem;
+}
+
+.bgShip#bgs1 {
+    left: 15vw;
+    rotate: -15deg;
+    top: 15vh;
+}
+
+.bgShip#bgs2 {
+    right: 15vw;
+    rotate: 15deg;
+    top: 25vh;
+}
+
+.bgShip#bgs3 {
+    left: 20vw;
+    rotate: 65deg;
+    bottom: 25vh;
+}
+
+.bgShip#bgs4 {
+    right: 20vw;
+    rotate: -50deg;
+    bottom: 25vh;
+}
+
+.bgShip .field {
+    /* background-color: var(--field); */
+    width: 2rem;
+    aspect-ratio: 1;
+    border-radius: 20%;
+
+    scale: 0;
+    transition: scale 0.25s 0.05s;
+}
+
+.bgShip.ally .field {
+    background-color: var(--ship-valid);
+}
+
+.bgShip.enemy .field {
+    background-color: var(--ship-invalid);
+}
+
+.bgShip.big {
+    scale: 2;
+    filter: blur(4px);
+}
+
+.bgShip.small {
+    scale: 1.25;
+    filter: blur(2px);
+}
+
+.loginContainer {
+    position: fixed;
+    top: 100vh;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+    transition: all 0.5s 0.3s ease, top 0.6s ease-in-out;
+
+    background-color: rgba(0, 0, 0, 0);
+    backdrop-filter: blur(0px);
+}
+
+.loginContainer.active {
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(20px);
+}
+
+.container {
+    display: flex;
+    height: 100%;
+    opacity: 1;
+}
+
+.container div.outer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    transform: translateY(-3rem);
+}

public/assets/css/main.css

@@ -14,7 +14,7 @@
 }
 
 .bshipstoast {
-    background: rgba(0, 0, 0, 0.6);
+    background-color: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(15px);
     color: white;
     padding: 0.75rem 1rem;
@@ -253,7 +253,7 @@ nav span:hover {
 }
 
 #profileView .matchList .match {
-    background: rgba(24, 24, 24, 1);
+    background-color: rgba(24, 24, 24, 1);
     border-radius: 15px;
     cursor: pointer;
     padding: 0.7rem;

public/assets/js/landing.js

@@ -0,0 +1,43 @@
+String.prototype.replaceAt = function (index, replacement) {
+    return this.substring(0, index) + replacement + this.substring(index + replacement.length);
+}
+
+const charset = ["0", "1", "!", "@", "#", "$", "%", "&"];
+
+setInterval(() => {
+    var content = $("#scrolldowntext").html();
+    const len = content.length;
+
+    for (let i = 0; i < len; i++) {
+        const duration = Math.random() * 20 + 40;
+
+        setTimeout(() => {
+            let previousChar = content.charAt(i);
+
+            let randomChar = charset[Math.floor(Math.random() * charset.length)];
+            content = content.replaceAt(i, randomChar);
+
+            $("#scrolldowntext").html(content);
+
+            setTimeout(() => {
+                content = content.replaceAt(i, previousChar);
+                $("#scrolldowntext").html(content);
+            }, duration * len + duration * i);
+        }, duration * i);
+    }
+}, 5000);
+
+document.addEventListener("wheel", (event) => {
+    if (event.deltaY > 0) {
+        $(".loginContainer").addClass("active");
+        setTimeout(() => {
+            for (let i = 1; i <= 10; i++) {
+                setTimeout(() => {
+                    $(`#f${i}`).css("scale", "1");
+                }, 100 * (i - 1));
+            }
+        }, 400);
+    } else if (event.deltaY < 0) {
+        $(".loginContainer").removeClass("active");
+    }
+});

public/assets/js/spa_lib.js

@@ -2,7 +2,7 @@ var activeView;
 var returnLock = false;
 
 function switchView(viewContainerId, useReplaceState=false) {
-    if (!returnLock) {
+    if (!returnLock && viewContainerId !== activeView) {
         $(`.container`).css({ opacity: 0, animation: "OutAnim 0.2s 1 ease" });
         setTimeout(() => {
             $(`.container`).css("display", "none");

views/index.handlebars

@@ -1,5 +1,4 @@
 <nav><span onclick="switchView('settingsView')">{{ t 'menu.navbar.Settings' }}</span><span onclick="switchView('mainMenuView')">{{ t 'menu.navbar.Main menu' }}</span> <span id="profileButton" onclick="switchView('profileView')">{{ t 'menu.navbar.Profile' }}</span></nav>
-{{!-- <h1 class="header">Statki</h1> --}}
 <div class="container" id="mainMenuView" data-path="/">
     <div>
         

views/landing.handlebars

@@ -0,0 +1,62 @@
+<link rel="stylesheet" href="/assets/css/landing.css">
+
+<div class="loginContainer">
+    <div class="background">
+        <div class="bgShip small ally" id="bgs1">
+            <div class="field" id="f1"></div>
+            <div class="field" id="f2"></div>
+            <div class="field" id="f3"></div>
+            <div class="field" id="f4"></div>
+        </div>
+        <div class="bgShip big ally" id="bgs2">
+            <div class="field" id="f8"></div>
+        </div>
+        <div class="bgShip big enemy" id="bgs3">
+            <div class="field" id="f5"></div>
+            <div class="field" id="f6"></div>
+            <div class="field" id="f7"></div>
+        </div>
+        <div class="bgShip small enemy" id="bgs4">
+            <div class="field" id="f9"></div>
+            <div class="field" id="f10"></div>
+        </div>
+    </div>
+
+    <div class="container" id="pvpJoinView">
+        <div class="outer">
+            <h2>{{ t 'login.Login' }}</h2>
+            <div class="modes">
+                <div>
+                    <form action="/api/login" method="post">
+                        <input type="email" name="email" placeholder="{{ t 'login.E-mail address' }}"
+                            style="font-size: 1rem;">
+                        <input type="submit" value="{{ t 'login.Proceed' }}">
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container" id="pvpJoinView">
+        <div class="outer">
+            <h2>{{ t 'login.Login' }}</h2>
+            <div class="modes">
+                <div>
+                    <form action="/api/login" method="post">
+                        <input type="email" name="email" placeholder="{{ t 'login.E-mail address' }}"
+                            style="font-size: 1rem;">
+                        <input type="submit" value="{{ t 'login.Proceed' }}">
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="landing">
+    <h1>Statki</h1>
+    <p>The #1 online multiplayer battleships game</p>
+    <span id="scrolldowntext">SCROLL DOWN</span>
+</div>
+
+<script src="/assets/js/landing.js"></script>