diff --git a/public/game.html b/public/game.html
index 80e94909daa1c6ed8265db5c03645fb382ff4436..cfd034d19619a6a69e746485c073e1e5ac4fc841 100644
--- a/public/game.html
+++ b/public/game.html
@@ -5,7 +5,7 @@
</head>
<body>
- <h1>WebSocket Client</h1>
+ <h1>WebSocket Client <span id="coordinates">(0, 0)</span></h1>
<input type="text" id="messageInput" placeholder="Type a message..." />
<button id="sendButton">Send</button>
<div id="messages"></div>
@@ -27,72 +27,107 @@
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 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);
+
+ // head position
+ let snakeHead = null;
+ for (let i = 0; i < board.length; i++) {
+ for (let j = 0; j < board[i].length; j++) {
+ if (board[i][j].type === 1) {
+ snakeHead = board[i][j];
+ break;
+ }
+ }
+ if (snakeHead) break;
+ }
+
+ if (!snakeHead) {
+ console.error("No snake head found!");
+ return;
+ }
+
+ // Update the coordinates
+ let coordinatesElement = document.getElementById("coordinates");
+ coordinatesElement.textContent = `(${snakeHead.x}, ${snakeHead.y})`;
+
+ // Calculate the view window around the snake's head
+ const viewSize = 10;
+ const halfViewSize = Math.floor(viewSize / 2);
+
+ const startX = Math.max(0, snakeHead.x - halfViewSize);
+ const startY = Math.max(0, snakeHead.y - halfViewSize);
+ const endX = Math.min(board[0].length, snakeHead.x + halfViewSize + 1);
+ const endY = Math.min(board.length, snakeHead.y + halfViewSize + 1);
+
+ widthStep = width / viewSize;
+ heightStep = height / viewSize;
+
+ // Only the 10x10 area around the snake's head
+ for (let i = startY; i < endY; i++) {
+ for (let j = startX; j < endX; j++) {
+ let cell = board[i][j];
+ let renderX = j - startX;
+ let renderY = i - startY;
+
+ if (cell.type === 0) {
+ ctx.fillRect(
+ renderX * widthStep + 1,
+ renderY * heightStep + 1,
+ widthStep - 2,
+ heightStep - 2
+ );
+ }
+ if (cell.type === 1) {
+ ctx.fillStyle = "red";
+ ctx.fillRect(
+ renderX * widthStep + 1,
+ renderY * heightStep + 1,
+ widthStep - 2,
+ heightStep - 2
+ );
+ ctx.fillStyle = "white";
+ }
+ if (cell.type === 2) {
+ ctx.fillStyle = "red";
+ ctx.fillRect(
+ renderX * widthStep + 1,
+ renderY * heightStep + 1,
+ widthStep - 2,
+ heightStep - 2
+ );
+ ctx.fillStyle = "white";
+ }
+ if (cell.type === 3) {
+ ctx.fillStyle = "blue";
+ ctx.fillRect(
+ renderX * widthStep + 1,
+ renderY * heightStep + 1,
+ widthStep - 2,
+ heightStep - 2
+ );
+ ctx.fillStyle = "white";
+ }
+ if (cell.type === 4) {
+ ctx.fillStyle = "yellow";
+ ctx.fillRect(
+ renderX * widthStep + 1,
+ renderY * heightStep + 1,
+ widthStep - 2,
+ heightStep - 2,
+ );
+ ctx.fillStyle = "white";
+ }
+ }
+ }
+ };
let newUserHandler = (event) => {
moveMessage.pid = event.data;