Skip to content
Snippets Groups Projects

Move websocket code to its own module, move game.html script tag to its own...

Merged Move websocket code to its own module, move game.html script tag to its own...
6-rooms into main
Merged jjd358 requested to merge 6-rooms into main
Compare
and
8 files
+ 484
− 345
Compare changes
  • Side-by-side
  • Inline

Files

public/game.html
+ 20
− 141
<!doctype html>
<html lang="en">
<head>
<title>WebSocket Example</title>
<title>GBS</title>
</head>
<body>
<h1>WebSocket Client</h1>
<input type="text" id="messageInput" placeholder="Type a message..." />
<button id="sendButton">Send</button>
<div id="messages"></div>
<style>
#chatOutput {
height: 200px;
overflow-y: scroll;
border: 1px solid black;
}
</style>
<div id="game">
<canvas id="gameCanvas" width="800" height="600"></canvas>
<body>
<div id="game"></div>
<div id="Chat">
<div id="chatOutput"></div>
<input type="text" id="chatInput" />
<button id="chatSend">Send</button>
</div>
<div id="start">
<div id="numPlayers">Number of Players: 0</div>
<div id="playersStarted">Players Started: 0</div>
<button id="startButton">Ready</button>
</div>
<script>
let pathParts = window.location.pathname.split("/");
let roomId = pathParts[pathParts.length - 1];
const joinMessage = { type: "join", data: `${roomId}` };
let moveMessage = { type: "move", data: "up", pid: 0 };
const socket = new WebSocket("ws://127.0.0.1:3001", `${roomId}`);
const canvas = document.getElementById("gameCanvas");
const width = canvas.width;
const height = canvas.height;
let gameBoardHandler = (event) => {
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "white";
let board = event.data;
console.log(board);
widthStep = width / board[0].length;
heightStep = height / board.length;
for (let i = 0; i < board.length; i++) {
for (let j = 0; j < board[i].length; j++) {
if (board[i][j].type === 0) {
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
}
if (board[i][j].type === 1) {
ctx.fillStyle = "red";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
ctx.fillStyle = "white";
}
if (board[i][j].type === 2) {
ctx.fillStyle = "red";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
ctx.fillStyle = "white";
}
if (board[i][j].type === 3) {
ctx.fillStyle = "blue";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
ctx.fillStyle = "white";
}
if (board[i][j].type === 4) {
ctx.fillStyle = "yellow";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
ctx.fillStyle = "white";
}
}
}
};
let newUserHandler = (event) => {
moveMessage.pid = event.data;
};
socket.addEventListener("open", () => {
console.log("Connected to server");
socket.send(JSON.stringify(joinMessage));
});
socket.addEventListener("message", (event) => {
try {
let msg = JSON.parse(event.data);
if (msg.type === "gameBoard") {
gameBoardHandler(msg);
} else if (msg.type === "newUser") {
newUserHandler(msg);
} else {
const messages = document.getElementById("messages");
const messageElement = document.createElement("div");
messageElement.innerText = event.data;
messages.appendChild(messageElement);
}
} catch {
console.log(event.data);
}
});
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowUp") {
moveMessage.data = "up";
socket.send(JSON.stringify(moveMessage));
}
if (event.key === "ArrowDown") {
moveMessage.data = "down";
socket.send(JSON.stringify(moveMessage));
}
if (event.key === "ArrowLeft") {
moveMessage.data = "left";
socket.send(JSON.stringify(moveMessage));
}
if (event.key === "ArrowRight") {
moveMessage.data = "right";
socket.send(JSON.stringify(moveMessage));
}
});
document.getElementById("sendButton").addEventListener("click", () => {
const messageInput = document.getElementById("messageInput");
const message = messageInput.value;
socket.send(message);
messageInput.value = "";
});
</script>
<script src="/public/gameClient.js"></script>
</body>
</html>