WXZF76NH4QIML4LVC7WQKUN56A7SR6UPH5IAE2UVFTZUVK7BEP6AC
ZYZ7V2E7EPQ6BE4KET2U3JJN2FM74DA7ZVVX7SUQDYNOUJETBBUAC
P6J3K3PNCSP323JJJ4IBEMX3OMFUVLSHGMA66FUACCUC3Z72DQMQC
OAY5NOOTDF5QELB64LYDGSKANR33WIH4QKNRBO437TMUMAQ5CWRQC
AKJYQ7DS4ZQBUVXA4QOKL46X6MOZI4HK5HSDT6JZWDZHQ6UMPXFAC
HXHNGFB2VCXB6YXDND35HJI22GBJC3QTSUR2TK3M3LXGJHVNXVHAC
PZNEDCRDS5IBR7QDPHTW5HZRMQAZFIF7VB3IKWPZDC7IALHZKHWAC
QDCUZEYTKURHBOP65DP5VYAPGHNXPTXIF3S3VTDZ3WGBZ3BI3DHQC
BDMXIXECYJQDF66EF2TSVVHWIJ5CC22LUFOAOO2Y6YTZZPI3GOYQC
DPJCZOPIKAKQIS4YRXETBSJA5ZTL2KQESSJE2TEZFLRQARXUVFXQC
Z5I5KK7NX6RS23QAB7ISLQCM5Z6TMVZK532NPSE7CO4MNXNKVKMAC
WBAN6KIPMKEXHGGQGE3TB6G7YXHGOPT3HRCEUYZKLNJCJBMR7JHAC
QTTO6EU2UCXVVPN724D2FUMGKJSEWTG7FXLOFNUB3IL3RVV3AVUAC
5BALZJFM2MNK7LFDM3YU2GBPB7CAMKWEZSHKXDWU7SAXXMPZ2OQQC
ZWX5PV44JLFYTQXGXNQG64CKTJJC6I2TVMNRII3EAEMUXMV5XNYQC
.table td {
border: 1px solid #000000;
border-collapse: collapse;
padding: 2px;
}
.table {
border: 1px solid #000000;
border-collapse: collapse;
padding: 2px;
margin-left: auto;
margin-right: auto;
}
<h2> Active quest: </h2>
<h3>
Initial:
</h3>
<div>
{"placeholder"} {activeQuest.resourceType}
</div>
<h3>Goal:</h3>
<div>
{activeQuest.resourceAmount} {activeQuest.resourceType}
</div>
<h3>Current:</h3>
<div className={classnames({ good: isQuestComplete })}>
{playerResourceAmounts?.[activeQuest.resourceType]}{" "}
{activeQuest.resourceType}
</div>
<h2> Active quest: </h2>
<table className={classnames({ table: true })}>
<tr>
<td>
Initial
</td>
<td>
{questInitialAmount} {activeQuest.resourceType}
</td>
</tr>
<tr>
<td>
Current
</td>
<td>
{playerResourceAmounts?.[activeQuest.resourceType]} {activeQuest.resourceType}
</td>
</tr>
<tr>
<td>
Target
</td>
<td>
{activeQuest.resourceAmount} {activeQuest.resourceType}
</td>
</tr>
<tr>
<td>
SP spent
</td>
<td>
{spSpentThisQuest === undefined ? "" : spSpentThisQuest}
</td>
</tr>
<tr>
<td>
Efficiency
</td>
<td>
{efficiencyGrade}
</td>
</tr>
</table>