open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Animate the prob bar change too

Browse Source
This commit is contained in:
Austin Chen 2022-05-24 08:09:13 -07:00
parent 2373f8e009
commit a204380f57
2 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/components/contract/contract-card.tsx
View File

@ -94,7 +94,6 @@ export function ContractCard(props: {
</Col> </Col>
)} )}
</Row> </Row>
<ProbBar contract={contract} />
</Col> </Col>
</div> </div>
) )

42
web/components/contract/quick-bet.tsx
View File

@ -51,24 +51,20 @@ export function QuickBet(props: { contract: Contract }) {
const [upHover, setUpHover] = useState(false) const [upHover, setUpHover] = useState(false)
const [downHover, setDownHover] = useState(false) const [downHover, setDownHover] = useState(false)
let override let previewProb = undefined
try { try {
override = upHover previewProb = upHover
? formatPercent( ? getOutcomeProbabilityAfterBet(
getOutcomeProbabilityAfterBet( contract,
contract, quickOutcome(contract, 'UP') || '',
quickOutcome(contract, 'UP') || '', 10
10
)
) )
: downHover : downHover
? formatPercent( ? 1 -
1 - getOutcomeProbabilityAfterBet(
getOutcomeProbabilityAfterBet( contract,
contract, quickOutcome(contract, 'DOWN') || '',
quickOutcome(contract, 'DOWN') || '', 10
10
)
) )
: undefined : undefined
} catch (e) { } catch (e) {
@ -144,7 +140,7 @@ export function QuickBet(props: { contract: Contract }) {
)} )}
</div> </div>
<QuickOutcomeView contract={contract} override={override} /> <QuickOutcomeView contract={contract} previewProb={previewProb} />
{/* Down bet triangle */} {/* Down bet triangle */}
<div> <div>
@ -172,10 +168,11 @@ export function QuickBet(props: { contract: Contract }) {
) )
} }
export function ProbBar(props: { contract: Contract }) { export function ProbBar(props: { contract: Contract; previewProb?: number }) {
const { contract } = props const { contract, previewProb } = props
// TODO: Switch preview color as it changes from green to red
const color = getColor(contract) const color = getColor(contract)
const prob = getProb(contract) const prob = previewProb ?? getProb(contract)
return ( return (
<> <>
<div <div
@ -202,10 +199,12 @@ export function ProbBar(props: { contract: Contract }) {
// code resuse. Too many differences anyways // code resuse. Too many differences anyways
export function QuickOutcomeView(props: { export function QuickOutcomeView(props: {
contract: Contract contract: Contract
override?: string previewProb?: number
}) { }) {
const { contract, override } = props const { contract, previewProb } = props
const { outcomeType } = contract const { outcomeType } = contract
const override =
previewProb === undefined ? undefined : formatPercent(previewProb)
return ( return (
<> <>
{outcomeType === 'BINARY' && ( {outcomeType === 'BINARY' && (
@ -235,6 +234,7 @@ export function QuickOutcomeView(props: {
override={override} override={override}
/> />
)} )}
<ProbBar contract={contract} previewProb={previewProb} />
</> </>
) )
} }