diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..8ff14ea
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "TableturfBattleClient/qrcodejs"]
+ path = TableturfBattleClient/qrcodejs
+ url = https://github.com/davidshimjs/qrcodejs.git
diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html
index 9882d00..81c48a3 100644
--- a/TableturfBattleClient/index.html
+++ b/TableturfBattleClient/index.html
@@ -13,6 +13,7 @@
+
@@ -58,7 +59,8 @@
diff --git a/TableturfBattleClient/qrcodejs b/TableturfBattleClient/qrcodejs
new file mode 160000
index 0000000..04f46c6
--- /dev/null
+++ b/TableturfBattleClient/qrcodejs
@@ -0,0 +1 @@
+Subproject commit 04f46c6a0708418cb7b96fc563eacae0fbf77674
diff --git a/TableturfBattleClient/src/Config.ts b/TableturfBattleClient/src/Config.ts
index ae6dde8..06e810d 100644
--- a/TableturfBattleClient/src/Config.ts
+++ b/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;
diff --git a/TableturfBattleClient/src/Pages/LobbyPage.ts b/TableturfBattleClient/src/Pages/LobbyPage.ts
index b2189e3..38f9290 100644
--- a/TableturfBattleClient/src/Pages/LobbyPage.ts
+++ b/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++) {
diff --git a/TableturfBattleClient/src/qrcode.d.ts b/TableturfBattleClient/src/qrcode.d.ts
new file mode 100644
index 0000000..400b83d
--- /dev/null
+++ b/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 }
+}
diff --git a/TableturfBattleClient/tableturf.css b/TableturfBattleClient/tableturf.css
index 3acc210..3d49162 100644
--- a/TableturfBattleClient/tableturf.css
+++ b/TableturfBattleClient/tableturf.css
@@ -8,10 +8,12 @@
src: url('assets/splatoon2.woff2') format('woff2');
}
-body {
- margin: 0;
+body, dialog {
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 {