Deck editor mobile layout - #2

TableturfBattleClient/index.html

@@ -213,6 +213,7 @@
 				</div>
 			</section>
 			<section id="deckEditorDeckViewSection" hidden>
+				<a id="deckViewBackButton" href="#">Back</a>
 				<h3 id="deckName">Deck</h3>
 				<div>
 					<button type="button" id="deckEditButton">Edit</button>
@@ -238,6 +239,7 @@
 				</div>
 			</section>
 			<section id="deckEditorCardListSection">
+				<a id="deckCardListBackButton" href="#">Back</a>
 				<label for="cardListSortBox">
 					Sort by
 					<select id="cardListSortBox" autocomplete="off">
@@ -249,6 +251,7 @@
 				</label>
 				<div id="cardList"></div>
 			</section>
+			<div id="deckEditorCardListBackdrop"></div>
 		</div>
 		<script src="build/tsbuild.js"></script>
 	</body>

TableturfBattleClient/src/Pages/DeckEditPage.ts

@@ -5,6 +5,7 @@ const cardList = document.getElementById('cardList')!;
 const deckTestButton = document.getElementById('deckTestButton') as HTMLButtonElement;
 const deckSaveButton = document.getElementById('deckSaveButton') as HTMLButtonElement;
 const deckCancelButton = document.getElementById('deckCancelButton') as HTMLButtonElement;
+const deckCardListBackButton = document.getElementById('deckCardListBackButton') as HTMLLinkElement;
 const cardListSortBox = document.getElementById('cardListSortBox') as HTMLSelectElement;
 
 const cardButtons: CardButton[] = [ ];
@@ -56,6 +57,7 @@ function createDeckEditCardButton(index: number, card: number) {
 			for (const button2 of cardButtons) {
 				button2.checked = button2.card.number == card;
 			}
+			cardList.parentElement!.classList.add('selecting');
 		}
 	});
 	return button;
@@ -83,6 +85,7 @@ function createDeckEditEmptySlotButton(index: number) {
 			for (const button2 of cardButtons) {
 				button2.checked = false;
 			}
+			cardList.parentElement!.classList.add('selecting');
 		}
 	});
 	element.appendChild(input);
@@ -137,12 +140,27 @@ function initCardDatabase(cards: Card[]) {
 
 				deckEditCardButtons[selectedDeckCardIndex] = button3;
 				deckEditUpdateSize();
+
+				cardList.parentElement!.classList.remove('selecting');
 			}
 		});
 		cardList.appendChild(button.element);
 	}
 }
 
+deckCardListBackButton.addEventListener('click', e => {
+	e.preventDefault();
+	for (const o of deckEditCardButtons) {
+		if ((o as CardButton).card)
+			(o as CardButton).checked = false;
+		else {
+			(o as HTMLElement).getElementsByTagName('input')[0].checked = false;
+			(o as HTMLElement).classList.remove('checked');
+		}
+	}
+	cardList.parentElement!.classList.remove('selecting');
+});
+
 const cardSortOrders: { [key: string]: ((a: Card, b: Card) => number) | undefined } = {
 	'number': (a, b) => a.number - b.number,
 	'name': (a, b) => a.name.localeCompare(b.name),

TableturfBattleClient/src/Pages/DeckListPage.ts

@@ -1,4 +1,5 @@
 const deckListBackButton = document.getElementById('deckListBackButton') as HTMLLinkElement;
+const deckViewBackButton = document.getElementById('deckViewBackButton') as HTMLLinkElement;
 const deckEditorDeckViewSection = document.getElementById('deckEditorDeckViewSection')!;
 const deckNameLabel = document.getElementById('deckName')!;
 const deckViewSize = document.getElementById('deckViewSize')!;
@@ -12,7 +13,7 @@ const deckDeleteButton = document.getElementById('deckDeleteButton') as HTMLButt
 
 function showDeckList() {
 	showSection('deckList');
-	selectedDeck = null;
+	deselectDeck();
 	for (const el of deckList.getElementsByTagName('input')) {
 		(el as HTMLInputElement).checked = false;
 	}
@@ -33,6 +34,13 @@ deckListBackButton.addEventListener('click', e => {
 		location.hash = '';
 });
 
+deckViewBackButton.addEventListener('click', e => {
+	e.preventDefault();
+	clearChildren(deckCardListView);
+	deselectDeck();
+	deckEditorDeckViewSection.hidden = true;
+});
+
 function saveDecks() {
 	const json = JSON.stringify(decks.filter(d => !d.isReadOnly), [ 'name', 'cards' ]);
 	localStorage.setItem('decks', json);
@@ -114,6 +122,14 @@ function selectDeck() {
 	deckEditorDeckViewSection.hidden = false;
 }
 
+function deselectDeck() {
+	selectedDeck = null;
+	deckEditButton.disabled = true;
+	deckRenameButton.disabled = true;
+	deckCopyButton.disabled = true;
+	deckDeleteButton.disabled = true;
+}
+
 deckRenameButton.addEventListener('click', () => {
 	if (selectedDeck == null) return;
 	const name = prompt(`What will you rename ${selectedDeck.name} to?`, selectedDeck.name)?.trim();
@@ -159,4 +175,4 @@ deckDeleteButton.addEventListener('click', () => {
 });
 
 if (!canPushState)
-	deckListBackButton.href = '#';
+	deckListBackButton.href = '#'

TableturfBattleClient/tableturf.css

@@ -800,11 +800,15 @@ dialog::backdrop {
 
 #deckEditorDeckViewSection:not([hidden]), #deckEditorDeckEditSection {
 	display: grid;
-	grid-template-columns: auto 1fr;
+	grid-template-columns: 1fr auto;
 	grid-template-rows: auto auto auto 1fr;
 	height: 100vh;
 }
 
+#deckViewBackButton, #deckCardListBackButton {
+	display: none;
+}
+
 #deckName, #deckName2 {
 	grid-column: 1;
 	grid-row: 1;
@@ -824,13 +828,36 @@ dialog::backdrop {
 	height: 100vh;
 	display: grid;
 	grid-template-rows: auto 1fr;
+	grid-template-columns: auto 1fr;
+	gap: 1em;
+}
+
+#deckEditorCardListSection > label {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+#deckEditorCardListBackdrop {
+	display: none;
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	background: black;
+	opacity: 0.5;
 }
 
 /* Small display layout */
 @media (max-width: 89rem) or (max-height: 42rem) {
-	#gameSection {
+	#gameSection, #deckCardListView, #deckCardListEdit {
 		font-size: small;
 	}
+	#cardList {
+		font-size: 75%;
+		grid-row: 2;
+		grid-column: 1 / -1;
+	}
 
 	#gameSection:not([hidden]) {
 		grid-template-columns: 11em 11em [score-column] 1fr [board-column] auto 1fr [play-column-1 play-column-2] 10em;
@@ -972,4 +999,83 @@ dialog::backdrop {
 	#gameButtonsContainer button {
 		font-size: 250%;
 	}
+
+	/* Deck editor - Mobile layout */
+
+	:is(#deckListSection, #deckEditSection):not([hidden]) {
+		display: block;
+	}
+
+	:is(#deckListSection, #deckEditSection) section {
+		position: absolute;
+		background: black;
+		left: 0;
+		right: 0;
+		top: 0;
+	}
+
+	#deckEditorDeckViewSection:not([hidden]) {
+		z-index: 10;
+		grid-template-columns: auto 1fr 1fr;
+		grid-template-rows: auto auto 1fr;
+	}
+
+	#deckViewBackButton {
+		display: block;
+		grid-column: 1;
+		grid-row: 1;
+	}
+
+	#deckCardListBackButton {
+		display: block;
+		grid-column: 1;
+		grid-row: 1;
+	}
+
+	#deckName {
+		grid-column: 2;
+	}
+
+	:is(#deckEditorDeckViewSection, #deckEditorDeckEditSection) > h3 + div {
+		grid-row: 1;
+		grid-column: -2;
+	}
+
+	.deckSizeContainer {
+		grid-column: 1 / -1;
+		grid-row: 2;
+		justify-self: end;
+	}
+
+	#deckCardListView, #deckCardListEdit {
+		grid-column: 1 / -1;
+		grid-row: 3;
+		overflow-y: scroll;
+		font-size: 80%;
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+
+	#deckEditorCardListSection:not(.selecting) {
+		display: none;
+	}
+
+	#deckEditorCardListSection.selecting + #deckEditorCardListBackdrop {
+		display: block;
+	}
+
+	#deckEditSection #deckEditorCardListSection {
+		z-index: 1;
+		top: 4em;
+		height: calc(100vh - 4em);
+	}
+
+	#cardList {
+		font-size: 50%;
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr 1fr;
+	}
+
+	#cardList .card {
+		height: 13em;
+	}
 }