mirror of
https://github.com/AlecM33/Werewolf.git
synced 2025-12-29 01:07:50 +01:00
refactor join to intermediary page
This commit is contained in:
74
client/src/scripts/join.js
Normal file
74
client/src/scripts/join.js
Normal 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();
|
||||
}
|
||||
Reference in New Issue
Block a user