chore: add i18n

This commit is contained in:
2026-09-16 22:41:59 +02:00
parent f68c4e50e8
commit 13b14abb12
39 changed files with 906 additions and 411 deletions
+31 -29
View File
@@ -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>