From 531c093bbc923352196686414fe8b1d38e5c894a Mon Sep 17 00:00:00 2001
From: AlecM33 <leohfx@gmail.com>
Date: Wed, 16 Aug 2023 14:08:03 -0400
Subject: [PATCH] prevent duplicate HTML id

---
 .../src/modules/front_end_components/HTMLFragments.js  |  2 +-
 client/src/modules/game_state/states/Lobby.js          | 10 +++-------
 client/src/styles/game.css                             |  4 ++++
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/modules/front_end_components/HTMLFragments.js b/client/src/modules/front_end_components/HTMLFragments.js
index 2f6ff18..35fa91d 100644
--- a/client/src/modules/front_end_components/HTMLFragments.js
+++ b/client/src/modules/front_end_components/HTMLFragments.js
@@ -11,7 +11,7 @@ export const HTMLFragments = {
             <div id='game-parameters'>
                 <div>
                     <img alt='clock' src='/images/clock.svg'/>
-                    <div id='game-time'></div>
+                    <div id='timer-parameters'></div>
                 </div>
                 <div>
                     <img alt='person' src='/images/person.svg'/>
diff --git a/client/src/modules/game_state/states/Lobby.js b/client/src/modules/game_state/states/Lobby.js
index dc29961..2c87a95 100644
--- a/client/src/modules/game_state/states/Lobby.js
+++ b/client/src/modules/game_state/states/Lobby.js
@@ -202,7 +202,7 @@ export class Lobby {
 
     setTimer () {
         const timeString = getTimeString(this.stateBucket.currentGameState);
-        const time = this.container.querySelector('#game-time');
+        const time = this.container.querySelector('#timer-parameters');
         time.innerText = timeString;
 
         return timeString;
@@ -416,14 +416,10 @@ function getTimeString (gameState) {
         const hours = gameState.timerParams.hours;
         const minutes = gameState.timerParams.minutes;
         if (hours) {
-            timeString += hours > 1
-                ? hours + ' hours '
-                : hours + ' hour ';
+            timeString += hours + 'h '
         }
         if (minutes) {
-            timeString += minutes > 1
-                ? minutes + ' minutes '
-                : minutes + ' minute ';
+            timeString += minutes + 'm'
         }
         return timeString;
     } else {
diff --git a/client/src/styles/game.css b/client/src/styles/game.css
index 5f2894f..fcfe87f 100644
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -181,6 +181,10 @@
     border: 2px solid #3b3a4a;
 }
 
+#timer-parameters {
+    width: 65px;
+}
+
 #role-edit-container-background, #timer-edit-container-background {
     position: fixed;
     top: 0;