#7 Add a filter box to the deck editor and test UI

TableturfBattleClient/index.html

@@ -216,10 +216,13 @@
 					<div id="testDeckList"></div>
 				</div>
 				<div id="testAllCardsContainer" class="testControls" hidden>
-					<label for="testAllCardsListSortBox">
-						Sort by
-						<select id="testAllCardsListSortBox" autocomplete="off"></select>
-					</label>
+					<div id="testAllCardsHeader">
+						<label for="testAllCardsListSortBox">
+							Sort by
+							<select id="testAllCardsListSortBox" autocomplete="off"></select>
+						</label>
+						<input type="text" id="testAllCardsListFilterBox" placeholder="Filter"/>
+					</div>
 					<div id="testAllCardsList" class="cardListGrid"></div>
 				</div>
 				<div id="testControlsFooter" class="testControls">
@@ -321,11 +324,15 @@
 				</div>
 			</section>
 			<section id="deckEditorCardListSection">
-				<a id="deckCardListBackButton" href="#">Back</a>
-				<label for="cardListSortBox">
-					Sort by
-					<select id="cardListSortBox" autocomplete="off"></select>
-				</label>
+				<div id="cardListHeader">
+					<a id="deckCardListBackButton" href="#">Back</a>
+					<h3>All cards</h3>
+					<label for="cardListSortBox">
+						Sort by
+						<select id="cardListSortBox" autocomplete="off"></select>
+					</label>
+					<input type="text" id="cardListFilterBox" placeholder="Filter"/>
+				</div>
 				<div id="cardList" class="cardListGrid"></div>
 			</section>
 			<div id="deckEditorCardListBackdrop"></div>

TableturfBattleClient/src/CardList.ts

@@ -1,6 +1,7 @@
 class CardList {
 	readonly listElement: HTMLElement;
 	readonly sortBox: HTMLSelectElement;
+	readonly filterBox: HTMLInputElement;
 	readonly cardButtons: CardButton[] = [ ];
 
 	static readonly cardSortOrders: { [key: string]: ((a: Card, b: Card) => number) | undefined } = {
@@ -10,9 +11,10 @@ class CardList {
 		'rarity': (a, b) => a.rarity != b.rarity ? a.rarity - b.rarity : a.number - b.number,
 	}
 
-	constructor(listElement: HTMLElement, sortBox: HTMLSelectElement) {
+	constructor(listElement: HTMLElement, sortBox: HTMLSelectElement, filterBox: HTMLInputElement) {
 		this.listElement = listElement;
 		this.sortBox = sortBox;
+		this.filterBox = filterBox;
 
 		sortBox.addEventListener('change', () => {
 			const sortOrder = CardList.cardSortOrders[sortBox.value];
@@ -24,6 +26,12 @@ class CardList {
 			}
 		});
 
+		filterBox.addEventListener('input', () => {
+			const s = filterBox.value.toLowerCase();
+			for (const button of this.cardButtons)
+				button.element.hidden = s != '' && !button.card.name.toLowerCase().includes(s);
+		});
+
 		for (const label in CardList.cardSortOrders) {
 			const option = document.createElement('option');
 			option.value = label;
@@ -32,10 +40,18 @@ class CardList {
 		}
 	}
 
-	static fromId(id: string, sortBoxId: string) { return new CardList(document.getElementById(id)!, document.getElementById(sortBoxId) as HTMLSelectElement); }
+	static fromId(id: string, sortBoxId: string, filterBoxId: string) {
+		return new CardList(document.getElementById(id)!, document.getElementById(sortBoxId) as HTMLSelectElement, document.getElementById(filterBoxId) as HTMLInputElement);
+	}
 
 	add(button: CardButton) {
 		this.cardButtons.push(button);
 		this.listElement.appendChild(button.element);
 	}
+
+	clearFilter() {
+		this.filterBox.value = '';
+		for (const button of this.cardButtons)
+			button.element.hidden = false;
+	}
 }

TableturfBattleClient/src/Pages/DeckEditPage.ts

@@ -3,12 +3,12 @@
 const deckNameLabel2 = document.getElementById('deckName2')!;
 const deckEditSize = document.getElementById('deckEditSize')!;
 const deckCardListEdit = document.getElementById('deckCardListEdit')!;
-const cardList = CardList.fromId('cardList', 'cardListSortBox');
+const cardList = CardList.fromId('cardList', 'cardListSortBox', 'cardListFilterBox');
 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 cardListFilterBox = document.getElementById('cardListFilterBox') as HTMLSelectElement;
 const testStageSelectionList = document.getElementById('testStageSelectionList')!;
 const testStageButtons: StageButton[] = [ ];
 const testStageSelectionDialog = document.getElementById('testStageSelectionDialog') as HTMLDialogElement;

TableturfBattleClient/src/Pages/GamePage.ts

@@ -40,7 +40,7 @@ playContainers.sort((a, b) => parseInt(a.dataset.index || '0') - parseInt(b.data
 
 const testControls = document.getElementById('testControls')!;
 const testDeckList = document.getElementById('testDeckList')!;
-const testAllCardsList = CardList.fromId('testAllCardsList', 'testAllCardsListSortBox');
+const testAllCardsList = CardList.fromId('testAllCardsList', 'testAllCardsListSortBox', 'testAllCardsListFilterBox');
 const testPlacementList = document.getElementById('testPlacementList')!;
 const testDeckButton = CheckButton.fromId('testDeckButton');
 const testDeckContainer = document.getElementById('testDeckContainer')!;

TableturfBattleClient/tableturf.css

@@ -239,9 +239,11 @@ dialog::backdrop {
 	position: relative;
 	font-family: 'Splatoon 1', 'Arial Black', sans-serif;
 	font-weight: 599;
-	display: inline-block;
 	margin: 0.5em;
 }
+.card:not([hidden]) {
+	display: inline-block;
+}
 
 .card.common { --colour: rgb(89, 49, 255); }
 .card.rare { --colour: rgb(231, 180, 39); }
@@ -427,6 +429,7 @@ dialog::backdrop {
 	grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
 	overflow-y: auto;
 	justify-items: center;
+	grid-auto-rows: max-content;
 }
 
 /* Game page */
@@ -628,6 +631,13 @@ dialog::backdrop {
 	flex-grow: 1;
 }
 
+#testAllCardsHeader {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5em;
+	justify-content: end;
+}
+
 #testAllCardsList:not([hidden]) {
 	font-size: 70%;
 }
@@ -1050,7 +1060,7 @@ dialog::backdrop {
 	height: 100vh;
 	display: grid;
 	grid-template-rows: auto 1fr;
-	grid-template-columns: auto 1fr;
+	grid-template-columns: 1fr;
 	gap: 1em;
 }
 
@@ -1059,6 +1069,16 @@ dialog::backdrop {
 	grid-row: 1;
 }
 
+#cardListHeader {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5em;
+	margin: 0 0.5em;
+}
+#cardListHeader h3 {
+	flex-grow: 1;
+}
+
 #deckEditorCardListBackdrop {
 	display: none;
 	position: absolute;