Merge pull request #223 from oskarrough/fix/dragdroptargets

Fix stuck cards after being dropped

Author: oskarrough

src/game/actions.js

@@ -1,11 +1,14 @@
-import {produce} from 'immer'
+import {produce, enableMapSet} from 'immer'
 import {clamp, shuffle} from '../utils.js'
 import {isDungeonCompleted, getTargets, getCurrRoom} from './utils-state.js'
 import powers from './powers.js'
 import {conditionsAreValid} from './conditions.js'
 import {createCard, CardTargets} from './cards.js'
 import {dungeonWithMap} from '../content/dungeon-encounters.js'
 
+// Enable support for Map and Set. See https://immerjs.github.io/immer/installation/
+enableMapSet()
+
 /** @typedef {import('./dungeon.js').Dungeon} Dungeon */
 /** @typedef {import('./cards.js').CARD} CARD */
 /** @typedef {import('./rooms.js').Room} Room */

src/game/utils-state.js

@@ -42,21 +42,24 @@ export function getCurrRoom(state) {
 /**
  * Returns an array of targets (player or monsters) in the current room.
  * @param {State} state
- * @param {CardTargets} targetQuery
+ * @param {CardTargets} targetQuery - like player, enemy0, enemy1
  * @returns {Array<MONSTER>}
  */
 export function getTargets(state, targetQuery) {
-	if (!targetQuery || typeof targetQuery !== 'string') {
-		throw new Error('Bad query string')
-	}
-	if (targetQuery === CardTargets.player) return [state.player]
+	if (!targetQuery || typeof targetQuery !== 'string') throw new Error('Bad query string')
 	const room = getCurrRoom(state)
+
+	// Player
+	if (targetQuery.includes(CardTargets.player)) return [state.player]
+	// All enemies
 	if (targetQuery === CardTargets.allEnemies) return room.monsters
+	// Single enemy
 	if (targetQuery.startsWith(CardTargets.enemy)) {
 		const index = Number(targetQuery.split('enemy')[1])
 		const monster = room.monsters[index]
 		if (monster) return [monster]
 	}
+
 	throw new Error(`Could not find target "${targetQuery}" on ${state.dungeon.y}/${state.dungeon.x}`)
 }
 

src/ui/components/map.js

@@ -13,7 +13,7 @@ export default function map({dungeon, onMove}) {
 		<div class="MapContainer">
 			<${SlayMap} dungeon=${dungeon} x=${x} y=${y} scatter=${20} onSelect=${onMove}><//>
 
-			<footer class="MapFooter">
+			<footer hidden class="MapFooter">
 				<h2>History</h2>
 				<p>Current:. Floor ${y}. Node ${x}</p>
 				<ul>

src/ui/components/start-room.js

@@ -8,7 +8,7 @@ export default class StartRoom extends Component {
 				<br/>
 				<div class="Box">
 					<ul class="Options">
-						<li><button onClick=${() => this.props.onContinue()}>View the map</button></li>
+						<li><button onClick=${() => this.props.onContinue()}>Open the map</button></li>
 					</ul>
 				</div>
 				<p center>

src/ui/dragdrop.js

@@ -3,10 +3,10 @@ import {cardHasValidTarget} from '../game/utils-state.js'
 import gsap from './animations.js'
 import sounds from './sounds.js'
 
-// Class to add to the element we are dragging over.
+/** Class to add to the element we are dragging over */
 const overClass = 'is-dragOver'
 
-// Makes the card fly back into the hand.
+/** Makes the card fly back into the hand */
 function animateCardToHand(draggable) {
 	return gsap.to(draggable.target, {x: draggable.startX, y: draggable.startY, zIndex: 0})
 }

src/ui/styles/app.css

@@ -18,8 +18,6 @@ html {
 	background-position: 50%;
 	background-size: cover;
 	background-repeat: no-repeat;
-	overflow-x: hidden;
-	overflow-y: scroll;
 }
 
 /* Minimum font size */
@@ -46,6 +44,9 @@ input {
 
 body {
 	margin: 0;
+	overflow: hidden;
+	/* overflow-x: hidden; */
+	/* overflow-y: scroll; */
 }
 
 [inverse] {

src/ui/styles/overlay.css

@@ -48,6 +48,7 @@
 	bottom: 0;
 	left: 0;
 	width: 100%;
+	overflow-x: hidden;
 	overflow-y: auto;
 	transform: translate3d(0, 4rem, 0);
 	display: block;

tests/actions.js

@@ -113,6 +113,7 @@ test('getTargets utility works', (t) => {
 	t.deepEqual(getTargets(state, 'enemy1')[0], room.monsters[1])
 	t.throws(() => getTargets(state, 'doesntexist'))
 	t.deepEqual(getTargets(state, 'player')[0], state.player)
+	t.deepEqual(getTargets(state, 'player0')[0], state.player)
 })
 
 test('can manipulate player hp', (t) => {