CardSlot/Card: vertically center cost

serprex · Feb 23, 2024 · 55e3c4c · 55e3c4c
1 parent 8ac069b
commit 55e3c4c
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 27 deletions.
diff --git a/src/Components/Card.jsx b/src/Components/Card.jsx
@@ -12,38 +12,26 @@ export default function Card(props) {
 					style={`${
 						card().upped ? 'color:#000;' : ''
 					}background-color:${maybeLightenStr(card())};${props.style ?? ''}`}>
-					<span style="position:absolute;left:2px;top:2px;font-size:12px">
-						{card().name}
-					</span>
+					<span class="name">{card().name}</span>
 					<img
 						class={card().shiny ? 'shiny' : ''}
 						src={`/Cards/${encodeCode(
 							card().code + (asShiny(card().code, false) < 5000 ? 4000 : 0),
 						)}.webp`}
-						style="position:absolute;top:20px;left:8px;width:128px;height:128px;border-width:1px;border-color:#000;border-style:solid"
 					/>
 					<div
-						style={`position:absolute;padding:1px;bottom:0;font-size:9px;min-height:102px;background-color:${maybeLightenStr(
-							card(),
-						)};border-radius:0 0 4px 4px`}>
+						class="text"
+						style={`background-color:${maybeLightenStr(card())}`}>
 						<Text text={card().text} icoprefix="te" />
 					</div>
-					{!!card().rarity && (
-						<span
-							class={`ico r${card().rarity}`}
-							style="position:absolute;right:2px;top:40px"
-						/>
-					)}
+					{!!card().rarity && <span class={`rarity ico r${card().rarity}`} />}
 					{!!card().cost && (
-						<span style="position:absolute;right:0;padding-right:2px;padding-top:2px;font-size:12px">
+						<span class="cost">
 							{card().cost}
 							<span class={`ico te${card().costele}`} />
 						</span>
 					)}
-					<span
-						class={`ico t${card().type}`}
-						style="position:absolute;right:2px;top:22px"
-					/>
+					<span class={`kind ico t${card().type}`} />
 				</div>
 			)}
 		</Show>

diff --git a/src/Components/CardImage.jsx b/src/Components/CardImage.jsx
@@ -16,11 +16,9 @@ export default function CardImage(props) {
 				color: props.card.upped ? '#000' : '#fff',
 				...props.style,
 			}}>
-			<span style="overflow:hidden;text-overflow:ellipsis">
-				{props.card.name}
-			</span>
+			<span class="name">{props.card.name}</span>
 			{!!props.card.cost && (
-				<span style="flex-shrink:0;pointer-events:none">
+				<span class="cost">
 					{props.card.cost}
 					<span class={'ico te' + props.card.costele} />
 				</span>

diff --git a/src/views/Match.jsx b/src/views/Match.jsx
@@ -482,9 +482,7 @@ function Thing(props) {
 			onMouseOver={setInfo}
 			onMouseLeave={props.onMouseOut}
 			onClick={() => props.onClick(props.id)}>
-			<Show
-				when={!faceDown()}
-				fallback={<div class="ico cback" style="left:2px;top:2px" />}>
+			<Show when={!faceDown()} fallback={<div class="ico cback" />}>
 				<div
 					style={`width:64px;height:64px;pointer-events:none;background-color:${bgcolor()}`}>
 					<Show when={!props.opts.lofiArt}>
@@ -532,12 +530,13 @@ function Thing(props) {
 							style={`width:64px;white-space:nowrap;overflow:hidden;background-color:${bgcolor()}`}>
 							<Text text={memo().topText} icoprefix="se" />
 						</div>
-						<div style={`float:right;background-color:${bgcolor()}`}>
+						<div
+							style={`display:flex;align-items:center;border-radius:0 0 3px 3px;float:right;background-color:${bgcolor()}`}>
 							<Text text={memo().statText} icoprefix="se" />
 						</div>
 						<Show when={!isSpell()}>
 							<div
-								style={`position:absolute;top:54px;height:10px;width:64px;overflow:hidden;white-space:nowrap;background-color:${bgcolor()}`}>
+								style={`position:absolute;top:54px;height:10px;width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:${bgcolor()}`}>
 								{props.game.getCard(props.id).name}
 							</div>
 						</Show>

diff --git a/ui.css b/ui.css
@@ -145,6 +145,10 @@ select:hover:active {
 	text-align: right;
 	margin-right: 32px;
 }
+.cost {
+	display: flex;
+	align-items: center;
+}
 .card {
 	position: relative;
 	width: 160px;
@@ -156,6 +160,46 @@ select:hover:active {
 	border-style: double;
 	z-index: 5;
 }
+.card > .name {
+	position: absolute;
+	left: 2px;
+	top: 2px;
+	font-size: 12px;
+}
+.card > .text {
+	position: absolute;
+	padding: 1px;
+	bottom: 0;
+	font-size: 9px;
+	min-height: 102px;
+	border-radius: 0 0 4px 4px;
+}
+.card > .cost {
+	position: absolute;
+	right: 0;
+	padding-right: 2px;
+	padding-top: 2px;
+	font-size: 12px;
+}
+.card > .rarity {
+	position: absolute;
+	right: 2px;
+	top: 40px;
+}
+.card > .kind {
+	position: absolute;
+	right: 2px;
+	top: 22px;
+}
+.card > img {
+	position: absolute;
+	top: 20px;
+	left: 6px;
+	width: 128px;
+	height: 128px;
+	border: 1px #000 solid;
+	border-radius: 2px;
+}
 .cardslot {
 	display: inline-flex;
 	font-size: 11px;
@@ -166,6 +210,14 @@ select:hover:active {
 	white-space: nowrap;
 	justify-content: space-between;
 }
+.cardslot > .name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.cardslot > .cost {
+	flex-shrink: 0;
+	pointer-events: none;
+}
 .maintitle {
 	font-size: 16px;
 	text-align: center;
@@ -416,6 +468,7 @@ input[type='button'].selected {
 }
 .cantarget {
 	border: 2px #f00 solid !important;
+	border-radius: 2px;
 	box-shadow: 0 0 5px #f00;
 	cursor: pointer;
 }
@@ -425,6 +478,7 @@ input[type='button'].selected {
 }
 .canactive {
 	border: 2px #000 solid !important;
+	border-radius: 2px;
 	box-shadow: 0 0 5px #fff;
 	cursor: pointer;
 }