added lobbies and more backend stuff

index.js

@@ -12,6 +12,9 @@ const __dirname = path.dirname(__filename);
 
 const app = express();
 
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
 app.engine('handlebars', engine());
 app.set('view engine', 'handlebars');
 app.set('views', './views');
@@ -32,8 +35,27 @@ app.use(express.static(path.join(__dirname, 'public')));
 io.engine.use(sessionMiddleware);
 
 app.get("/", (req, res) => {
+    if (req.session.nickname == null) {
+        res.redirect("/setup");
+    } else {
+        res.render('index');
+    }
+});
 
-    res.render('index');
+app.get("/setup", (req, res) => {
+    if (req.session.nickname != null) {
+        res.redirect('/');
+    } else {
+        res.render("setup");
+    }
+});
+
+app.post('/api/setup-profile', function (req, res) {
+    if (req.session.nickname == null) {
+        req.session.nickname = req.body.nickname;
+    }
+
+    res.redirect("/")
 });
 
 app.get("/*", (req, res) => {
@@ -42,14 +64,67 @@ app.get("/*", (req, res) => {
 
 io.on('connection', (socket) => {
     const session = socket.request.session;
+    if (session.nickname==null) {
+        socket.disconnect();
+        return;
+    }
 
+    socket.on('create lobby', (callback) => {
+        if (socket.rooms.size === 1) {
+            let id = genID();
+            callback({
+                status: "ok",
+                gameCode: id
+            });
 
+            socket.join(id);
+        } else {
+            callback({
+                status: "alreadyInLobby",
+                gameCode: socket.rooms[1]
+            });
+        }
+    });
 
-    socket.on('chat message', (msg) => {
+    socket.on('join lobby', (msg, callback) => {
-        console.log('message: ' + msg);
+        if (io.sockets.adapter.rooms.get(msg) == null) {
+            callback({
+                status: "bad_id"
+            });
+        } else {
+            if (socket.rooms.size === 1) {
+                io.to(msg).emit("joined");
+                socket.join(msg);
+                callback({
+                    status: "ok"
+                });
+            } else {
+                callback({
+                    status: "alreadyInLobby",
+                    gameCode: id
+                });
+            }
+        }
+    });
+
+    socket.on('leave lobby', (callback) => {
+        if (socket.rooms.size === 2) {
+            socket.leave(socket.rooms[1]);
+            callback({
+                status: "ok"
+            });
+        } else {
+            callback({
+                status: "youreNotInLobby"
+            });
+        }
     });
 });
 
 server.listen(7777, () => {
     console.log('Server running at http://localhost:7777');
 });
+
+function genID() {
+    return Math.floor(100000 + Math.random() * 900000).toString();
+}

public/assets/css/board.css

@@ -63,7 +63,7 @@ h1,h2,h3,h4,h5,h6 {
     aspect-ratio: 1;
     border-radius: 20%;
     cursor: pointer;
-    transition: background 0.15s;
+    transition: background 0.05s;
 }
 
 .field svg {

public/assets/css/main.css

@@ -1,3 +1,7 @@
+body {
+    transition: opacity 0.1s;
+}
+
 .container {
     display: none;
 }

public/assets/js/socket.js

@@ -1,2 +1,88 @@
 const socket = io();
 
+socket.on("joined", () => {
+    console.log("Someone joined the lobby!");
+});
+
+$("#createGameButton").on("click", function () {
+    lockUI(true);
+    socket.emit("create lobby", (response) => {
+        switch (response.status) {
+            case "ok":
+                $("#createGameCode").val(response.gameCode);
+                switchView("pvpCreateView");
+                lockUI(false);
+                break;
+
+            case "alreadyInLobby":
+                $("#createGameCode").val(response.gameCode);
+                switchView("pvpCreateView");
+                lockUI(false);
+                break;
+
+            default:
+                alert(`Wystąpił nieznany problem\nStatus: ${response.status}`);
+                lockUI(false);
+                break;
+        }
+    });
+});
+
+$("#leaveGameButton").on("click", function () {
+    lockUI(true);
+    socket.emit("leave lobby", (response) => {
+        switch (response.status) {
+            case "ok":
+                switchView("mainMenuView");
+                lockUI(false);
+                break;
+
+            case "youreNotInLobby":
+                switchView("mainMenuView");
+                lockUI(false);
+                break;
+
+            default:
+                alert(`Wystąpił nieznany problem\nStatus: ${response.status}`);
+                switchView("mainMenuView");
+                lockUI(false);
+                break;
+        }
+    });
+});
+
+$("#pvpMenuButton").on("click", function () {
+    switchView('pvpMenuView');
+});
+
+const form = document.getElementById('pvpJoinForm');
+const input = document.getElementById('pvpJoinCode');
+
+form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    if (input.value && input.value.length === 6) {
+        lockUI(true);
+        socket.emit("join lobby", input.value, (response) => {
+            switch (response.status) {
+                case "ok":
+                    alert("Game joined!");
+                    switchView("mainMenuView");
+                    lockUI(false);
+                    break;
+
+                //case "alreadyInLobby":
+                //    $("#createGameCode").val(response.gameCode);
+                //    switchView("pvpCreateView");
+                //    lockUI(false);
+                //    break;
+
+                default:
+                    alert(`Wystąpił nieznany problem\nStatus: ${response.status}`);
+                    lockUI(false);
+                    switchView("mainMenuView");
+                    break;
+            }
+        });
+        input.value = '';
+    }
+});

public/assets/js/spa_lib.js

@@ -17,21 +17,31 @@ function switchView(viewContainerId, useReplaceState=false) {
     }, 150);
 }
 
+function lockUI(doLock) {
+    if (doLock) {
+        $("body").css("pointer-events", "none");
+        $("body").css("opacity", "0.4");
+    } else {
+        $("body").css("pointer-events", "inherit");
+        $("body").css("opacity", "1");
+    }
+}
+
 const initialURLParams = new URLSearchParams(window.location.search);
 const initialPath = initialURLParams.get('path');
 
 window.addEventListener("load", () => {
-    if (initialPath != null) {
+    // if (initialPath != null) {
-        let elem = document.querySelector(`.container[data-path="${initialPath}"]`);
+    //     let elem = document.querySelector(`.container[data-path="${initialPath}"]`);
 
-        if (elem != null) {
+    //     if (elem != null) {
-            switchView(elem.id, true);
+    //         switchView(elem.id, true);
-            activeView = elem.id;
+    //         activeView = elem.id;
-        }
+    //     }
-    } else {
+    // } else {
         switchView("mainMenuView");
         activeView = "mainMenuView";
-    }
+    //}
 });
 
 addEventListener("popstate", (event) => {

views/index.handlebars

@@ -24,7 +24,7 @@
                 <h2>Stwórz</h2>
                 <p>Stwórz własny pokój</p>
             </div>
-            <div onclick="switchView('gameView')">
+            <div onclick="switchView('pvpJoinView')">
                 <h2>Dołącz</h2>
                 <p>Dołącz do czyjegoś pokoju poprzez kod</p>
             </div>
@@ -39,9 +39,9 @@
         <div class="modes">
             <div>
                 <h2>Kod pokoju:</h2>
-                <input type="text" maxlength="6" readonly value="123456">
+                <input type="text" maxlength="6" readonly value="123456" id="createGameCode">
                 <h3>Oczekiwanie na gracza...</h3>
-                <button>Opuść pokój</button>
+                <button id="leaveGameButton">Opuść pokój</button>
             </div>
         </div>
     </div>
@@ -95,32 +95,3 @@
 
 <script src="/assets/js/socket.js"></script>
 <script src="/assets/js/spa_lib.js"></script>
-<script>
-    $("#createGameButton").on("click", function () {
-        $("#pvpCreateView .modes input").css("filter", "blur(20px)");
-        $("#pvpCreateView .modes").css("pointer-events", "none");
-
-        switchView("pvpCreateView");
-    });
-
-    $("#pvpMenuButton").on("click", function () {
-        socket.emit("check pvp eligibility", (response) => {
-            if (response.status) {
-
-            }
-        });
-
-        switchView('pvpMenuView')
-    });
-
-    const form = document.getElementById('pvpJoinForm');
-    const input = document.getElementById('pvpJoinCode');
-
-    form.addEventListener('submit', (e) => {
-        e.preventDefault();
-        if (input.value && input.value.length === 6) {
-            socket.emit('join game', input.value);
-            input.value = '';
-        }
-    });
-</script>

views/layouts/main.handlebars

@@ -16,6 +16,5 @@
     <span class="designerTag">Designed by Maciejka</span>
 
     {{{body}}}
-    
 </body>
 </html>

views/setup.handlebars

@@ -0,0 +1,19 @@
+<style>
+    .container {
+        display: flex;
+    }
+</style>
+<div class="container" id="pvpJoinView">
+    <div>
+        <h1>Statki</h1>
+        <h2>Konfiguracja profilu</h2>
+        <div class="modes">
+            <div>
+                <form action="/api/setup-profile" method="post">
+                    <input type="text" name="nickname" placeholder="Nickname" style="font-size: 1rem;">
+                    <input type="submit" value="Zatwierdź">
+                </form>
+            </div>
+        </div>
+    </div>
+</div>