Add a share button to the lobby page

This commit is contained in:
Andrio Celos 2022-10-04 12:54:06 +11:00
parent 632e53e7b3
commit 39accc6957
4 changed files with 23 additions and 3 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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 => {

View File

@ -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);