From ffd1e233c88b8ded4a5737ebd3a886bece0776a5 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Thu, 2 Dec 2021 01:37:15 -0600
Subject: [PATCH] Preview bid return before submission

---
 market-simulator/src/components/EntryRow.vue  | 40 ++++++++++++++++
 market-simulator/src/components/Simulator.vue | 47 +++++++++++--------
 market-simulator/src/components/entries.ts    |  2 +-
 3 files changed, 69 insertions(+), 20 deletions(-)
 create mode 100644 market-simulator/src/components/EntryRow.vue

diff --git a/market-simulator/src/components/EntryRow.vue b/market-simulator/src/components/EntryRow.vue
new file mode 100644
index 00000000..e18622dc
--- /dev/null
+++ b/market-simulator/src/components/EntryRow.vue
@@ -0,0 +1,40 @@
+<!-- Partial table row for a given entry -->
+<template>
+  <!-- Invalid bid -->
+  <template v-if="!entry">
+    <td>N/A</td>
+    <td>N/A</td>
+    <td>N/A</td>
+    <td>N/A</td>
+  </template>
+  <!-- Seed bids -->
+  <template v-else-if="entry.yesBid && entry.noBid">
+    <td>N/A</td>
+    <td>{{ entry.prob.toFixed(2) }}</td>
+    <td>N/A</td>
+    <td>N/A</td>
+  </template>
+  <!-- Yes Bid -->
+  <template v-else-if="entry.yesBid">
+    <td>{{ entry.yesWeight.toFixed(2) }}</td>
+    <td>{{ entry.prob.toFixed(2) }}</td>
+    <td>{{ entry.yesPayout.toFixed(2) }}</td>
+    <td>{{ (entry.yesReturn * 100).toFixed(2) }}%</td>
+  </template>
+  <!-- No Bid -->
+  <template v-else-if="entry.noBid">
+    <td>{{ entry.noWeight.toFixed(2) }}</td>
+    <td>{{ entry.prob.toFixed(2) }}</td>
+    <td>{{ entry.noPayout.toFixed(2) }}</td>
+    <td>{{ (entry.noReturn * 100).toFixed(2) }}%</td>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { PropType } from '@vue/runtime-core'
+import { Entry } from './entries'
+
+defineProps({
+  entry: Object as PropType<Entry>,
+})
+</script>
diff --git a/market-simulator/src/components/Simulator.vue b/market-simulator/src/components/Simulator.vue
index af74ad14..8d8ae021 100644
--- a/market-simulator/src/components/Simulator.vue
+++ b/market-simulator/src/components/Simulator.vue
@@ -58,14 +58,16 @@
                   placeholder="0"
                   class="input input-bordered"
                   @focus="$event.target.select()"
+                  @keyup.enter="submitBid"
                 />
               </td>
-              <td>X</td>
-              <td>X</td>
-              <td>X</td>
-              <td>X</td>
+              <EntryRow :entry="nextEntry" />
               <td>
-                <button class="btn btn-primary" @click="submitBid">
+                <button
+                  class="btn btn-primary"
+                  :disabled="newBid <= 0"
+                  @click="submitBid"
+                >
                   Submit
                 </button>
               </td>
@@ -92,27 +94,16 @@
               <template v-if="entry.yesBid && entry.noBid">
                 <td><div class="badge">SEED</div></td>
                 <td>{{ entry.yesBid }} / {{ entry.noBid }}</td>
-                <td>N/A</td>
-                <td>{{ entry.prob.toFixed(2) }}</td>
-                <td>N/A</td>
-                <td>N/A</td>
               </template>
               <template v-else-if="entry.yesBid">
                 <td><div class="badge badge-success">YES</div></td>
                 <td>{{ entry.yesBid }}</td>
-                <td>{{ entry.yesWeight.toFixed(2) }}</td>
-                <td>{{ entry.prob.toFixed(2) }}</td>
-                <td>{{ entry.yesPayout.toFixed(2) }}</td>
-                <td>{{ (entry.yesReturn * 100).toFixed(2) }}%</td>
               </template>
               <template v-else>
                 <td><div class="badge badge-error">NO</div></td>
                 <td>{{ entry.noBid }}</td>
-                <td>{{ entry.noWeight.toFixed(2) }}</td>
-                <td>{{ entry.prob.toFixed(2) }}</td>
-                <td>{{ entry.noPayout.toFixed(2) }}</td>
-                <td>{{ (entry.noReturn * 100).toFixed(2) }}%</td>
               </template>
+              <EntryRow :entry="entry" />
             </tr>
           </tbody>
         </table>
@@ -142,6 +133,7 @@ import { bids as sampleBids } from './sample-bids'
 import { makeEntries } from './entries'
 import { ref, computed } from '@vue/reactivity'
 import { onMounted, watch } from '@vue/runtime-core'
+import EntryRow from './EntryRow.vue'
 
 // Copy over the sample bids to seed the simulation
 const bids = sampleBids.slice()
@@ -197,12 +189,29 @@ function toggleBidType() {
   newBidType.value = newBidType.value === 'YES' ? 'NO' : 'YES'
 }
 
-function submitBid() {
-  const bid = {
+function makeBid(type: string, bid: number) {
+  return {
     yesBid: newBidType.value == 'YES' ? newBid.value : 0,
     noBid: newBidType.value == 'YES' ? 0 : newBid.value,
   }
+}
+
+function submitBid() {
+  if (newBid.value <= 0) return
+  const bid = makeBid(newBidType.value, newBid.value)
   bids.splice(steps.value, 0, bid)
   steps.value++
+  newBid.value = 0
 }
+
+// Preview the next bid before it's added
+const nextEntry = computed(() => {
+  if (newBid.value) {
+    const nextBid = makeBid(newBidType.value, newBid.value)
+    const fakeBids = [...bids.slice(0, steps.value), nextBid]
+    const entries = makeEntries(fakeBids)
+    return entries[entries.length - 1]
+  }
+  return null
+})
 </script>
diff --git a/market-simulator/src/components/entries.ts b/market-simulator/src/components/entries.ts
index dc907fe6..6f9103bf 100644
--- a/market-simulator/src/components/entries.ts
+++ b/market-simulator/src/components/entries.ts
@@ -1,7 +1,7 @@
 type Bid = { yesBid: number; noBid: number }
 
 // An entry has a yes/no for bid, weight, payout, return. Also a current probability
-type Entry = {
+export type Entry = {
   yesBid: number
   noBid: number
   yesWeight: number