RC-62 | Currency | Layout

Apps/HeroSkillsCardV1/content.hbs

@@ -45,7 +45,7 @@
 
 	<div class="label col-header list-header">
 		<span>{{ rc-i18n "RipCrypt.common.gear" }}</span>
-		<span class="small">{{ rc-i18n "RipCrypt.common.slots" }}</span>
+		<span class="small">{{ rc-i18n "RipCrypt.common.slot" }}</span>
 	</div>
 	<ol class="num-after gear-list">
 		<li></li>
@@ -61,4 +61,49 @@
 		<li></li>
 		<li></li>
 	</ol>
+
+	<div class="currencies">
+		<div class="currency half-pill">
+			<{{{ifThen meta.editable "label" "div" }}}
+				for="{{meta.idp}}-gold"
+				class="label"
+			>
+				{{ rc-i18n "RipCrypt.common.currency.gold"}}
+			</{{{ifThen meta.editable "label" "div" }}}>
+			<input
+				type="number"
+				id="{{meta.idp}}-gold"
+				class="input"
+				value="0"
+			>
+		</div>
+		<div class="currency half-pill">
+			<{{{ifThen meta.editable "label" "div" }}}
+				for="{{meta.idp}}-silver"
+				class="label"
+			>
+				{{ rc-i18n "RipCrypt.common.currency.silver"}}
+			</{{{ifThen meta.editable "label" "div" }}}>
+			<input
+				type="number"
+				id="{{meta.idp}}-silver"
+				class="input"
+				value="0"
+			>
+		</div>
+		<div class="currency half-pill">
+			<{{{ifThen meta.editable "label" "div" }}}
+				for="{{meta.idp}}-copper"
+				class="label"
+			>
+				{{ rc-i18n "RipCrypt.common.currency.copper"}}
+			</{{{ifThen meta.editable "label" "div" }}}>
+			<input
+				type="number"
+				id="{{meta.idp}}-copper"
+				class="input"
+				value="0"
+			>
+		</div>
+	</div>
 </div>

Apps/HeroSkillsCardV1/style.css

@@ -90,4 +90,33 @@
 			color: var(--alt-row-text);
 		}
 	}
+
+	.currencies {
+		grid-column: 1 / span 2;
+		grid-row: 13 / span 1;
+		display: grid;
+		column-gap: var(--col-gap);
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+
+		.currency {
+			display: grid;
+			grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
+			align-items: center;
+			background: var(--section-header-background);
+			color: var(--section-header-text);
+			--input-background: black;
+			--input-text: white;
+
+			.input {
+				margin: 2px;
+				border-radius: 999px;
+				/* border-bottom: none; */
+				text-align: center;
+			}
+		}
+	}
+
+	.half-pill {
+		border-radius: 0 999px 999px 0;
+	}
 }

langs/en-ca.json

@@ -41,7 +41,12 @@
 			"step": "Step",
 			"rank": "Rank",
 			"gear": "Gear",
-			"slots": "Slots"
+			"slot": "Slot",
+			"currency": {
+				"gold": "Gold",
+				"silver": "Silver",
+				"copper": "Copper"
+			}
 		},
 		"setting": {
 			"abbrAccess": {