Minor design/UI/UX improvements and fixes

index.js

@@ -622,6 +622,10 @@ io.on('connection', async (socket) => {
             }
         });
 
+        socket.on('logout', () => {
+            session.destroy();
+        });
+
         socket.on('disconnecting', () => {
             if (bships.isPlayerInRoom(socket)) {
                 io.to(socket.rooms[1]).emit("player left");

public/assets/css/main.css

@@ -337,4 +337,27 @@ nav span:hover {
     border-radius: 15px;
     outline: none;
     margin-left: 2rem;
+}
+
+#settingsView a {
+    text-decoration: none;
+    color: var(--dynamic);
+    
+    transition: opacity 0.3s;
+}
+
+#settingsView a:hover {
+    opacity: 0.6;
+    text-decoration: underline;
+}
+
+#logout {
+    color: var(--danger);
+    cursor: pointer;
+
+    transition: opacity 0.3s;
+}
+
+#logout:hover {
+    opacity: 0.6;
 }

public/assets/js/landing.js

@@ -99,7 +99,11 @@ loginForm.addEventListener('submit', (e) => {
 
                     if (response.next === "done") {
                         console.log("No authorisation required.");
-                        window.location.reload();
+                        $("body").addClass("closed");
+
+                        setTimeout(() => {
+                            window.location.reload();
+                        }, 700);
                         return;
                     }
 

public/assets/js/socket.js

@@ -144,6 +144,12 @@ $("#pvpMenuButton").on("click", function () {
     switchView('pvpMenuView');
 });
 
+$("#logout").on("click", function() {
+    lockUI(true);
+    socket.emit("logout");
+    window.location.reload();
+});
+
 const form = document.getElementById('pvpJoinForm');
 const input = document.getElementById('pvpJoinCode');
 

public/assets/js/spa_lib.js

@@ -23,10 +23,10 @@ function switchView(viewContainerId, useReplaceState=false) {
 function lockUI(doLock) {
     if (doLock) {
         $("body").css("pointer-events", "none");
-        $("body").css("opacity", "0.4");
+        $(".container").css("opacity", "0.4");
     } else {
         $("body").css("pointer-events", "inherit");
-        $("body").css("opacity", "1");
+        $(".container").css("opacity", "1");
     }
 }
 

views/index.handlebars

@@ -100,6 +100,8 @@
         <select name="language" id="languages">
             
         </select>
+        <h3><a href="/privacy" target="_blank">{{ t 'landing.Privacy policy' }}</a></h3>
+        <h3 id="logout">Log out</h3>
     </div>
 </div>