From 39accc6957709919e8aa7b11ca0e12edc4ccc837 Mon Sep 17 00:00:00 2001
From: Andrio Celos <AndrioCelos@users.noreply.github.com>
Date: Tue, 4 Oct 2022 12:54:06 +1100
Subject: [PATCH] Add a share button to the lobby page

---
 TableturfBattleClient/index.html              |  3 +--
 TableturfBattleClient/src/Pages/LobbyPage.ts  | 20 +++++++++++++++++++
 .../src/Pages/PreGamePage.ts                  |  1 +
 TableturfBattleClient/src/app.ts              |  2 +-
 4 files changed, 23 insertions(+), 3 deletions(-)
diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html
index 5527326..6b833ee 100644
--- a/TableturfBattleClient/index.html
+++ b/TableturfBattleClient/index.html
@@ -8,7 +8,6 @@
 	</head>
 	<body>
 		<div id="noJSSection">This application requires JavaScript.</div>
-		<div id="loadingSection">Loading game data...</div>
 		<div id="preGameSection" hidden>
 			<p><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/logo.png"></p>
 			<h1>Tableturf Battle</h1>
@@ -21,7 +20,7 @@
 			</footer>
 		</div>
 		<div id="lobbySection" hidden>
-			<p>Waiting for players to join.</p>
+			<p>Other players can join using a link to this page. <button type="button" id="shareLinkButton">Share link</button></p>
 			<ul id="playerList"></ul>
 		</div>
 		<div id="deckSection" hidden>
diff --git a/TableturfBattleClient/src/Pages/LobbyPage.ts b/TableturfBattleClient/src/Pages/LobbyPage.ts
index f1cccd6..cfc87f7 100644
--- a/TableturfBattleClient/src/Pages/LobbyPage.ts
+++ b/TableturfBattleClient/src/Pages/LobbyPage.ts
@@ -1,5 +1,25 @@
 let cardButtons: CardButton[] = [ ];
+let shareLinkButton = document.getElementById('shareLinkButton') as HTMLButtonElement;
 let submitDeckButton = document.getElementById('submitDeckButton') as HTMLButtonElement;
+let lobbyShareData: ShareData | null;
+
+function initLobbyPage(url: string) {
+	lobbyShareData = { url: url, title: 'Tableturf Battle' };
+	if (navigator.canShare && navigator.canShare(lobbyShareData)) {
+		shareLinkButton.innerText = 'Share link';
+	} else {
+		lobbyShareData = null;
+		shareLinkButton.innerText = 'Copy link';
+	}
+}
+
+shareLinkButton.addEventListener('click', () => {
+	if (lobbyShareData != null) {
+		navigator.share(lobbyShareData);
+	} else {
+		navigator.clipboard.writeText(window.location.toString()).then(() => shareLinkButton.innerText = 'Copied');
+	}
+});
 
 function clearReady() {
 	if (currentGame == null) return;
diff --git a/TableturfBattleClient/src/Pages/PreGamePage.ts b/TableturfBattleClient/src/Pages/PreGamePage.ts
index 068d5e0..257b242 100644
--- a/TableturfBattleClient/src/Pages/PreGamePage.ts
+++ b/TableturfBattleClient/src/Pages/PreGamePage.ts
@@ -60,6 +60,7 @@ function tryJoinGame(name: string, idOrUrl: string) {
 function getGameInfo(gameID: string, myPlayerIndex: number | null) {
 	board.playerIndex = myPlayerIndex;
 	window.location.hash = `#${gameID}`;
+	initLobbyPage(window.location.toString());
 
 	const webSocket = new WebSocket(`${config.apiBaseUrl.replace(/(http)(s)?\:\/\//, 'ws$2://')}/websocket?gameID=${gameID}&clientToken=${clientToken}`);
 	webSocket.addEventListener('open', e => {
diff --git a/TableturfBattleClient/src/app.ts b/TableturfBattleClient/src/app.ts
index 2d976f9..cddd256 100644
--- a/TableturfBattleClient/src/app.ts
+++ b/TableturfBattleClient/src/app.ts
@@ -4,7 +4,7 @@ function delay(ms: number) { return new Promise(resolve => setTimeout(() => reso
 
 // Sections
 const sections = new Map<string, HTMLDivElement>();
-for (var id of [ 'noJS', 'loading', 'preGame', 'lobby', 'deck', 'game' ]) {
+for (var id of [ 'noJS', 'preGame', 'lobby', 'deck', 'game' ]) {
 	let el = document.getElementById(`${id}Section`) as HTMLDivElement;
 	if (!el) throw new EvalError(`Element not found: ${id}Section`);
 	sections.set(id, el);
