smo/WolfSheepGame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented a lobby

Browse Source
This commit is contained in:
Simon Oberzier
2026-02-10 07:52:16 +01:00
parent bd9db87ccb
commit 8fae0a6b84
2 changed files with 235 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
public/index.html
View File

@@ -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 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 class="room-info">
<div>
<div class="room-tag">RAUM: <span id="codeDisplay">...</span> <span id="connCircle"
class="pulse"></span></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="idBadge" class="id-box">...</div>
</div>
<div id="status" style="text-align: right; font-weight: 900; line-height: 1.2;">...</div>
</div>
<div id="status" style="text-align: right; font-weight: 900; line-height: 1.2;">Verbinde...</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>
<div class="board-container"><svg viewBox="0 0 600 420" preserveAspectRatio="xMidYMid meet"></svg></div>
<svg viewBox="0 0 600 420"></svg>
</div>
<div class="controls">
<button id="copyRoomBtn">Link</button>
<button id="restartBtn">Swap & Reset</button>
<button id="exitBtn">Beenden</button>
</div>
<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
View File

@@ -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
}));
}
// 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();
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);
}
});
}, 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"));