MaciejkaG/statki
1
0
Fork 0
mirror of https://github.com/MaciejkaG/statki.git synced 2024-11-30 00:32:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

added lobbies and more backend stuff

Browse Source
This commit is contained in:
MaciejkaG 2024-01-08 16:53:12 +01:00
parent 4018569f7b
commit e85f36dfb6
8 changed files with 213 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
index.js
View File

@ -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) => {
console.log('message: ' + msg);
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');
});
function genID() {
return Math.floor(100000 + Math.random() * 900000).toString();
}

2
public/assets/css/board.css
View File

@ -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 {

4
public/assets/css/main.css
View File

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

86
public/assets/js/socket.js
View File

@ -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 = '';
}
});

26
public/assets/js/spa_lib.js
View File

@ -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) => {

35
views/index.handlebars
View File

@ -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>

1
views/layouts/main.handlebars
View File

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

19
views/setup.handlebars Normal file
View File

@ -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>