Preview bid results; toggle bid type

This commit is contained in:
Austin Chen 2021-12-07 10:26:57 -08:00
parent 47eba79d05
commit 83899f96a1

View File

@ -71,8 +71,8 @@ function toRowStart(entry: Entry) {
} }
} }
function toRowEnd(entry: Entry) { function toRowEnd(entry: Entry | null) {
if (!entry.yesBid && !entry.noBid) { if (!entry) {
return ( return (
<Fragment> <Fragment>
<td>N/A</td> <td>N/A</td>
@ -114,6 +114,9 @@ function toRowEnd(entry: Entry) {
function newBidTable( function newBidTable(
steps: number, steps: number,
newBid: number, newBid: number,
nextEntryElement: JSX.Element,
newBidType: String,
toggleBidType: () => void,
setNewBid: (newBid: number) => void, setNewBid: (newBid: number) => void,
submitBid: () => void submitBid: () => void
) { ) {
@ -137,16 +140,20 @@ function newBidTable(
<td> <td>
<div <div
className={ className={
`badge clickable ` + ('YES' ? 'badge-success' : 'badge-ghost') `badge hover:cursor-pointer ` +
(newBidType == 'YES' ? 'badge-success' : 'badge-ghost')
} }
onClick={toggleBidType}
> >
YES YES
</div> </div>
<br /> <br />
<div <div
className={ className={
`badge clickable ` + ('NO' ? 'badge-error' : 'badge-ghost') `badge hover:cursor-pointer ` +
(newBidType == 'NO' ? 'badge-error' : 'badge-ghost')
} }
onClick={toggleBidType}
> >
NO NO
</div> </div>
@ -166,7 +173,7 @@ function newBidTable(
onFocus={(e) => e.target.select()} onFocus={(e) => e.target.select()}
/> />
</td> </td>
{/* <EntryRow :entry="nextEntry" /> */} {nextEntryElement}
<td> <td>
<button <button
className="btn btn-primary" className="btn btn-primary"
@ -230,6 +237,20 @@ export default function Simulator() {
setNewBid(0) setNewBid(0)
} }
function toggleBidType() {
setNewBidType(newBidType === 'YES' ? 'NO' : 'YES')
}
const nextEntry = useMemo(() => {
if (newBid) {
const nextBid = makeBid(newBidType, newBid)
const fakeBids = [...bids.slice(0, steps), nextBid]
const entries = makeEntries(fakeBids)
return entries[entries.length - 1]
}
return null
}, [newBid, newBidType, entries, steps])
return ( return (
<div className="overflow-x-auto px-12 mt-8 text-center"> <div className="overflow-x-auto px-12 mt-8 text-center">
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4"> <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
@ -250,7 +271,15 @@ export default function Simulator() {
/> />
{/* New bid table */} {/* New bid table */}
{newBidTable(steps, newBid, setNewBid, submitBid)} {newBidTable(
steps,
newBid,
toRowEnd(nextEntry),
newBidType,
toggleBidType,
setNewBid,
submitBid
)}
{/* History of bids */} {/* History of bids */}
<div className="overflow-x-auto"> <div className="overflow-x-auto">