Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-29 01:07:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor join to intermediary page

Browse Source
This commit is contained in:
AlecM33
2022-01-24 23:34:12 -05:00
parent 45111da832
commit a0d68e636d
23 changed files with 420 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
client/src/scripts/game.js
View File

@@ -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) {

2
client/src/scripts/home.js
View File

@@ -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) {

74
client/src/scripts/join.js Normal file
View File

@@ -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();
}