Refactor card images to the card definition

public/content/cards.js

@@ -1,40 +1,43 @@
 // Here you'll find all the default cards used in the game.
-// See game/cards.js for the details on how they work. 
+// See game/cards.js for the details on how they work.
 export default [
-	{
-		name: 'Defend',
-		type: 'Skill',
-		energy: 1,
-		block: 5,
-		target: 'player',
-		description: 'Gain 5 Block.',
-		upgrade() {
-			this.block = 8
-			this.upgraded = true
-			this.name = 'Defend+'
-			this.description = 'Gain 8 Block.'
-		},
-	},
 	{
 		name: 'Strike',
 		type: 'Attack',
 		energy: 1,
 		target: 'enemy',
 		damage: 6,
 		description: 'Deal 6 Damage.',
+		image: 'the-angel-of-death.jpg',
 		upgrade() {
 			this.damage = 9
 			this.upgraded = true
 			this.name = 'Strike+'
 			this.description = 'Deal 9 Damage.'
 		},
 	},
+	{
+		name: 'Defend',
+		type: 'Skill',
+		energy: 1,
+		block: 5,
+		target: 'player',
+		image: 'angel-messenger.jpg',
+		description: 'Gain 5 Block.',
+		upgrade() {
+			this.block = 8
+			this.upgraded = true
+			this.name = 'Defend+'
+			this.description = 'Gain 8 Block.'
+		},
+	},
 	{
 		name: 'Bash',
 		type: 'Attack',
 		energy: 2,
 		damage: 8,
 		target: 'enemy',
+		image: 'apteryx-mantelli.jpg',
 		powers: {
 			vulnerable: 2,
 		},
@@ -60,6 +63,7 @@ export default [
 			},
 		],
 		description: 'Can only be played if every card in your hand is an Attack. Deal 14 damage.',
+		image: 'h-sperling-horrified.jpg',
 		upgrade() {
 			this.name = 'Clash+'
 			this.damage = 17
@@ -74,6 +78,7 @@ export default [
 		damage: 8,
 		target: 'all enemies',
 		description: 'Deal 8 damage to all enemies.',
+		image: 'vernal-equinox.jpg',
 		upgrade() {
 			this.damage = 11
 			this.upgraded = true
@@ -89,6 +94,7 @@ export default [
 		block: 5,
 		target: 'enemy',
 		description: 'Deal 5 damage. Gain 5 Block.',
+		image: 'henry-stares-back.jpg',
 		upgrade() {
 			this.damage = 7
 			this.block = 7
@@ -107,6 +113,7 @@ export default [
 			weak: 1,
 		},
 		description: 'Deal 7 Damage. Apply 1 Weak.',
+		image: 'manicule.jpg',
 		upgrade() {
 			this.damage = 8
 			this.upgraded = true
@@ -125,6 +132,7 @@ export default [
 			vulnerable: 1,
 		},
 		description: 'Deal 4 Damage. Apply 1 Vulnerable to all enemies.',
+		image: 't.jpg',
 		upgrade() {
 			this.name = 'Thunderclap+'
 			this.damage = 6
@@ -137,6 +145,7 @@ export default [
 		energy: 2,
 		target: 'player',
 		description: 'Gain 5 Regen. Can only be played if your health is below 50%.',
+		image: 'serpentine-dancer.jpg',
 		powers: {
 			regen: 5,
 		},
@@ -165,6 +174,7 @@ export default [
 		energy: 1,
 		target: 'player',
 		description: 'Gain 1 Health. Draw 2 Cards if your health is below 50%.',
+		image: 'bare-feet-of-god.jpg',
 		actions: [
 			{
 				type: 'addHealth',
@@ -210,3 +220,9 @@ export default [
 	},
 	// {name: 'Flex', energy: 0, type: 'Skill', description: 'Gain 2 Strength.'},
 ]
+
+// 'codices.jpg'
+// 'alice-holds-the-white-king.jpg'
+// '3.jpg'
+// 'poured-millions-of-bubbles.jpg'
+// 'railway-trains-in-space.jpg'

public/game/cards.js

@@ -55,6 +55,7 @@ export class Card {
 		this.description = props.description
 		this.conditions = props.conditions
 		this.actions = props.actions
+		this.image = props.image
 		if (props.upgrade) this.upgrade = props.upgrade
 	}
 	// Runs through a list of actions and return the updated state.

public/ui/cards.js

@@ -20,25 +20,7 @@ export function Card(card, gameState) {
 		return true
 	}
 	const isDisabled = !canPlayCard(card, gameState)
-
-	// 500x380
-	let image = 'codices.jpg'
-	if (card.name === 'Strike') image = 'the-angel-of-death.jpg'
-	if (card.name === 'Defend') image = 'angel-messenger.jpg'
-	if (card.name === 'Bash') image = 'apteryx-mantelli.jpg'
-	if (card.name === 'Flourish') image = 'serpentine-dancer.jpg'
-	if (card.name === 'Summer of Sam') image = 'bare-feet-of-god.jpg'
-	if (card.name === '') image = 'codices.jpg'
-	if (card.name === 'Iron Wave') image = 'henry-stares-back.jpg'
-	if (card.name === 'Cleave') image = 'vernal-equinox.jpg'
-	if (card.name === '') image = 'alice-holds-the-white-king.jpg'
-	if (card.name === '') image = '3.jpg'
-	if (card.name === 'Thunderclap') image = 't.jpg'
-	if (card.name === '') image = 'poured-millions-of-bubbles.jpg'
-	if (card.name === '') image = 'railway-trains-in-space.jpg'
-	if (card.name === 'Sucker Punch') image = 'manicule.jpg'
-	if (card.name === 'Clash') image = 'h-sperling-horrified.jpg'
-	image = `/ui/images/cards/${image}`
+	const image = card.image ? `/ui/images/cards/${card.image}` : '/ui/images/cards/codices.jpg'
 
 	return html`
 		<article