Added proper room system, need to split menu and game into two separate pages and after that we can proceed to connecting menu and the game view

index.js

@@ -51,7 +51,7 @@ app.get("/setup", (req, res) => {
 });
 
 app.post('/api/setup-profile', function (req, res) {
-    if (req.session.nickname == null) {
+    if (req.session.nickname == null && 4 < req.body.nickname.length && req.body.nickname.length < 16) {
         req.session.nickname = req.body.nickname;
     }
 
@@ -93,15 +93,18 @@ io.on('connection', (socket) => {
             });
         } else {
             if (socket.rooms.size === 1) {
-                io.to(msg).emit("joined");
+                io.to(msg).emit("joined", session.nickname);
+                let opp = io.sockets.sockets.get(io.sockets.adapter.rooms.get(msg).values().next().value);
+                let oppNickname = opp.request.session.nickname;
                 socket.join(msg);
                 callback({
-                    status: "ok"
+                    status: "ok",
+                    oppNickname: oppNickname,
                 });
             } else {
                 callback({
                     status: "alreadyInLobby",
-                    gameCode: id
+                    gameCode: id,
                 });
             }
         }

public/assets/css/main.css

@@ -134,4 +134,28 @@ body {
 #pvpJoinView form input[type=submit]:hover {
     background: white;
     color: black;
+}
+
+/* Preparation */
+#preparingGame .modes {
+    display: flex;
+    gap: 2rem;
+}
+
+#preparingGame .modes div {
+    height: 13rem;
+    width: 11rem;
+    background: black;
+    border: solid 1px white;
+    border-radius: 15px;
+    user-select: none;
+    padding: 1rem 3rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+#preparingGame .modes div * {
+    margin: 0;
+    width: 100%;
 }

public/assets/js/socket.js

@@ -1,7 +1,10 @@
 const socket = io();
 
-socket.on("joined", () => {
+socket.on("joined", (nick) => {
-    console.log("Someone joined the lobby!");
+    lockUI(true);
+    $("#oppNameField").html(nick);
+    switchView("preparingGame");
+    lockUI(false);
 });
 
 $("#createGameButton").on("click", function () {
@@ -65,8 +68,8 @@ form.addEventListener('submit', (e) => {
         socket.emit("join lobby", input.value, (response) => {
             switch (response.status) {
                 case "ok":
-                    alert("Game joined!");
+                    $("#oppNameField").html(response.oppNickname);
-                    switchView("mainMenuView");
+                    switchView("preparingGame");
                     lockUI(false);
                     break;
 

views/index.handlebars

@@ -62,6 +62,21 @@
     </div>
 </div>
 
+<div class="container" id="preparingGame" data-title="Statki / PvP / Przygotowywanie" data-path="/pvp/prepairing">
+    <div>
+        <h1>Statki</h1>
+        <h2>PvP / Wczytywanie</h2>
+        <div class="modes">
+            <div>
+                <h2>Czekaj...</h2>
+                <h3>Wkrótce nastąpi przekierowanie</h3>
+                <h3>Przeciwnik:</h3>
+                <h4 id="oppNameField"></h4>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="container" id="gameView" data-title="Statki / Gra" data-path="/game">
     <div>
         <h1>Statki</h1>