lighthouse improvements

client/src/modules/game_creation/GameCreationStepManager.js

@@ -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');
@@ -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');

client/src/scripts/home.js

@@ -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(() => {
@@ -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 {

client/src/styles/GLOBAL.css

@@ -15,6 +15,7 @@ th, thead, tr, tt, u, ul, var {
 @font-face {
     font-family: 'signika-negative';
     src: url("../webfonts/SignikaNegative-Light.woff2") format("woff2");
+    font-display: swap;
 }
 
 html {

client/src/view_templates/CreateTemplate.js

@@ -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>

client/src/views/home.html

@@ -48,13 +48,13 @@
     <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>

client/src/views/how-to-use.html

@@ -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>

server/modules/ServerBootstrapper.js

@@ -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();
             });