93 lines
3.5 KiB
HTML
93 lines
3.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Multiplayer Game</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<button id="create-room">Create Room</button>
|
||
|
|
<input id="join-code" placeholder="Enter room code">
|
||
|
|
<button id="join-room">Join Room</button>
|
||
|
|
|
||
|
|
<div id="status"></div>
|
||
|
|
<button id="start-game" style="display: none;">Start Game</button>
|
||
|
|
<button id="spin-wheel" style="display: none;">Spin Wheel</button>
|
||
|
|
<input id="guess-letter" placeholder="Guess a letter" style="display: none;">
|
||
|
|
<button id="guess-button" style="display: none;">Guess</button>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const socket = new WebSocket("ws://localhost:8080");
|
||
|
|
|
||
|
|
document.getElementById("create-room").onclick = () => {
|
||
|
|
socket.send(JSON.stringify({ type: "create_room" }));
|
||
|
|
};
|
||
|
|
|
||
|
|
document.getElementById("join-room").onclick = () => {
|
||
|
|
const roomCode = document.getElementById("join-code").value;
|
||
|
|
socket.send(JSON.stringify({ type: "join_room", roomCode }));
|
||
|
|
};
|
||
|
|
|
||
|
|
document.getElementById("start-game").onclick = () => {
|
||
|
|
socket.send(JSON.stringify({ type: "start_game" }));
|
||
|
|
};
|
||
|
|
|
||
|
|
document.getElementById("spin-wheel").onclick = () => {
|
||
|
|
socket.send(JSON.stringify({ type: "spin_wheel" }));
|
||
|
|
};
|
||
|
|
|
||
|
|
document.getElementById("guess-button").onclick = () => {
|
||
|
|
const letter = document.getElementById("guess-letter").value;
|
||
|
|
socket.send(JSON.stringify({ type: "guess_letter", letter }));
|
||
|
|
document.getElementById("guess-letter").value = ""; // Clear input
|
||
|
|
};
|
||
|
|
|
||
|
|
socket.onmessage = (event) => {
|
||
|
|
const message = JSON.parse(event.data);
|
||
|
|
|
||
|
|
if (message.type === "room_created") {
|
||
|
|
document.getElementById("status").innerText = `Room created! Code: ${message.roomCode}`;
|
||
|
|
if (message.isLeader) {
|
||
|
|
document.getElementById("start-game").style.display = "inline";
|
||
|
|
document.getElementById("spin-wheel").style.display = "inline";
|
||
|
|
document.getElementById("guess-letter").style.display = "inline";
|
||
|
|
document.getElementById("guess-button").style.display = "inline";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (message.type === "joined_room") {
|
||
|
|
const status = message.isLeader ? "You are the party leader!" : "You joined the room!";
|
||
|
|
document.getElementById("status").innerText = `Room Code: ${message.roomCode} - ${status}`;
|
||
|
|
if (message.isLeader) {
|
||
|
|
document.getElementById("start-game").style.display = "inline";
|
||
|
|
document.getElementById("spin-wheel").style.display = "inline";
|
||
|
|
document.getElementById("guess-letter").style.display = "inline";
|
||
|
|
document.getElementById("guess-button").style.display = "inline";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (message.type === "game_started") {
|
||
|
|
document.getElementById("status").innerText = "The game has started!";
|
||
|
|
document.getElementById("start-game").style.display = "none";
|
||
|
|
}
|
||
|
|
|
||
|
|
if (message.type === "spin_result") {
|
||
|
|
document.getElementById("status").innerText = `Spin result: ${message.spinResult} points (${message.player})`;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (message.type === "guess_result") {
|
||
|
|
const outcome = message.correct ? "correct" : "incorrect";
|
||
|
|
document.getElementById("status").innerText = `Guess '${message.letter}' was ${outcome} (${message.player})`;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (message.type === "new_leader") {
|
||
|
|
document.getElementById("status").innerText = "You are now the party leader!";
|
||
|
|
}
|
||
|
|
|
||
|
|
if (message.type === "error") {
|
||
|
|
alert(message.message);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|