prevent duplicate HTML id

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'/>

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 {

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;