From e85f36dfb607d4d5297596d933217036c7bf698c Mon Sep 17 00:00:00 2001 From: MaciejkaG Date: Mon, 8 Jan 2024 16:53:12 +0100 Subject: [PATCH] added lobbies and more backend stuff --- index.js | 87 ++++++++++++++++++++++++++++++++--- public/assets/css/board.css | 2 +- public/assets/css/main.css | 4 ++ public/assets/js/socket.js | 86 ++++++++++++++++++++++++++++++++++ public/assets/js/spa_lib.js | 26 +++++++---- views/index.handlebars | 37 ++------------- views/layouts/main.handlebars | 1 - views/setup.handlebars | 19 ++++++++ 8 files changed, 213 insertions(+), 49 deletions(-) create mode 100644 views/setup.handlebars diff --git a/index.js b/index.js index 0f1900d..7577d94 100644 --- a/index.js +++ b/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) => { - - res.render('index'); + if (req.session.nickname == null) { + res.redirect("/setup"); + } else { + 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.on('chat message', (msg) => { - console.log('message: ' + msg); + socket.join(id); + } else { + callback({ + status: "alreadyInLobby", + gameCode: socket.rooms[1] + }); + } + }); + + socket.on('join lobby', (msg, callback) => { + 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'); -}); \ No newline at end of file +}); + +function genID() { + return Math.floor(100000 + Math.random() * 900000).toString(); +} \ No newline at end of file diff --git a/public/assets/css/board.css b/public/assets/css/board.css index c91be99..95f1eb6 100644 --- a/public/assets/css/board.css +++ b/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 { diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 769df43..1aea6b1 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -1,3 +1,7 @@ +body { + transition: opacity 0.1s; +} + .container { display: none; } diff --git a/public/assets/js/socket.js b/public/assets/js/socket.js index 6442a00..9065465 100644 --- a/public/assets/js/socket.js +++ b/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 = ''; + } +}); \ No newline at end of file diff --git a/public/assets/js/spa_lib.js b/public/assets/js/spa_lib.js index bd186f0..02da062 100644 --- a/public/assets/js/spa_lib.js +++ b/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) { - let elem = document.querySelector(`.container[data-path="${initialPath}"]`); + // if (initialPath != null) { + // let elem = document.querySelector(`.container[data-path="${initialPath}"]`); - if (elem != null) { - switchView(elem.id, true); - activeView = elem.id; - } - } else { + // if (elem != null) { + // switchView(elem.id, true); + // activeView = elem.id; + // } + // } else { switchView("mainMenuView"); activeView = "mainMenuView"; - } + //} }); addEventListener("popstate", (event) => { diff --git a/views/index.handlebars b/views/index.handlebars index da3e2e3..ddd9800 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -24,7 +24,7 @@

Stwórz

Stwórz własny pokój

-
+

Dołącz

Dołącz do czyjegoś pokoju poprzez kod

@@ -39,9 +39,9 @@

Kod pokoju:

- +

Oczekiwanie na gracza...

- +
@@ -94,33 +94,4 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars index d43ce5f..69f05cd 100644 --- a/views/layouts/main.handlebars +++ b/views/layouts/main.handlebars @@ -16,6 +16,5 @@ Designed by Maciejka {{{body}}} - \ No newline at end of file diff --git a/views/setup.handlebars b/views/setup.handlebars new file mode 100644 index 0000000..b8fdd15 --- /dev/null +++ b/views/setup.handlebars @@ -0,0 +1,19 @@ + +
+
+

Statki

+

Konfiguracja profilu

+
+
+
+ + +
+
+
+
+
\ No newline at end of file