Merge pull request #116 from AlecM33/qr-code

QR Code to join game

.eslintrc.json

@@ -7,7 +7,7 @@
   "extends": [
     "standard"
   ],
-  "ignorePatterns": ["/client/dist/*", "client/certs/*", "client/favicon_package/*", "client/webpack/*", "node_modules/*"],
+  "ignorePatterns": ["/client/dist/*", "client/certs/*", "client/favicon_package/*", "client/webpack/*", "node_modules/*", "client/src/modules/third_party/*"],
   "parser": "@babel/eslint-parser",
   "parserOptions": {
     "requireConfigFile": false,

client/src/modules/GameStateRenderer.js

@@ -4,6 +4,8 @@ import { HTMLFragments } from './HTMLFragments.js';
 import { ModalManager } from './ModalManager.js';
 import { XHRUtility } from './XHRUtility.js';
 import { UserUtility } from './UserUtility.js';
+// QRCode module via: https://github.com/soldair/node-qrcode
+import { QRCode } from './third_party/qrcode.js';
 
 export class GameStateRenderer {
     constructor (stateBucket, socket) {
@@ -69,9 +71,6 @@ export class GameStateRenderer {
 
     renderLobbyHeader () {
         removeExistingTitle();
-        const title = document.createElement('h1');
-        title.innerText = 'Lobby';
-        document.getElementById('game-title').appendChild(title);
         const gameLinkContainer = document.getElementById('game-link');
 
         const copyImg = document.createElement('img');
@@ -109,6 +108,11 @@ export class GameStateRenderer {
             '?playerCount=' + getGameSize(this.stateBucket.currentGameState.deck) +
             '&timer=' + encodeURIComponent(timeString);
 
+        QRCode.toCanvas(document.getElementById('canvas'), link, { scale: 3 }, function (error) {
+            if (error) console.error(error);
+            console.log('success!');
+        });
+
         const linkCopyHandler = (e) => {
             if (e.type === 'click' || e.code === 'Enter') {
                 navigator.clipboard.writeText(link)

client/src/modules/HTMLFragments.js

@@ -6,6 +6,7 @@ export const HTMLFragments = {
             <div tabindex='0' id='game-link'></div>
             <div id='game-code'></div>
         </div>
+        <canvas id="canvas"></canvas>
         <div id='game-parameters'>
             <div>
                 <img alt='clock' src='/images/clock.svg'/>

client/src/styles/game.css

@@ -70,8 +70,15 @@
 }
 
 #lobby-header {
-    margin-bottom: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     max-width: 95%;
+    margin: 1em 1em 0 1em;
+}
+
+#lobby-header > div:nth-child(1) {
+    width: 100%;
 }
 
 h1 {
@@ -79,10 +86,6 @@ h1 {
     margin: 0.5em auto;
 }
 
-#game-state-container > div:not(#transfer-mod-modal-background):not(#transfer-mod-modal):not(#game-people-container) {
-    margin: 1em;
-}
-
 #game-content .placeholder-row:nth-child(1) {
     margin-top: 2em;
 }
@@ -534,6 +537,11 @@ label[for='moderator'] {
     background-color: #333243;
 }
 
+canvas {
+    border-radius: 3px;
+    margin: 1em;
+}
+
 .game-player {
     border-left: 3px solid #21ba45;
     display: flex;
@@ -655,6 +663,12 @@ label[for='moderator'] {
     flex-wrap: wrap;
 }
 
+#game-parameters {
+    background-color: #333243;
+    border-radius: 3px;
+    padding: 5px 20px;
+}
+
 #game-player-list {
     overflow-y: auto;
     overflow-x: hidden;

karma.conf.js

@@ -5,6 +5,7 @@ module.exports = function(config) {
         files: [
             { pattern: 'spec/e2e/*.js', type: 'module' },
             { pattern: 'client/src/modules/*.js', type: 'module', included: true, served: true },
+            { pattern: 'client/src/modules/third_party/*.js', type: 'module', included: true, served: true },
             { pattern: 'client/src/config/*.js', type: 'module', included: true, served: true },
             { pattern: 'client/src/model/*.js', type: 'module', included: true, served: true },
             { pattern: 'client/src/view_templates/*.js', type: 'module', included: true, served: true }