Lint, fix map after immer update

public/collection.html

@@ -25,8 +25,8 @@
 
 		const Cardss = (props) => html`
 			<article class="Splash">
-				<h2>${cards.length} Card Collection</h2>
 				<p><a href="/" class="Button">Back</a></p>
+				<h2>${cards.length} Card Collection</h2>
 				<div class="Cards Cards--grid">
 					${cards.map(card => Card(card))}
 				</div>

public/content/cards.js

@@ -238,7 +238,7 @@ export default [
 			this.description = 'Deal 3 damage to all enemies and suck it into life'
 			this.damage = 3
 		},
-	}
+	},
 	// {name: 'Flex', energy: 0, type: 'skill', description: 'Gain 2 Strength.'},
 ]
 

public/game/actions.js

@@ -166,15 +166,13 @@ function addHealth(state, {target, amount}) {
 	})
 }
 
-function addRegenEqualToAllDamage(state, { card }) {
+function addRegenEqualToAllDamage(state, {card}) {
 	return produce(state, (draft) => {
 		const room = getCurrRoom(state)
-		const aliveMonsters = room.monsters.filter(monster => {
+		const aliveMonsters = room.monsters.filter((monster) => {
 			return monster.currentHealth > 0
 		})
-		const {
-			regen = 0
-		} = state.player.powers
+		const {regen = 0} = state.player.powers
 		const totalDamage = aliveMonsters.length * card.damage
 		draft.player.powers.regen = totalDamage + regen
 	})
@@ -375,8 +373,6 @@ function dealDamageEqualToBlock(state, {target}) {
 	return removeHealth(state, {target, amount: block})
 }
 
-
-
 export default {
 	addCardToHand,
 	addHealth,

public/game/cards.js

@@ -78,7 +78,7 @@ export class Card {
 	// Runs through a list of actions and return the updated state.
 	// Called when the card is played.
 	// You CAN overwrite it, just make sure to return a new state.
-	use(state, {target, card }) {
+	use(state, {target, card}) {
 		if (!this.actions) return state
 		let newState = state
 		this.actions.forEach((action) => {

public/ui/app.js

@@ -217,42 +217,62 @@ stw.dealCards()`)
 				${
 					isDead &&
 					html`<${Overlay}>
-						<p center>You are dead.</p>
-						<button onclick=${() => this.props.onLoose()}>Try again?</button>
-					<//> `
+
+							<p center>You are dead.</p>
+
+							<button onclick=${() => this.props.onLoose()}>Try again?</button>
+
+						<//>
+						  `
 				}
 				${
 					didWinEntireGame &&
 					html`<${Overlay}>
-						<p center><button onclick=${() => this.props.onWin()}>You win!</button></p>
-					<//> `
+
+							<p center><button onclick=${() => this.props.onWin()}>You win!</button></p>
+
+						<//>
+						  `
 				}
 				${
 					!didWinEntireGame &&
 					didWin &&
 					room.type === 'monster' &&
 					html`<${Overlay}>
-						<h1 center medium>Victory. Onwards!</h1>
-						${!state.didPickCard
-							? html`
-									<p center>Here is your reward. Pick a card to add to your deck.</p>
-									<${CardChooser}
-										cards=${getCardRewards(3)}
-										didSelectCard=${(card) => this.handlePlayerReward('addCard', card)}
-									/>
-							  `
-							: html`<p center>Added <strong>${state.didPickCard.name}</strong> to your deck.</p>`}
-						<p center><button onclick=${() => this.goToNextRoom()}>Go to next room</button></p>
-					<//> `
+
+							<h1 center medium>Victory. Onwards!</h1>
+							 ${!state.didPickCard
+								? html`
+
+										<p center>Here is your reward. Pick a card to add to your deck.</p>
+
+										<${CardChooser}
+											cards=${getCardRewards(3)}
+											didSelectCard=${(card) => this.handlePlayerReward('addCard', card)}
+										/>
+
+								  `
+								: html`<p center>
+										 Added
+										<strong>${state.didPickCard.name}</strong>
+										 to your deck.
+								  </p>`}
+							<p center><button onclick=${() => this.goToNextRoom()}>Go to next room</button></p>
+
+						<//>
+						  `
 				}
 				${
 					room.type === 'campfire' &&
-					html`<${Overlay}
-						><${CampfireRoom}
+					html`<${Overlay}>
+
+						<${CampfireRoom}
 							gameState=${state}
 							onChoose=${this.handleCampfireChoice}
 							onContinue=${this.goToNextRoom}
-					/><//>`
+						/>
+
+					<//>`
 				}
 
 				<div class="Targets Split">
@@ -300,20 +320,32 @@ stw.dealCards()`)
 							</ul>
 							<${History} future=${this.game.future.list} past=${this.game.past.list} />
 							${
-								this.game.past.list.length
-									? html`
-											<p>
-												<button onclick=${() => this.undo()}><u>U</u>ndo</button><br />
-											</p>
-									  `
-									: ''
+								this.game.past.list.length &&
+								html`<p>
+
+									<button onclick=${() => this.undo()}>
+
+										<u>U</u>
+										ndo
+									</button>
+
+									<br />
+
+								</p>`
 							}
 							<p style="margin-top:auto"><a rel="noreferrer" target="_blank" href="https://github.com/oskarrough/slaytheweb">View source</a></p>
 						</div>
 					</div>
 				<//>
 				<${OverlayWithButton} id="Map" open topright key=${1}>
-					<button align-right onClick=${() => this.toggleOverlay('#Map')}><u>M</u>ap</button>
+					${
+						room.type === 'start' &&
+						html`<button align-right onClick=${() => this.toggleOverlay('#Map')}>
+
+							<u>M</u>
+							ap
+						</button>`
+					}
 					<div class="Overlay-content">
 						<${Map} dungeon=${state.dungeon} onMove=${this.handleMapMove} />
 					</div>

public/ui/history.js

@@ -19,7 +19,7 @@ export default class Queue extends Component {
 		// <h2>Future ${time}</h2>
 		// <${List} items=${props.future} />
 		return html`
-			<div>
+			<div class="History">
 				<h3>Your past ${time}</h3>
 				<${List} items=${props.past} />
 			</div>

public/ui/map.js

@@ -1,30 +1,34 @@
 import {Component, html} from '../web_modules/htm/preact/standalone.module.js'
 import {isRoomCompleted, random as randomBetween} from '../game/utils.js'
+import produce from '../web_modules/immer.js'
 
 export default function map(props) {
 	const {graph, x, y, pathTaken} = props.dungeon
 
 	return html`
 		<div class="MapContainer">
 			<h2>Map of the dungeon. Floor ${y}. Node ${x}</h2>
+
 			<${SlayMap}
 				dungeon=${props.dungeon}
 				graph=${graph}
 				x=${x}
 				y=${y}
 				onSelect=${props.onMove}
 			><//>
+
 			<h2>Log</h2>
 			<ul>
-				${pathTaken.map((path) => html`<li>${path.y}.${path.x}</li>`)}
+				 ${pathTaken.map((path) => html`<li>${path.y}.${path.x}</li>`)}
 			</ul>
 		</div>
 	`
 }
 
 export class SlayMap extends Component {
 	componentDidMount() {
-		this.setState({graph: this.addElementsToGraph(this.props.graph)})
+		const graphWithDOM = this.addElementsToGraph(this.props.graph)
+		this.setState({graph: graphWithDOM})
 	}
 
 	componentDidUpdate(prevProps) {
@@ -46,14 +50,17 @@ export class SlayMap extends Component {
 		}
 	}
 
+	// Returns a new graph where each graph node has a new "el" property pointing to the DOM element
 	addElementsToGraph(graph) {
-		graph.forEach((row, rowIndex) => {
-			row.forEach((node, nodeIndex) => {
-				if (!node.type) return
-				node.el = this.base.childNodes[rowIndex].childNodes[nodeIndex]
+		return produce(graph, (draft) => {
+			draft.forEach((row, rowIndex) => {
+				row.forEach((node, nodeIndex) => {
+					if (!node.type) return
+					console.log(Object.isExtensible(node))
+					node.el = this.base.childNodes[rowIndex].childNodes[nodeIndex]
+				})
 			})
 		})
-		return graph
 	}
 
 	// Shake the positions up a bit.
@@ -129,11 +136,13 @@ export class SlayMap extends Component {
 		}
 		const edgesFromCurrentNode = graph[y][x].edges
 		return html`
+
 			<slay-map>
-				${graph.map(
+				 ${graph.map(
 					(row, rowIndex) => html`
+
 						<slay-map-row current=${rowIndex === y}>
-							${row.map((node, nodeIndex) => {
+							 ${row.map((node, nodeIndex) => {
 								const isCurrent = rowIndex === y && nodeIndex === x
 								const canVisit = edgesFromCurrentNode.has(node) && isRoomCompleted(graph[y][x].room)
 								return html`<slay-map-node
@@ -142,13 +151,18 @@ export class SlayMap extends Component {
 									can-visit=${canVisit}
 									did-visit=${node.didVisit}
 									onClick=${() => props.onSelect({x: nodeIndex, y: rowIndex})}
-									><span>${emojiFromNodeType(node.type)}</span></slay-map-node
-								>`
+								>
+
+									<span>${emojiFromNodeType(node.type)}</span>
+
+								</slay-map-node>`
 							})}
 						</slay-map-row>
+
 					`
 				)}
 			</slay-map>
+
 		`
 	}
 }

public/ui/styles/app.css

@@ -78,6 +78,7 @@ button {
 	box-shadow: 0 0.2em var(--text-inverse);
 	text-decoration: none;
 }
+.Button + .Button,
 button + button {
 	margin-left: 0.2em;
 }
@@ -360,7 +361,9 @@ h2 {
 .Options > li {
 	margin: 1rem;
 }
+.Options .Button,
 .Options button {
+	display: block;
 	width: 100%;
 }
 
@@ -385,3 +388,9 @@ h2 {
 	cursor: pointer;
 	cursor: url(../images/cursors/grab-open.png) 10 0, auto;
 }
+
+
+.History {
+	max-width: 30rem;
+	margin: 0 auto;
+}

public/ui/styles/map.css

@@ -1,7 +1,8 @@
-/* .MapContainer {
+.MapContainer {
 	position: relative;
 	z-index: 500;
-} */
+	margin: 0 1em;
+}
 
 slay-map {
 	--rows: 12;