Skip to content
Snippets Groups Projects
Commit 2e71ab2a authored by Jake Dreher's avatar Jake Dreher
Browse files

Implement rudimentary spectator mode, checking for 10 players in lobby

parent 8f060eb9
No related branches found
No related tags found
1 merge request!149 spectator
Show whitespace changes
Inline Side-by-side
public/game.html
+ 5
− 0
View file @ 2e71ab2a
...@@ -10,6 +10,11 @@ ...@@ -10,6 +10,11 @@
overflow-y: scroll; overflow-y: scroll;
border: 1px solid black; border: 1px solid black;
} }
#game {
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}
</style> </style>
<body> <body>
......
public/gameClient.js
+ 8
− 0
View file @ 2e71ab2a
...@@ -190,6 +190,14 @@ let gameStart = () => { ...@@ -190,6 +190,14 @@ let gameStart = () => {
canvas.height = height; canvas.height = height;
gameDiv.appendChild(canvas); gameDiv.appendChild(canvas);
let spectateButton = document.createElement("button");
spectateButton.id = "spectateButton";
spectateButton.innerText = "Spectate Next Player";
spectateButton.addEventListener("click", () => {
socket.send(JSON.stringify({ type: "spectate", data: "" }));
});
gameDiv.appendChild(spectateButton);
document.getElementById("chatInput").disabled = false; document.getElementById("chatInput").disabled = false;
}; };
......
src/models/WebSocketModel.js
+ 43
− 30
View file @ 2e71ab2a
...@@ -27,6 +27,11 @@ class WebSocketModel { ...@@ -27,6 +27,11 @@ class WebSocketModel {
if (deadPlayers.length > 0) { if (deadPlayers.length > 0) {
for (let conn of this.games[game].players) { for (let conn of this.games[game].players) {
for (let deadPlayer of deadPlayers) {
if (conn.pid === deadPlayer) {
conn.spectating = true;
}
}
conn.connection.send( conn.connection.send(
JSON.stringify({ JSON.stringify({
type: "deadPlayers", type: "deadPlayers",
...@@ -37,14 +42,22 @@ class WebSocketModel { ...@@ -37,14 +42,22 @@ class WebSocketModel {
} }
for (let conn of this.games[game].players) { for (let conn of this.games[game].players) {
let playerView = gameModule.getPlayerView( let playerView = null;
if (conn.spectating) {
playerView = gameModule.getPlayerView(
this.games[game].gameBoard,
conn.spectatingPlayer,
);
} else {
playerView = gameModule.getPlayerView(
this.games[game].gameBoard, this.games[game].gameBoard,
conn.pid, conn.pid,
); );
}
conn.connection.send( conn.connection.send(
JSON.stringify({ JSON.stringify({
type: "gameBoard", type: "gameBoard",
data: playerView, // YANG: gameModule.getPlayerView()... data: playerView,
}), }),
); );
} }
...@@ -53,30 +66,9 @@ class WebSocketModel { ...@@ -53,30 +66,9 @@ class WebSocketModel {
constructor() { constructor() {
this.connections = []; this.connections = [];
this.games = {}; this.games = {};
this.games["game1"] = { this.createGame("game1", "public");
gameBoard: gameModule.createGameBoard(100, 100), this.createGame("game2", "public");
players: [], this.createGame("game3", "public");
type: "public",
started: false,
readyPlayers: 0,
borderCounter: 0,
};
this.games["game2"] = {
gameBoard: gameModule.createGameBoard(100, 100),
players: [],
type: "public",
started: false,
readyPlayers: 0,
borderCounter: 0,
};
this.games["game3"] = {
gameBoard: gameModule.createGameBoard(100, 100),
players: [],
type: "public",
started: false,
readyPlayers: 0,
borderCounter: 0,
};
this.sockserver = new WebSocketServer({ port: 3001 }); this.sockserver = new WebSocketServer({ port: 3001 });
this.onConnection(); this.onConnection();
...@@ -106,6 +98,7 @@ class WebSocketModel { ...@@ -106,6 +98,7 @@ class WebSocketModel {
started: false, started: false,
readyPlayers: 0, readyPlayers: 0,
borderCounter: 0, borderCounter: 0,
numPlayers: 0,
}; };
this.createInterval(gameId); this.createInterval(gameId);
} }
...@@ -151,11 +144,17 @@ class WebSocketModel { ...@@ -151,11 +144,17 @@ class WebSocketModel {
let roomId = connection.protocol; let roomId = connection.protocol;
if (!this.games[roomId].started) { if (
!this.games[roomId].started &&
this.games[roomId].players.length < 10
) {
this.games[roomId].players.push({ this.games[roomId].players.push({
connection, connection,
pid: this.games[roomId].players.length + 1, pid: this.games[roomId].players.length + 1,
spectating: false,
spectatingPlayer: 1,
}); });
this.games[roomId].numPlayers = this.games[roomId].numPlayers + 1;
this.games[roomId].gameBoard = gameModule.addPlayer( this.games[roomId].gameBoard = gameModule.addPlayer(
this.games[roomId].gameBoard, this.games[roomId].gameBoard,
this.games[roomId].players.length, this.games[roomId].players.length,
...@@ -164,6 +163,8 @@ class WebSocketModel { ...@@ -164,6 +163,8 @@ class WebSocketModel {
this.games[roomId].players.push({ this.games[roomId].players.push({
connection, connection,
pid: this.games[roomId].players.length + 1, pid: this.games[roomId].players.length + 1,
spectating: true,
spectatingPlayer: 1,
}); });
} }
...@@ -215,6 +216,18 @@ class WebSocketModel { ...@@ -215,6 +216,18 @@ class WebSocketModel {
} }
} else if (message.type === "leave") { } else if (message.type === "leave") {
console.log("Received leave: " + message.data); console.log("Received leave: " + message.data);
} else if (message.type === "spectate") {
console.log("Received spectate: " + message.data);
for (let conn of this.games[roomId].players) {
if (conn.connection === connection) {
let player = conn.spectatingPlayer;
if (player === this.games[roomId].numPlayers) {
conn.spectatingPlayer = 1;
} else {
conn.spectatingPlayer++;
}
}
}
} else if (message.type === "start") { } else if (message.type === "start") {
console.log("Received start: " + message.data); console.log("Received start: " + message.data);
for (let conn of this.games[roomId].players) { for (let conn of this.games[roomId].players) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment