Skip to content
Snippets Groups Projects
Commit 0b851150 authored by jjd358's avatar jjd358
Browse files

Merge branch '9-spectator' into 'main' 

9 spectator

See merge request !14
parents 8f060eb9 ad493c8b
No related branches found
No related tags found
2 merge requests!15Merge branch 'main' into 'potentialRestart',!149 spectator
Show whitespace changes
Inline Side-by-side
public/game.html
+ 5
− 0
View file @ 0b851150
...@@ -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 @ 0b851150
...@@ -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
− 35
View file @ 0b851150
...@@ -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,37 +66,11 @@ class WebSocketModel { ...@@ -53,37 +66,11 @@ class WebSocketModel {
constructor() { constructor() {
this.connections = []; this.connections = [];
this.games = {}; this.games = {};
this.games["game1"] = {
gameBoard: gameModule.createGameBoard(100, 100),
players: [],
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.createGame("game1", "public");
this.createGame("game2", "public");
this.createGame("game3", "public");
this.onConnection(); this.onConnection();
for (let game in this.games) {
this.createInterval(game);
}
} }
hasGame(gameId) { hasGame(gameId) {
...@@ -106,6 +93,7 @@ class WebSocketModel { ...@@ -106,6 +93,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 +139,17 @@ class WebSocketModel { ...@@ -151,11 +139,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 +158,8 @@ class WebSocketModel { ...@@ -164,6 +158,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 +211,18 @@ class WebSocketModel { ...@@ -215,6 +211,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