feat(market): basic page + submit

polylan_submitter/src/Home.vue

@@ -47,6 +47,26 @@ onMounted(async () => {
 
       <!-- Cards Grid -->
       <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <!-- Market Card -->
+        <div @click="navigate('/market')"
+          class="card card-xl bg-base-200 shadow-xl hover:shadow-2xl transition-all cursor-pointer transform hover:-translate-y-2 hover:scale-[1.05] hover:bg-base-100 overflow-hidden">
+          <figure class="relative h-60 bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center">
+            <i class="mdi mdi-chart-box text-6xl text-white opacity-80"></i>
+            <div class="absolute inset-0 bg-black/30 group-hover:bg-black/20 transition-colors"></div>
+          </figure>
+          <div class="card-body">
+            <h2 class="card-title text-2xl">Market</h2>
+            <p class="text-base-content/70">Place your bets and compete</p>
+            <div class="card-actions justify-end mt-4">
+              <button class="btn btn-primary">
+                <i class="mdi mdi-arrow-right mr-2"></i>
+                Place bets
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Game Cards -->
         <div v-for="game in games" :key="game.steam_app_id" @click="navigate(game.path)"
           class="card card-xl bg-base-200 shadow-xl hover:shadow-2xl transition-all cursor-pointer transform hover:-translate-y-2 hover:scale-[1.05] hover:bg-base-100 overflow-hidden">
           <figure class="relative h-60 bg-base-300 overflow-hidden">

polylan_submitter/src/Market.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { apiService } from "./services/apiService";
+import type { Market } from "./types";
+import MarketCard from "./components/MarketCard.vue";
+import UserBets from "./components/UserBets.vue";
+
+const markets = ref<Market[]>([]);
+const loading = ref(true);
+const userInfo = ref<any>(null);
+
+const goHome = () => {
+  window.location.href = "/";
+};
+
+const reloadPage = () => {
+  window.location.reload();
+};
+
+onMounted(async () => {
+  // Fetch user info
+  const userResponse = await apiService.getUserInfo();
+  if (userResponse.data) {
+    userInfo.value = userResponse.data;
+  }
+
+  // Fetch markets
+  const response = await apiService.getMarkets();
+  if (response.data) {
+    markets.value = response.data;
+  }
+  loading.value = false;
+});
+</script>
+
+<template>
+  <div class="min-h-screen bg-base-200">
+    <!-- Header -->
+    <div class="navbar bg-base-100 shadow-lg">
+      <div class="container min-w-3/4 mx-auto w-full flex items-center gap-4">
+        <button @click="goHome" class="btn btn-primary btn-sm">
+          <i class="mdi mdi-arrow-left"></i>
+          Back
+        </button>
+        <h1 class="text-xl font-bold">Market</h1>
+        <div class="flex-1"></div>
+        <div class="flex items-center gap-4">
+          <div v-if="userInfo?.is_authenticated" class="flex items-center gap-2">
+            <div class="text-sm">
+              <span class="font-medium">{{ userInfo.username }}</span>
+              <span v-if="userInfo.is_superuser" class="badge badge-warning badge-xs ml-1">Admin</span>
+            </div>
+          </div>
+          <div v-else class="text-sm text-base-content/70">Not logged in</div>
+          <a href="/api/docs" class="btn btn-xs">API docs</a>
+          <a href="/admin" class="btn btn-xs btn-warning">Admin panel</a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="container min-w-3/4 mx-auto px-4 py-8">
+      <!-- Header -->
+      <div class="mb-8">
+        <h2 class="text-3xl font-bold mb-2">Market</h2>
+        <p class="text-base-content/70">Place your bets on upcoming events</p>
+      </div>
+
+      <!-- Loading -->
+      <div v-if="loading" class="flex justify-center py-20">
+        <span class="loading loading-spinner loading-lg"></span>
+      </div>
+
+      <!-- Content -->
+      <template v-else>
+        <div class="space-y-8">
+          <!-- My Bets Section -->
+          <div v-if="userInfo?.is_authenticated">
+            <h3 class="text-2xl font-bold mb-4 flex items-center gap-2">
+              <i class="mdi mdi-heart text-error"></i>
+              My Bets
+            </h3>
+            <UserBets :markets="markets" @refresh="reloadPage" />
+          </div>
+
+          <!-- All Markets Section -->
+          <div>
+            <h3 class="text-2xl font-bold mb-4 flex items-center gap-2">
+              <i class="mdi mdi-list"></i>
+              All Markets
+            </h3>
+
+            <div v-if="markets.length === 0" class="alert">
+              <i class="mdi mdi-information mr-2"></i>
+              <span>No markets available</span>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <MarketCard
+                v-for="market in markets"
+                :key="market.uuid"
+                :market="market"
+                @refresh="reloadPage"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

polylan_submitter/src/components/MarketCard.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { apiService } from "../services/apiService";
+import type { Market, UserBet } from "../types";
+
+const props = defineProps<{
+  market: Market;
+}>();
+
+const emit = defineEmits<{
+  refresh: [];
+}>();
+
+const selectedOption = ref<string | null>(null);
+const betAmount = ref<number>(0);
+const loading = ref(false);
+const error = ref<string>("");
+const userInfo = ref<any>(null);
+const userBets = ref<UserBet[]>([]);
+const existingBet = ref<UserBet | null>(null);
+
+const timeRemaining = computed(() => {
+  const endDate = new Date(props.market.end_date).getTime();
+  const now = new Date().getTime();
+  const diff = endDate - now;
+
+  if (diff <= 0) return "Ended";
+
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+
+  if (days > 0) return `${days}d ${hours}h`;
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  return `${minutes}m`;
+});
+
+const statusColor = computed(() => {
+  switch (props.market.status) {
+    case "open":
+      return "badge-success";
+    case "closed":
+      return "badge-warning";
+    case "resolved":
+      return "badge-info";
+    default:
+      return "badge-ghost";
+  }
+});
+
+const canBet = computed(() => {
+  return props.market.status === "open" && userInfo.value?.is_authenticated && selectedOption.value && betAmount.value > 0;
+});
+
+const placeBet = async () => {
+  if (!selectedOption.value || !betAmount.value) return;
+
+  loading.value = true;
+  error.value = "";
+
+  try {
+    const response = await apiService.placeBet(props.market.uuid, {
+      option_uuid: selectedOption.value,
+      amount: betAmount.value,
+    });
+
+    if (response.status === 200 || response.status === 201) {
+      // Reload user bets to reflect the new bet
+      await loadUserBets();
+      betAmount.value = 0;
+    } else {
+      error.value = response.error || "Failed to place bet";
+    }
+  } catch (e) {
+    error.value = "Error placing bet";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const initializeUserInfo = async () => {
+  const response = await apiService.getUserInfo();
+  if (response.data) {
+    userInfo.value = response.data;
+  }
+};
+
+const loadUserBets = async () => {
+  const response = await apiService.getUserBets();
+  if (response.data) {
+    userBets.value = response.data;
+    // Find if user has a bet on this market
+    existingBet.value = response.data.find(bet => bet.market.uuid === props.market.uuid) || null;
+    if (existingBet.value) {
+      selectedOption.value = existingBet.value.option.uuid;
+      betAmount.value = existingBet.value.amount;
+    }
+  }
+};
+
+onMounted(async () => {
+  await initializeUserInfo();
+  if (userInfo.value?.is_authenticated) {
+    await loadUserBets();
+  }
+});
+</script>
+
+<template>
+  <div class="card bg-base-100 shadow-xl">
+    <!-- Header -->
+    <div class="card-body pb-3">
+      <div class="flex justify-between items-start gap-4">
+        <div class="flex-1">
+          <h2 class="card-title text-2xl mb-2">{{ market.title }}</h2>
+          <p class="text-sm text-base-content/70">{{ market.description }}</p>
+        </div>
+        <div class="flex flex-col items-end gap-2">
+          <div :class="['badge', statusColor, 'text-white']">
+            {{ market.status }}
+          </div>
+          <div class="text-sm text-base-content/60 text-right">
+            <div>{{ timeRemaining }}</div>
+            <div class="text-xs">until close</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="divider my-0"></div>
+
+    <!-- Options -->
+    <div class="card-body py-4">
+      <div class="grid gap-3" :class="market.options.length > 2 ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' : 'grid-cols-1 md:grid-cols-2'">
+        <div v-for="option in market.options" :key="option.uuid" class="form-control">
+          <label
+            :class="[
+              'label cursor-pointer border rounded-lg p-3 hover:bg-base-200 transition h-full',
+              existingBet && existingBet.option.uuid === option.uuid ? 'border-primary border-2 bg-primary/5' : ''
+            ]"
+          >
+            <div class="flex flex-col gap-2 flex-1">
+              <span class="label-text font-medium">{{ option.text }}</span>
+              <span
+                v-if="existingBet && existingBet.option.uuid === option.uuid"
+                class="badge badge-primary badge-sm w-fit"
+              >
+                Your bet: {{ existingBet.amount }} pts
+              </span>
+            </div>
+            <input
+              type="radio"
+              :value="option.uuid"
+              v-model="selectedOption"
+              class="radio radio-primary"
+              :disabled="market.status !== 'open' || !!(existingBet && existingBet.option.uuid !== option.uuid)"
+            />
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bet Input -->
+    <div v-if="market.status === 'open' && userInfo?.is_authenticated && selectedOption" class="card-body py-4">
+      <div class="form-control gap-3">
+        <label class="label">
+          <span class="label-text">
+            <span v-if="existingBet">Increase bet (current: {{ existingBet.amount }} pts)</span>
+            <span v-else>Points to bet</span>
+          </span>
+        </label>
+        <input
+          v-model.number="betAmount"
+          type="number"
+          :placeholder="existingBet ? `Enter amount to increase by` : 'Enter points'"
+          class="input input-bordered"
+          min="1"
+          :disabled="loading"
+        />
+
+        <div v-if="error" class="alert alert-error">
+          <i class="mdi mdi-alert-circle"></i>
+          <span>{{ error }}</span>
+        </div>
+
+        <button
+          @click="placeBet"
+          :disabled="!canBet || loading"
+          class="btn btn-primary"
+        >
+          <span v-if="loading" class="loading loading-spinner loading-sm"></span>
+          <span v-else-if="existingBet">Increase Bet</span>
+          <span v-else>Place Bet</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Show existing bet (market closed/resolved) -->
+    <div v-else-if="market.status !== 'open' && existingBet" class="card-body py-4 bg-base-200">
+      <div class="text-sm">
+        <div class="font-semibold">Your Bet</div>
+        <div class="text-base-content/70 mt-1">
+          Option: <span class="font-semibold">{{ existingBet.option.text }}</span>
+        </div>
+        <div class="text-base-content/70">
+          Amount: <span class="font-semibold">{{ existingBet.amount }} pts</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Result -->
+    <div v-else-if="market.status === 'resolved' && market.winning_option" class="card-body py-4 bg-base-200">
+      <div class="text-sm">
+        <div class="font-semibold" :class="existingBet && existingBet.option.uuid === market.winning_option.uuid ? 'text-success' : 'text-error'">
+          <span v-if="existingBet && existingBet.option.uuid === market.winning_option.uuid">✓ You Won!</span>
+          <span v-else-if="existingBet">✗ You Lost</span>
+          <span v-else>Resolved</span>
+        </div>
+        <div class="text-base-content/70 mt-1">
+          Winner: <span class="font-semibold">{{ market.winning_option.text }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

polylan_submitter/src/components/UserBets.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { apiService } from "../services/apiService";
+import type { UserBet } from "../types";
+
+defineEmits<{
+  refresh: [];
+}>();
+
+const userBets = ref<UserBet[]>([]);
+const loading = ref(true);
+
+const totalBetAmount = computed(() => {
+  return userBets.value.reduce((sum, bet) => sum + bet.amount, 0);
+});
+
+const winningBets = computed(() => {
+  return userBets.value.filter(bet => {
+    const market = bet.market;
+    return market.status === "resolved" && market.winning_option?.uuid === bet.option.uuid;
+  });
+});
+
+const losingBets = computed(() => {
+  return userBets.value.filter(bet => {
+    const market = bet.market;
+    return market.status === "resolved" && market.winning_option?.uuid !== bet.option.uuid;
+  });
+});
+
+const openBets = computed(() => {
+  return userBets.value.filter(bet => bet.market.status === "open");
+});
+
+const totalWinnings = computed(() => {
+  return winningBets.value.reduce((sum, bet) => sum + bet.amount, 0);
+});
+
+onMounted(async () => {
+  const response = await apiService.getUserBets();
+  if (response.data) {
+    userBets.value = response.data;
+  }
+  loading.value = false;
+});
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- Loading -->
+    <div v-if="loading" class="flex justify-center py-20">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="userBets.length === 0" class="alert">
+      <i class="mdi mdi-information mr-2"></i>
+      <span>You haven't placed any bets yet</span>
+    </div>
+
+    <!-- Content -->
+    <template v-else>
+      <!-- Stats -->
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div class="stat bg-base-100 rounded-lg shadow">
+          <div class="stat-title text-sm">Total Bets</div>
+          <div class="stat-value text-2xl">{{ userBets.length }}</div>
+          <div class="stat-desc text-xs">{{ totalBetAmount }} points</div>
+        </div>
+
+        <div class="stat bg-base-100 rounded-lg shadow">
+          <div class="stat-title text-sm">Active</div>
+          <div class="stat-value text-2xl text-info">{{ openBets.length }}</div>
+          <div class="stat-desc text-xs">Waiting for result</div>
+        </div>
+
+        <div class="stat bg-base-100 rounded-lg shadow">
+          <div class="stat-title text-sm">Won</div>
+          <div class="stat-value text-2xl text-success">{{ winningBets.length }}</div>
+          <div class="stat-desc text-xs text-success">+{{ totalWinnings }} points</div>
+        </div>
+
+        <div class="stat bg-base-100 rounded-lg shadow">
+          <div class="stat-title text-sm">Lost</div>
+          <div class="stat-value text-2xl text-error">{{ losingBets.length }}</div>
+          <div class="stat-desc text-xs">Better luck next time</div>
+        </div>
+      </div>
+
+      <!-- Bets Sections -->
+      <div class="space-y-6">
+        <!-- Open Bets -->
+        <div v-if="openBets.length > 0">
+          <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
+            <i class="mdi mdi-progress-clock text-info"></i>
+            Active Bets ({{ openBets.length }})
+          </h3>
+          <div class="space-y-4">
+            <div
+              v-for="bet in openBets"
+              :key="bet.uuid"
+              class="card bg-base-100 shadow hover:shadow-lg transition-shadow"
+            >
+              <div class="card-body py-4">
+                <div class="flex justify-between items-start">
+                  <div class="flex-1">
+                    <h4 class="font-semibold text-lg">{{ bet.market.title }}</h4>
+                    <p class="text-sm text-base-content/70">
+                      Bet on: <span class="font-medium">{{ bet.option.text }}</span>
+                    </p>
+                  </div>
+                  <div class="text-right">
+                    <div class="text-lg font-bold">{{ bet.amount }} pts</div>
+                    <div class="text-xs text-base-content/60 mt-1">
+                      Status: <span class="badge badge-info badge-sm">{{ bet.market.status }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Winning Bets -->
+        <div v-if="winningBets.length > 0">
+          <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
+            <i class="mdi mdi-check-circle text-success"></i>
+            Won Bets ({{ winningBets.length }})
+          </h3>
+          <div class="space-y-4">
+            <div
+              v-for="bet in winningBets"
+              :key="bet.uuid"
+              class="card bg-success/10 border border-success shadow"
+            >
+              <div class="card-body py-4">
+                <div class="flex justify-between items-start">
+                  <div class="flex-1">
+                    <h4 class="font-semibold text-lg">{{ bet.market.title }}</h4>
+                    <p class="text-sm text-base-content/70">
+                      Correct! You bet on: <span class="font-medium text-success">{{ bet.option.text }}</span>
+                    </p>
+                  </div>
+                  <div class="text-right">
+                    <div class="text-lg font-bold text-success">+{{ bet.amount }} pts</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Losing Bets -->
+        <div v-if="losingBets.length > 0">
+          <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
+            <i class="mdi mdi-close-circle text-error"></i>
+            Lost Bets ({{ losingBets.length }})
+          </h3>
+          <div class="space-y-4">
+            <div
+              v-for="bet in losingBets"
+              :key="bet.uuid"
+              class="card bg-error/10 border border-error shadow"
+            >
+              <div class="card-body py-4">
+                <div class="flex justify-between items-start">
+                  <div class="flex-1">
+                    <h4 class="font-semibold text-lg">{{ bet.market.title }}</h4>
+                    <p class="text-sm text-base-content/70">
+                      You bet on: <span class="font-medium">{{ bet.option.text }}</span>
+                    </p>
+                    <p class="text-sm text-base-content/60 mt-1">
+                      Winner: <span class="font-medium">{{ bet.market.winning_option?.text }}</span>
+                    </p>
+                  </div>
+                  <div class="text-right">
+                    <div class="text-lg font-bold text-error">-{{ bet.amount }} pts</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

polylan_submitter/src/market.ts

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import Market from '@/Market.vue'
+import '@/style.css'
+
+const selector = "#app"
+const mountData = document.querySelector<HTMLElement>(selector)
+const app = createApp(Market, { ...mountData?.dataset })
+app.mount(selector)

polylan_submitter/src/services/apiService.ts

@@ -7,7 +7,9 @@ import type {
   SubmissionFile,
   UserInfo,
   TournamentSubmissions,
-  TournamentPuzzleResults
+  TournamentPuzzleResults,
+  Market,
+  UserBet
 } from '../types'
 
 // API Configuration
@@ -215,6 +217,38 @@ export class ApiService {
   async getUserInfo(): Promise<ApiResponse<UserInfo>> {
     return this.request<UserInfo>('/user')
   }
+
+  // Market endpoints
+  async getMarkets(): Promise<ApiResponse<Market[]>> {
+    return this.request<Market[]>('/market/')
+  }
+
+  async placeBet(marketUuid: string, betData: {
+    option_uuid: string
+    amount: number
+  }): Promise<ApiResponse<UserBet>> {
+    return this.request<UserBet>(`/market/${marketUuid}/bets`, {
+      method: 'POST',
+      body: JSON.stringify(betData),
+    })
+  }
+
+  async getUserBets(): Promise<ApiResponse<UserBet[]>> {
+    return this.request<UserBet[]>('/market/user/bets')
+  }
+
+  async closeMarket(marketUuid: string): Promise<ApiResponse<{ status: string }>> {
+    return this.request<{ status: string }>(`/market/${marketUuid}/actions/close`, {
+      method: 'POST',
+    })
+  }
+
+  async resolveMarket(marketUuid: string, winningOptionUuid: string): Promise<ApiResponse<Market>> {
+    return this.request<Market>(`/market/${marketUuid}/actions/resolve`, {
+      method: 'POST',
+      body: JSON.stringify({ winning_option_uuid: winningOptionUuid }),
+    })
+  }
 }
 
 // Singleton instance

polylan_submitter/src/types/index.ts

@@ -169,3 +169,30 @@ export interface PuzzleResults {
 export interface TournamentPuzzleResults {
   results: PuzzleResults[]
 }
+
+export interface MarketOption {
+  uuid: string
+  text: string
+  position: number
+}
+
+export interface Market {
+  uuid: string
+  title: string
+  description: string
+  type: 'yes_no' | 'multiple'
+  status: 'open' | 'closed' | 'resolved'
+  end_date: string
+  created_at: string
+  options: MarketOption[]
+  winning_option?: MarketOption | null
+  userHasBet?: boolean
+}
+
+export interface UserBet {
+  uuid: string
+  amount: number
+  created_at: string
+  option: MarketOption
+  market: Market
+}