Style card rewards UI

oskarrough · Dec 18, 2020 · 08f7626 · 08f7626
1 parent e4b39e6
commit 08f7626
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/public/ui/index.css b/public/ui/index.css
@@ -45,7 +45,7 @@ html {
 
 @media (min-height: 800px) {
 	:root {
-	--card-width: 10em;
+		--card-width: 10em;
 	}
 	html {
 		font-size: 18px;
@@ -124,6 +124,9 @@ h1 {
 	text-shadow: 1px 2px #0c0cd526;
 	letter-spacing: -1px;
 }
+h1[medium] {
+	font-size: 6vw;
+}
 h2 {
 	font-size: 1.25rem;
 	margin: 1rem 0 0.5rem;
@@ -154,12 +157,24 @@ h2 {
 	background-image: url('images/scenes/moonlit-landscape-1904.jpg');
 }
 
-.App-background[data-room-index="1"] { background-image: url('images/scenes/arietty.jpg'); }
-.App-background[data-room-index="2"] { background-image: url('images/scenes/bauhaus.jpg'); }
-.App-background[data-room-index="4"] { background-image: url('images/scenes/chihiro.jpg'); }
-.App-background[data-room-index="4"] { background-image: url('images/scenes/howl.jpg'); }
-.App-background[data-room-index="5"] { background-image: url('images/scenes/laputa.jpg'); }
-.App-background[data-room-index="6"] { background-image: url('images/scenes/nausicaa.jpg'); }
+.App-background[data-room-index='1'] {
+	background-image: url('images/scenes/arietty.jpg');
+}
+.App-background[data-room-index='2'] {
+	background-image: url('images/scenes/bauhaus.jpg');
+}
+.App-background[data-room-index='4'] {
+	background-image: url('images/scenes/chihiro.jpg');
+}
+.App-background[data-room-index='4'] {
+	background-image: url('images/scenes/howl.jpg');
+}
+.App-background[data-room-index='5'] {
+	background-image: url('images/scenes/laputa.jpg');
+}
+.App-background[data-room-index='6'] {
+	background-image: url('images/scenes/nausicaa.jpg');
+}
 
 .App-background,
 .Targets,
@@ -265,7 +280,7 @@ h2 {
 	font-size: small;
 }
 .Card-description {
-	font-size: smaller;
+	font-size: medium;
 }
 .Card-energy {
 	position: absolute;
@@ -276,7 +291,7 @@ h2 {
 	margin-left: 0;
 	box-shadow: none;
 	border-width: 0.15rem;
-	font-size: large;
+	font-size: inherit;
 }
 .Card[disabled] .EnergyBadge {
 	color: red;
@@ -615,6 +630,9 @@ h2 {
 .RewardsBox .Card {
 	min-height: var(--card-height);
 }
+.RewardsBox .CardBox:hover .Card {
+	box-shadow: 0 0 0.75em gold;
+}
 .CardBox {
 	cursor: pointer;
 	cursor: url(images/cursors/grab-open.png) 10 0, auto;

diff --git a/public/ui/rewards.js b/public/ui/rewards.js
@@ -8,12 +8,12 @@ export default class Rewards extends Component {
 	}
 	render(props, state) {
 		return html`
-			<div class="RewardsBox">
-				<h2>You win</h2>
+			<article class="RewardsBox">
+				<h1 medium>Victory. Onwards!</h1>
 				${state.didChoose
 					? html`<p>Added <em>${state.didChoose.name}</em> to your deck.</p>`
 					: html`
-							<p>Pick a card to add to your deck.</p>
+							<p>Here are your rewards. Pick a card to add to your deck.</p>
 							<div class="Cards">
 								${props.cards.map(
 									(card) =>
@@ -23,7 +23,7 @@ export default class Rewards extends Component {
 								)}
 							</div>
 					  `}
-			</div>
+			</article>
 		`
 	}
 }