chore: add i18n
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { marketApiCreateBet, marketApiCloseMarket, marketApiResolveMarket } from "../api";
|
||||
import { useMarketStore } from "../stores/market";
|
||||
import { useEventPath } from "../composables/useEventPath";
|
||||
@@ -15,6 +16,7 @@ const emit = defineEmits<{
|
||||
refresh: [];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const eventPath = useEventPath();
|
||||
const marketStore = useMarketStore();
|
||||
const { userInfo, userBets } = storeToRefs(marketStore);
|
||||
@@ -33,7 +35,7 @@ const timeRemaining = computed(() => {
|
||||
const now = new Date().getTime();
|
||||
const diff = endDate - now;
|
||||
|
||||
if (diff <= 0) return "Ended";
|
||||
if (diff <= 0) return t("components.marketCard.ended");
|
||||
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
@@ -88,7 +90,7 @@ const closeMarket = async () => {
|
||||
});
|
||||
emit("refresh");
|
||||
} catch (e) {
|
||||
error.value = "Error closing market";
|
||||
error.value = t("components.marketCard.errorClosing");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
@@ -96,7 +98,7 @@ const closeMarket = async () => {
|
||||
|
||||
const resolveMarket = async () => {
|
||||
if (!selectedWinningOption.value) {
|
||||
error.value = "Please select a winning option";
|
||||
error.value = t("components.marketCard.selectWinnerRequired");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -118,7 +120,7 @@ const resolveMarket = async () => {
|
||||
} else if (typeof err === 'string') {
|
||||
error.value = err;
|
||||
} else {
|
||||
error.value = "Error resolving market";
|
||||
error.value = t("components.marketCard.errorResolving");
|
||||
}
|
||||
} finally {
|
||||
resolveLoading.value = false;
|
||||
@@ -155,11 +157,11 @@ const placeBet = async () => {
|
||||
} else if (typeof err === 'string') {
|
||||
error.value = err;
|
||||
} else {
|
||||
error.value = "Failed to place bet";
|
||||
error.value = t("components.marketCard.failedToPlaceBet");
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = "Error placing bet";
|
||||
error.value = t("components.marketCard.errorPlacingBet");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
@@ -193,7 +195,7 @@ const updateExistingBet = () => {
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<div class="flex gap-2 items-center">
|
||||
<div :class="['badge', statusColor, 'text-white']">
|
||||
{{ market.status }}
|
||||
{{ t(`common.marketStatus.${market.status}`) }}
|
||||
</div>
|
||||
<div v-if="market.multiplier > 1" class="badge badge-accent text-white font-bold">
|
||||
{{ market.multiplier }}x
|
||||
@@ -201,7 +203,7 @@ const updateExistingBet = () => {
|
||||
</div>
|
||||
<div v-if="market.status === 'open' || market.status === 'closed'" class="text-sm text-base-content/60 text-right">
|
||||
<div>{{ timeRemaining }}</div>
|
||||
<div class="text-xs">until close</div>
|
||||
<div class="text-xs">{{ t("components.marketCard.untilClose") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -214,10 +216,10 @@ const updateExistingBet = () => {
|
||||
<div class="flex gap-2">
|
||||
<button v-if="market.status === 'open'" @click="closeMarket" :disabled="loading" class="btn btn-sm btn-warning">
|
||||
<span v-if="loading" class="loading loading-spinner loading-sm"></span>
|
||||
<span v-else>Close Market</span>
|
||||
<span v-else>{{ t("components.marketCard.closeMarket") }}</span>
|
||||
</button>
|
||||
<button v-if="market.status === 'closed'" @click="showResolveModal = true" class="btn btn-sm btn-success">
|
||||
Resolve Market
|
||||
{{ t("components.marketCard.resolveMarketButton") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -225,7 +227,7 @@ const updateExistingBet = () => {
|
||||
<!-- Resolve Modal -->
|
||||
<dialog v-if="showResolveModal" class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4">Resolve Market - Select Winner</h3>
|
||||
<h3 class="font-bold text-lg mb-4">{{ t("components.marketCard.resolveModalTitle") }}</h3>
|
||||
|
||||
<div class="space-y-2 mb-4">
|
||||
<div v-for="option in market.options" :key="option.uuid" class="form-control">
|
||||
@@ -243,11 +245,11 @@ const updateExistingBet = () => {
|
||||
|
||||
<div class="modal-action">
|
||||
<button @click="showResolveModal = false" class="btn" :disabled="resolveLoading">
|
||||
Cancel
|
||||
{{ t("common.cancel") }}
|
||||
</button>
|
||||
<button @click="resolveMarket" :disabled="!selectedWinningOption || resolveLoading" class="btn btn-primary">
|
||||
<span v-if="resolveLoading" class="loading loading-spinner loading-sm"></span>
|
||||
<span v-else>Resolve & Distribute Points</span>
|
||||
<span v-else>{{ t("components.marketCard.resolveAndDistribute") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -265,15 +267,15 @@ const updateExistingBet = () => {
|
||||
<div class="flex flex-col gap-2 flex-1">
|
||||
<span class="label-text font-medium">{{ option.text }}</span>
|
||||
<div class="text-xs text-base-content/60">
|
||||
<div>Pool: {{ option.total_bets }} pts</div>
|
||||
<div v-if="option.total_bets > 0">Multiplier: {{ getMultiplier(option).toFixed(2) }}x</div>
|
||||
<div>{{ t("components.marketCard.pool", { n: option.total_bets }) }}</div>
|
||||
<div v-if="option.total_bets > 0">{{ t("components.marketCard.multiplierLabel", { x: getMultiplier(option).toFixed(2) }) }}</div>
|
||||
</div>
|
||||
<div v-if="existingBet && existingBet.option.uuid === option.uuid" class="flex flex-col gap-1">
|
||||
<span class="badge badge-primary badge-sm w-fit">
|
||||
Your bet: {{ existingBet.amount }} pts
|
||||
{{ t("components.marketCard.yourBet", { n: existingBet.amount }) }}
|
||||
</span>
|
||||
<span v-if="option.total_bets > 0" class="badge badge-success badge-sm w-fit">
|
||||
Potential: {{ getPotentialGain(option) }} pts
|
||||
{{ t("components.marketCard.potential", { n: getPotentialGain(option) }) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -289,12 +291,12 @@ const updateExistingBet = () => {
|
||||
<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 v-if="existingBet">{{ t("components.marketCard.increaseBetLabel", { n: existingBet.amount }) }}</span>
|
||||
<span v-else>{{ t("components.marketCard.pointsToBet") }}</span>
|
||||
</span>
|
||||
</label>
|
||||
<input v-model.number="betAmount" type="number"
|
||||
:placeholder="existingBet ? `Enter amount to increase by` : 'Enter points'" class="input input-bordered"
|
||||
:placeholder="existingBet ? t('components.marketCard.increaseByPlaceholder') : t('components.marketCard.enterPointsPlaceholder')" class="input input-bordered"
|
||||
min="1" :disabled="loading" />
|
||||
|
||||
<div v-if="error" class="alert alert-error">
|
||||
@@ -304,8 +306,8 @@ const updateExistingBet = () => {
|
||||
|
||||
<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>
|
||||
<span v-else-if="existingBet">{{ t("components.marketCard.increaseBet") }}</span>
|
||||
<span v-else>{{ t("components.marketCard.placeBet") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -313,12 +315,12 @@ const updateExistingBet = () => {
|
||||
<!-- 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="font-semibold">{{ t("components.marketCard.yourBetTitle") }}</div>
|
||||
<div class="text-base-content/70 mt-1">
|
||||
Option: <span class="font-semibold">{{ existingBet.option.text }}</span>
|
||||
{{ t("components.marketCard.optionLabel", { text: existingBet.option.text }) }}
|
||||
</div>
|
||||
<div class="text-base-content/70">
|
||||
Amount: <span class="font-semibold">{{ existingBet.amount }} pts</span>
|
||||
{{ t("components.marketCard.amountLabel", { n: existingBet.amount }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -328,12 +330,12 @@ const updateExistingBet = () => {
|
||||
<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>
|
||||
<span v-if="existingBet && existingBet.option.uuid === market.winning_option.uuid">{{ t("components.marketCard.won") }}</span>
|
||||
<span v-else-if="existingBet">{{ t("components.marketCard.lost") }}</span>
|
||||
<span v-else>{{ t("components.marketCard.resolved") }}</span>
|
||||
</div>
|
||||
<div class="text-base-content/70 mt-1">
|
||||
Winner: <span class="font-semibold">{{ market.winning_option.text }}</span>
|
||||
{{ t("components.marketCard.winnerLabel", { text: market.winning_option.text }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user