From 1e236afba75090c4f9d3db1e0adf4b15dadb8736 Mon Sep 17 00:00:00 2001 From: Austin Chen Date: Tue, 7 Dec 2021 14:52:03 -0800 Subject: [PATCH] Fix & reactify according to James's review --- web/pages/simulator/entries.ts | 35 ++++++++------- web/pages/simulator/index.tsx | 79 ++++++++++++++++++---------------- 2 files changed, 61 insertions(+), 53 deletions(-) diff --git a/web/pages/simulator/entries.ts b/web/pages/simulator/entries.ts index 6f9103bf..6e3e587f 100644 --- a/web/pages/simulator/entries.ts +++ b/web/pages/simulator/entries.ts @@ -13,8 +13,8 @@ export type Entry = { prob: number } -export function makeEntries(bids: Bid[]): Entry[] { - const entries: Entry[] = [] +function makeWeights(bids: Bid[]) { + const weights = [] let yesPot = 0 let noPot = 0 // First pass: calculate all the weights @@ -28,33 +28,36 @@ export function makeEntries(bids: Bid[]): Entry[] { noPot += noBid const prob = yesPot / (yesPot + noPot) - entries.push({ + weights.push({ yesBid, noBid, yesWeight, noWeight, prob, - // To be filled in below - yesPayout: 0, - noPayout: 0, - yesReturn: 0, - noReturn: 0, }) } + return weights +} +export function makeEntries(bids: Bid[]): Entry[] { const YES_SEED = bids[0].yesBid const NO_SEED = bids[0].noBid - const yesWeightsSum = entries.reduce((sum, entry) => sum + entry.yesWeight, 0) - const noWeightsSum = entries.reduce((sum, entry) => sum + entry.noWeight, 0) + const weights = makeWeights(bids) + const yesPot = weights.reduce((sum, { yesBid }) => sum + yesBid, 0) + const noPot = weights.reduce((sum, { noBid }) => sum + noBid, 0) + const yesWeightsSum = weights.reduce((sum, entry) => sum + entry.yesWeight, 0) + const noWeightsSum = weights.reduce((sum, entry) => sum + entry.noWeight, 0) // Second pass: calculate all the payouts - for (const entry of entries) { - const { yesBid, noBid, yesWeight, noWeight } = entry + const entries: Entry[] = [] + for (const weight of weights) { + const { yesBid, noBid, yesWeight, noWeight } = weight // Payout: You get your initial bid back, as well as your share of the // (noPot - seed) according to your yesWeight - entry.yesPayout = yesBid + (yesWeight / yesWeightsSum) * (noPot - NO_SEED) - entry.noPayout = noBid + (noWeight / noWeightsSum) * (yesPot - YES_SEED) - entry.yesReturn = (entry.yesPayout - yesBid) / yesBid - entry.noReturn = (entry.noPayout - noBid) / noBid + const yesPayout = yesBid + (yesWeight / yesWeightsSum) * (noPot - NO_SEED) + const noPayout = noBid + (noWeight / noWeightsSum) * (yesPot - YES_SEED) + const yesReturn = (yesPayout - yesBid) / yesBid + const noReturn = (noPayout - noBid) / noBid + entries.push({ ...weight, yesPayout, noPayout, yesReturn, noReturn }) } return entries } diff --git a/web/pages/simulator/index.tsx b/web/pages/simulator/index.tsx index 48bdeee7..6fda9ae4 100644 --- a/web/pages/simulator/index.tsx +++ b/web/pages/simulator/index.tsx @@ -1,4 +1,4 @@ -import React, { Fragment, useEffect, useMemo, useState } from 'react' +import React, { useEffect, useMemo, useState } from 'react' import { CategoryScale, Chart, @@ -26,97 +26,102 @@ Chart.register( Legend ) -function toTable(entries: Entry[]) { - return entries.map((entry, i) => { - return ( - - {i + 1} - {toRowStart(entry)} - {toRowEnd(entry)} - - ) - }) +function TableBody(props: { entries: Entry[] }) { + return ( + + {props.entries.map((entry, i) => ( + + {i + 1} + + + + ))} + + ) } -function toRowStart(entry: Entry) { +function TableRowStart(props: { entry: Entry }) { + const { entry } = props if (entry.yesBid && entry.noBid) { return ( - + <>
SEED
{entry.yesBid} / {entry.noBid} -
+ ) } else if (entry.yesBid) { return ( - + <>
YES
{entry.yesBid} -
+ ) - } else if (entry.noBid) { + } else { return ( - + <>
NO
{entry.noBid} -
+ ) } } -function toRowEnd(entry: Entry | null) { +function TableRowEnd(props: { entry: Entry | null }) { + const { entry } = props if (!entry) { return ( - + <> N/A N/A N/A N/A - + ) } else if (entry.yesBid && entry.noBid) { return ( - + <> N/A {entry.prob.toFixed(2)} N/A N/A - + ) } else if (entry.yesBid) { return ( - + <> {entry.yesWeight.toFixed(2)} {entry.prob.toFixed(2)} {entry.yesPayout.toFixed(2)} {(entry.yesReturn * 100).toFixed(2)}% - + ) } else { return ( - + <> {entry.noWeight.toFixed(2)} {entry.prob.toFixed(2)} {entry.noPayout.toFixed(2)} {(entry.noReturn * 100).toFixed(2)}% - + ) } } -function newBidTable( - steps: number, - bids: any[], - setSteps: (steps: number) => void, +function NewBidTable(props: { + steps: number + bids: any[] + setSteps: (steps: number) => void setBids: (bids: any[]) => void -) { +}) { + const { steps, bids, setSteps, setBids } = props // Prepare for new bids const [newBid, setNewBid] = useState(0) const [newBidType, setNewBidType] = useState('YES') @@ -204,7 +209,7 @@ function newBidTable( onFocus={(e) => e.target.select()} /> - {toRowEnd(nextEntry)} +