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

Add large percent chance indicator. Use primary color instead of green. Round current probability.

Browse Source
This commit is contained in:
jahooma 2021-12-12 16:51:44 -06:00
parent 7ef00d085f
commit 45640feb81
4 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/bet-panel.tsx
View File

@ -97,11 +97,11 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
<div className="p-2 font-medium">Implied probability</div> <div className="p-2 font-medium">Implied probability</div>
<Row> <Row>
<div className="px-2 font-sans"> <div className="px-2 font-sans">
{Math.floor(initialProb * 1000) / 10 + '%'} {Math.round(initialProb * 100) + '%'}
</div> </div>
<div>→</div> <div>→</div>
<div className="px-2 font-sans"> <div className="px-2 font-sans">
{Math.floor(resultProb * 1000) / 10 + '%'} {Math.round(resultProb * 100) + '%'}
</div> </div>
</Row> </Row>
@ -120,7 +120,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
betDisabled betDisabled
? 'btn-disabled' ? 'btn-disabled'
: betChoice === 'YES' : betChoice === 'YES'
? 'bg-green-500 hover:bg-green-600 focus:ring-green-500' ? 'btn-primary'
: 'bg-red-400 hover:bg-red-500 focus:ring-red-400' : 'bg-red-400 hover:bg-red-500 focus:ring-red-400'
)} )}
onClick={betDisabled ? undefined : submitBet} onClick={betDisabled ? undefined : submitBet}

31
web/components/contract-overview.tsx
View File

@ -14,19 +14,32 @@ export const ContractOverview = (props: {
const { pot, seedAmounts } = contract const { pot, seedAmounts } = contract
const volume = pot.YES + pot.NO - seedAmounts.YES - seedAmounts.NO const volume = pot.YES + pot.NO - seedAmounts.YES - seedAmounts.NO
const prob = pot.YES ** 2 / (pot.YES ** 2 + pot.NO ** 2)
const probPercent = Math.round(prob * 100) + '%'
return ( return (
<Col className={className}> <Col className={className}>
<div className="text-3xl font-medium p-2">{contract.question}</div> <Row className="justify-between">
<Col>
<div className="text-3xl font-medium p-2">{contract.question}</div>
<Row className="flex-wrap text-sm text-gray-600"> <Row className="flex-wrap text-sm text-gray-600">
<div className="p-2 whitespace-nowrap">By {contract.creatorName}</div> <div className="p-2 whitespace-nowrap">
<div className="py-2">•</div> By {contract.creatorName}
<div className="p-2 whitespace-nowrap">Dec 9</div> </div>
<div className="py-2">•</div> <div className="py-2">•</div>
<div className="p-2 whitespace-nowrap"> <div className="p-2 whitespace-nowrap">Dec 9</div>
{formatWithCommas(volume)} volume <div className="py-2">•</div>
</div> <div className="p-2 whitespace-nowrap">
{formatWithCommas(volume)} volume
</div>
</Row>
</Col>
<Col className="text-4xl p-2 ml-2 text-primary items-end">
{probPercent}
<div className="text-xl">chance</div>
</Col>
</Row> </Row>
<Spacer h={4} /> <Spacer h={4} />

2
web/components/contract-prob-graph.tsx
View File

@ -43,7 +43,7 @@ export function ContractProbGraph(props: { contract: Contract }) {
{ {
label: 'Implied probability', label: 'Implied probability',
data: probs, data: probs,
borderColor: 'rgb(75, 192, 192)', borderColor: '#11b981',
}, },
], ],
} }

2
web/components/yes-no-selector.tsx
View File

@ -48,7 +48,7 @@ function Button(props: {
'inline-flex items-center px-8 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white', 'inline-flex items-center px-8 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
!hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2', !hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2',
color === 'green' && color === 'green' &&
'bg-green-500 hover:bg-green-600 focus:ring-green-500', 'btn-primary',
color === 'red' && 'bg-red-400 hover:bg-red-500 focus:ring-red-400', color === 'red' && 'bg-red-400 hover:bg-red-500 focus:ring-red-400',
color === 'deemphasized' && color === 'deemphasized' &&
'text-gray-700 bg-gray-200 hover:bg-gray-300 focus:ring-gray-300', 'text-gray-700 bg-gray-200 hover:bg-gray-300 focus:ring-gray-300',