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

Change from inputing shares to a points amount. Show average price and estimated winnings.

Browse Source
This commit is contained in:
jahooma 2021-12-10 09:51:48 -06:00
parent 48a249eaa9
commit ae8f7b76f5
1 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import { Contract } from '../lib/firebase/contracts' import { Contract } from '../lib/firebase/contracts'
import { Col } from './layout/col' import { Col } from './layout/col'
import { Row } from './layout/row'
import { Spacer } from './layout/spacer' import { Spacer } from './layout/spacer'
import { YesNoSelector } from './yes-no-selector' import { YesNoSelector } from './yes-no-selector'
@ -8,7 +9,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
const { contract, className } = props const { contract, className } = props
const [betChoice, setBetChoice] = useState<'YES' | 'NO'>('YES') const [betChoice, setBetChoice] = useState<'YES' | 'NO'>('YES')
const [shares, setShares] = useState(0) const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
return ( return (
<Col className={'bg-gray-600 p-6 rounded ' + className}> <Col className={'bg-gray-600 p-6 rounded ' + className}>
@ -23,29 +24,40 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
<Spacer h={4} /> <Spacer h={4} />
<div className="p-2 font-medium">Shares</div> <div className="p-2 font-medium">Bet amount</div>
<div className="p-2"> <Row className="p-2 items-center">
<input <input
className="input input-bordered input-md" className="input input-bordered input-md"
style={{ maxWidth: 80 }} style={{ maxWidth: 80 }}
type="text" type="text"
value={shares} placeholder="0"
onChange={(e) => setShares(parseInt(e.target.value) || 0)} value={betAmount}
onChange={(e) => setBetAmount(parseInt(e.target.value) || 0)}
onFocus={(e) => e.target.select()} onFocus={(e) => e.target.select()}
/> />
</div> <div className="ml-3">points</div>
</Row>
<Spacer h={4} /> {!!betAmount && (
<>
<Spacer h={4} />
<div className="p-2 font-medium">Price</div> <div className="p-2 font-medium">Average price</div>
<div className="px-2"> <div className="px-2">
{shares * (betChoice === 'YES' ? 57 : 43)} points {betChoice === 'YES' ? 0.57 : 0.43} points
</div> </div>
<Spacer h={6} /> <Spacer h={2} />
{shares !== 0 && ( <div className="p-2 font-medium">Estimated winnings</div>
<button className="btn btn-primary">Place bet</button> <div className="px-2">
{Math.floor(betAmount / (betChoice === 'YES' ? 0.57 : 0.43))} points
</div>
<Spacer h={6} />
<button className="btn btn-primary">Place bet</button>
</>
)} )}
</Col> </Col>
) )