" +
"
" +
diff --git a/client/src/scripts/game.js b/client/src/scripts/game.js
index 1c14957..c94dc26 100644
--- a/client/src/scripts/game.js
+++ b/client/src/scripts/game.js
@@ -12,26 +12,6 @@ import { XHRUtility } from '../modules/XHRUtility.js';
const game = () => {
injectNavbar();
- const socket = io('/in-game');
- const timerWorker = new Worker(new URL('../modules/Timer.js', import.meta.url));
- const gameTimerManager = new GameTimerManager(stateBucket, socket);
- const gameStateRenderer = new GameStateRenderer(stateBucket, socket);
- socket.on('disconnect', () => {
- toast('Disconnected. Attempting reconnect...', 'error', true, false);
- });
- socket.on('connect', () => {
- if (!stateBucket.joinRequestInFlight) {
- prepareGamePage(
- stateBucket,
- stateBucket.accessCode,
- gameTimerManager,
- gameStateRenderer,
- timerWorker,
- socket,
- UserUtility.validateAnonUserSignature(stateBucket.environment)
- );
- }
- });
XHRUtility.xhr(
'/api/games/environment',
'GET',
@@ -40,81 +20,50 @@ const game = () => {
)
.then((res) => {
stateBucket.environment = res.content;
- joinGame(res, gameTimerManager, gameStateRenderer, socket, timerWorker);
+ const socket = io('/in-game');
+ const timerWorker = new Worker(new URL('../modules/Timer.js', import.meta.url));
+ const gameTimerManager = new GameTimerManager(stateBucket, socket);
+ const gameStateRenderer = new GameStateRenderer(stateBucket, socket);
+ socket.on('connect', () => {
+ syncWithGame(
+ stateBucket,
+ gameTimerManager,
+ gameStateRenderer,
+ timerWorker,
+ socket,
+ UserUtility.validateAnonUserSignature(res.content)
+ );
+ });
+ socket.on('disconnect', () => {
+ toast('Disconnected. Attempting reconnect...', 'error', true, false);
+ });
+ setClientSocketHandlers(stateBucket, gameStateRenderer, socket, timerWorker, gameTimerManager);
}).catch((res) => {
- toast(res.content, 'error', true);
- });
+ toast(res.content, 'error', true);
+ });
};
-function joinGame (environmentResponse, gameTimerManager, gameStateRenderer, socket, timerWorker) {
- let cookie = UserUtility.validateAnonUserSignature(environmentResponse.content);
+function syncWithGame (stateBucket, gameTimerManager, gameStateRenderer, timerWorker, socket, cookie) {
const splitUrl = window.location.href.split('/game/');
const accessCode = splitUrl[1];
if (/^[a-zA-Z0-9]+$/.test(accessCode) && accessCode.length === globals.ACCESS_CODE_LENGTH) {
- XHRUtility.xhr(
- '/api/games/' + accessCode + '/players',
- 'PATCH',
- null,
- JSON.stringify({ cookie: cookie })
- )
- .then((res) => {
- UserUtility.setAnonymousUserId(res.content, environmentResponse.content);
- stateBucket.accessCode = accessCode;
- stateBucket.joinRequestInFlight = false;
- cookie = res.content;
- setClientSocketHandlers(stateBucket, gameStateRenderer, socket, timerWorker, gameTimerManager);
- prepareGamePage(stateBucket, accessCode, gameTimerManager, gameStateRenderer, timerWorker, socket, cookie);
- }).catch((res) => {
- if (res.status === 404) {
- window.location = '/not-found?reason=' + encodeURIComponent('game-not-found');
- } else if (res.status >= 500) {
- toast(
- 'The server is experiencing problems. Please try again later',
- 'error',
- true
- );
- }
- });
+ socket.emit(globals.COMMANDS.FETCH_GAME_STATE, accessCode, cookie, function (gameState) {
+ if (gameState === null) {
+ window.location = '/not-found?reason=' + encodeURIComponent('game-not-found');
+ } else {
+ stateBucket.currentGameState = gameState;
+ document.querySelector('.spinner-container')?.remove();
+ document.querySelector('.spinner-background')?.remove();
+ document.getElementById('game-content').innerHTML = templates.INITIAL_GAME_DOM;
+ toast('You are connected.', 'success', true, true, 2);
+ processGameState(stateBucket.currentGameState, cookie, socket, gameStateRenderer, gameTimerManager, timerWorker);
+ }
+ });
+ } else {
+ window.location = '/not-found?reason=' + encodeURIComponent('invalid-access-code');
}
}
-function prepareGamePage (stateBucket, accessCode, gameTimerManager, gameStateRenderer, timerWorker, socket, cookie) {
- socket.emit(globals.COMMANDS.FETCH_GAME_STATE, accessCode, cookie, function (gameState) {
- stateBucket.currentGameState = gameState;
- document.querySelector('.spinner-container')?.remove();
- document.querySelector('.spinner-background')?.remove();
- document.getElementById('game-content').innerHTML = templates.INITIAL_GAME_DOM;
- toast('You are connected.', 'success', true, true, 2);
- processGameState(stateBucket.currentGameState, cookie, socket, gameStateRenderer, gameTimerManager, timerWorker);
- if (!gameState.client.hasEnteredName) {
- document.getElementById('prompt').innerHTML = templates.NAME_CHANGE_MODAL;
- document.getElementById('change-name-form').onsubmit = (e) => {
- e.preventDefault();
- const name = document.getElementById('player-new-name').value;
- if (validateName(name)) {
- socket.emit(globals.COMMANDS.CHANGE_NAME, gameState.accessCode, {
- name: name,
- personId: gameState.client.id
- }, (result) => {
- switch (result) {
- case 'taken':
- toast('This name is already taken.', 'error', true, true, 8);
- break;
- case 'changed':
- ModalManager.dispelModal('change-name-modal', 'change-name-modal-background');
- toast('Name set.', 'success', true, true, 5);
- propagateNameChange(stateBucket.currentGameState, name, stateBucket.currentGameState.client.id);
- processGameState(stateBucket.currentGameState, cookie, socket, gameStateRenderer, gameTimerManager, timerWorker);
- }
- });
- } else {
- toast('Name must be between 1 and 30 characters.', 'error', true, true, 8);
- }
- };
- }
- });
-}
-
function processGameState (currentGameState, userId, socket, gameStateRenderer, gameTimerManager, timerWorker, refreshPrompt = true) {
displayClientInfo(currentGameState.client.name, currentGameState.client.userType);
if (refreshPrompt) {
diff --git a/client/src/scripts/home.js b/client/src/scripts/home.js
index 8e2733c..bd13a35 100644
--- a/client/src/scripts/home.js
+++ b/client/src/scripts/home.js
@@ -28,7 +28,7 @@ function attemptToJoinGame (code) {
)
.then((res) => {
if (res.status === 200) {
- window.location = '/game/' + res.content;
+ window.location = '/join/' + res.content;
}
}).catch((res) => {
if (res.status === 404) {
diff --git a/client/src/scripts/join.js b/client/src/scripts/join.js
new file mode 100644
index 0000000..aa8b059
--- /dev/null
+++ b/client/src/scripts/join.js
@@ -0,0 +1,74 @@
+import {injectNavbar} from "../modules/Navbar.js";
+import {toast} from "../modules/Toast.js";
+import {XHRUtility} from "../modules/XHRUtility.js";
+import {UserUtility} from "../modules/UserUtility.js";
+import {globals} from "../config/globals.js";
+
+const join = () => {
+ injectNavbar();
+ const splitUrl = window.location.pathname.split('/join/');
+ const accessCode = splitUrl[1];
+ if (/^[a-zA-Z0-9]+$/.test(accessCode) && accessCode.length === globals.ACCESS_CODE_LENGTH) {
+ document.getElementById("game-code").innerText = accessCode;
+ document.getElementById("game-time").innerText
+ = decodeURIComponent((new URL(document.location)).searchParams.get('timer'));
+ document.getElementById("game-player-count").innerText
+ = decodeURIComponent((new URL(document.location)).searchParams.get('playerCount')) + ' Players';
+ let playerCount = decodeURIComponent((new URL(document.location)).searchParams.get('playerCount'))
+ let form = document.getElementById('join-game-form');
+ document.getElementById("player-new-name").focus();
+ form.onsubmit = joinHandler;
+ } else {
+ window.location = '/not-found?reason=' + encodeURIComponent('invalid-access-code');
+ }
+}
+
+const joinHandler = (e) => {
+ const splitUrl = window.location.pathname.split('/join/');
+ const accessCode = splitUrl[1];
+ e.preventDefault();
+ const name = document.getElementById('player-new-name').value;
+ if (validateName(name)) {
+ document.getElementById('join-game-form').onsubmit = null;
+ document.getElementById("submit-new-name").classList.add('submitted');
+ document.getElementById("submit-new-name").setAttribute('value', 'Joining...');
+ XHRUtility.xhr(
+ '/api/games/' + accessCode + '/players',
+ 'PATCH',
+ null,
+ JSON.stringify({ playerName: name, accessCode: accessCode })
+ )
+ .then((res) => {
+ let json = JSON.parse(res.content);
+ UserUtility.setAnonymousUserId(json.cookie, json.environment);
+ window.location = '/game/' + accessCode;
+ }).catch((res) => {
+ document.getElementById('join-game-form').onsubmit = joinHandler;
+ document.getElementById("submit-new-name").classList.remove('submitted');
+ document.getElementById("submit-new-name").setAttribute('value', 'Join Game');
+ if (res.status === 404) {
+ toast('This game was not found.', 'error', true, true, 8);
+ } else if (res.status === 400) {
+ toast('This name is already taken.', 'error', true, true, 8);
+ } else if (res.status >= 500) {
+ toast(
+ 'The server is experiencing problems. Please try again later',
+ 'error',
+ true
+ );
+ }
+ });
+ } else {
+ toast('Name must be between 1 and 30 characters.', 'error', true, true, 8);
+ }
+};
+
+function validateName (name) {
+ return typeof name === 'string' && name.length > 0 && name.length <= 30;
+}
+
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+ module.exports = join;
+} else {
+ join();
+}
diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css
index cd568a3..94483fe 100644
--- a/client/src/styles/GLOBAL.css
+++ b/client/src/styles/GLOBAL.css
@@ -186,6 +186,23 @@ button {
color: #00a718;
}
+#game-parameters {
+ font-family: signika-negative, sans-serif;
+ color: #d7d7d7;
+ font-size: 25px;
+ margin: 0.5em;
+}
+
+#game-parameters > div {
+ display: flex;
+ align-items: center;
+}
+
+#game-parameters img {
+ height: 20px;
+ margin-right: 10px;
+}
+
#how-to-use-container img {
max-width: 98%;
border: 1px solid #57566a;
diff --git a/client/src/styles/create.css b/client/src/styles/create.css
index c61a73b..25c7476 100644
--- a/client/src/styles/create.css
+++ b/client/src/styles/create.css
@@ -231,7 +231,7 @@ option {
cursor: pointer;
}
-#step-4 > div {
+#step-5 > div {
display: flex;
flex-direction: column;
align-items: flex-start;
@@ -242,7 +242,19 @@ option {
max-width: 95%;
}
-#step-4 > div label {
+#step-4 {
+ width: 95%;
+ max-width: 25em;
+ margin: 0 auto;
+}
+
+#step-4 input {
+ padding: 15px 5px;
+ width: 95%;
+ font-size: 20px;
+}
+
+#step-5 > div label {
width: 100%;
}
diff --git a/client/src/styles/game.css b/client/src/styles/game.css
index bad19ee..5e3f35b 100644
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -12,6 +12,7 @@
min-width: 15em;
border: 2px solid transparent;
margin: 0.5em 0;
+ box-shadow: 2px 2px 5px rgb(0 0 0 / 40%);
}
#lobby-players {
@@ -125,6 +126,7 @@ h1 {
align-items: center;
display: flex;
transition: background-color 0.2s;
+ max-width: 20em;
}
#game-link > div {
@@ -624,22 +626,6 @@ label[for='moderator'] {
margin-bottom: 0.5em;
}
-#game-parameters {
- color: #d7d7d7;
- font-size: 25px;
- margin: 0.5em;
-}
-
-#game-parameters > div {
- display: flex;
- align-items: center;
-}
-
-#game-parameters img {
- height: 20px;
- margin-right: 10px;
-}
-
#players-alive-label {
display: block;
margin-bottom: 10px;
diff --git a/client/src/styles/join.css b/client/src/styles/join.css
new file mode 100644
index 0000000..e8709af
--- /dev/null
+++ b/client/src/styles/join.css
@@ -0,0 +1,28 @@
+#join-game-modal {
+ border-left: 5px solid #b1afcd;
+ animation: entrance 0.5s forwards;
+ transform-origin: center;
+}
+
+#game-parameters div:nth-child(1) {
+ margin-bottom: 20px;
+}
+
+#game-code {
+ font-family: "Courier New", monospace;
+}
+
+@keyframes entrance {
+ 0% {
+ transform: translate(-50%, calc(-50% + 40px));
+ opacity: 0;
+ }
+ 95% {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ }
+}
diff --git a/client/src/views/create.html b/client/src/views/create.html
index c254c47..bf3f9a7 100644
--- a/client/src/views/create.html
+++ b/client/src/views/create.html
@@ -71,6 +71,7 @@
+
diff --git a/client/src/views/game.html b/client/src/views/game.html
index 8f2304c..8db4db3 100644
--- a/client/src/views/game.html
+++ b/client/src/views/game.html
@@ -4,10 +4,10 @@
Active Game
-
+
-
+
diff --git a/client/src/views/join.html b/client/src/views/join.html
new file mode 100644
index 0000000..2ad4e97
--- /dev/null
+++ b/client/src/views/join.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
Active Game
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/client/webpack/webpack-dev.config.js b/client/webpack/webpack-dev.config.js
index a68125c..ab0d73a 100644
--- a/client/webpack/webpack-dev.config.js
+++ b/client/webpack/webpack-dev.config.js
@@ -6,7 +6,8 @@ module.exports = {
home: './client/src/scripts/home.js',
create: './client/src/scripts/create.js',
notFound: './client/src/scripts/notFound.js',
- howToUse: './client/src/scripts/howToUse.js'
+ howToUse: './client/src/scripts/howToUse.js',
+ join: './client/src/scripts/join.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
diff --git a/client/webpack/webpack-prod.config.js b/client/webpack/webpack-prod.config.js
index a39d2fd..e0455b2 100644
--- a/client/webpack/webpack-prod.config.js
+++ b/client/webpack/webpack-prod.config.js
@@ -6,7 +6,9 @@ module.exports = {
game: './client/src/scripts/game.js',
home: './client/src/scripts/home.js',
create: './client/src/scripts/create.js',
- notFound: './client/src/scripts/notFound.js'
+ notFound: './client/src/scripts/notFound.js',
+ howToUse: './client/src/scripts/howToUse.js',
+ join: './client/src/scripts/join.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
diff --git a/server/api/GamesAPI.js b/server/api/GamesAPI.js
index acd50b8..27a6650 100644
--- a/server/api/GamesAPI.js
+++ b/server/api/GamesAPI.js
@@ -66,23 +66,43 @@ router.get('/:code/availability', function (req, res) {
});
router.patch('/:code/players', function (req, res) {
+ console.log(req.body);
if (
req.body === null
- || req.body.cookie === null
- || (typeof req.body.cookie !== 'string' && req.body.cookie !== false)
- || (req.body.cookie.length !== globals.USER_SIGNATURE_LENGTH && req.body.cookie !== false)
+ || !validateAccessCode(req.body.accessCode)
+ || !validateName(req.body.playerName)
) {
res.status(400).send();
+ } else {
+ const game = gameManager.activeGameRunner.activeGames[req.body.accessCode];
+ if (game) {
+ gameManager.joinGame(game, req.body.playerName).then((data) => {
+ res.status(200).send({ cookie: data, environment: gameManager.environment });
+ }).catch((code) => {
+ res.status(code).send();
+ });
+ } else {
+ res.status(404).send();
+ }
}
- gameManager.joinGame(req.body.cookie, req.params.code).then((data) => {
- res.status(200).send(data);
- }).catch((code) => {
- res.status(code).send();
- });
});
router.get('/environment', function (req, res) {
res.status(200).send(gameManager.environment);
});
+function validateName(name) {
+ return typeof name === 'string' && name.length > 0 && name.length <= 30;
+}
+
+function validateCookie(cookie) {
+ return cookie === null
+ || (typeof cookie !== 'string' && cookie !== false)
+ || (cookie.length !== globals.USER_SIGNATURE_LENGTH && cookie !== false)
+}
+
+function validateAccessCode(accessCode) {
+ return /^[a-zA-Z0-9]+$/.test(accessCode) && accessCode.length === globals.ACCESS_CODE_LENGTH
+}
+
module.exports = router;
diff --git a/server/config/globals.js b/server/config/globals.js
index bfcdf3b..c544f7b 100644
--- a/server/config/globals.js
+++ b/server/config/globals.js
@@ -1,5 +1,5 @@
const globals = {
- ACCESS_CODE_CHAR_POOL: 'abcdefghijklmnopqrstuvwxyz0123456789',
+ ACCESS_CODE_CHAR_POOL: 'BCDFGHJKLMNPQRSTVWXYZ0123456789',
ACCESS_CODE_LENGTH: 6,
CLOCK_TICK_INTERVAL_MILLIS: 10,
STALE_GAME_HOURS: 12,
diff --git a/server/main.js b/server/main.js
index 7b067e8..ddb2faa 100644
--- a/server/main.js
+++ b/server/main.js
@@ -38,7 +38,6 @@ gameManager.namespace = inGameSocketServer;
inGameSocketServer.on('connection', function (socket) {
socket.on('disconnecting', (reason) => {
logger.trace('client socket disconnecting because: ' + reason);
- gameManager.removeClientFromLobbyIfApplicable(socket);
});
gameManager.addGameSocketHandlers(inGameSocketServer, socket);
});
diff --git a/server/modules/GameManager.js b/server/modules/GameManager.js
index 0e1b745..dc892f1 100644
--- a/server/modules/GameManager.js
+++ b/server/modules/GameManager.js
@@ -157,7 +157,7 @@ class GameManager {
};
createGame = (gameParams) => {
- const expectedKeys = ['deck', 'hasTimer', 'timerParams'];
+ const expectedKeys = ['deck', 'hasTimer', 'timerParams', 'moderatorName'];
if (typeof gameParams !== 'object'
|| expectedKeys.some((key) => !Object.keys(gameParams).includes(key))
) {
@@ -167,7 +167,8 @@ class GameManager {
// to avoid excessive memory build-up, every time a game is created, check for and purge any stale games.
pruneStaleGames(this.activeGameRunner.activeGames, this.activeGameRunner.timerThreads, this.logger);
const newAccessCode = this.generateAccessCode();
- const moderator = initializeModerator(UsernameGenerator.generate(), gameParams.hasDedicatedModerator);
+ const moderator = initializeModerator(gameParams.moderatorName, gameParams.hasDedicatedModerator);
+ moderator.assigned = true;
if (gameParams.timerParams !== null) {
gameParams.timerParams.paused = false;
}
@@ -181,7 +182,7 @@ class GameManager {
gameParams.timerParams
);
this.activeGameRunner.activeGames[newAccessCode].createTime = new Date().toJSON();
- return Promise.resolve(newAccessCode);
+ return Promise.resolve({ accessCode: newAccessCode, cookie: moderator.cookie, environment: this.environment });
}
};
@@ -253,40 +254,34 @@ class GameManager {
}
};
- joinGame = (cookie, accessCode) => {
- const game = this.activeGameRunner.activeGames[accessCode];
- if (game) {
- const person = findPersonByField(game, 'cookie', cookie);
- if (person) {
- return Promise.resolve(person.cookie);
- } else {
- const unassignedPerson = game.moderator.assigned === false
- ? game.moderator
- : game.people.find((person) => person.assigned === false);
- if (unassignedPerson) {
- this.logger.trace('request from client to join game. Assigning: ' + unassignedPerson.name);
- unassignedPerson.assigned = true;
- game.isFull = isGameFull(game);
- this.namespace.in(game.accessCode).emit(
- globals.EVENTS.PLAYER_JOINED,
- GameStateCurator.mapPerson(unassignedPerson),
- game.isFull
- );
- return Promise.resolve(unassignedPerson.cookie);
- } else { // if the game is full, make them a spectator.
- const spectator = new Person(
- createRandomId(),
- createRandomId(),
- UsernameGenerator.generate(),
- globals.USER_TYPES.SPECTATOR
- );
- this.logger.trace('new spectator: ' + spectator.name);
- game.spectators.push(spectator);
- return Promise.resolve(spectator.cookie);
- }
- }
- } else {
- return Promise.reject(404);
+ joinGame = (game, name) => {
+ if (isNameTaken(game, name)) {
+ return Promise.reject(400);
+ }
+ const unassignedPerson = game.moderator.assigned === false
+ ? game.moderator
+ : game.people.find((person) => person.assigned === false);
+ if (unassignedPerson) {
+ this.logger.trace('request from client to join game. Assigning: ' + unassignedPerson.name);
+ unassignedPerson.assigned = true;
+ unassignedPerson.name = name;
+ game.isFull = isGameFull(game);
+ this.namespace.in(game.accessCode).emit(
+ globals.EVENTS.PLAYER_JOINED,
+ GameStateCurator.mapPerson(unassignedPerson),
+ game.isFull
+ );
+ return Promise.resolve(unassignedPerson.cookie);
+ } else { // if the game is full, make them a spectator.
+ const spectator = new Person(
+ createRandomId(),
+ createRandomId(),
+ name,
+ globals.USER_TYPES.SPECTATOR
+ );
+ this.logger.trace('new spectator: ' + spectator.name);
+ game.spectators.push(spectator);
+ return Promise.resolve(spectator.cookie);
}
};
diff --git a/server/modules/ServerBootstrapper.js b/server/modules/ServerBootstrapper.js
index fdaaec6..2031a38 100644
--- a/server/modules/ServerBootstrapper.js
+++ b/server/modules/ServerBootstrapper.js
@@ -3,6 +3,7 @@ const http = require('http');
const https = require('https');
const path = require('path');
const fs = require('fs');
+const secure = require("express-force-https");
const ServerBootstrapper = {
processCLIArgs: () => {
@@ -55,6 +56,7 @@ const ServerBootstrapper = {
}
} else {
logger.warn('starting main in PRODUCTION mode. This should not be used for local development.');
+ app.use(secure);
main = http.createServer(app);
}
diff --git a/server/routes/router.js b/server/routes/router.js
index 9ec2a57..7ee7263 100644
--- a/server/routes/router.js
+++ b/server/routes/router.js
@@ -10,6 +10,10 @@ router.get('/create', function (request, response) {
response.sendFile(path.join(__dirname, '../../client/src/views/create.html'));
});
+router.get('/join/:code', function (request, response) {
+ response.sendFile(path.join(__dirname, '../../client/src/views/join.html'));
+});
+
router.get('/how-to-use', function (request, response) {
response.sendFile(path.join(__dirname, '../../client/src/views/how-to-use.html'));
});