Merge pull request #234 from oskarrough/changes

Changes
oskarrough · Feb 26, 2024 · 4dbd291 · 4dbd291
2 parents 85b0219 + 8a3eaac
commit 4dbd291
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 53 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -18,25 +18,25 @@
     "release": "release-it"
   },
   "devDependencies": {
-    "astro": "^4.2.1",
-    "ava": "^6.1.0",
+    "astro": "^4.4.3",
+    "ava": "^6.1.1",
     "c8": "^9.1.0",
     "docco": "^0.9.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jsdoc": "^48.0.2",
+    "eslint-plugin-jsdoc": "^48.2.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "3.2.4",
-    "release-it": "^17.0.1"
+    "prettier": "3.2.5",
+    "release-it": "^17.1.1"
   },
   "dependencies": {
-    "@astrojs/preact": "^3.1.0",
-    "@vite-pwa/astro": "^0.2.0",
+    "@astrojs/preact": "^3.1.1",
+    "@vite-pwa/astro": "^0.3.0",
     "driver.js": "^1.3.1",
     "gsap": "^3.12.5",
     "htm": "^3.1.1",
     "immer": "^10.0.3",
-    "preact": "^10.19.3",
+    "preact": "^10.19.6",
     "superjson": "^2.2.1",
     "tone": "^14.8.49"
   },

diff --git a/src/ui/components/game-screen.js b/src/ui/components/game-screen.js
@@ -211,8 +211,9 @@ stw.dealCards()`)
 				let openOverlays = this.base.querySelectorAll(
 					'#Deck[open], #DrawPile[open], #DiscardPile[open], #Map[open], #ExhaustPile[open]'
 				)
+				const mapOpened = document.querySelector('#Map').hasAttribute('open')
 				openOverlays.forEach((el) => el.removeAttribute('open'))
-				this.toggleOverlay('#Menu')
+				if (!mapOpened) this.toggleOverlay('#Menu')
 			},
 			d: () => this.toggleOverlay('#Deck'),
 			a: () => this.toggleOverlay('#DrawPile'),
@@ -261,18 +262,28 @@ stw.dealCards()`)
 		this.update(this.dealCards)
 	}
 
+	/**
+	 * There's a lot here because I did not want to split into too many files.
+	 * We render most things on top of each other,
+	 * and hide them with css, for easier animations.
+	 *
+	 * .App>App-background
+	 * 	room.type === start
+	 * 	this.isDead
+	 * 	state.won
+	 * 	room.type === monster --> targets, energy, cards, actions/endturn
+	 * 	!this.didWinEntireGame && this.didWin && room.type === 'monster' --> room victory screen
+	 * 	room.type === campfire
+	 */
 	render(props, state) {
 		if (!state.player) return
 		const room = getCurrRoom(state)
-		const noEnergy = !state.player.currentEnergy
+		const showCombat = room.type === 'monster'
 
-		// There's a lot here because I did not want to split into too many files.
 		return html`
 			<div class="App" tabindex="0" onKeyDown=${(e) => this.handleShortcuts(e)}>
 				<figure class="App-background" data-room-index=${state.dungeon.y}></div>
 
-				${room.type === 'start' && html`<${Overlay}><${StartRoom} onContinue=${this.goToNextRoom} /><//>`}
-
 				${
 					this.isDead &&
 					html`<${Overlay}>
@@ -297,6 +308,19 @@ stw.dealCards()`)
 					<//> `
 				}
 
+				${room.type === 'start' && html`<${Overlay}><${StartRoom} onContinue=${this.goToNextRoom} /><//>`}
+
+				${
+					room.type === 'campfire' &&
+					html`<${Overlay}>
+						<${CampfireRoom}
+							gameState=${state}
+							onChoose=${this.handleCampfireChoice}
+							onContinue=${this.goToNextRoom}
+						><//>
+					<//>`
+				}
+
 				${
 					!this.didWinEntireGame &&
 					this.didWin &&
@@ -311,41 +335,36 @@ stw.dealCards()`)
 				}
 
 				${
-					room.type === 'campfire' &&
-					html`<${Overlay}>
-						<${CampfireRoom}
-							gameState=${state}
-							onChoose=${this.handleCampfireChoice}
-							onContinue=${this.goToNextRoom}
-						><//>
-					<//>`
-				}
+					showCombat &&
+					html`
+						<div class="Targets Split">
+							<div class="Targets-group">
+								<${Player} model=${state.player} name="Player" />
+							</div>
+							<div class="Targets-group">
+								${room.monsters &&
+								room.monsters.map((monster) => html`<${Monster} model=${monster} gameState=${state} />`)}
+							</div>
+						</div>
 
-				<div class="Targets Split">
-					<div class="Targets-group">
-						<${Player} model=${state.player} name="Player" />
-					</div>
-					<div class="Targets-group">
-						${room.monsters && room.monsters.map((monster) => html`<${Monster} model=${monster} gameState=${state} />`)}
-					</div>
-				</div>
+						<div class="Split ${!state.player.currentEnergy ? 'no-energy' : ''}">
+							<div class="EnergyBadge">
+								<span
+									class="tooltipped tooltipped-e tooltipped-multiline"
+									aria-label="Cards costs energy and this badge shows how much you have left this turn. Next turn your energy is refilled."
+									>${state.player.currentEnergy}/${state.player.maxEnergy}</span
+								>
+							</div>
+							<p class="Actions">
+								<button class="EndTurn" onClick=${() => this.endTurn()}><u>E</u>nd turn</button>
+							</p>
+						</div>
 
-				<div class="Split ${noEnergy ? 'no-energy' : ''}">
-					<div class="EnergyBadge">
-							<span class="tooltipped tooltipped-e tooltipped-multiline" aria-label="Cards costs energy and this badge shows how much you have left this turn. Next turn your energy is refilled.">${
-								state.player.currentEnergy
-							}/${state.player.maxEnergy}</span>
-					</div>
-					<p class="Actions">
-						<button class="EndTurn" onClick=${() => this.endTurn()}>
-							<u>E</u>nd turn
-						</button>
-					</p>
-				</div>
-
-				<div class="Hand">
-					<${Cards} gameState=${state} type="hand" />
-				</div>
+						<div class="Hand">
+							<${Cards} gameState=${state} type="hand" />
+						</div>
+					`
+				}
 
 				<${OverlayWithButton} id="Menu" topleft>
 					<button onClick=${() => this.toggleOverlay('#Menu')}><u>Esc</u>ape</button>

diff --git a/src/ui/styles/overlay.css b/src/ui/styles/overlay.css
@@ -50,7 +50,7 @@
 	width: 100%;
 	overflow-x: hidden;
 	overflow-y: auto;
-	transform: translate3d(0, 4rem, 0);
+	transform: translate3d(0, 1rem, 0);
 	display: block;
 	opacity: 0;
 	visibility: hidden;
@@ -80,8 +80,8 @@
 	opacity: 1;
 	transform: translate3d(0, 0, 0);
 	transition:
-		opacity 400ms 60ms var(--easing),
-		transform 400ms 60ms var(--easing);
+		opacity 600ms 60ms var(--easing),
+		transform 600ms 60ms var(--easing);
 }
 .Overlay[open] .Overlay-bg {
 	display: block;

diff --git a/src/ui/styles/targets.css b/src/ui/styles/targets.css
@@ -77,7 +77,7 @@
 .Healthbar-label {
 	position: relative;
 	z-index: 1;
-	margin: 0.2em 0;
+	margin: 0.4em 0;
 	font-weight: bold;
 	color: var(--text);
 	text-shadow: var(--text-stroke) 1px 0px 0px, var(--text-stroke) 0.540302px 0.841471px 0px,
@@ -97,7 +97,7 @@
 }
 @media (min-width: 800px) {
 	.Healthbar-label span {
-		transform: scale(1.7);
+		transform: scale(1.5);
 	}
 }
 .Healthbar-bar {
@@ -108,10 +108,10 @@
 	max-width: 100%;
 	height: 100%;
 	background: var(--yellow);
-	transition: width 400ms, background 200ms;
+	transition: width 600ms var(--easing), background 300ms var(--easing);
 	border-radius: 0.5rem;
 	font-size: 1.25rem;
-	line-height: 1.3;
+	line-height: 1.8;
 	font-weight: bold;
 	text-shadow: 1px 1px 0 hsla(0, 0%, 95%, 0.8);
 }