{{ title }}
{{ subtitle }} · {{ placedDate }}
@@ -125,28 +141,6 @@ function goDetail() {
background: rgba(255, 255, 255, 0.02);
}
-.watermark {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%) rotate(-35deg);
- font-size: 28px;
- font-weight: 900;
- letter-spacing: 0.06em;
- white-space: nowrap;
- pointer-events: none;
- text-transform: uppercase;
- opacity: 0.18;
- max-width: 90%;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.watermark.won { color: #3db865; }
-.watermark.lost { color: #e05050; }
-.watermark.push { color: #888; }
-.watermark.pending { color: #e8c84a; }
-
.card-left {
flex: 1;
min-width: 0;
diff --git a/apps/player/src/components/LeagueAccordionItem.vue b/apps/player/src/components/LeagueAccordionItem.vue
index 8143161..536148a 100644
--- a/apps/player/src/components/LeagueAccordionItem.vue
+++ b/apps/player/src/components/LeagueAccordionItem.vue
@@ -16,6 +16,14 @@ defineProps<{
homeTeamLogoUrl?: string | null;
awayTeamLogoUrl?: string | null;
startTime: string;
+ bettingOpen?: boolean;
+ matchPhase?: import('../utils/matchPhase').MatchPhase;
+ score?: {
+ htHome: number;
+ htAway: number;
+ ftHome: number;
+ ftAway: number;
+ } | null;
}[];
}>();
diff --git a/apps/player/src/components/MatchBetCard.vue b/apps/player/src/components/MatchBetCard.vue
index 96f50ae..4f80696 100644
--- a/apps/player/src/components/MatchBetCard.vue
+++ b/apps/player/src/components/MatchBetCard.vue
@@ -2,6 +2,8 @@
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { teamFlagUrl } from '../utils/teamFlag';
+import StatusWatermark from './StatusWatermark.vue';
+import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../utils/matchPhase';
const props = defineProps<{
match: {
@@ -13,6 +15,14 @@ const props = defineProps<{
homeTeamLogoUrl?: string | null;
awayTeamLogoUrl?: string | null;
startTime: string;
+ bettingOpen?: boolean;
+ matchPhase?: MatchPhase;
+ score?: {
+ htHome: number;
+ htAway: number;
+ ftHome: number;
+ ftAway: number;
+ } | null;
};
}>();
@@ -44,12 +54,36 @@ const awayFlagUrl = computed(() =>
const homeIsLogo = computed(() => Boolean(props.match.homeTeamLogoUrl?.trim()));
const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
+
+const bettingOpen = computed(() => props.match.bettingOpen !== false);
+
+const phase = computed(
+ () => props.match.matchPhase ?? (bettingOpen.value ? 'open' : 'closed_pending'),
+);
+
+const phaseLabel = computed(() => matchPhaseLabel(t, phase.value));
+
+const liveScoreText = computed(() => {
+ const s = props.match.score;
+ if (!s) return '';
+ return `${s.ftHome} - ${s.ftAway}`;
+});
-
+
+
diff --git a/apps/player/src/components/StatusWatermark.vue b/apps/player/src/components/StatusWatermark.vue
new file mode 100644
index 0000000..003912f
--- /dev/null
+++ b/apps/player/src/components/StatusWatermark.vue
@@ -0,0 +1,68 @@
+
+
+
+ {{ label }}
+
+
+
diff --git a/apps/player/src/components/match-detail/CorrectScorePanel.vue b/apps/player/src/components/match-detail/CorrectScorePanel.vue
index bb28930..2c5292e 100644
--- a/apps/player/src/components/match-detail/CorrectScorePanel.vue
+++ b/apps/player/src/components/match-detail/CorrectScorePanel.vue
@@ -13,6 +13,7 @@ const props = defineProps<{
oddsVersion: string;
}>;
stakes: Record;
+ locked?: boolean;
}>();
const emit = defineEmits<{
@@ -26,6 +27,7 @@ const columns = computed(() =>
);
function setStake(sel: CsSelection, raw: string) {
+ if (props.locked) return;
const n = Math.max(0, Number(raw) || 0);
emit('update:stakes', { ...props.stakes, [sel.id]: n });
}
@@ -37,7 +39,7 @@ function formatOdds(odds: string) {
-
-
-
{{ match.homeTeamName }}
![]()
Boolean(props.match.awayTeamLogoUrl?.trim()));
/>
-
{{ kickoffText }}
- VS
+ {{ liveScoreText }}
+ VS
-
{{ match.awayTeamName }}
![]()
Boolean(props.match.awayTeamLogoUrl?.trim()));
+
{{ t('bet.col_home') }}
{{ t('bet.col_draw') }}
@@ -57,6 +59,7 @@ function formatOdds(odds: string) {
inputmode="decimal"
:placeholder="t('bet.stake_placeholder')"
:value="stakes[sel.id] ?? ''"
+ :disabled="locked"
@input="setStake(sel, ($event.target as HTMLInputElement).value)"
/>
@@ -70,6 +73,14 @@ function formatOdds(odds: string) {
padding: 6px 8px 0;
}
+.cs-panel--locked {
+ opacity: 0.72;
+}
+
+.cs-panel--locked .stake-input {
+ cursor: not-allowed;
+}
+
.cols-head {
display: grid;
grid-template-columns: repeat(3, 1fr);
diff --git a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
index 17d3fbf..2b596c4 100644
--- a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
+++ b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
}[];
isSelected: (id: string) => boolean;
compact?: boolean;
+ locked?: boolean;
}>();
const emit = defineEmits<{ pick: [id: string] }>();
@@ -22,18 +23,24 @@ function label(sel: (typeof props.selections)[number]) {
}
return sel.selectionName;
}
+
+function onPick(id: string) {
+ if (props.locked) return;
+ emit('pick', id);
+}
-
+
-
+