Merge pull request #120 from oskarrough/feat/card-images

Prepare adding images to cards
oskarrough · Jun 30, 2021 · 3b0e15e · 3b0e15e
2 parents 83e2ec4 + a62300f
commit 3b0e15e
Show file tree

Hide file tree

Showing 32 changed files with 136 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -71,6 +71,9 @@ If you open a PR, it'll give you a preview URL as well for testing.
 
 ### Open source artwork
 
-Credits to http://ronenness.github.io/RPGUI/ and https://github.com/game-icons/icons for providing great and free graphics.
+- http://ronenness.github.io/RPGUI/
+- https://github.com/game-icons/icons 
+- https://www.fromoldbooks.org/
+- https://www.oldbookart.com/
 
 </details>
diff --git a/public/cards.html b/public/cards.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="description" content="A video card game for the web" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
+	<title>Cards in Slay the Web</title>
+	<link rel="manifest" href="manifest.webmanifest" />
+	<meta name="mobile-web-app-capable" content="yes">
+	<meta name="theme-color" content="#116f54" />
+	<meta name="msapplication-TileColor" content="#116f54">
+	<link rel="icon" type="image/png" href="/ui/images/favicons/favicon-512.png" sizes="512x512" />
+	<link rel="shortcut icon" href="/ui/images/favicons/favicon.ico">
+	<link rel="apple-touch-icon" href="/ui/images/favicon-512.png" />
+	<link rel="stylesheet" href="ui/index.css" />
+</head>
+
+<body style="overflow: auto">
+	<div style="margin-bottom: 3rem" id="Cards"></div>
+	<script type="module">
+		import { html, render, Component } from '../web_modules/htm/preact/standalone.module.js'
+		import cards from '../content/cards.js'
+		import { Card } from './ui/cards.js'
+
+		const Cardss = (props) => html`
+			<article class="Splash">
+				<h2>${cards.length} Cards</h2>
+				<div class="Cards Cards--grid">
+					${cards.map(card => Card(card))}
+				</div>
+			</article>
+		`
+
+		render(html`<${Cardss} cards=${cards} />`, document.querySelector('#Cards'))
+	</script>
+
+</body>
+
+</html>
diff --git a/public/content/cards.js b/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: '4.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: '5.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',
@@ -198,6 +208,7 @@ export default [
 		type: 'Attack',
 		target: 'enemy',
 		description: 'Deal Damage equal to your Block',
+		image: 'fallback.jpg',
 		actions: [
 			{
 				type: 'dealDamageEqualToBlock',
@@ -210,3 +221,15 @@ 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'
+// 2.jpg
+// 4.jpg
+// 5.jpg
+// 6.jpg
+// 8.jpg
+// serpentine-dancer
diff --git a/public/game/cards.js b/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.

diff --git a/public/ui/cards.js b/public/ui/cards.js
@@ -19,8 +19,8 @@ export function Card(card, gameState) {
 		}
 		return true
 	}
-
 	const isDisabled = !canPlayCard(card, gameState)
+	const image = card.image ? `/ui/images/cards/${card.image}` : '/ui/images/cards/fallback.jpg'
 
 	return html`
 		<article
@@ -35,8 +35,11 @@ export function Card(card, gameState) {
 				<p class="Card-energy EnergyBadge">
 					<span>${card.energy}</span>
 				</p>
-				<h3 class="Card-name">${card.name}</h3>
+				<figure class="Card-media">
+					<img src=${image} alt=${card.name} />
+				</figure>
 				<p class="Card-type">${card.type}</p>
+				<h3 class="Card-name">${card.name}</h3>
 				<p class="Card-description">${card.description}</p>
 			</div>
 		</article>

diff --git a/public/ui/images/cards/2.jpg b/public/ui/images/cards/2.jpg
diff --git a/public/ui/images/cards/4.jpg b/public/ui/images/cards/4.jpg
diff --git a/public/ui/images/cards/5.jpg b/public/ui/images/cards/5.jpg
diff --git a/public/ui/images/cards/6.jpg b/public/ui/images/cards/6.jpg
diff --git a/public/ui/images/cards/8.jpg b/public/ui/images/cards/8.jpg
diff --git a/public/ui/images/cards/a-line-of-composed-type.jpg b/public/ui/images/cards/a-line-of-composed-type.jpg
diff --git a/public/ui/images/cards/alice-holds-the-white-king.jpg b/public/ui/images/cards/alice-holds-the-white-king.jpg
diff --git a/public/ui/images/cards/angel-messenger.jpg b/public/ui/images/cards/angel-messenger.jpg
diff --git a/public/ui/images/cards/apteryx-mantelli.jpg b/public/ui/images/cards/apteryx-mantelli.jpg
diff --git a/public/ui/images/cards/bare-feet-of-god.jpg b/public/ui/images/cards/bare-feet-of-god.jpg
diff --git a/public/ui/images/cards/codices.jpg b/public/ui/images/cards/codices.jpg
diff --git a/public/ui/images/cards/fallback.jpg b/public/ui/images/cards/fallback.jpg
diff --git a/public/ui/images/cards/h-sperling-horrified.jpg b/public/ui/images/cards/h-sperling-horrified.jpg
diff --git a/public/ui/images/cards/henry-stares-back.jpg b/public/ui/images/cards/henry-stares-back.jpg
diff --git a/public/ui/images/cards/manicule.jpg b/public/ui/images/cards/manicule.jpg
diff --git a/public/ui/images/cards/poured-millions-of-bubbles.jpg b/public/ui/images/cards/poured-millions-of-bubbles.jpg
diff --git a/public/ui/images/cards/railway-trains-in-space.jpg b/public/ui/images/cards/railway-trains-in-space.jpg
diff --git a/public/ui/images/cards/serpentine-dancer.jpg b/public/ui/images/cards/serpentine-dancer.jpg
diff --git a/public/ui/images/cards/t.jpg b/public/ui/images/cards/t.jpg
diff --git a/public/ui/images/cards/the-angel-of-death.jpg b/public/ui/images/cards/the-angel-of-death.jpg
diff --git a/public/ui/images/cards/vernal-equinox.jpg b/public/ui/images/cards/vernal-equinox.jpg
diff --git a/public/ui/images/scenes/1.jpg b/public/ui/images/scenes/1.jpg
diff --git a/public/ui/images/scenes/flying-duo.jpg b/public/ui/images/scenes/flying-duo.jpg
diff --git a/public/ui/images/scenes/landscape.jpg b/public/ui/images/scenes/landscape.jpg
diff --git a/public/ui/index.css b/public/ui/index.css
@@ -7,8 +7,8 @@
 @import './styles/tooltipped.css';
 
 :root {
-	--card-width: 9em;
-	--card-height: 11em;
+	--card-width: 11em;
+	--card-height: 17em;
 	--yellow: #ffc107;
 	--teal: #116f54;
 	--lightblue: hsl(194.7, 53.3%, 79%);

diff --git a/public/ui/styles/app.css b/public/ui/styles/app.css
@@ -168,8 +168,18 @@ h2 {
 	background-image: url('../images/scenes/nausicaa.jpg');
 }
 .App-background[data-room-index='8'] {
+	background-image: url('../images/scenes/1.jpg');
+}
+.App-background[data-room-index='9'] {
+	background-image: url('../images/scenes/landscape.jpg');
+}
+.App-background[data-room-index='10'] {
+	background-image: url('../images/scenes/flying-duo.jpg');
+}
+.App-background[data-room-index='11'] {
 	background-image: url('../images/scenes/ponyo.jpg');
 }
+
 /* Darkens the top of the screen to highlight the player+monsters on the background. */
 .App-background::before,
 .App-background::after {
@@ -273,14 +283,15 @@ h2 {
 /* In your hand, the cards stack a bit */
 .Hand {
 	margin-top: 1rem;
+	margin-bottom: -1rem;
 }
 .Hand .Cards {
 	padding-left: 4rem;
 	padding-right: 4rem;
 }
 .Hand .Card {
 	margin-left: -1.5rem;
-	margin-bottom: -2rem;
+	/* margin-bottom: -3rem; */
 	cursor: grab;
 	cursor: url(../images/cursors/grab-open.png) 10 0, auto;
 }

diff --git a/public/ui/styles/card.css b/public/ui/styles/card.css
@@ -6,11 +6,14 @@
 	min-height: var(--card-height);
 }
 .Cards > * {
-	flex-basis: var(--card-width);
+	width: var(--card-width);
+	height: var(--card-height);
 	flex-shrink: 1;
-	min-height: var(--card-height);
 }
-
+.Cards--grid {
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
 .Card {
 	position: relative;
 	display: flex;
@@ -26,34 +29,55 @@
 .Card-inner {
 	width: 100%;
 	flex: 1;
+	display: flex;
+	flex-flow: column nowrap;
 	background: #2a3335;
 	text-align: center;
 }
+.Card-media {
+	margin: 0;
+	border-bottom: 2px solid #2a3335;
+	background: #111;
+}
+.Card-media img {
+	display: block;
+	width: 100%;
+	height: 120px;
+	object-fit: cover;
+	object-position: center top;
+}
 .Card-name {
+	margin: 0.5rem 0;
+	padding: 0.5rem 0 0.4rem;
 	margin: 0;
-	padding: 0.6em 1em 0;
-	background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.2), transparent);
+	/* background-color: #111;
+	background-image: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.2), transparent); */
 	user-select: none;
 }
 .Card-type {
-	display: inline-block;
+	margin: -0.75rem  auto 0;
 	padding: 2px 5px 4px;
-	border-radius: 0.4em;
 	font-family: 'concourse_c3';
 	font-size: 0.75rem;
-	margin-top: 0.25rem;
 	background: hsl(191.3, 33.3%, 18.8%);
+	border: 1px solid hsla(0, 0%, 0%, 0.2);
+	border-bottom-width: 2px;
+	border-radius: 0.4em;
 }
 .Card[data-card-type='Attack'] .Card-type {
 	background: hsl(0deg 33% 19%);
 }
 .Card-description {
 	font-size: 0.875rem;
+	padding-left: 0.2em;
+	padding-right: 0.2em;
+	min-height: 2.5em;
+	margin: 0;
 }
 .Card-energy {
 	position: absolute;
-	top: -1.3em;
-	left: -0.3em;
+	top: -1.5em;
+	left: -0.5em;
 	width: 1.3rem;
 	height: 1.3rem;
 	margin-left: 0;