put coins as the unit in bank info

1 files changed, 77 insertions, 0 deletions

diff --git a/src/lib/sections/Bank.svelte b/src/lib/sections/Bank.svelte
new file mode 100644
index 0000000..46c70c9
--- /dev/null
+++ b/src/lib/sections/Bank.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Tooltip from '$lib/Tooltip.svelte'
+	import ConditionalLink from '$lib/ConditionalLink.svelte'
+	import {
+		colorCodeCharacter,
+		formattingCodeToHtml,
+		millisecondsToTime,
+		removeFormattingCode,
+	} from '$lib/utils'
+
+	export let data: CleanMemberProfile
+</script>
+
+{#if data.profile.bank}
+	<p class="bank-main-current-balance">
+		Current balance: <span class="bank-main-current-balance-value"
+			><b>{data.profile.bank.balance}</b> coins</span
+		>
+	</p>
+	{#each data.profile.bank.history as transaction}
+		<div>
+			<span class="transaction-player">
+				<ConditionalLink
+					href="/player/{removeFormattingCode(transaction.name)}"
+					isWrapped={transaction.name.startsWith(colorCodeCharacter)}
+				>
+					{@html formattingCodeToHtml(transaction.name)}
+				</ConditionalLink>
+			</span>
+			<Tooltip>
+				<span slot="tooltip">
+					New balance: <b>{transaction.total}</b>
+				</span>
+				<span
+					class:difference-positive={transaction.change > 0}
+					class:difference-negative={transaction.change < 0}
+				>
+					{transaction.change > 0
+						? '+' + transaction.change.toLocaleString()
+						: transaction.change.toLocaleString()}
+				</span>
+			</Tooltip>
+
+			<span class="transaction-timeago">
+				{millisecondsToTime(Date.now() - transaction.timestamp)}
+			</span>
+		</div>
+	{/each}
+{/if}
+
+<style>
+	.difference-positive {
+		color: #0f0;
+	}
+	.difference-negative {
+		color: red;
+	}
+
+	.transaction-timeago {
+		color: var(--theme-darker-text);
+	}
+
+	.transaction-player {
+		font-family: Minecraft, 'Atkinson Hyperlegible', sans-serif;
+		font-size: 0.8em;
+	}
+
+	.bank-main-current-balance {
+		margin: 0.5em 0;
+		color: var(--theme-darker-text);
+	}
+
+	.bank-main-current-balance-value {
+		color: var(--theme-main-text);
+	}
+</style>