From de15d274687cea544d375989e058530e572d0408 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Sun, 8 Mar 2026 19:55:44 +0000
Subject: [PATCH] feat: bet placement panel with odds and payout preview

BetPanel component with pick-winner buttons, preset amounts (21/100/500/
1000 sats), Cashu token paste, odds display from server, and payout
preview with 5% house cut. Wired into FightCardPage for scheduled fights.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/BetPanel.vue | 201 +++++++++++++++++++++++++++
 frontend/src/pages/FightCardPage.vue |  12 ++
 2 files changed, 213 insertions(+)
 create mode 100644 frontend/src/components/BetPanel.vue

diff --git a/frontend/src/components/BetPanel.vue b/frontend/src/components/BetPanel.vue
new file mode 100644
index 0000000..9c7d618
--- /dev/null
+++ b/frontend/src/components/BetPanel.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useWallet } from '../composables/useWallet'
+import { useNostr } from '../composables/useNostr'
+
+const props = defineProps<{
+  fightId: string
+  botA: { id: string; name: string; eloRating: number; tier: number }
+  botB: { id: string; name: string; eloRating: number; tier: number }
+}>()
+
+const { isWalletConnected, walletMethod } = useWallet()
+const { pubkey } = useNostr()
+
+// State
+const selectedBotId = ref<string | null>(null)
+const amount = ref(21)
+const cashuToken = ref('')
+const isPlacing = ref(false)
+const betError = ref('')
+const betSuccess = ref(false)
+
+// Odds
+const odds = ref<{ botAOdds: number; botBOdds: number; botAPayoutMultiplier: number; botBPayoutMultiplier: number } | null>(null)
+
+const AMOUNTS = [21, 100, 500, 1000]
+
+const selectedOdds = computed(() => {
+  if (!odds.value || !selectedBotId.value) return null
+  return selectedBotId.value === props.botA.id
+    ? odds.value.botAPayoutMultiplier
+    : odds.value.botBPayoutMultiplier
+})
+
+const payoutPreview = computed(() => {
+  if (!selectedOdds.value) return 0
+  const gross = Math.round(amount.value * selectedOdds.value)
+  const houseCut = Math.round(gross * 0.05)
+  return gross - houseCut
+})
+
+async function loadOdds() {
+  try {
+    const res = await fetch(`/api/bets/odds/${props.fightId}`)
+    if (res.ok) odds.value = await res.json()
+  } catch { /* ignore */ }
+}
+
+async function placeBet() {
+  if (!selectedBotId.value || !pubkey.value || isPlacing.value) return
+  if (amount.value <= 0) { betError.value = 'Amount must be positive'; return }
+
+  isPlacing.value = true
+  betError.value = ''
+  betSuccess.value = false
+
+  try {
+    const body: Record<string, unknown> = {
+      fightId: props.fightId,
+      pubkey: pubkey.value,
+      botId: selectedBotId.value,
+      amountSats: amount.value,
+    }
+    if (cashuToken.value.trim()) {
+      body.cashuToken = cashuToken.value.trim()
+    }
+
+    const res = await fetch('/api/bets/place', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+
+    if (res.ok) {
+      betSuccess.value = true
+      selectedBotId.value = null
+      cashuToken.value = ''
+    } else {
+      const data = await res.json()
+      betError.value = data.error || `Failed (${res.status})`
+    }
+  } catch (err) {
+    betError.value = 'Network error placing bet'
+  }
+  isPlacing.value = false
+}
+
+onMounted(loadOdds)
+</script>
+
+<template>
+  <div class="border border-neon-purple/30 rounded-lg bg-black/80 p-3 sm:p-4">
+    <h3 class="font-display font-black text-xs tracking-widest text-neon-purple mb-3">PLACE YOUR BET</h3>
+
+    <!-- Success -->
+    <div v-if="betSuccess" class="text-center py-4">
+      <p class="font-display text-neon-green text-sm tracking-wider">BET PLACED!</p>
+      <p class="font-mono text-text-muted text-xs mt-1">{{ amount }} sats on the line</p>
+      <button
+        class="mt-3 px-4 py-1.5 border border-neon-purple/40 text-neon-purple font-display text-xs tracking-wider
+               hover:bg-neon-purple/10 transition-all"
+        @click="betSuccess = false"
+      >
+        BET AGAIN
+      </button>
+    </div>
+
+    <template v-else>
+      <!-- Pick winner -->
+      <p class="font-pixel text-[9px] text-text-muted tracking-wider mb-2">PICK WINNER</p>
+      <div class="flex gap-2 mb-3">
+        <button
+          class="flex-1 py-2 px-3 rounded-lg border-2 font-display font-bold text-xs tracking-wider transition-all"
+          :class="selectedBotId === botA.id
+            ? 'border-neon-cyan bg-neon-cyan/15 text-neon-cyan'
+            : 'border-border text-text-secondary hover:border-neon-cyan/30'"
+          @click="selectedBotId = botA.id"
+        >
+          {{ botA.name }}
+          <span v-if="odds" class="block font-mono text-[9px] text-text-muted mt-0.5">
+            {{ (odds.botAOdds * 100).toFixed(0) }}% favored
+          </span>
+        </button>
+        <button
+          class="flex-1 py-2 px-3 rounded-lg border-2 font-display font-bold text-xs tracking-wider transition-all"
+          :class="selectedBotId === botB.id
+            ? 'border-neon-pink bg-neon-pink/15 text-neon-pink'
+            : 'border-border text-text-secondary hover:border-neon-pink/30'"
+          @click="selectedBotId = botB.id"
+        >
+          {{ botB.name }}
+          <span v-if="odds" class="block font-mono text-[9px] text-text-muted mt-0.5">
+            {{ (odds.botBOdds * 100).toFixed(0) }}% favored
+          </span>
+        </button>
+      </div>
+
+      <!-- Amount -->
+      <p class="font-pixel text-[9px] text-text-muted tracking-wider mb-2">AMOUNT (SATS)</p>
+      <div class="flex gap-1.5 mb-3">
+        <button
+          v-for="a in AMOUNTS"
+          :key="a"
+          class="flex-1 py-1.5 rounded-md border font-mono text-xs transition-all"
+          :class="amount === a
+            ? 'border-neon-yellow bg-neon-yellow/15 text-neon-yellow'
+            : 'border-border text-text-muted hover:border-neon-yellow/30'"
+          @click="amount = a"
+        >
+          {{ a }}
+        </button>
+      </div>
+
+      <!-- Cashu token paste -->
+      <div class="mb-3">
+        <p class="font-pixel text-[9px] text-text-muted tracking-wider mb-1">CASHU TOKEN (PASTE)</p>
+        <input
+          v-model="cashuToken"
+          type="text"
+          placeholder="cashuA..."
+          class="w-full px-3 py-1.5 bg-surface border border-border rounded-md
+                 font-mono text-xs text-text-primary placeholder:text-text-muted
+                 focus:border-neon-cyan/50 focus:outline-none transition-colors"
+        />
+      </div>
+
+      <!-- Payout preview -->
+      <div v-if="selectedBotId && selectedOdds" class="mb-3 px-3 py-2 bg-neon-green/5 border border-neon-green/20 rounded-md">
+        <div class="flex items-center justify-between">
+          <span class="font-pixel text-[9px] text-text-muted">PAYOUT (minus 5% house)</span>
+          <span class="font-display font-black text-sm text-neon-green">{{ payoutPreview }} SATS</span>
+        </div>
+        <div class="flex items-center justify-between mt-0.5">
+          <span class="font-pixel text-[9px] text-text-muted">MULTIPLIER</span>
+          <span class="font-mono text-[10px] text-neon-green">{{ (selectedOdds * 0.95).toFixed(2) }}x</span>
+        </div>
+      </div>
+
+      <!-- Error -->
+      <p v-if="betError" class="text-ko font-mono text-xs mb-2">{{ betError }}</p>
+
+      <!-- Place bet button -->
+      <button
+        :disabled="!selectedBotId || isPlacing || (!cashuToken.trim() && !isWalletConnected)"
+        class="w-full py-2.5 bg-neon-purple/10 border-2 border-neon-purple/50 text-neon-purple
+               font-display font-black text-xs tracking-widest rounded-lg
+               hover:bg-neon-purple/20 hover:border-neon-purple transition-all
+               disabled:opacity-40 disabled:cursor-not-allowed
+               flex items-center justify-center gap-2"
+        @click="placeBet"
+      >
+        <span v-if="isPlacing" class="w-4 h-4 border-2 border-neon-purple/30 border-t-neon-purple rounded-full animate-spin" />
+        {{ isPlacing ? 'PLACING...' : 'PLACE BET' }}
+      </button>
+
+      <p v-if="!isWalletConnected && !cashuToken.trim()" class="font-pixel text-[8px] text-text-muted text-center mt-2">
+        Connect wallet or paste Cashu token to bet
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/frontend/src/pages/FightCardPage.vue b/frontend/src/pages/FightCardPage.vue
index b119370..0911619 100644
--- a/frontend/src/pages/FightCardPage.vue
+++ b/frontend/src/pages/FightCardPage.vue
@@ -3,6 +3,7 @@ import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 import SpritePreview from '../components/SpritePreview.vue'
 import PixelGlove from '../components/PixelGlove.vue'
+import BetPanel from '../components/BetPanel.vue'
 
 interface BotInfo {
   name: string
@@ -15,6 +16,8 @@ interface BotInfo {
 
 interface UpcomingFight {
   id: string
+  botAId: string
+  botBId: string
   botA: BotInfo | null
   botB: BotInfo | null
   arenaInfo: { name: string } | null
@@ -409,6 +412,15 @@ onUnmounted(() => {
             </button>
           </div>
 
+          <!-- Bet panel for upcoming fights -->
+          <div v-if="featured && featured.botA && featured.botB && featured.status === 'scheduled'" class="px-4 pb-2 shrink-0">
+            <BetPanel
+              :fight-id="featured.id"
+              :bot-a="{ id: featured.botAId, name: featured.botA.name, eloRating: featured.botA.eloRating, tier: featured.botA.tier }"
+              :bot-b="{ id: featured.botBId, name: featured.botB.name, eloRating: featured.botB.eloRating, tier: featured.botB.tier }"
+            />
+          </div>
+
           <!-- Enter the ring -->
           <div class="px-4 pb-3 lg:pb-5 shrink-0">
             <RouterLink