join purposefully as spectator, various improvements

This commit is contained in:
AlecM33
2022-12-29 15:38:40 -05:00
parent 63b1157c7d
commit e0dffe17b6
22 changed files with 221 additions and 120 deletions

View File

@@ -27,45 +27,63 @@ const joinHandler = (e) => {
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,
sessionCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.LOCAL),
localCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.PRODUCTION)
})
)
sendJoinRequest(e, name, accessCode)
.then((res) => {
const 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, 'long');
} else if (res.status === 400) {
toast('This name is already taken.', 'error', true, true, 'long');
} else if (res.status >= 500) {
toast(
'The server is experiencing problems. Please try again later',
'error',
true
);
}
handleJoinError(e, res, joinHandler);
});
} else {
toast('Name must be between 1 and 30 characters.', 'error', true, true, 'long');
}
};
function sendJoinRequest (e, name, accessCode) {
document.getElementById('join-game-form').onsubmit = null;
if (e.submitter.getAttribute('id') === 'submit-join-as-player') {
document.getElementById('submit-join-as-player').classList.add('submitted');
document.getElementById('submit-join-as-player').setAttribute('value', '...');
} else {
document.getElementById('submit-join-as-spectator').classList.add('submitted');
document.getElementById('submit-join-as-spectator').setAttribute('value', '...');
}
return XHRUtility.xhr(
'/api/games/' + accessCode + '/players',
'PATCH',
null,
JSON.stringify({
playerName: name,
accessCode: accessCode,
sessionCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.LOCAL),
localCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.PRODUCTION),
joinAsSpectator: e.submitter.getAttribute('id') === 'submit-join-as-spectator'
})
);
}
function handleJoinError (e, res, joinHandler) {
document.getElementById('join-game-form').onsubmit = joinHandler;
e.submitter.classList.remove('submitted');
if (e.submitter.getAttribute('id') === 'submit-join-as-player') {
e.submitter.setAttribute('value', 'Join');
} else {
e.submitter.setAttribute('value', 'Spectate');
}
if (res.status === 404) {
toast('This game was not found.', 'error', true, true, 'long');
} else if (res.status === 400) {
toast(res.content, 'error', true, true, 'long');
} else if (res.status >= 500) {
toast(
'The server is experiencing problems. Please try again later',
'error',
true
);
}
}
function validateName (name) {
return typeof name === 'string' && name.length > 0 && name.length <= 30;
}