Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2026-01-02 01:03:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix homepage join functionality

Browse Source
This commit is contained in:
AlecM33
2022-01-25 00:08:01 -05:00
parent ed9eace4b5
commit 14e158c0b4
9 changed files with 92 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/model/Game.js
View File

@@ -4,7 +4,7 @@ export class Game {
this.hasTimer = hasTimer;
this.timerParams = timerParams;
this.hasDedicatedModerator = hasDedicatedModerator;
this.moderatorName = moderatorName
this.moderatorName = moderatorName;
this.accessCode = null;
}
}

16
client/src/modules/GameCreationStepManager.js
View File

@@ -5,7 +5,7 @@ import { XHRUtility } from './XHRUtility.js';
import { globals } from '../config/globals.js';
import { templates } from './Templates.js';
import { defaultCards } from '../config/defaultCards';
import {UserUtility} from "./UserUtility";
import { UserUtility } from './UserUtility';
export class GameCreationStepManager {
constructor (deckManager) {
@@ -91,7 +91,7 @@ export class GameCreationStepManager {
title: 'Enter your name:',
forwardHandler: (e) => {
if (e.type === 'click' || e.code === 'Enter') {
let name = document.getElementById("moderator-name").value;
const name = document.getElementById('moderator-name').value;
if (validateName(name)) {
this.currentGame.moderatorName = name;
this.removeStepElementsFromDOM(this.step);
@@ -122,8 +122,8 @@ export class GameCreationStepManager {
&& Object.prototype.hasOwnProperty.call(res, 'content')
&& typeof res.content === 'string'
) {
let json = JSON.parse(res.content);
UserUtility.setAnonymousUserId(json.cookie, json.environment)
const json = JSON.parse(res.content);
UserUtility.setAnonymousUserId(json.cookie, json.environment);
window.location = ('/game/' + json.accessCode);
}
}).catch((e) => {
@@ -188,15 +188,15 @@ export class GameCreationStepManager {
}
}
function renderNameStep(containerId, step, game, steps) {
function renderNameStep (containerId, step, game, steps) {
const stepContainer = document.createElement('div');
setAttributes(stepContainer, { id: 'step-' + step, class: 'flex-row-container step' });
stepContainer.innerHTML = templates.ENTER_NAME_STEP;
document.getElementById(containerId).appendChild(stepContainer);
let nameInput = document.querySelector('#moderator-name');
const nameInput = document.querySelector('#moderator-name');
nameInput.value = game.moderatorName;
nameInput.addEventListener('keyup', steps["4"].forwardHandler)
nameInput.addEventListener('keyup', steps['4'].forwardHandler);
nameInput.focus();
}
@@ -397,7 +397,7 @@ function renderReviewAndCreateStep (containerId, stepNumber, game) {
div.querySelector('#roles-option').appendChild(roleEl);
}
div.querySelector("#mod-name").innerText = game.moderatorName;
div.querySelector('#mod-name').innerText = game.moderatorName;
document.getElementById(containerId).appendChild(div);
}

16
client/src/modules/GameStateRenderer.js
View File

@@ -68,21 +68,21 @@ export class GameStateRenderer {
}
time.innerText = timeString;
} else {
timeString = 'untimed'
timeString = 'untimed';
time.innerText = timeString;
}
let link = window.location.protocol + "//" + window.location.host
+ '/join/' + this.stateBucket.currentGameState.accessCode
+ '?playerCount=' + getGameSize(this.stateBucket.currentGameState.deck)
+ '&timer=' + encodeURIComponent(timeString);
const link = window.location.protocol + '//' + window.location.host +
'/join/' + this.stateBucket.currentGameState.accessCode +
'?playerCount=' + getGameSize(this.stateBucket.currentGameState.deck) +
'&timer=' + encodeURIComponent(timeString);
const linkCopyHandler = (e) => {
if (e.type === 'click' || e.code === 'Enter') {
navigator.clipboard.writeText(link)
.then(() => {
toast('Link copied!', 'success', true);
});
.then(() => {
toast('Link copied!', 'success', true);
});
}
};
gameLinkContainer.addEventListener('click', linkCopyHandler);

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

@@ -39,8 +39,8 @@ const game = () => {
});
setClientSocketHandlers(stateBucket, gameStateRenderer, socket, timerWorker, gameTimerManager);
}).catch((res) => {
toast(res.content, 'error', true);
});
toast(res.content, 'error', true);
});
};
function syncWithGame (stateBucket, gameTimerManager, gameStateRenderer, timerWorker, socket, cookie) {
@@ -298,10 +298,6 @@ function displayStartGamePromptForModerators (gameState, gameStateRenderer) {
document.body.appendChild(div);
}
function validateName (name) {
return typeof name === 'string' && name.length > 0 && name.length <= 30;
}
function removeStartGameFunctionalityIfPresent (gameStateRenderer) {
document.querySelector('#start-game-prompt')?.removeEventListener('click', gameStateRenderer.startGameHandler);
document.querySelector('#start-game-prompt')?.remove();

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

@@ -16,19 +16,23 @@ const home = () => {
};
function roomCodeIsValid (code) {
return typeof code === 'string' && /^[a-z0-9]{6}$/.test(code.toLowerCase());
return typeof code === 'string' && /^[A-Z0-9]{6}$/.test(code.toUpperCase().trim());
}
function attemptToJoinGame (code) {
XHRUtility.xhr(
'/api/games/' + code.toLowerCase().trim() + 'availability',
'/api/games/' + code.toUpperCase().trim() + '/availability',
'GET',
null,
null
)
.then((res) => {
if (res.status === 200) {
window.location = '/join/' + res.content;
let json = JSON.parse(res.content);
window.location = window.location.protocol + '//' + window.location.host +
'/join/' + encodeURIComponent(json.accessCode) +
'?playerCount=' + encodeURIComponent(json.playerCount) +
'&timer=' + encodeURIComponent(getTimeString(json.timerParams));
}
}).catch((res) => {
if (res.status === 404) {
@@ -41,6 +45,29 @@ function attemptToJoinGame (code) {
});
}
function getTimeString(timerParams) {
let timeString = '';
if (timerParams) {
const hours = timerParams.hours;
const minutes = timerParams.minutes;
if (hours) {
timeString += hours > 1
? hours + ' hours '
: hours + ' hour ';
}
if (minutes) {
timeString += minutes > 1
? minutes + ' minutes '
: minutes + ' minute ';
}
return timeString;
} else {
timeString = 'untimed';
return timeString;
}
}
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
module.exports = home;
} else {

39
client/src/scripts/join.js
View File

@@ -1,37 +1,36 @@
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";
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();
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';
const 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 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...');
document.getElementById('submit-new-name').classList.add('submitted');
document.getElementById('submit-new-name').setAttribute('value', 'Joining...');
XHRUtility.xhr(
'/api/games/' + accessCode + '/players',
'PATCH',
@@ -39,13 +38,13 @@ const joinHandler = (e) => {
JSON.stringify({ playerName: name, accessCode: accessCode })
)
.then((res) => {
let json = JSON.parse(res.content);
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');
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) {