Clean up

.eslintrc

@@ -10,5 +10,5 @@
 		"eslint:recommended",
 		"plugin:prettier/recommended"
 	],
-	"ignorePatterns": ["vendor/", "web_modules/"]
+	"ignorePatterns": ["web_modules/"]
 }

public/game/index.js

@@ -1,11 +1,9 @@
 import actions from './actions.js'
 import ActionManager from './action-manager.js'
 
-// EXPERIMENTAL: nothing in this file is currently used.
-
-// While it's possible to play and do everything with actions directly and alone,
-// you have to keep passing the state around. This is an attempt at an easier API,
-// without changing any code outside of this file. If we see that this API is nicer we can refactor.
+// This function returns a "game" object with everything you need to play and control the game.
+// Note: it IS possible to modify all aspects of the game using actions directly.
+// This is purely a nicer API.
 
 // Here's an example:
 // ```
@@ -20,19 +18,20 @@ import ActionManager from './action-manager.js'
 // game.undo()
 // ```
 
-// This exists because actions.createNewGame() doesn't set a dungeon and deck.
-function gameState() {
-	let state = actions.createNewGame()
-	state = actions.setDungeon(state)
-	state = actions.addStarterDeck(state)
-	state = actions.drawCards(state)
-	return state
-}
-
 export default function createNewGame() {
 	const actionManager = ActionManager()
+
+	// This exists because actions.createNewGame() doesn't set a dungeon and deck.
+	function createNewState() {
+		let state = actions.createNewGame()
+		state = actions.setDungeon(state)
+		state = actions.addStarterDeck(state)
+		state = actions.drawCards(state)
+		return state
+	}
+
 	return {
-		state: gameState(),
+		state: createNewState(),
 		actions,
 		enqueue: actionManager.enqueue,
 		dequeue() {

public/ui/app.js

@@ -1,34 +1,24 @@
 // Third party dependencies
 import {html, Component} from '../../web_modules/htm/preact/standalone.module.js'
 
-// Game logic
+// Game logic.
 import createNewGame from '../game/index.js'
-// import ActionManager from '../game/action-manager.js'
-// import actions from './../game/actions.js'
 import {getCurrRoom, isCurrentRoomCompleted, isDungeonCompleted} from '../game/utils.js'
 import {getRandomCards} from './../game/cards.js'
 
-// Components
-import DragDrop from './dragdrop.js'
-import {Player, Monster} from './player.js'
+// UI Components
 import Cards from './cards.js'
+import DragDrop from './dragdrop.js'
 import History from './history.js'
 import Map from './map.js'
+import Overlay from './overlay.js'
+import {Player, Monster} from './player.js'
 import Rewards from './rewards.js'
 
 // Puts and gets the game state in the URL.
 const save = (state) => (location.hash = encodeURIComponent(JSON.stringify(state)))
 const load = () => JSON.parse(decodeURIComponent(window.location.hash.split('#')[1]))
 
-// A tiny overlay UI component.
-const Overlay = (props) => html`
-	<div class="Splash Overlay" topleft open>
-		<div class="Splash-details">
-			${props.children}
-		</div>
-	</div>
-`
-
 export default class App extends Component {
 	constructor() {
 		super()
@@ -41,7 +31,7 @@ export default class App extends Component {
 		// Set up a new game
 		const game = createNewGame()
 		this.game = game
-			this.state = game.state
+		this.state = game.state
 
 		// If there is a saved game state, use it.
 		const savedGame = window.location.hash && load()
@@ -58,12 +48,18 @@ export default class App extends Component {
 	dequeue(callback) {
 		this.game.dequeue()
 		this.setState(this.game.state, callback)
+		// This blocks Chrome for ~2 secs, so is disabled for now. Works in Firefox.
 		// save(nextState)
 	}
 	undo() {
 		this.game.undo()
 		this.setState(this.game.state)
 	}
+	playCard(cardId, target) {
+		const card = this.state.hand.find((c) => c.id === cardId)
+		this.game.enqueue({type: 'playCard', card, target})
+		this.dequeue()
+	}
 	endTurn() {
 		this.game.enqueue({type: 'endTurn'})
 		this.dequeue()
@@ -73,11 +69,6 @@ export default class App extends Component {
 		this.game.enqueue({type: 'goToNextRoom'})
 		this.dequeue(() => this.dequeue())
 	}
-	playCard(cardId, target) {
-		const card = this.state.hand.find((c) => c.id === cardId)
-		this.game.enqueue({type: 'playCard', card, target})
-		this.dequeue()
-	}
 	handlePlayerReward(card) {
 		this.game.enqueue({type: 'rewardPlayer', card: card})
 		this.dequeue()
@@ -119,7 +110,8 @@ export default class App extends Component {
 					html`<${Overlay}>
 						<p center><button onclick=${() => this.props.onWin()}>You win!</button></p>
 					<//> `}
-					${!didWinGame && didWin &&
+					${!didWinGame &&
+					didWin &&
 					html`<${Overlay}>
 						<${Rewards} cards=${getRandomCards()} rewardWith=${this.handlePlayerReward} />
 						<p center><button onclick=${() => this.goToNextRoom()}>Go to next room</button></p>