Merge pull request #177 from AlecM33/simplify-join-link

remove parameters from join link

client/src/modules/game_state/states/Lobby.js

@@ -171,13 +171,11 @@ export class Lobby {
         };
     }
 
-    setLink (timeString) {
+    setLink () {
         const linkContainer = this.container.querySelector('#game-link');
         linkContainer.innerHTML = '<img src=\'../images/copy.svg\' alt=\'copy\'/>';
         const link = window.location.protocol + '//' + window.location.host +
-            '/join/' + this.stateBucket.currentGameState.accessCode +
-            '?playerCount=' + this.stateBucket.currentGameState.gameSize +
-            '&timer=' + encodeURIComponent(timeString);
+            '/join/' + this.stateBucket.currentGameState.accessCode;
         const linkDiv = document.createElement('div');
         linkDiv.innerText = link;
         linkContainer.prepend(linkDiv);
@@ -204,14 +202,12 @@ export class Lobby {
         const timeString = getTimeString(this.stateBucket.currentGameState);
         const time = this.container.querySelector('#timer-parameters');
         time.innerText = timeString;
-
-        return timeString;
     }
 
     populateHeader () {
-        const timeString = this.setTimer();
+        const link = this.setLink();
 
-        const link = this.setLink(timeString);
+        this.setTimer();
 
         this.setPlayerCount();
 
@@ -301,15 +297,13 @@ export class Lobby {
             this.stateBucket.currentGameState.deck = deck;
             this.stateBucket.currentGameState.gameSize = gameSize;
             this.stateBucket.currentGameState.isStartable = isStartable;
-            this.setLink(getTimeString(this.stateBucket.currentGameState));
             this.setPlayerCount();
         });
 
         this.socket.on(EVENT_IDS.UPDATE_GAME_TIMER, (hasTimer, timerParams) => {
             this.stateBucket.currentGameState.hasTimer = hasTimer;
             this.stateBucket.currentGameState.timerParams = timerParams;
-            const timeString = this.setTimer();
-            this.setLink(timeString);
+            this.setTimer();
         });
 
         this.socket.on(EVENT_IDS.LEAVE_ROOM, (leftId, gameIsStartable) => {

client/src/scripts/join.js

@@ -9,10 +9,6 @@ const join = () => {
     const accessCode = splitUrl[1];
     if (/^[a-zA-Z0-9]+$/.test(accessCode) && accessCode.length === PRIMITIVES.ACCESS_CODE_LENGTH) {
         document.getElementById('game-code').innerText = accessCode;
-        document.getElementById('game-time').innerText =
-            decodeURIComponent((new URL(document.location)).searchParams.get('timer'));
-        document.getElementById('game-player-count').innerText =
-            decodeURIComponent((new URL(document.location)).searchParams.get('playerCount')) + ' Players';
         const form = document.getElementById('join-game-form');
         form.onsubmit = joinHandler;
     } else {

client/src/styles/GLOBAL.css

@@ -357,8 +357,8 @@ input {
 #navbar {
     display: flex;
     align-items: center;
-    padding: 8px 0;
-    width: 100%;
+    padding: 10px 0 0 10px;
+    width: fit-content;
     background-color: #0f0f10;
     height: 45px;
     z-index: 53000;

client/src/styles/hamburgers.css

@@ -7,9 +7,10 @@
  */
 .hamburger {
     padding: 10px 10px;
-    display: inline-block;
+    display: flex;
     cursor: pointer;
     transition-property: opacity, filter;
+    align-items: center;
     transition-duration: 0.15s;
     transition-timing-function: linear;
     font: inherit;

client/src/styles/join.css

@@ -30,6 +30,10 @@
     cursor: pointer;
 }
 
+label[for="player-new-name"] {
+    font-size: 22px !important;
+}
+
 .modal-button-container > div > input {
     cursor: pointer;
 }

client/src/views/join.html

@@ -28,14 +28,6 @@
         <div>
             <div>Room <span id='game-code'></span></div>
         </div>
-        <div>
-            <img alt='clock' src='/images/clock.svg'/>
-            <div id='game-time'></div>
-        </div>
-        <div>
-            <img alt='person' src='/images/person.svg'/>
-            <div id='game-player-count'></div>
-        </div>
     </div>
     <form id="join-game-form">
         <div id="join-game-form-content">