feat(ui): add reset current hand button

Resolves #16.
kleinfreund · Jan 18, 2025 · eea4c1c · eea4c1c
1 parent aef00ab
commit eea4c1c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -328,6 +328,14 @@ <h2>Hand</h2>
 					<div class="stack">
 						<header class="panel-header">
 							<h2>Score</h2>
+
+							<button class="button" type="button" data-sc-reset-button>
+								<svg class="icon">
+									<use xlink:href="#broom-icon"></use>
+								</svg>
+
+								Reset current hand
+							</button>
 						</header>
 
 						<div class="stack">
@@ -835,6 +843,11 @@ <h2>Duplicate card?</h2>
 
 	<svg style="display: none;">
 		<defs>
+			<symbol id="broom-icon" role="img" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+				<title>Broom icon</title>
+				<path d="M235.5,216.81c-22.56-11-35.5-34.58-35.5-64.8V134.73a15.94,15.94,0,0,0-10.09-14.87L165,110a8,8,0,0,1-4.48-10.34l21.32-53a28,28,0,0,0-16.1-37,28.14,28.14,0,0,0-35.82,16,.61.61,0,0,0,0,.12L108.9,79a8,8,0,0,1-10.37,4.49L73.11,73.14A15.89,15.89,0,0,0,55.74,76.8C34.68,98.45,24,123.75,24,152a111.45,111.45,0,0,0,31.18,77.53A8,8,0,0,0,61,232H232a8,8,0,0,0,3.5-15.19ZM67.14,88l25.41,10.3a24,24,0,0,0,31.23-13.45l21-53c2.56-6.11,9.47-9.27,15.43-7a12,12,0,0,1,6.88,15.92L145.69,93.76a24,24,0,0,0,13.43,31.14L184,134.73V152c0,.33,0,.66,0,1L55.77,101.71A108.84,108.84,0,0,1,67.14,88Zm48,128a87.53,87.53,0,0,1-24.34-42,8,8,0,0,0-15.49,4,105.16,105.16,0,0,0,18.36,38H64.44A95.54,95.54,0,0,1,40,152a85.9,85.9,0,0,1,7.73-36.29l137.8,55.12c3,18,10.56,33.48,21.89,45.16Z"></path>
+			</symbol>
+
 			<symbol id="close-icon" role="img" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
 				<title>Close icon</title>
 				<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>

diff --git a/src/ui/UiState.ts b/src/ui/UiState.ts
@@ -43,6 +43,7 @@ export class UiState {
 
 	#scoreCardContainer: HTMLElement
 	#playedHandEl: HTMLElement
+	#resetButton: HTMLButtonElement
 
 	#savesContainer: HTMLElement
 	#saveRowTemplate: HTMLTemplateElement
@@ -79,6 +80,8 @@ export class UiState {
 
 		this.#scoreCardContainer = form.querySelector<HTMLElement>('[data-sc-container]')!
 		this.#playedHandEl = form.querySelector<HTMLElement>('[data-sc-played-hand]')!
+		this.#resetButton = form.querySelector<HTMLButtonElement>('[data-sc-reset-button]')!
+		this.#resetButton.addEventListener('click', () => this.#reset())
 
 		this.#savesContainer = document.querySelector<HTMLElement>('[data-s-saves]')!
 		this.#saveRowTemplate = document.querySelector<HTMLTemplateElement>('template#save-row')!
@@ -115,6 +118,10 @@ export class UiState {
 		this.#applyState(state)
 	}
 
+	#reset () {
+		this.#populateUiWithState(getState({}))
+	}
+
 	#calculate () {
 		this.#form.requestSubmit()
 		for (const el of this.#playingCardContainer.children) {