UI tweaks, message updates
This commit is contained in:
parent
52c4e829da
commit
17b9ccae83
|
@ -29,29 +29,38 @@ export function Manaboard(props: {
|
||||||
<table className="table-zebra table-compact table w-full text-gray-500">
|
<table className="table-zebra table-compact table w-full text-gray-500">
|
||||||
<thead>
|
<thead>
|
||||||
<tr className="p-2">
|
<tr className="p-2">
|
||||||
<th>#</th>
|
<th>
|
||||||
|
<div className="pl-2">#</div>
|
||||||
|
</th>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
|
<th>Value</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{users.map((user, index) => (
|
{users.map((user, index) => (
|
||||||
<tr key={user.id}>
|
<tr key={user.id}>
|
||||||
<td>{index + 1}</td>
|
<td>
|
||||||
<td style={{ maxWidth: 190 }}>
|
<div className="pl-2">{index + 1}</div>
|
||||||
|
</td>
|
||||||
|
<td className="w-full" style={{ maxWidth: 190 }}>
|
||||||
<Row className="items-center gap-4">
|
<Row className="items-center gap-4">
|
||||||
<Avatar avatarUrl={user.avatarUrl} size={8} />
|
<Avatar avatarUrl={user.avatarUrl} size={8} />
|
||||||
<div className="truncate">{user.name}</div>
|
<div className="truncate">{user.name}</div>
|
||||||
</Row>
|
</Row>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
<Row className="items-center gap-4">
|
||||||
|
{formatMoney(100 - 5 * index)}
|
||||||
<BuySlotModal
|
<BuySlotModal
|
||||||
slot={index + 1}
|
slot={index + 1}
|
||||||
title={`${title}`}
|
title={`${title}`}
|
||||||
holder={user}
|
holder={user}
|
||||||
value={100}
|
value={100 - 5 * index}
|
||||||
/>
|
/>
|
||||||
|
</Row>
|
||||||
</td>
|
</td>
|
||||||
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -94,23 +103,13 @@ export function BuySlotModal(props: {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Label>Current value: {formatMoney(value)}</Label>
|
<Label>Current value: {formatMoney(value)}</Label>
|
||||||
|
{user && (
|
||||||
<Row className="items-center gap-4 rounded-md bg-gray-100 p-2">
|
<Row className="items-center gap-4 rounded-md bg-gray-100 p-2">
|
||||||
<div>#{slot}</div>
|
<div>#{slot}</div>
|
||||||
<Avatar avatarUrl={holder.avatarUrl} size={8} />
|
<Avatar avatarUrl={user.avatarUrl} size={8} />
|
||||||
<div className="truncate">{holder.name}</div>
|
<div className="truncate">{message}</div>
|
||||||
</Row>
|
</Row>
|
||||||
|
)}
|
||||||
<Label>Reassess value</Label>
|
|
||||||
<AmountInput
|
|
||||||
amount={newValue}
|
|
||||||
onChange={(amount) => setNewValue(amount ?? 0)}
|
|
||||||
error={''}
|
|
||||||
// error="You don't have enough mana"
|
|
||||||
label={ENV_CONFIG.moneyMoniker}
|
|
||||||
/>
|
|
||||||
<div className="-mt-5 text-sm">
|
|
||||||
Tax: {formatMoney(newValue / 10)} per hour
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Label>(Optional) set message</Label>
|
<Label>(Optional) set message</Label>
|
||||||
<input
|
<input
|
||||||
|
@ -122,21 +121,26 @@ export function BuySlotModal(props: {
|
||||||
value={message}
|
value={message}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Label>Preview</Label>
|
<Label>Reassess value</Label>
|
||||||
{user && (
|
<AmountInput
|
||||||
<Row className="items-center gap-4 rounded-md bg-gray-100 p-2">
|
amount={newValue}
|
||||||
<div>#{slot}</div>
|
onChange={(amount) => setNewValue(amount ?? 0)}
|
||||||
<Avatar avatarUrl={user.avatarUrl} size={8} />
|
error=""
|
||||||
<div className="truncate">{message}</div>
|
label={ENV_CONFIG.moneyMoniker}
|
||||||
</Row>
|
/>
|
||||||
)}
|
|
||||||
|
|
||||||
<button className="btn btn-primary">
|
<button className="btn btn-primary">
|
||||||
Buy Slot ({formatMoney(value)})
|
Buy Slot ({formatMoney(value)})
|
||||||
</button>
|
</button>
|
||||||
|
<div className="-mt-2 text-sm">
|
||||||
|
Additional fees: {formatMoney(newValue / 10)} per hour
|
||||||
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
</Modal>
|
</Modal>
|
||||||
<button className="btn btn-outline btn-sm" onClick={() => setOpen(true)}>
|
<button
|
||||||
|
className="btn btn-outline btn-sm normal-case"
|
||||||
|
onClick={() => setOpen(true)}
|
||||||
|
>
|
||||||
Buy
|
Buy
|
||||||
</button>
|
</button>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -68,14 +68,17 @@ function Explanation() {
|
||||||
<ol>
|
<ol>
|
||||||
<li>
|
<li>
|
||||||
Every slot has an "assessed value": what the current holder
|
Every slot has an "assessed value": what the current holder
|
||||||
thinks the slot is worth.
|
thinks their slot is worth.
|
||||||
</li>
|
</li>
|
||||||
<li>Slot holders pay a 10% per hour tax to Manafold on the value.</li>
|
<li>Slot holders pay a continuous fee of 10% per hour to Manafold.</li>
|
||||||
<li>
|
<li>
|
||||||
At any time, you can buy a leaderboard slot from the current holder
|
At any time, you can pay the assessed value of a slot to buy it from
|
||||||
for its value.
|
the current holder.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
The slot is now yours! You can customize the message, or reassess it
|
||||||
|
to a new value.
|
||||||
</li>
|
</li>
|
||||||
<li>Then, you can reassess it to a new value!</li>
|
|
||||||
</ol>
|
</ol>
|
||||||
<p>
|
<p>
|
||||||
<em>
|
<em>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user