Implemented a lobby
This commit is contained in:
@@ -4,91 +4,73 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Wolf & Schafe | Pro</title>
|
||||
<title>Wolf & Schafe | Online</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f0f2f5;
|
||||
--wolf: #e63946;
|
||||
--wolf-light: #ff6b78;
|
||||
--wolf-light: #ff707a;
|
||||
--sheep: #457b9d;
|
||||
--sheep-light: #7db0cf;
|
||||
--sheep-light: #8ecae6;
|
||||
--black: #1d3557;
|
||||
--white: #ffffff;
|
||||
--green: #10b981;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-family: 'Courier New', monospace;
|
||||
background: var(--bg);
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.game-wrapper {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
background: var(--white);
|
||||
background: white;
|
||||
border: 4px solid var(--black);
|
||||
box-shadow: 8px 8px 0px var(--black);
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.room-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
border: 3px solid var(--black);
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 900;
|
||||
background: #fff;
|
||||
box-shadow: 4px 4px 0px var(--black);
|
||||
}
|
||||
|
||||
.room-item:hover {
|
||||
background: #f8fafc;
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 6px 6px 0px var(--black);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.info-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 3px solid var(--black);
|
||||
padding: 10px;
|
||||
background: #f8fafc;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.room-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.room-tag {
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
background: var(--black);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Connection Indicator */
|
||||
.pulse {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #94a3b8;
|
||||
display: inline-block;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.online {
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 8px var(--green);
|
||||
}
|
||||
|
||||
.offline {
|
||||
background: var(--wolf);
|
||||
box-shadow: 0 0 8px var(--wolf);
|
||||
}
|
||||
|
||||
.id-box {
|
||||
@@ -109,17 +91,46 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
.board-container {
|
||||
/* Connection Dot */
|
||||
.conn-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ccc;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.conn-online {
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 5px var(--green);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.board-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 600 / 420;
|
||||
border: 3px solid var(--black);
|
||||
background: #fff;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -131,44 +142,53 @@
|
||||
.node-circle {
|
||||
stroke: var(--black);
|
||||
stroke-width: 2.5;
|
||||
transition: all 0.15s ease;
|
||||
transition: 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.empty {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.sheep {
|
||||
fill: var(--sheep);
|
||||
}
|
||||
|
||||
.wolf {
|
||||
fill: var(--wolf);
|
||||
}
|
||||
|
||||
.sheep {
|
||||
fill: var(--sheep);
|
||||
}
|
||||
|
||||
.empty {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.wolf.selected {
|
||||
fill: var(--wolf-light);
|
||||
fill: var(--wolf-light) !important;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.sheep.selected {
|
||||
fill: var(--sheep-light);
|
||||
fill: var(--sheep-light) !important;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.possible {
|
||||
fill: #fff;
|
||||
stroke: var(--green);
|
||||
stroke-width: 3;
|
||||
stroke-width: 2.5;
|
||||
stroke-dasharray: 4;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
#overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-weight: 900;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.controls {
|
||||
@@ -177,7 +197,7 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
.btn {
|
||||
border: 3px solid var(--black);
|
||||
background: white;
|
||||
padding: 12px 5px;
|
||||
@@ -188,63 +208,58 @@
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
button:active {
|
||||
box-shadow: 0px 0px 0px var(--black);
|
||||
.btn:active {
|
||||
box-shadow: 0px 0px 0px;
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
#exitBtn {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.main-card {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.info-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#status {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.controls {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.btn-green {
|
||||
background: var(--green) !important;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="game-wrapper">
|
||||
<div class="main-card">
|
||||
<div class="info-bar">
|
||||
<div class="room-info">
|
||||
<div>
|
||||
<div class="room-tag">RAUM: <span id="codeDisplay">...</span> <span id="connCircle"
|
||||
class="pulse"></span></div>
|
||||
<div id="idBadge" class="id-box">...</div>
|
||||
</div>
|
||||
|
||||
<div id="lobby" class="main-card">
|
||||
<h1 style="text-align: center; margin: 0; border-bottom: 4px solid var(--black); padding-bottom: 10px;">WOLF &
|
||||
SCHAFE</h1>
|
||||
<button class="btn btn-green" style="font-size: 1.1rem;" onclick="createRoom()">+ NEUES SPIEL</button>
|
||||
<h3 style="margin: 15px 0 5px 0;">Offene Räume:</h3>
|
||||
<div id="roomList">Suche Räume...</div>
|
||||
</div>
|
||||
|
||||
<div id="game" class="main-card hidden">
|
||||
<div class="info-bar">
|
||||
<div>
|
||||
<div style="font-size: 0.7rem; font-weight: 900; display: flex; align-items: center;">
|
||||
<span id="dot" class="conn-dot"></span> RAUM: <span id="roomCode">...</span>
|
||||
</div>
|
||||
<div id="status" style="text-align: right; font-weight: 900; line-height: 1.2;">Verbinde...</div>
|
||||
<div id="idBadge" class="id-box">...</div>
|
||||
</div>
|
||||
<div class="board-container"><svg viewBox="0 0 600 420" preserveAspectRatio="xMidYMid meet"></svg></div>
|
||||
<div class="controls">
|
||||
<button id="copyRoomBtn">Link</button>
|
||||
<button id="restartBtn">Swap & Reset</button>
|
||||
<button id="exitBtn">Beenden</button>
|
||||
<div id="status" style="text-align: right; font-weight: 900; line-height: 1.2;">...</div>
|
||||
</div>
|
||||
|
||||
<div class="board-wrapper">
|
||||
<div id="overlay" class="hidden">
|
||||
<div>WARTEN AUF GEGNER...</div>
|
||||
<p style="font-size: 0.7rem; margin-top: 10px; padding: 0 10px;">Link kopieren und Freund einladen!</p>
|
||||
</div>
|
||||
<svg viewBox="0 0 600 420"></svg>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn" id="copyBtn">Link Kopieren</button>
|
||||
<button class="btn" onclick="ws.send(JSON.stringify({type:'restart'}))">Restart</button>
|
||||
<button class="btn" onclick="location.href='/'">Lobby</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let sessionId = localStorage.getItem("game_session_id") || (Math.random().toString(36).substring(2));
|
||||
let sessionId = localStorage.getItem("game_session_id") || Math.random().toString(36).substring(2);
|
||||
localStorage.setItem("game_session_id", sessionId);
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
let roomId = params.get("room");
|
||||
let ws, myRole, state, selected = null;
|
||||
@@ -258,38 +273,55 @@
|
||||
const protocol = location.protocol === "https:" ? "wss" : "ws";
|
||||
ws = new WebSocket(`${protocol}://${location.host}?room=${roomId}&sessionId=${sessionId}`);
|
||||
|
||||
ws.onopen = () => {
|
||||
document.getElementById("connCircle").className = "pulse online";
|
||||
};
|
||||
ws.onopen = () => document.getElementById("dot").classList.add("conn-online");
|
||||
ws.onclose = () => document.getElementById("dot").classList.remove("conn-online");
|
||||
|
||||
ws.onmessage = e => {
|
||||
const msg = JSON.parse(e.data);
|
||||
if (msg.type === "room_list") updateRoomList(msg.rooms);
|
||||
if (msg.type === "init") {
|
||||
roomId = msg.roomId;
|
||||
document.getElementById("codeDisplay").innerText = roomId;
|
||||
document.getElementById("roomCode").innerText = roomId.toUpperCase();
|
||||
window.history.replaceState({}, '', `?room=${roomId}`);
|
||||
document.getElementById("lobby").classList.add("hidden");
|
||||
document.getElementById("game").classList.remove("hidden");
|
||||
}
|
||||
if (msg.type === "state") {
|
||||
state = msg.game; myRole = msg.yourRole;
|
||||
updateUI(); render();
|
||||
document.getElementById("overlay").className = msg.onlineCount < 2 ? "" : "hidden";
|
||||
render();
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
document.getElementById("connCircle").className = "pulse offline";
|
||||
setTimeout(connect, 2000);
|
||||
};
|
||||
}
|
||||
|
||||
function updateUI() {
|
||||
const badge = document.getElementById("idBadge");
|
||||
badge.innerText = myRole === "wolf" ? "WOLF" : "SCHAFE";
|
||||
badge.className = `id-box is-${myRole}`;
|
||||
const statusEl = document.getElementById("status");
|
||||
if (state.winner) statusEl.innerHTML = `SIEG: ${state.winner.toUpperCase()}!`;
|
||||
else statusEl.innerHTML = `${state.turn === myRole ? 'DEIN ZUG' : 'WARTEN...'}<br><small>ZUG ${state.moveCount}/40</small>`;
|
||||
function updateRoomList(rooms) {
|
||||
const list = document.getElementById("roomList");
|
||||
list.innerHTML = rooms.length === 0 ? "<p style='text-align:center'>Keine aktiven Räume.</p>" : "";
|
||||
rooms.forEach(r => {
|
||||
const div = document.createElement("div");
|
||||
div.className = "room-item";
|
||||
div.innerHTML = `<span>RAUM: ${r.id.toUpperCase()}</span> <span>${r.players}/2</span>`;
|
||||
div.onclick = () => { window.location.search = `?room=${r.id}`; };
|
||||
list.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
function createRoom() {
|
||||
const id = Math.random().toString(36).substring(7);
|
||||
window.location.search = `?room=${id}`;
|
||||
}
|
||||
|
||||
document.getElementById("copyBtn").onclick = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(window.location.href);
|
||||
alert("Link kopiert!");
|
||||
} catch (err) {
|
||||
const t = document.createElement("textarea"); t.value = window.location.href;
|
||||
document.body.appendChild(t); t.select(); document.execCommand('copy');
|
||||
document.body.removeChild(t); alert("Link kopiert!");
|
||||
}
|
||||
};
|
||||
|
||||
function render() {
|
||||
const svg = document.querySelector("svg");
|
||||
svg.innerHTML = "";
|
||||
@@ -300,34 +332,44 @@
|
||||
l.setAttribute("class", "edge"); svg.appendChild(l);
|
||||
});
|
||||
|
||||
const badge = document.getElementById("idBadge");
|
||||
badge.innerText = myRole === "wolf" ? "WOLF" : "SCHAFE";
|
||||
badge.className = `id-box is-${myRole}`;
|
||||
|
||||
const statusEl = document.getElementById("status");
|
||||
if (state.winner) statusEl.innerHTML = `SIEG: ${state.winner.toUpperCase()}!`;
|
||||
else statusEl.innerHTML = `${state.turn === myRole ? 'DEIN ZUG' : 'WARTEN...'}<br><small>ZUG ${state.moveCount}/40</small>`;
|
||||
|
||||
for (let i = 0; i <= 10; i++) {
|
||||
const [x, y] = pos[i];
|
||||
let type = state.wolf === i ? "wolf" : (state.sheep.includes(i) ? "sheep" : "empty");
|
||||
const isPossible = selected !== null && (myRole === "wolf" ? bWolf[selected] : bSheep[selected]).includes(i) && state.wolf !== i && !state.sheep.includes(i);
|
||||
const isWolf = state.wolf === i;
|
||||
const isSheep = state.sheep.includes(i);
|
||||
const type = isWolf ? "wolf" : (isSheep ? "sheep" : "empty");
|
||||
const isPossible = selected !== null && (myRole === "wolf" ? bWolf[selected] : bSheep[selected]).includes(i) && !isWolf && !isSheep;
|
||||
|
||||
const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
||||
g.onclick = () => {
|
||||
if (state.turn !== myRole || state.winner) return;
|
||||
const isMine = (myRole === "wolf" && state.wolf === i) || (myRole === "sheep" && state.sheep.includes(i));
|
||||
if (selected === null) { if (isMine) selected = i; }
|
||||
else { if (isMine) selected = (selected === i ? null : i); else { if (ws.readyState === 1) ws.send(JSON.stringify({ from: selected, to: i })); selected = null; } }
|
||||
const isMine = (myRole === "wolf" && isWolf) || (myRole === "sheep" && isSheep);
|
||||
if (isMine) selected = i;
|
||||
else if (isPossible) { ws.send(JSON.stringify({ from: selected, to: i })); selected = null; }
|
||||
else selected = null;
|
||||
render();
|
||||
};
|
||||
|
||||
const c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
||||
c.setAttribute("cx", x); c.setAttribute("cy", y); c.setAttribute("r", 25);
|
||||
c.setAttribute("class", `node-circle ${type} ${selected === i ? 'selected' : ''} ${isPossible ? 'possible' : ''}`);
|
||||
g.appendChild(c);
|
||||
|
||||
const t = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
||||
t.setAttribute("x", x); t.setAttribute("y", y + 5); t.setAttribute("text-anchor", "middle");
|
||||
t.setAttribute("class", "node-label"); t.setAttribute("fill", (type === "empty" ? "black" : "white"));
|
||||
t.setAttribute("x", x); t.setAttribute("y", y + 6); t.setAttribute("text-anchor", "middle");
|
||||
t.setAttribute("style", "pointer-events:none; font-weight:900; font-family:sans-serif; font-size: 18px;");
|
||||
t.setAttribute("fill", (type === "empty") ? "#000" : "#fff");
|
||||
t.textContent = i; g.appendChild(t);
|
||||
svg.appendChild(g);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("restartBtn").onclick = () => { if (ws.readyState === 1) ws.send(JSON.stringify({ type: "restart" })); };
|
||||
document.getElementById("copyRoomBtn").onclick = () => { navigator.clipboard.writeText(window.location.href); alert("Kopiert!"); };
|
||||
document.getElementById("exitBtn").onclick = () => { if (confirm("Beenden?")) { if (ws.readyState === 1) ws.send(JSON.stringify({ type: "leave" })); window.location.href = window.location.pathname; } };
|
||||
|
||||
connect();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
88
server.js
88
server.js
@@ -14,82 +14,99 @@ const board_sheep = { 0: [1, 2, 3], 1: [2, 4, 5], 2: [1, 3, 5], 3: [2, 5, 6], 4:
|
||||
|
||||
const rooms = {};
|
||||
|
||||
function broadcast(roomId) {
|
||||
const room = rooms[roomId];
|
||||
if (!room) return;
|
||||
room.players.forEach(p => {
|
||||
if (p.ws && p.ws.readyState === WebSocket.OPEN) {
|
||||
p.ws.send(JSON.stringify({ type: "state", game: room.game, yourRole: p.role }));
|
||||
function getRoomList() {
|
||||
return Object.keys(rooms).map(id => ({
|
||||
id,
|
||||
players: rooms[id].players.length,
|
||||
turn: rooms[id].game.turn
|
||||
}));
|
||||
}
|
||||
|
||||
function broadcastRoomList() {
|
||||
const list = JSON.stringify({ type: "room_list", rooms: getRoomList() });
|
||||
wss.clients.forEach(client => {
|
||||
if (client.readyState === WebSocket.OPEN && !client.roomId) {
|
||||
client.send(list);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Heartbeat: Check if clients are still alive every 30s
|
||||
const interval = setInterval(() => {
|
||||
wss.clients.forEach(ws => {
|
||||
if (ws.isAlive === false) return ws.terminate();
|
||||
ws.isAlive = false;
|
||||
ws.ping();
|
||||
});
|
||||
}, 30000);
|
||||
|
||||
wss.on("connection", (ws, req) => {
|
||||
const urlParams = new URLSearchParams(req.url.split('?')[1]);
|
||||
let roomId = urlParams.get("room");
|
||||
let sessionId = urlParams.get("sessionId");
|
||||
|
||||
ws.isAlive = true;
|
||||
ws.on('pong', () => ws.isAlive = true);
|
||||
if (!roomId || roomId === "null") {
|
||||
ws.send(JSON.stringify({ type: "room_list", rooms: getRoomList() }));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!roomId || !rooms[roomId]) {
|
||||
if (!roomId || roomId === "null") roomId = randomBytes(3).toString("hex");
|
||||
if (!rooms[roomId]) {
|
||||
rooms[roomId] = {
|
||||
game: { wolf: 5, sheep: [0, 1, 3], turn: "sheep", moveCount: 0, winner: null },
|
||||
players: [],
|
||||
nextFirstRole: "sheep"
|
||||
game: { wolf: 5, sheep: [0, 1, 3], turn: "sheep", moveCount: 0, winner: null, lastMove: null },
|
||||
players: [], nextFirstRole: "sheep"
|
||||
};
|
||||
}
|
||||
|
||||
const room = rooms[roomId];
|
||||
let player = room.players.find(p => p.sessionId === sessionId);
|
||||
ws.roomId = roomId;
|
||||
|
||||
let player = room.players.find(p => p.sessionId === sessionId);
|
||||
if (!player && room.players.length >= 2) {
|
||||
ws.send(JSON.stringify({ type: "full" }));
|
||||
ws.close();
|
||||
return;
|
||||
}
|
||||
|
||||
if (player) {
|
||||
if (player.timeout) clearTimeout(player.timeout);
|
||||
player.ws = ws;
|
||||
} else {
|
||||
const role = room.players.length === 0 ? room.nextFirstRole : (room.nextFirstRole === "sheep" ? "wolf" : "sheep");
|
||||
player = { ws, role, sessionId };
|
||||
player = { ws, role, sessionId, timeout: null };
|
||||
room.players.push(player);
|
||||
}
|
||||
|
||||
ws.send(JSON.stringify({ type: "init", role: player.role, roomId }));
|
||||
broadcast(roomId);
|
||||
broadcastRoomList();
|
||||
broadcastState(roomId);
|
||||
|
||||
ws.on("message", msg => {
|
||||
let data = JSON.parse(msg);
|
||||
if (data.type === "restart") {
|
||||
room.players.forEach(p => p.role = (p.role === "wolf" ? "sheep" : "wolf"));
|
||||
room.nextFirstRole = room.nextFirstRole === "sheep" ? "wolf" : "sheep";
|
||||
room.game = { wolf: 5, sheep: [0, 1, 3], turn: "sheep", moveCount: 0, winner: null };
|
||||
broadcast(roomId);
|
||||
} else if (data.type === "leave") {
|
||||
room.players = room.players.filter(p => p.sessionId !== sessionId);
|
||||
if (room.players.length === 0) delete rooms[roomId];
|
||||
room.game = { wolf: 5, sheep: [0, 1, 3], turn: "sheep", moveCount: 0, winner: null, lastMove: null };
|
||||
broadcastState(roomId);
|
||||
} else if (data.from !== undefined && data.to !== undefined) {
|
||||
handleMove(roomId, player.role, data);
|
||||
}
|
||||
});
|
||||
|
||||
ws.on("close", () => {
|
||||
// We keep the player in the room for a while to allow reconnects
|
||||
if (player) {
|
||||
player.timeout = setTimeout(() => {
|
||||
room.players = room.players.filter(p => p.sessionId !== sessionId);
|
||||
if (room.players.length === 0) {
|
||||
delete rooms[roomId];
|
||||
}
|
||||
broadcastRoomList();
|
||||
broadcastState(roomId);
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function broadcastState(roomId) {
|
||||
const room = rooms[roomId];
|
||||
if (!room) return;
|
||||
const online = room.players.filter(p => p.ws?.readyState === WebSocket.OPEN).length;
|
||||
room.players.forEach(p => {
|
||||
if (p.ws?.readyState === WebSocket.OPEN) {
|
||||
p.ws.send(JSON.stringify({ type: "state", game: room.game, yourRole: p.role, onlineCount: online }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleMove(roomId, role, { from, to }) {
|
||||
const room = rooms[roomId];
|
||||
if (!room || room.game.winner || room.game.turn !== role) return;
|
||||
@@ -101,18 +118,17 @@ function handleMove(roomId, role, { from, to }) {
|
||||
else { game.sheep[game.sheep.indexOf(from)] = to; game.turn = "wolf"; }
|
||||
|
||||
game.moveCount++;
|
||||
game.lastMove = { from, to, role };
|
||||
game.winner = checkWinConditions(game);
|
||||
broadcast(roomId);
|
||||
broadcastState(roomId);
|
||||
}
|
||||
|
||||
function checkWinConditions(game) {
|
||||
if (game.wolf === 0) return "wolf";
|
||||
if (game.moveCount >= 40) return "wolf";
|
||||
const canWolfMove = board_wolf[game.wolf].some(to => !game.sheep.includes(to));
|
||||
const canSheepMove = game.sheep.some(from => board_sheep[from].some(to => to !== game.wolf && !game.sheep.includes(to)));
|
||||
if (!canWolfMove) return "sheep";
|
||||
if (!canSheepMove && game.turn === "sheep") return "wolf";
|
||||
return null;
|
||||
}
|
||||
|
||||
server.listen(3030, () => console.log("Server running on port 3030"));
|
||||
server.listen(3030, () => console.log("Server running on 3030"));
|
||||
Reference in New Issue
Block a user