Legrems/opus-submitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(market): better market card display

Browse Source
This commit is contained in:
Loïc Gremaud 2026-05-23 20:06:17 +02:00
parent 43b314bb20
commit 42e3571fab
Signed by: Legrems
GPG Key ID: D4620E6DF3E0121D
1 changed files with 15 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
polylan_submitter/src/components/MarketCard.vue
View File

@ -137,30 +137,21 @@ onMounted(async () => {
<!-- Options --> <!-- Options -->
<div class="card-body py-4"> <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 class="flex flex-col gap-3">
<div v-for="option in market.options" :key="option.uuid" class="form-control"> <div v-for="option in market.options" :key="option.uuid" class="form-control">
<label <label :class="[
:class="[ 'label cursor-pointer border rounded-lg p-3 hover:bg-base-200 transition h-full w-full',
'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' : ''
existingBet && existingBet.option.uuid === option.uuid ? 'border-primary border-2 bg-primary/5' : '' ]">
]"
>
<div class="flex flex-col gap-2 flex-1"> <div class="flex flex-col gap-2 flex-1">
<span class="label-text font-medium">{{ option.text }}</span> <span class="label-text font-medium">{{ option.text }}</span>
<span <span v-if="existingBet && existingBet.option.uuid === option.uuid"
v-if="existingBet && existingBet.option.uuid === option.uuid" class="badge badge-primary badge-sm w-fit">
class="badge badge-primary badge-sm w-fit"
>
Your bet: {{ existingBet.amount }} pts Your bet: {{ existingBet.amount }} pts
</span> </span>
</div> </div>
<input <input type="radio" :value="option.uuid" v-model="selectedOption" class="radio radio-primary"
type="radio" :disabled="market.status !== 'open' || !!(existingBet && existingBet.option.uuid !== option.uuid)" />
:value="option.uuid"
v-model="selectedOption"
class="radio radio-primary"
:disabled="market.status !== 'open' || !!(existingBet && existingBet.option.uuid !== option.uuid)"
/>
</label> </label>
</div> </div>
</div> </div>
@ -175,25 +166,16 @@ onMounted(async () => {
<span v-else>Points to bet</span> <span v-else>Points to bet</span>
</span> </span>
</label> </label>
<input <input v-model.number="betAmount" type="number"
v-model.number="betAmount" :placeholder="existingBet ? `Enter amount to increase by` : 'Enter points'" class="input input-bordered"
type="number" min="1" :disabled="loading" />
: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"> <div v-if="error" class="alert alert-error">
<i class="mdi mdi-alert-circle"></i> <i class="mdi mdi-alert-circle"></i>
<span>{{ error }}</span> <span>{{ error }}</span>
</div> </div>
<button <button @click="placeBet" :disabled="!canBet || loading" class="btn btn-primary">
@click="placeBet"
:disabled="!canBet || loading"
class="btn btn-primary"
>
<span v-if="loading" class="loading loading-spinner loading-sm"></span> <span v-if="loading" class="loading loading-spinner loading-sm"></span>
<span v-else-if="existingBet">Increase Bet</span> <span v-else-if="existingBet">Increase Bet</span>
<span v-else>Place Bet</span> <span v-else>Place Bet</span>
@ -217,7 +199,8 @@ onMounted(async () => {
<!-- Result --> <!-- Result -->
<div v-else-if="market.status === 'resolved' && market.winning_option" class="card-body py-4 bg-base-200"> <div v-else-if="market.status === 'resolved' && market.winning_option" class="card-body py-4 bg-base-200">
<div class="text-sm"> <div class="text-sm">
<div class="font-semibold" :class="existingBet && existingBet.option.uuid === market.winning_option.uuid ? 'text-success' : 'text-error'"> <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-if="existingBet && existingBet.option.uuid === market.winning_option.uuid">✓ You Won!</span>
<span v-else-if="existingBet">✗ You Lost</span> <span v-else-if="existingBet">✗ You Lost</span>
<span v-else>Resolved</span> <span v-else>Resolved</span>