diff --git a/web/components/manaboard.tsx b/web/components/manaboard.tsx index 2bd423b0..e8e4bd7f 100644 --- a/web/components/manaboard.tsx +++ b/web/components/manaboard.tsx @@ -29,29 +29,38 @@ export function Manaboard(props: { <table className="table-zebra table-compact table w-full text-gray-500"> <thead> <tr className="p-2"> - <th>#</th> + <th> + <div className="pl-2">#</div> + </th> <th>Name</th> + <th>Value</th> <th></th> </tr> </thead> <tbody> {users.map((user, index) => ( <tr key={user.id}> - <td>{index + 1}</td> - <td style={{ maxWidth: 190 }}> + <td> + <div className="pl-2">{index + 1}</div> + </td> + <td className="w-full" style={{ maxWidth: 190 }}> <Row className="items-center gap-4"> <Avatar avatarUrl={user.avatarUrl} size={8} /> <div className="truncate">{user.name}</div> </Row> </td> <td> - <BuySlotModal - slot={index + 1} - title={`${title}`} - holder={user} - value={100} - /> + <Row className="items-center gap-4"> + {formatMoney(100 - 5 * index)} + <BuySlotModal + slot={index + 1} + title={`${title}`} + holder={user} + value={100 - 5 * index} + /> + </Row> </td> + <td></td> </tr> ))} </tbody> @@ -94,23 +103,13 @@ export function BuySlotModal(props: { /> <Label>Current value: {formatMoney(value)}</Label> - <Row className="items-center gap-4 rounded-md bg-gray-100 p-2"> - <div>#{slot}</div> - <Avatar avatarUrl={holder.avatarUrl} size={8} /> - <div className="truncate">{holder.name}</div> - </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> + {user && ( + <Row className="items-center gap-4 rounded-md bg-gray-100 p-2"> + <div>#{slot}</div> + <Avatar avatarUrl={user.avatarUrl} size={8} /> + <div className="truncate">{message}</div> + </Row> + )} <Label>(Optional) set message</Label> <input @@ -122,21 +121,26 @@ export function BuySlotModal(props: { value={message} /> - <Label>Preview</Label> - {user && ( - <Row className="items-center gap-4 rounded-md bg-gray-100 p-2"> - <div>#{slot}</div> - <Avatar avatarUrl={user.avatarUrl} size={8} /> - <div className="truncate">{message}</div> - </Row> - )} + <Label>Reassess value</Label> + <AmountInput + amount={newValue} + onChange={(amount) => setNewValue(amount ?? 0)} + error="" + label={ENV_CONFIG.moneyMoniker} + /> <button className="btn btn-primary"> Buy Slot ({formatMoney(value)}) </button> + <div className="-mt-2 text-sm"> + Additional fees: {formatMoney(newValue / 10)} per hour + </div> </Col> </Modal> - <button className="btn btn-outline btn-sm" onClick={() => setOpen(true)}> + <button + className="btn btn-outline btn-sm normal-case" + onClick={() => setOpen(true)} + > Buy </button> </> diff --git a/web/pages/leaderboards.tsx b/web/pages/leaderboards.tsx index ab16a2da..5cda33e6 100644 --- a/web/pages/leaderboards.tsx +++ b/web/pages/leaderboards.tsx @@ -68,14 +68,17 @@ function Explanation() { <ol> <li> Every slot has an "assessed value": what the current holder - thinks the slot is worth. + thinks their slot is worth. </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> - At any time, you can buy a leaderboard slot from the current holder - for its value. + At any time, you can pay the assessed value of a slot to buy it from + the current holder. + </li> + <li> + The slot is now yours! You can customize the message, or reassess it + to a new value. </li> - <li>Then, you can reassess it to a new value!</li> </ol> <p> <em>