Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Address some remaining lighthouse report feedback #205

Merged
merged 4 commits into from
Nov 13, 2024
Merged

Address some remaining lighthouse report feedback #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf4b206
lighthouse improvements
AlecM33 Nov 13, 2024
bb92ca5
revert property
AlecM33 Nov 13, 2024
04e3dc0
explicit width and height
AlecM33 Nov 13, 2024
3f5edd6
missing width and height
AlecM33 Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added client/src/images/framed-phone-screenshot-2_resized.webp
View file
Open in desktop
Binary file not shown.
Binary file added client/src/images/framed-phone-screenshot_resized.webp
View file
Open in desktop
Binary file not shown.
16 changes: 8 additions & 8 deletions client/src/modules/front_end_components/HTMLFragments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@ export const HTMLFragments = {
<canvas id="canvas"></canvas>
<div id='game-parameters'>
<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>
<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>
</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>
Expand Down Expand Up @@ -84,7 +84,7 @@ export const HTMLFragments = {
</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 id='game-role' tabindex="0">
Expand Down Expand Up @@ -127,7 +127,7 @@ export const HTMLFragments = {
</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 id='game-people-container'>
Expand Down Expand Up @@ -187,7 +187,7 @@ export const HTMLFragments = {
Transfer Mod Powers <img alt='transfer icon' src='/images/shuffle.svg'/>
</button>
<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 id="game-players-container">
Expand Down Expand Up @@ -229,7 +229,7 @@ export const HTMLFragments = {
<div id='play-pause'> </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 id='game-role' tabindex="0">
Expand Down Expand Up @@ -309,7 +309,7 @@ export const HTMLFragments = {
`<div id='end-of-game-header'>
<h2>&#x1F3C1; The moderator has ended the game. Roles are revealed.</h2>
<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 id='game-people-container'>
Expand Down
4 changes: 2 additions & 2 deletions client/src/modules/game_creation/GameCreationStepManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,7 +500,7 @@ function showButtons (back, forward, forwardHandler, backHandler, builtGame = nu
document.querySelector('#create-game')?.remove();
if (back) {
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.setAttribute('id', 'step-back-button');
backButton.classList.add('app-button');
Expand All @@ -509,7 +509,7 @@ function showButtons (back, forward, forwardHandler, backHandler, builtGame = nu

if (forward && builtGame === null) {
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.setAttribute('id', 'step-forward-button');
fwdButton.classList.add('app-button');
Expand Down
27 changes: 1 addition & 26 deletions client/src/scripts/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,7 @@ function attemptToJoinGame (event) {
} else {
res.json().then(json => {
window.location = window.location.protocol + '//' + window.location.host +
'/join/' + encodeURIComponent(json.accessCode) +
'?playerCount=' + encodeURIComponent(json.playerCount) +
'&timer=' + encodeURIComponent(getTimeString(json.timerParams));
'/join/' + encodeURIComponent(json.accessCode);
});
}
}).catch(() => {
Expand All @@ -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') {
module.exports = home;
} else {
Expand Down
1 change: 0 additions & 1 deletion client/src/styles/GLOBAL.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,6 @@ button {
}

#game-parameters img {
height: 20px;
margin-right: 10px;
}

Expand Down
2 changes: 1 addition & 1 deletion client/src/styles/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ a button {

#join-button:hover {
background-color: #326243;
border: 2px solid #1c8a36;
border: 3px solid #1c8a36;
}

#join-form div:nth-child(1) {
Expand Down
4 changes: 2 additions & 2 deletions client/src/view_templates/CreateTemplate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ export const hiddenMenus =
<div tabindex="-1" id="custom-role-info-modal" class="modal">
<h3 id="custom-role-info-modal-name"></h3>
<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>
<label for="custom-role-info-modal-alignment">description:</label>
<label>description:</label>
<div id="custom-role-info-modal-description"></div>
<div class="modal-button-container single-button">
<button id="close-custom-role-info-modal-button" class="cancel app-button">Close</button>
Expand Down
6 changes: 2 additions & 4 deletions client/src/views/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,9 @@
<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:image" content="image.png">

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="stylesheet" href="./styles/GLOBAL.css">
<link rel="stylesheet" href="./styles/home.css">
<link rel="stylesheet" href="/styles/hamburgers.css">
Expand Down Expand Up @@ -48,13 +46,13 @@ <h3>An app to create and run games of Werewolf (Mafia) with your friends. No sig
<div id="about-container">
<div>
<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>
<h2>Join a game and have a role dealt to your device.</h2>
</div>
<div>
<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>
<h2>Create your own game with default or custom roles.</h2>
</div>
Expand Down
2 changes: 0 additions & 2 deletions client/src/views/how-to-use.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<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">
</head>
<body>
Expand Down
2 changes: 1 addition & 1 deletion server/modules/ServerBootstrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const ServerBootstrapper = {
res.setHeader(
'Content-Security-Policy',
"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();
});
Expand Down
Loading