Add 'show QR code' button to the lobby

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "TableturfBattleClient/qrcodejs"]
+	path = TableturfBattleClient/qrcodejs
+	url = https://github.com/davidshimjs/qrcodejs.git

TableturfBattleClient/index.html

@@ -13,6 +13,7 @@
 		<link rel="manifest" href="assets/site.webmanifest">
 		<link rel="stylesheet" href="tableturf.css"/>
 		<script src="config/config.js"></script>
+		<script src="qrcodejs/qrcode.js"></script>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta property="og:type" content="website"/>
 		<meta name="title" property="og:title" content="Tableturf Battle"/>
@@ -58,7 +59,8 @@
 		</div>
 		<div id="lobbySection" hidden>
 			<section id="lobbyPlayerListSection">
-				<p>Other players can join using a link to this page. <button type="button" id="shareLinkButton">Share link</button></p>
+				<p>Other players can join using a link to this page.<br/>
+					<button type="button" id="shareLinkButton">Share link</button><button type="button" id="showQrCodeButton">Show QR code</button></p>
 				<ul id="playerList"></ul>
 				<div id="lobbySelectedStageSection" hidden>
 					<h3>Stage</h3>
@@ -81,6 +83,13 @@
 				<p><button type="button" id="submitDeckButton" disabled>Submit</button></p>
 				<div id="lobbyDeckList" class="deckList"></div>
 			</div>
+			<dialog id="qrCodeDialog">
+				<form method="dialog">
+					<p>Scan this QR code to join the game.</p>
+					<div id="qrCode"></div>
+					<button type="submit">Close</button>
+				</form>
+			</dialog>
 		</div>
 		<div id="gameSection" hidden>
 			<div class="playerBar" data-index="1">

TableturfBattleClient/qrcodejs

@@ -0,0 +1 @@
+Subproject commit 04f46c6a0708418cb7b96fc563eacae0fbf77674

TableturfBattleClient/src/Config.ts

@@ -1,5 +1,6 @@
 interface Config {
-	apiBaseUrl: string
+	apiBaseUrl: string,
+	qrCodeGameUrl: string | null | undefined
 }
 
-var config: Config;
+declare var config: Config;

TableturfBattleClient/src/Pages/LobbyPage.ts

@@ -3,8 +3,8 @@
 
 const stageButtons: StageButton[] = [ ];
 const shareLinkButton = document.getElementById('shareLinkButton') as HTMLButtonElement;
+const showQrCodeButton = document.getElementById('showQrCodeButton') as HTMLButtonElement;
 const submitDeckButton = document.getElementById('submitDeckButton') as HTMLButtonElement;
-let lobbyShareData: ShareData | null;
 const stageSelectionForm = document.getElementById('stageSelectionForm') as HTMLFormElement;
 const stageRandomLabel = document.getElementById('stageRandomLabel')!;
 const stageRandomButton = document.getElementById('stageRandomButton') as HTMLInputElement;
@@ -14,6 +14,10 @@ const lobbyStageSection = document.getElementById('lobbyStageSection')!;
 const lobbyDeckSection = document.getElementById('lobbyDeckSection')!;
 const lobbyDeckList = document.getElementById('lobbyDeckList')!;
 
+const qrCodeDialog = document.getElementById('qrCodeDialog') as HTMLDialogElement;
+let qrCode: QRCode | null;
+let lobbyShareData: ShareData | null;
+
 let selectedStageButton = null as StageButton | null;
 
 function initLobbyPage(url: string) {
@@ -27,13 +31,29 @@ function initLobbyPage(url: string) {
 }
 
 shareLinkButton.addEventListener('click', () => {
-	if (lobbyShareData != null) {
+	if (lobbyShareData) {
 		navigator.share(lobbyShareData);
 	} else {
 		navigator.clipboard.writeText(window.location.toString()).then(() => shareLinkButton.innerText = 'Copied');
 	}
 });
 
+showQrCodeButton.addEventListener('click', () => {
+	const qrCodeUrl = config.qrCodeGameUrl ? config.qrCodeGameUrl.replace('$id', currentGame!.id) : window.location.href;
+	if (qrCode)
+		qrCode.makeCode(qrCodeUrl);
+	else
+		qrCode = new QRCode(document.getElementById("qrCode")!, qrCodeUrl);
+	qrCodeDialog.showModal();
+});
+
+qrCodeDialog.addEventListener('click', e => {
+	if (e.target == qrCodeDialog && (e.offsetX < 0 || e.offsetY < 0 || e.offsetX >= qrCodeDialog.offsetWidth || e.offsetY >= qrCodeDialog.offsetHeight)) {
+		// Background was clicked.
+		qrCodeDialog.close();
+	}
+})
+
 function clearReady() {
 	if (currentGame == null) return;
 	for (var i = 0; i < currentGame.players.length; i++) {

TableturfBattleClient/src/qrcode.d.ts

@@ -0,0 +1,17 @@
+declare class QRCode {
+	constructor(el: HTMLElement | string, vOption: string | {
+		width: number | undefined,
+		height: number | undefined,
+		colorDark: string | undefined,
+		colorLight: string | undefined,
+		correctLevel: QRCode.CorrectLevel | undefined
+	} | undefined);
+
+	makeCode(sText: string) : void;
+	clear() : void;
+
+}
+
+declare namespace QRCode {
+	enum CorrectLevel { M, L, H, Q }
+}

TableturfBattleClient/tableturf.css

@@ -8,10 +8,12 @@
 	src: url('assets/splatoon2.woff2') format('woff2');
 }
 
-body {
+body, dialog {
-	margin: 0;
 	color: white;
 	background: black;
+}
+body {
+	margin: 0;
 	font-family: 'Splatoon 2', sans-serif;
 	/* Default colours - normally the game data sent from the server will override these */
 	--primary-colour-1       : hsl(63, 99%, 49%);
@@ -104,6 +106,19 @@ footer {
 	to { left: 0; }
 }
 
+dialog {
+	text-align: center;
+}
+dialog::backdrop {
+	background: black;
+	opacity: 0.5;
+}
+
+#qrCode {
+	background: white;
+	border: 1em solid white;
+}
+
 /* Stages */
 
 #stageList {