Fix a deck editor display issue

TableturfBattleClient/index.html

@@ -209,7 +209,10 @@
 				<a id="deckListBackButton" href=".">Back</a>
 				<h3>Deck list</h3>
 				<div id="deckList" class="deckList">
-					<button id="newDeckButton">New deck</label>
+					<div id="addDeckControls">
+						<button id="newDeckButton">New deck</button>
+						<button id="importDeckButton">Import deck</button>
+					</div>
 				</div>
 			</section>
 			<section id="deckEditorDeckViewSection" hidden>
@@ -217,6 +220,7 @@
 				<h3 id="deckName">Deck</h3>
 				<div>
 					<button type="button" id="deckEditButton">Edit</button>
+					<button type="button" id="deckExportButton">Export</button>
 					<button type="button" id="deckRenameButton">Rename</button>
 					<button type="button" id="deckCopyButton">Copy</button>
 					<button type="button" id="deckDeleteButton" class="danger">Delete</button>
@@ -225,6 +229,25 @@
 				<div id="deckCardListView">
 				</div>
 			</section>
+			<dialog id="deckImportDialog">
+				<form id="deckImportForm" method="dialog">
+					<textarea id="deckImportTextBox" rows="24" cols="45"></textarea>
+					<div id="deckImportErrorBox" class="error" hidden></div>
+					<div>
+						<button type="submit" id="deckImportOkButton">OK</button>
+						<button type="submit" id="deckImportCancelButton">Cancel</button>
+					</div>
+				</form>
+			</dialog>
+			<dialog id="deckExportDialog">
+				<form method="dialog">
+					<textarea id="deckExportTextBox" readonly rows="24" cols="45"></textarea>
+					<div>
+						<button type="button" id="deckExportCopyButton">Copy</button>
+						<button type="submit">Close</button>
+					</div>
+				</form>
+			</dialog>
 		</div>
 		<div id="deckEditSection" hidden>
 			<section id="deckEditorDeckEditSection">

TableturfBattleClient/src/Pages/DeckListPage.ts

@@ -5,12 +5,25 @@ const deckNameLabel = document.getElementById('deckName')!;
 const deckViewSize = document.getElementById('deckViewSize')!;
 const deckList = document.getElementById('deckList')!;
 const deckCardListView = document.getElementById('deckCardListView')!;
+const addDeckControls = document.getElementById('addDeckControls')!;
 const newDeckButton = document.getElementById('newDeckButton') as HTMLButtonElement;
+const importDeckButton = document.getElementById('importDeckButton') as HTMLButtonElement;
 const deckEditButton = document.getElementById('deckEditButton') as HTMLButtonElement;
+const deckExportButton = document.getElementById('deckExportButton') as HTMLButtonElement;
 const deckRenameButton = document.getElementById('deckRenameButton') as HTMLButtonElement;
 const deckCopyButton = document.getElementById('deckCopyButton') as HTMLButtonElement;
 const deckDeleteButton = document.getElementById('deckDeleteButton') as HTMLButtonElement;
 
+const deckExportDialog = document.getElementById('deckExportDialog') as HTMLDialogElement;
+const deckExportCopyButton = document.getElementById('deckExportCopyButton') as HTMLButtonElement;
+const deckExportTextBox = document.getElementById('deckExportTextBox') as HTMLTextAreaElement;
+
+const deckImportDialog = document.getElementById('deckImportDialog') as HTMLDialogElement;
+const deckImportForm = document.getElementById('deckImportForm') as HTMLFormElement;
+const deckImportTextBox = document.getElementById('deckImportTextBox') as HTMLTextAreaElement;
+const deckImportErrorBox = document.getElementById('deckImportErrorBox')!;
+const deckImportOkButton = document.getElementById('deckImportOkButton') as HTMLButtonElement;
+
 function showDeckList() {
 	showSection('deckList');
 	deselectDeck();
@@ -82,16 +95,37 @@ function createDeckButton(index: number, deck: Deck) {
 
 	label.appendChild(document.createTextNode(deck.name));
 
-	deckList.insertBefore(label, newDeckButton);
+	deckList.insertBefore(label, addDeckControls);
 	return label;
 }
 
 newDeckButton.addEventListener('click', () => {
-	selectedDeck = new Deck(`Deck ${decks.length}`, [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], false);
+	selectedDeck = new Deck(`Deck ${decks.length + 1}`, [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], false);
 	createDeckButton(decks.length, selectedDeck);
 	decks.push(selectedDeck);
 	editDeck();
 });
+importDeckButton.addEventListener('click', () => {
+	deckImportErrorBox.hidden = true;
+	deckImportDialog.showModal();
+});
+deckImportForm.addEventListener('submit', e => {
+	if (e.submitter == deckImportOkButton) {
+		try {
+			const deck = JSON.parse(deckImportTextBox.value) as Deck;
+			if (typeof(deck) != 'object' || !Array.isArray(deck.cards) || deck.cards.length != 15 || deck.cards.find(i => i < 0 || i > cardDatabase.cards!.length))
+				throw new SyntaxError('Invalid JSON deck');
+			if (!deck.name) deck.name = `Deck ${decks.length + 1}`;
+			createDeckButton(decks.length, deck);
+			decks.push(deck);
+		} catch (ex: any) {
+			e.preventDefault();
+			deckImportErrorBox.innerText = ex.message;
+			deckImportErrorBox.hidden = false;
+			deckImportTextBox.focus();
+		}
+	}
+});
 
 deckEditButton.addEventListener('click', editDeck);
 
@@ -130,6 +164,19 @@ function deselectDeck() {
 	deckDeleteButton.disabled = true;
 }
 
+deckExportButton.addEventListener('click', () => {
+	if (selectedDeck == null) return;
+	const json = JSON.stringify(selectedDeck, [ 'name', 'cards' ], '\t');
+	deckExportTextBox.value = json;
+	deckExportCopyButton.innerText = 'Copy';
+	deckExportDialog.showModal();
+});
+deckExportCopyButton.addEventListener('click', () => {
+	if (selectedDeck == null) return;
+	navigator.clipboard.writeText(deckExportTextBox.value);
+	deckExportCopyButton.innerText = 'Copied';
+});
+
 deckRenameButton.addEventListener('click', () => {
 	if (selectedDeck == null) return;
 	const name = prompt(`What will you rename ${selectedDeck.name} to?`, selectedDeck.name)?.trim();

TableturfBattleClient/tableturf.css

@@ -35,6 +35,12 @@ h1, h2, h3, h4, h5, h6 {
 	font-weight: 599;
 }
 
+.error {
+	border: 1px solid red;
+	background: #ff000040;
+	padding: 0 0.5em;
+}
+
 /* Home page */
 
 #preGameSection {
@@ -367,6 +373,8 @@ dialog::backdrop {
 	display: flex;
 	flex-wrap: wrap;
 	overflow-y: scroll;
+	grid-row: 2;
+	grid-column: 1 / -1;
 }
 
 /* Game page */
@@ -762,14 +770,11 @@ dialog::backdrop {
 :is(#deckListSection, #deckEditSection):not([hidden]) {
 	height: 100vh;
 	display: grid;
-	grid-template-columns: 1fr 1fr;
+	grid-template-columns: auto auto;
 }
 
-.deckList :is(label, button) {
-	width: 20rem;
-	height: 3rem;
+.deckList > label, #addDeckControls > button {
 	background: dimgrey;
-	margin: 0.5em;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -778,6 +783,19 @@ dialog::backdrop {
 	font-size: inherit;
 	border: inherit;
 }
+.deckList > * {
+	width: 20rem;
+	height: 3rem;
+	margin: 0.5em;
+}
+#addDeckControls {
+	display: flex;
+	align-items: stretch;
+	gap: 1em;
+}
+#addDeckControls > button {
+	flex-grow: 1;
+}
 
 .deckList {
 	display: flex;
@@ -803,7 +821,7 @@ dialog::backdrop {
 
 #deckEditorDeckViewSection:not([hidden]), #deckEditorDeckEditSection {
 	display: grid;
-	grid-template-columns: 1fr auto;
+	grid-template-columns: minmax(min-content, auto) min-content;
 	grid-template-rows: auto auto auto 1fr;
 	height: 100vh;
 }