From dabf41d907589a610d7d03914630db765422601f Mon Sep 17 00:00:00 2001
From: oskarrough <oskar@rough.dk>
Date: Mon, 2 Oct 2023 00:55:22 +0200
Subject: [PATCH] Small refactors

---
 src/ui/pages/game-screen.js | 42 +++++++++++++++++--------------------
 src/ui/slay-the-web.js      |  6 ++++--
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/ui/pages/game-screen.js b/src/ui/pages/game-screen.js
index c550adc4..fc79bced 100644
--- a/src/ui/pages/game-screen.js
+++ b/src/ui/pages/game-screen.js
@@ -39,13 +39,6 @@ export default class App extends Component {
 		this.endTurn = this.endTurn.bind(this)
 	}
 
-	get didCompleteRoom() {
-		return isCurrRoomCompleted(this.state)
-	}
-	get didWinEntireGame() {
-		return isDungeonCompleted(this.state)
-	}
-
 	componentDidMount() {
 		const urlParams = new URLSearchParams(window.location.search)
 		const debugMode = urlParams.has('debug')
@@ -114,7 +107,7 @@ stw.dealCards()`)
 	}
 
 	/**
-	 * Plays a card while juggling DOM animations and set state.
+	 * Plays a card while juggling DOM animations, sound and state.
 	 * @param {string} cardId
 	 * @param {string} target
 	 * @param {HTMLElement} cardElement
@@ -179,25 +172,26 @@ stw.dealCards()`)
 		this.overlayIndex++
 	}
 
-	handleShortcuts(event) {
-		if (event.target.nodeName === 'INPUT') return
-		const {key} = event
+	closeOverlays() {
+		const selector = '#Deck[open], #DrawPile[open], #DiscardPile[open], #Map[open], #exhaustPile[open]'
+		let openOverlays = this.base.querySelectorAll(selector)
+		openOverlays.forEach((el) => el.removeAttribute('open'))
+	}
+
+	handleShortcuts({target, key}) {
+		if (target.nodeName === 'INPUT') return
 		const keymap = {
 			e: () => this.endTurn(),
 			u: () => this.undo(),
-			Escape: () => {
-				// let openOverlays = this.base.querySelectorAll('.Overlay:not(#Menu)[open]')
-				let openOverlays = this.base.querySelectorAll(
-					'#Deck[open], #DrawPile[open], #DiscardPile[open], #Map[open], #exhaustPile[open]',
-				)
-				openOverlays.forEach((el) => el.removeAttribute('open'))
-				this.toggleOverlay('#Menu')
-			},
 			d: () => this.toggleOverlay('#Deck'),
 			a: () => this.toggleOverlay('#DrawPile'),
 			s: () => this.toggleOverlay('#DiscardPile'),
 			m: () => this.toggleOverlay('#Map'),
 			x: () => this.toggleOverlay('#exhaustPile'),
+			Escape: () => {
+				this.closeOverlays()
+				this.toggleOverlay('#Menu')
+			},
 		}
 		keymap[key] && keymap[key]()
 	}
@@ -244,7 +238,9 @@ stw.dealCards()`)
 	render(props, state) {
 		if (!state.player) return
 		const room = getCurrRoom(state)
-		const isDead = this.state.player.currentHealth < 1
+		const didCompleteRoom = isCurrRoomCompleted(this.state)
+		const didWinEntireGame = isDungeonCompleted(this.state)
+		const isPlayerDead = state.player.currentHealth < 1
 		const {game, onContinue, endTurn, handleCampfireChoice} = this
 
 		// There's a lot here because I did not want to split into too many files.
@@ -252,15 +248,15 @@ stw.dealCards()`)
 			<div class="App" tabindex="0" onKeyDown=${(e) => this.handleShortcuts(e)}>
 				<figure class="App-background" data-room-index=${state.dungeon.y}></div>
 
-				${isDead && html`<${Overlay}><${DeathRoom} game=${game} gameState=${state} onContinue=${props.onLoss} /><//>`}
+				${isPlayerDead && html`<${Overlay}><${DeathRoom} game=${game} gameState=${state} onContinue=${props.onLoss} /><//>`}
 				${state.won && html`<${Overlay}><${WonRoom} gameState=${game} state=${state} onContinue=${props.onWin} /><//>`}
 
 				${room.type === 'start' && html`<${Overlay}><${StartRoom} onContinue=${onContinue} /><//>`}
 				${room.type === 'monster' && html`<${FightRoom} gameState=${state} onEndTurn=${endTurn} />`}
 				${
 					room.type === 'monster' &&
-					!this.didWinEntireGame &&
-					this.didCompleteRoom &&
+					!didWinEntireGame &&
+					didCompleteRoom &&
 					html`<${Overlay}>
 						<${VictoryRoom} gameState=${state} handlePlayerReward=${this.handlePlayerReward} onContinue=${onContinue} />
 					<//> `
diff --git a/src/ui/slay-the-web.js b/src/ui/slay-the-web.js
index 961f6ddc..3d91af87 100644
--- a/src/ui/slay-the-web.js
+++ b/src/ui/slay-the-web.js
@@ -41,8 +41,10 @@ class SlayTheWeb extends Component {
 		this.setState({gameMode: GameModes.splash})
 	}
 	render(props, {gameMode}) {
-		if (gameMode === GameModes.splash) return html`<${SplashScreen} onNewGame=${this.handleNewGame} onContinue=${() => this.handleContinueGame()}><//>`
-		if (gameMode === GameModes.gameplay) return html` <${GameScreen} onWin=${this.handleWin} onLoss=${this.handleLoose}><//>`
+		if (gameMode === GameModes.splash)
+			return html`<${SplashScreen} onNewGame=${this.handleNewGame} onContinue=${() => this.handleContinueGame()}><//>`
+		if (gameMode === GameModes.gameplay)
+			return html`<${GameScreen} onWin=${this.handleWin} onLoss=${this.handleLoose}><//>`
 		if (gameMode === GameModes.win) return html` <${WinScreen} onNewGame=${this.handleNewGame}><//>`
 	}
 }