bigger role buttons, better delete icon, other small styling tweaks, update tutorial language (#211 )

* bigger role buttons, other small styling tweaks, update tutorial language * fix depracated github actions dependency * fix margin
set content type for join errors (#207 )
2025-12-29 17:27:51 +01:00 · 2025-12-28 23:38:18 -05:00 · 2025-02-07 13:53:30 -05:00 · 2025-02-06 17:43:05 -05:00 · 2024-11-12 21:30:13 -05:00
18 changed files with 82 additions and 100 deletions
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -22,7 +22,7 @@ jobs:
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
--- a/client/src/images/delete-2.svg
+++ b/client/src/images/delete-2.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 12V17" stroke="#e73333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 12V17" stroke="#e73333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 7H20" stroke="#e73333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 10V18C6 19.6569 7.34315 21 9 21H15C16.6569 21 18 19.6569 18 18V10" stroke="#e73333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="#e73333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/client/src/images/framed-phone-screenshot-2_resized.webp
+++ b/client/src/images/framed-phone-screenshot-2_resized.webp
--- a/client/src/images/framed-phone-screenshot_resized.webp
+++ b/client/src/images/framed-phone-screenshot_resized.webp
--- a/client/src/modules/front_end_components/HTMLFragments.js
+++ b/client/src/modules/front_end_components/HTMLFragments.js
@@ -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>
@@ -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">
@@ -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'>
@@ -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">
@@ -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">
@@ -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'>
@@ -369,7 +369,7 @@ export const HTMLFragments = {
            <img tabindex="0" class="role-include" src="../images/add.svg" title="add one" alt="add one"/>
            <img tabindex="0" class="role-info" src="../images/info.svg" title="info" alt="info"/>
            <img tabindex="0" class="role-edit" src="../images/pencil.svg" title="edit" alt="edit"/>
-            <img tabindex="0" class="role-remove" src="../images/delete.svg" title="remove" alt="remove"/>
+            <img tabindex="0" class="role-remove" src="../images/delete-2.svg" title="remove" alt="remove"/>
        </div>`,
    DECK_SELECT_ROLE_DEFAULT:
        `<div class="role-name"></div>
--- a/client/src/modules/game_creation/GameCreationStepManager.js
+++ b/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');
--- a/client/src/scripts/home.js
+++ b/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 {
--- a/client/src/styles/GLOBAL.css
+++ b/client/src/styles/GLOBAL.css
@@ -299,7 +299,6 @@ button {
 }

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

--- a/client/src/styles/create.css
+++ b/client/src/styles/create.css
@@ -454,9 +454,9 @@ input[type="number"] {
 }

 #role-select {
-    margin: 0.5em 1em 1.5em 0;
+    margin: 0.5em 0;
    overflow-y: auto;
-    height: 20em;
+    height: 22em;
 }

 .default-role, .custom-role, .added-role {
@@ -492,8 +492,8 @@ input[type="number"] {
 }

 #role-select img, #deck-status-container img {
-    height: 20px;
-    margin: 0 8px;
+    height: 25px;
+    margin: 0 10px;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
@@ -505,7 +505,7 @@ input[type="number"] {
 }

 #role-select img:nth-child(4) {
-    height: 18px;
+    height: 25px;
 }

 #role-select img:hover, #deck-status-container img:hover {
@@ -683,7 +683,7 @@ input[type="number"] {

@media(max-width: 550px) {
    #custom-roles-container, #deck-status-container {
-        min-width: 85%;
+        min-width: 90%;
    }
    h1 {
        font-size: 32px;
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -182,7 +182,7 @@
 }

 #timer-parameters {
-    width: 65px;
+    width: fit-content;
 }

 #role-edit-container-background, #timer-edit-container-background {
@@ -268,6 +268,7 @@ h1 {
    border-radius: 5px;
    padding: 7px;
    margin: 0.5em;
+    text-align: center;
 }

 #end-of-game-header button {
--- a/client/src/styles/home.css
+++ b/client/src/styles/home.css
@@ -21,7 +21,7 @@ button#home-create-button {
 }

 .framed-phone-screenshot-container {
-    margin: 0 0 20px 0;
+    margin: 0 0 0 0;
    border: 1px solid #464552;
 }

@@ -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) {
@@ -194,5 +194,6 @@ label[for="room-code"], label[for="player-name"] {

    #about-container h2 {
        font-size: 18px;
+        margin: 0 15px 20px 15px;
    }
 }
--- a/client/src/view_templates/CreateTemplate.js
+++ b/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>
--- a/client/src/views/home.html
+++ b/client/src/views/home.html
@@ -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">
@@ -47,16 +45,16 @@
    </div>
    <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"/>
-            </div>
            <h2>Join a game and have a role dealt to your device.</h2>
+            <div class="framed-phone-screenshot-container">
+                <img id="framed-phone-screenshot" alt="framed phone screenshot" src="../images/framed-phone-screenshot_resized.webp"/>
+            </div>
        </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"/>
-            </div>
            <h2>Create your own game with default or custom roles.</h2>
+            <div class="framed-phone-screenshot-container">
+                <img id="framed-phone-screenshot-2" alt="framed phone screenshot" src="../images/framed-phone-screenshot-2_resized.webp"/>
+            </div>
        </div>
    </div>
    <script src="/dist/home-bundle.js.gz"></script>
--- a/client/src/views/how-to-use.html
+++ b/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>
@@ -39,10 +37,8 @@
        </ul>
    </div>
    <h1 class="how-to-use-header" id="purpose-of-the-app">Purpose</h1>
-    <div class="how-to-use-section">This app helps a group play Werewolf when meeting virtually, or when you don't have
-        Werewolf cards with you. In general, the app can be very efficient for setting up games of any size and configuration.
-        Once everyone has joined the room, cards can be quickly dealt and re-dealt, and important information such as
-        role descriptions, time remaining, and the status of players is conveniently centralized. It's flexible, free,
+    <div class="how-to-use-section">This app helps a group play Werewolf when meeting virtually, or when it's simply difficult to
+        play with physical cards. Set up games with any number of roles and deal them to everyone's device. It's flexible, free,
        and doesn't require installing an app or creating an account. If you use this app, I'd love to hear about it. I
        am always looking for ways to improve this tool.
    </div>
@@ -52,27 +48,23 @@
        <br>
        <h3>- Step One: Choosing a method of moderation</h3>
        <br>
-        You have two options for moderation during the game. If the moderator isn't playing, you can choose the <span class="emphasized">Dedicated
-        Moderator</span> option. Dedicated Moderators are not dealt into the game. Once they start the game, they will know
-        everyone's role. During the game, they can kill players, reveal players' roles, transfer their
-        moderator powers, play/pause the timer (if there is one), end the game (revealing everyone's role), or return the game to the lobby.
+        Choose either the <span class="emphasized">Dedicated
+        Moderator</span> option or the <span class="emphasized">Temporary Moderator</span> option. Dedicated moderators
+        are not dealt into the game, while temporary moderators are. Both will have moderator powers, but temporary moderators
+        will not know anyone's role. When they first remove someone from the game, their moderator powers will be transferred to that person,
+        who will become a dedicated moderator.
        <br><br>
-        Similarly, you can also choose the <span class="emphasized">Temporary Moderator</span> option. You are dealt a role,
-        and you have the same powers as the Dedicated Moderator, except game knowledge - you know the same
-        information that a regular player does. When you remove the first player from the game (which can be yourself),
-        they will automatically become the dedicated moderator.
-        <br><br>
-        <span class="emphasized">Dedicated Moderators</span> can transfer their moderator powers to a player that is out,
-        or to a spectator. That way, if the current Dedicated Moderator has to leave, or simply does not want to moderate
+        Dedicated moderators can transfer their moderator powers to any player that has been eliminated,
+        or to a spectator. That way, if the current moderator has to leave, or simply does not want to moderate
        anymore, they can easily delegate.
        <br><br>
        <h3>- Step Two: Build your deck</h3>
        <br>
-        There is a role box on this page that includes a list of <span class="emphasized">Default Roles</span> and a list
+        There is a <span class="emphasized">Role Box</span> on this page that includes a list of <span class="emphasized">Default Roles</span> and a list
        of <span class="emphasized">Custom Roles</span>, which can be displayed by selecting the appropriate button within the box.
-        If you want to add a certain role to the game, click the <span class="emphasized">green plus</span> and one copy
-        of it will be added to the <span class="emphasized">Deck</span> which is the other box displaying a player count.
-        Likewise, if you want to remove one copy of a given role, click the <span class="emphasized">red minus</span> on the role
+        If you want to add a certain role to the game, click the green plus, and one copy
+        of it will be added to the <span class="emphasized">Deck Box</span>, which displays the added roles and the corresponding player count.
+        Likewise, if you want to remove one copy of a given role, click the red minus on the role
        in the Deck Box.
        <br><br>
        Here I add 3 villagers to the game, and then remove them:
@@ -97,13 +89,13 @@
        <h3>- In the Lobby</h3>
        <br>
        In the Lobby, moderators can manage the people in the room and the cards in the game. By clicking
-        the <span class="emphasized">three vertical dots (AKA the "kebab menu")</span> next to a given player (<span class="emphasized">point A</span>
+        the three vertical dots (AKA the "kebab menu") next to a given player (<span class="emphasized">point A</span>
        in the screenshot below), you have the option to kick that player. You can do the same with a spectator by first
        viewing the spectator list (<span class="emphasized">point C</span>) and clicking their kebab menus. By clicking the
        "Edit Roles" button (<span class="emphasized">point B</span>), you can change which roles are in the game and the
        quantities of those roles. This button will bring up the same module you encountered when you first created the room.
-        Saving any changes to the roles may affect the player count. If you wish to <span class="emphasized">start the game (point B)</span>, the number
-        of Players in the Lobby must equal the number of cards in the game.
+        Saving any changes to the roles may affect the player count. If you wish to start the game <span class="emphasized">(point B)</span>, the number
+        of players in the lobby must equal the number of cards in the game.
        <br><br>
        <img alt="moderator view in the lobby" class='tutorial-image-small-portrait' src="../images/tutorial/dedicated-mod-lobby-mobile.webp"/>
        <br><br>
@@ -115,15 +107,15 @@
        but not the "Reveal" option. Or, if you happen to have a role that reveals but is not immediately removed from the game,
        you can use the "Reveal" option but not the "Kill" option. You of course don't have to utilize either of these options.
        If you just want to use the app to deal cards, you are free to do that. The moderator also has permission to
-        play and pause the Timer (<span class="emphasized">Point B</span>), and can end the game (revealing everyone's role)
-        or return the game to the Lobby (<span class="emphasized">Point C</span>), where it can be started anew with different settings.
+        play and pause the timer (<span class="emphasized">Point B</span>), and can end the game (revealing everyone's role)
+        or return the game to the lobby (<span class="emphasized">Point C</span>), where it can be started again with different settings.
        <br><br>
        <img alt="moderator view during the game" class='tutorial-image-small-portrait' src="../images/tutorial/dedicated-mod-in-progress-mobile.webp"/>
        <br><br>
-        Similarly, the <span class="emphasized">Temporary Moderator view</span> looks like the below image. They have
+        Similarly, the <span class="emphasized">Temporary Moderator</span> view looks like the below image. They have
        much the same abilities as a dedicated moderator, except they don't know role or alignment information and cannot
        transfer their powers. Their powers will be transferred automatically to the first person they remove from the game
-        (which can be themselves).
+        (which can be themselves!).
        <br><br>
        <img alt="temporary moderator view during the game" class='tutorial-image-small-portrait' src="../images/tutorial/temp-mod-in-progress-mobile.webp"/>
        <br><br>
@@ -138,7 +130,7 @@
    <h1 class="how-to-use-header" id="being-a-player">Being a Player</h1>
    <div class="how-to-use-section">
        This is an example of what a <span class="emphasized">Player</span> is seeing, including the running timer,
-        their role card, and the player list. You can also edit your name for the Room by clicking the pencil next to it.
+        their role card, and the player list. You can also edit your name for the room by clicking the pencil next to it.
        Below, we flip our role card up and down by double-clicking it, and then we bring up the prompt to edit our name:
        <br><br>
        <img alt='player-view' class='tutorial-image-small-portrait' src="../images/tutorial/player-view.gif"/>
@@ -146,8 +138,8 @@
        Players can view the timer, but only the current moderator can play and pause it. Your role card starts flipped over
        - this is useful if you are in-person and don't want someone else accidentally seeing your role as
        it is dealt. You can view your role at any time by double-clicking/double-tapping it. Requiring a double-click guards against the possibility
-        of accidentally flipping your role when tapping other things. Within the Player List, you can see who is alive or
-        dead and who has had their role revealed. There is also a <span class="emphasized">role info button</span> that,
+        of accidentally flipping your role when tapping other things. Within the player list, you can see who is alive or
+        dead and who has had their role revealed. There is also a role info button that,
        when pressed, displays all the different roles in the current game, including their descriptions and alignment (Good/Evil).
        <br><br>
    </div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
        "body-parser": "^1.20.3",
        "compression-webpack-plugin": "^10.0.0",
        "cors": "^2.8.5",
-        "express": "^4.21.1",
+        "express": "^4.21.2",
        "express-force-https": "^1.0.0",
        "express-rate-limit": "^6.0.1",
        "open": "^7.0.3",
@@ -47,7 +47,7 @@
        "webpack-remove-debug": "^0.1.0"
      },
      "engines": {
-        "node": ">= 14.0.0"
+        "node": ">= 20.0.0"
      }
    },
    "node_modules/@ampproject/remapping": {
@@ -3934,9 +3934,10 @@
      }
    },
    "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
+      "license": "MIT",
      "dependencies": {
        "accepts": "~1.3.8",
        "array-flatten": "1.1.1",
@@ -3957,7 +3958,7 @@
        "methods": "~1.1.2",
        "on-finished": "2.4.1",
        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
        "proxy-addr": "~2.0.7",
        "qs": "6.13.0",
        "range-parser": "~1.2.1",
@@ -3972,6 +3973,10 @@
      },
      "engines": {
        "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
      }
    },
    "node_modules/express-force-https": {
@@ -5857,9 +5862,10 @@
      "dev": true
    },
    "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
+      "license": "MIT"
    },
    "node_modules/picocolors": {
      "version": "1.1.1",
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
    "body-parser": "^1.20.3",
    "compression-webpack-plugin": "^10.0.0",
    "cors": "^2.8.5",
-    "express": "^4.21.1",
+    "express": "^4.21.2",
    "express-force-https": "^1.0.0",
    "express-rate-limit": "^6.0.1",
    "open": "^7.0.3",
--- a/server/api/GamesAPI.js
+++ b/server/api/GamesAPI.js
@@ -83,9 +83,11 @@ router.patch('/:code/players', async function (req, res) {
                res.status(200).send({ cookie: data, environment: gameManager.environment });
            }).catch((data) => {
                console.error(data);
+                res.set('content-type', 'text/plain');
                res.status(data.status || 500).send(data.reason);
            });
        } else {
+            res.set('content-type', 'text/plain');
            res.status(404).send();
        }
    }
--- a/server/modules/ServerBootstrapper.js
+++ b/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();
            });
Author	SHA1	Message	Date
Alec	75189d109a	bigger role buttons, better delete icon, other small styling tweaks, update tutorial language (#211 ) * bigger role buttons, other small styling tweaks, update tutorial language * fix depracated github actions dependency * fix margin	2025-12-28 23:38:18 -05:00
Alec	2a4fa2861f	set content type for join errors (#207 )	2025-02-07 13:53:30 -05:00
dependabot[bot]	4b4b005d8a	Bump path-to-regexp and express (#206 ) Bumps [path-to-regexp](https://github.com/pillarjs/path-to-regexp) to 0.1.12 and updates ancestor dependency [express](https://github.com/expressjs/express). These dependencies need to be updated together. Updates `path-to-regexp` from 0.1.10 to 0.1.12 - [Release notes](https://github.com/pillarjs/path-to-regexp/releases) - [Changelog](https://github.com/pillarjs/path-to-regexp/blob/master/History.md) - [Commits](https://github.com/pillarjs/path-to-regexp/compare/v0.1.10...v0.1.12) Updates `express` from 4.21.1 to 4.21.2 - [Release notes](https://github.com/expressjs/express/releases) - [Changelog](https://github.com/expressjs/express/blob/4.21.2/History.md) - [Commits](https://github.com/expressjs/express/compare/4.21.1...4.21.2) --- updated-dependencies: - dependency-name: path-to-regexp dependency-type: indirect - dependency-name: express dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-02-06 17:43:05 -05:00
Alec	ad20a291ec	Address some remaining lighthouse report feedback (#205 ) * lighthouse improvements * revert property * explicit width and height * missing width and height	2024-11-12 21:30:13 -05:00