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

Address some remaining lighthouse report feedback (#205)

Browse Source 
* lighthouse improvements

* revert property

* explicit width and height

* missing width and height
This commit is contained in:
Alec
2024-11-12 21:30:13 -05:00
committed by GitHub
parent befbeaa228
commit ad20a291ec
11 changed files with 17 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/src/images/framed-phone-screenshot-2_resized.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
client/src/images/framed-phone-screenshot_resized.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

16
client/src/modules/front_end_components/HTMLFragments.js
View File

@@ -10,17 +10,17 @@ export const HTMLFragments = {
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<div id='game-parameters'> <div id='game-parameters'>
<div> <div>
<img alt='clock' src='/images/clock.svg'/> <img alt='clock' width="20" height="20" src='/images/clock.svg'/>
<div id='timer-parameters'></div> <div id='timer-parameters'></div>
</div> </div>
<div> <div>
<img alt='person' src='/images/person.svg'/> <img alt='person' width="22" height="20" src='/images/person.svg'/>
<div id='game-player-count'></div> <div id='game-player-count'></div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' src='/images/info.svg'/></button> <button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' width="25" height="25" src='/images/info.svg'/></button>
</div> </div>
</div> </div>
<div> <div>
@@ -84,7 +84,7 @@ export const HTMLFragments = {
</div> </div>
</div> </div>
<div> <div>
<button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' src='/images/info.svg'/></button> <button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' width="25" height="25" src='/images/info.svg'/></button>
</div> </div>
</div> </div>
<div id='game-role' tabindex="0"> <div id='game-role' tabindex="0">
@@ -127,7 +127,7 @@ export const HTMLFragments = {
</div> </div>
</div> </div>
<div> <div>
<button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' src='/images/info.svg'/></button> <button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' width="25" height="25" src='/images/info.svg'/></button>
</div> </div>
</div> </div>
<div id='game-people-container'> <div id='game-people-container'>
@@ -187,7 +187,7 @@ export const HTMLFragments = {
Transfer Mod Powers <img alt='transfer icon' src='/images/shuffle.svg'/> Transfer Mod Powers <img alt='transfer icon' src='/images/shuffle.svg'/>
</button> </button>
<div> <div>
<button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' src='/images/info.svg'/></button> <button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' width="25" height="25" src='/images/info.svg'/></button>
</div> </div>
</div> </div>
<div id="game-players-container"> <div id="game-players-container">
@@ -229,7 +229,7 @@ export const HTMLFragments = {
<div id='play-pause'> </div> <div id='play-pause'> </div>
</div> </div>
<div> <div>
<button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' src='/images/info.svg'/></button> <button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' width="25" height="25" src='/images/info.svg'/></button>
</div> </div>
</div> </div>
<div id='game-role' tabindex="0"> <div id='game-role' tabindex="0">
@@ -309,7 +309,7 @@ export const HTMLFragments = {
`<div id='end-of-game-header'> `<div id='end-of-game-header'>
<h2>&#x1F3C1; The moderator has ended the game. Roles are revealed.</h2> <h2>&#x1F3C1; The moderator has ended the game. Roles are revealed.</h2>
<div id="end-of-game-buttons"> <div id="end-of-game-buttons">
<button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' src='/images/info.svg'/></button> <button id='role-info-button' class='app-button'>Roles in This Game <img alt='Info icon' width="25" height="25" src='/images/info.svg'/></button>
</div> </div>
</div> </div>
<div id='game-people-container'> <div id='game-people-container'>

4
client/src/modules/game_creation/GameCreationStepManager.js
View File

@@ -500,7 +500,7 @@ function showButtons (back, forward, forwardHandler, backHandler, builtGame = nu
document.querySelector('#create-game')?.remove(); document.querySelector('#create-game')?.remove();
if (back) { if (back) {
const backButton = document.createElement('button'); const backButton = document.createElement('button');
backButton.innerHTML = '<img alt="back" src="../../images/caret-back.svg"/>'; backButton.innerHTML = '<img alt="back" width="40" height="40" src="../../images/caret-back.svg"/>';
backButton.addEventListener('click', backHandler); backButton.addEventListener('click', backHandler);
backButton.setAttribute('id', 'step-back-button'); backButton.setAttribute('id', 'step-back-button');
backButton.classList.add('app-button'); backButton.classList.add('app-button');
@@ -509,7 +509,7 @@ function showButtons (back, forward, forwardHandler, backHandler, builtGame = nu
if (forward && builtGame === null) { if (forward && builtGame === null) {
const fwdButton = document.createElement('button'); const fwdButton = document.createElement('button');
fwdButton.innerHTML = '<img alt="next" src="../../images/caret-forward.svg"/>'; fwdButton.innerHTML = '<img alt="next" width="40" height="40" src="../../images/caret-forward.svg"/>';
fwdButton.addEventListener('click', forwardHandler); fwdButton.addEventListener('click', forwardHandler);
fwdButton.setAttribute('id', 'step-forward-button'); fwdButton.setAttribute('id', 'step-forward-button');
fwdButton.classList.add('app-button'); fwdButton.classList.add('app-button');

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

@@ -46,9 +46,7 @@ function attemptToJoinGame (event) {
} else { } else {
res.json().then(json => { res.json().then(json => {
window.location = window.location.protocol + '//' + window.location.host + window.location = window.location.protocol + '//' + window.location.host +
'/join/' + encodeURIComponent(json.accessCode) + '/join/' + encodeURIComponent(json.accessCode);
'?playerCount=' + encodeURIComponent(json.playerCount) +
'&timer=' + encodeURIComponent(getTimeString(json.timerParams));
}); });
} }
}).catch(() => { }).catch(() => {
@@ -62,29 +60,6 @@ function attemptToJoinGame (event) {
} }
} }
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') { if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
module.exports = home; module.exports = home;
} else { } else {

1
client/src/styles/GLOBAL.css
View File

@@ -299,7 +299,6 @@ button {
} }
#game-parameters img { #game-parameters img {
height: 20px;
margin-right: 10px; margin-right: 10px;
} }

2
client/src/styles/home.css
View File

@@ -95,7 +95,7 @@ a button {
#join-button:hover { #join-button:hover {
background-color: #326243; background-color: #326243;
border: 2px solid #1c8a36; border: 3px solid #1c8a36;
} }
#join-form div:nth-child(1) { #join-form div:nth-child(1) {

4
client/src/view_templates/CreateTemplate.js
View File

@@ -36,9 +36,9 @@ export const hiddenMenus =
<div tabindex="-1" id="custom-role-info-modal" class="modal"> <div tabindex="-1" id="custom-role-info-modal" class="modal">
<h3 id="custom-role-info-modal-name"></h3> <h3 id="custom-role-info-modal-name"></h3>
<div id="custom-role-info-modal-image-placeholder"></div> <div id="custom-role-info-modal-image-placeholder"></div>
<label for="custom-role-info-modal-alignment">alignment:</label> <label>alignment:</label>
<div id="custom-role-info-modal-alignment"></div> <div id="custom-role-info-modal-alignment"></div>
<label for="custom-role-info-modal-alignment">description:</label> <label>description:</label>
<div id="custom-role-info-modal-description"></div> <div id="custom-role-info-modal-description"></div>
<div class="modal-button-container single-button"> <div class="modal-button-container single-button">
<button id="close-custom-role-info-modal-button" class="cancel app-button">Close</button> <button id="close-custom-role-info-modal-button" class="cancel app-button">Close</button>

6
client/src/views/home.html
View File

@@ -11,11 +11,9 @@
<meta property="og:url" content="https://play-werewolf.app"> <meta property="og:url" content="https://play-werewolf.app">
<meta property="og:description" content="An app to create and run games of Werewolf (Mafia) with your friends. No sign-up, installation, or payment required."> <meta property="og:description" content="An app to create and run games of Werewolf (Mafia) with your friends. No sign-up, installation, or payment required.">
<meta property="og:image" content="image.png"> <meta property="og:image" content="image.png">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="./styles/GLOBAL.css"> <link rel="stylesheet" href="./styles/GLOBAL.css">
<link rel="stylesheet" href="./styles/home.css"> <link rel="stylesheet" href="./styles/home.css">
<link rel="stylesheet" href="/styles/hamburgers.css"> <link rel="stylesheet" href="/styles/hamburgers.css">
@@ -48,13 +46,13 @@
<div id="about-container"> <div id="about-container">
<div> <div>
<div class="framed-phone-screenshot-container"> <div class="framed-phone-screenshot-container">
<img id="framed-phone-screenshot" alt="framed phone screenshot" src="../images/framed-phone-screenshot.webp"/> <img id="framed-phone-screenshot" alt="framed phone screenshot" src="../images/framed-phone-screenshot_resized.webp"/>
</div> </div>
<h2>Join a game and have a role dealt to your device.</h2> <h2>Join a game and have a role dealt to your device.</h2>
</div> </div>
<div> <div>
<div class="framed-phone-screenshot-container"> <div class="framed-phone-screenshot-container">
<img id="framed-phone-screenshot-2" alt="framed phone screenshot" src="../images/framed-phone-screenshot-2.webp"/> <img id="framed-phone-screenshot-2" alt="framed phone screenshot" src="../images/framed-phone-screenshot-2_resized.webp"/>
</div> </div>
<h2>Create your own game with default or custom roles.</h2> <h2>Create your own game with default or custom roles.</h2>
</div> </div>

2
client/src/views/how-to-use.html
View File

@@ -14,8 +14,6 @@
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/styles/GLOBAL.css"> <link rel="stylesheet" href="/styles/GLOBAL.css">
<link rel="stylesheet" href="/styles/create.css">
<link rel="stylesheet" href="/styles/modal.css">
<link rel="stylesheet" href="/styles/hamburgers.css"> <link rel="stylesheet" href="/styles/hamburgers.css">
</head> </head>
<body> <body>

2
server/modules/ServerBootstrapper.js
View File

@@ -95,7 +95,7 @@ const ServerBootstrapper = {
res.setHeader( res.setHeader(
'Content-Security-Policy', 'Content-Security-Policy',
"default-src 'self'; font-src 'self' https://fonts.gstatic.com/; img-src 'self' https://img.buymeacoffee.com;" + "default-src 'self'; font-src 'self' https://fonts.gstatic.com/; img-src 'self' https://img.buymeacoffee.com;" +
" script-src 'self' https://cdnjs.buymeacoffee.com; style-src 'self' https://cdnjs.buymeacoffee.com https://fonts.googleapis.com/ 'nonce-" + nonce + "'; frame-src 'self'" " script-src 'self'; style-src 'self' https://fonts.googleapis.com/ 'nonce-" + nonce + "'; frame-src 'self'"
); );
next(); next();
}); });