399 lines
17 KiB
HTML
399 lines
17 KiB
HTML
{{define "football"}}
|
||
<div id="panel-football" class="tool-panel">
|
||
<header class="page-header">
|
||
<h1 style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
|
||
<span>⚽</span> 足球概率模拟
|
||
</h1>
|
||
<p style="font-size: 16px; color: #86868b; margin: 0;">使用蒙特卡洛算法进行足球赛事出线概率模拟计算。</p>
|
||
</header>
|
||
|
||
<div class="tabs-container">
|
||
<div class="tab-btn active" id="tab-btn-wc">2026世界杯小组赛模拟</div>
|
||
<div class="tab-btn" id="tab-btn-afc" style="cursor: default; opacity: 0.5; font-weight: normal;" title="暂未开放">18(3*6) AFC qualification</div>
|
||
</div>
|
||
|
||
<!-- Tab 1: World Cup Simulator -->
|
||
<div id="football-tab-wc" class="football-tab-content">
|
||
<!-- Inputs Group Boxes -->
|
||
<div style="margin-bottom: 24px;">
|
||
<h2 style="font-size: 18px; font-weight: 700; color: #1d1d1f; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center;">
|
||
<span>📅 小组赛比分录入 (Completed Matches by Group)</span>
|
||
<button type="button" class="btn-sec" onclick="resetMatchesToDefault()" style="height: 28px; padding: 0 10px; font-size: 12px;">重置默认比分</button>
|
||
</h2>
|
||
|
||
<div id="groups-input-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;">
|
||
<!-- JS 动态注入 12 个小组盒子 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Actions -->
|
||
<div class="card" style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px;">
|
||
<div style="display: flex; align-items: center; gap: 10px;">
|
||
<label for="sim-count" style="font-size: 15px; font-weight: 600;">模拟次数 (Runs):</label>
|
||
<select id="sim-count" style="width: 140px; height: 38px; padding: 0 10px; font-size: 14px;">
|
||
<option value="10000">10,000 (快速)</option>
|
||
<option value="50000" selected>50,000 (标准)</option>
|
||
<option value="100000">100,000 (精准)</option>
|
||
</select>
|
||
</div>
|
||
<button id="run-simulation-btn" onclick="startSimulation()" style="min-width: 180px; height: 44px; font-size: 15px;">
|
||
🚀 运行蒙特卡洛模拟
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Loading -->
|
||
<div id="simulation-loading" style="display: none; text-align: center; padding: 30px; margin-bottom: 24px;" class="card">
|
||
<div class="spinner" style="border: 3px solid rgba(0,0,0,0.1); width: 40px; height: 40px; border-radius: 50%; border-left-color: var(--apple-blue); animation: spin 1s linear infinite; margin: 0 auto 12px;"></div>
|
||
<p style="font-size: 15px; color: #86868b; margin: 0;">正在进行蒙特卡洛模拟计算，请稍候...</p>
|
||
</div>
|
||
|
||
<!-- Results -->
|
||
<div id="simulation-results" style="display: none;">
|
||
<div class="card" style="margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
|
||
<h2 style="font-size: 20px; font-weight: 700; margin: 0;">📈 模拟预测结果</h2>
|
||
<span id="sim-duration-badge" style="font-size: 14px; color: #86868b; background: #f5f5f7; padding: 4px 10px; border-radius: 8px;"></span>
|
||
</div>
|
||
|
||
<!-- Group Cards Grid -->
|
||
<div id="groups-results-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;">
|
||
<!-- Group cards will be generated here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.btn-sec {
|
||
background-color: #f5f5f7;
|
||
color: #1d1d1f;
|
||
border: 1px solid #d2d2d7;
|
||
border-radius: 6px;
|
||
padding: 0 12px;
|
||
height: 32px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s;
|
||
}
|
||
.btn-sec:hover {
|
||
background-color: #e5e5e7;
|
||
}
|
||
|
||
.score-input {
|
||
width: 32px;
|
||
text-align: center;
|
||
border: 1px solid #d2d2d7;
|
||
border-radius: 4px;
|
||
padding: 2px;
|
||
font-size: 13px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.flag-preview {
|
||
font-size: 16px;
|
||
min-width: 20px;
|
||
display: inline-block;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Group Card */
|
||
.group-input-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 16px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
|
||
border: 1px solid rgba(0,0,0,0.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
.group-input-card h3 {
|
||
margin: 0;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: #1d1d1f;
|
||
border-bottom: 1px solid #f5f5f7;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
/* Group Result Card */
|
||
.group-result-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 16px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
|
||
border: 1px solid rgba(0,0,0,0.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
.group-result-card h3 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #1d1d1f;
|
||
border-bottom: 1px solid #f5f5f7;
|
||
padding-bottom: 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
const FIFA_TO_FLAG = {
|
||
'MEX': '🇲🇽', 'RSA': '🇿🇦', 'KOR': '🇰🇷', 'CZE': '🇨🇿',
|
||
'CAN': '🇨🇦', 'QAT': '🇶🇦', 'SUI': '🇨🇭', 'BIH': '🇧🇦',
|
||
'BRA': '🇧🇷', 'MAR': '🇲🇦', 'HAI': '🇭🇹', 'SCO': '🏴',
|
||
'USA': '🇺🇸', 'PAR': '🇵🇾', 'AUS': '🇦🇺', 'TUR': '🇹🇷',
|
||
'GER': '🇩🇪', 'CUW': '🇨🇼', 'CIV': '🇨🇮', 'ECU': '🇪🇨',
|
||
'NED': '🇳🇱', 'JPN': '🇯🇵', 'TUN': '🇹🇳', 'SWE': '🇸🇪',
|
||
'BEL': '🇧🇪', 'EGY': '🇪🇬', 'IRN': '🇮🇷', 'NZL': '🇳🇿',
|
||
'ESP': '🇪🇸', 'KSA': '🇸🇦', 'URU': '🇺🇾', 'CPV': '🇨🇻',
|
||
'FRA': '🇫🇷', 'SEN': '🇸🇳', 'NOR': '🇳🇴', 'COD': '🇨🇩',
|
||
'ARG': '🇦🇷', 'ALG': '🇩🇿', 'AUT': '🇦🇹', 'JOR': '🇯🇴',
|
||
'POR': '🇵🇹', 'COL': '🇨🇴', 'UZB': '🇺🇿', 'IRQ': '🇮🇶',
|
||
'ENG': '🏴', 'CRO': '🇭🇷', 'GHA': '🇬🇭', 'PAN': '🇵🇦'
|
||
};
|
||
|
||
function getFlag(teamCode) {
|
||
if (!teamCode) return '🏴';
|
||
return FIFA_TO_FLAG[teamCode.trim().toUpperCase()] || '🏴';
|
||
}
|
||
|
||
|
||
|
||
let defaultPayload = null;
|
||
|
||
async function loadFootballDefaults() {
|
||
try {
|
||
const response = await fetch('/api/football/defaults');
|
||
defaultPayload = await response.json();
|
||
resetMatchesToDefault();
|
||
} catch (e) {
|
||
console.error('Failed to load defaults:', e);
|
||
}
|
||
}
|
||
|
||
function resetMatchesToDefault() {
|
||
if (!defaultPayload) return;
|
||
renderGroupsInputGrid();
|
||
}
|
||
|
||
// Render the 12 input boxes programmatically
|
||
function renderGroupsInputGrid() {
|
||
const grid = document.getElementById('groups-input-grid');
|
||
grid.innerHTML = '';
|
||
|
||
const groups = defaultPayload.groups;
|
||
const completedMatches = defaultPayload.completed_matches;
|
||
|
||
// Sorted group keys (A to L)
|
||
const sortedGroups = Object.keys(groups).sort();
|
||
|
||
sortedGroups.forEach(grpName => {
|
||
const grpTeams = groups[grpName]; // Array of 4 teams
|
||
|
||
// Create Card Container
|
||
const card = document.createElement('div');
|
||
card.className = 'group-input-card';
|
||
|
||
let cardContentHTML = `<h3>小组 ${grpName} 比赛比分录入</h3>`;
|
||
cardContentHTML += `<table style="width: 100%; border-collapse: collapse; font-size: 13px;"><tbody>`;
|
||
|
||
// Filter completedMatches for matches belonging to this group (preserves chronological order)
|
||
const pairings = [];
|
||
completedMatches.forEach(m => {
|
||
if (grpTeams.includes(m.team_a) && grpTeams.includes(m.team_b)) {
|
||
pairings.push({
|
||
teamA: m.team_a,
|
||
teamB: m.team_b,
|
||
scoreA: m.score_a,
|
||
scoreB: m.score_b,
|
||
isCompleted: m.is_completed
|
||
});
|
||
}
|
||
});
|
||
|
||
// Render each pairing row
|
||
pairings.forEach(p => {
|
||
let scoreA = p.scoreA;
|
||
let scoreB = p.scoreB;
|
||
let isCompleted = p.isCompleted;
|
||
|
||
cardContentHTML += `
|
||
<tr class="match-input-row" data-team-a="${p.teamA}" data-team-b="${p.teamB}" style="border-bottom: 1px solid #f5f5f7;">
|
||
<td style="padding: 8px 0; display: flex; align-items: center; gap: 4px; height: 38px;">
|
||
<span class="flag-preview">${getFlag(p.teamA)}</span>
|
||
<span style="font-weight: 600;">${p.teamA}</span>
|
||
</td>
|
||
<td style="padding: 8px 0; text-align: center;">
|
||
<div style="display: inline-flex; align-items: center; gap: 3px;">
|
||
<input type="number" class="score-input score-a" value="${scoreA}" min="0">
|
||
<span style="color: #86868b;">:</span>
|
||
<input type="number" class="score-input score-b" value="${scoreB}" min="0">
|
||
</div>
|
||
</td>
|
||
<td style="padding: 8px 0; text-align: right;">
|
||
<div style="display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end;">
|
||
<span style="font-weight: 600;">${p.teamB}</span>
|
||
<span class="flag-preview">${getFlag(p.teamB)}</span>
|
||
</div>
|
||
</td>
|
||
<td style="padding: 8px 0; text-align: right; width: 56px;">
|
||
<label style="display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #86868b; cursor: pointer; margin: 0;">
|
||
<input type="checkbox" class="completed-chk" ${isCompleted ? 'checked' : ''} style="cursor: pointer; width: 13px; height: 13px; margin: 0;">
|
||
完赛
|
||
</label>
|
||
</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
|
||
cardContentHTML += `</tbody></table>`;
|
||
card.innerHTML = cardContentHTML;
|
||
grid.appendChild(card);
|
||
});
|
||
}
|
||
|
||
async function startSimulation() {
|
||
const runBtn = document.getElementById('run-simulation-btn');
|
||
const loadingDiv = document.getElementById('simulation-loading');
|
||
const resultsDiv = document.getElementById('simulation-results');
|
||
|
||
runBtn.disabled = true;
|
||
loadingDiv.style.display = 'block';
|
||
resultsDiv.style.display = 'none';
|
||
|
||
try {
|
||
if (!defaultPayload) {
|
||
alert('默认数据尚未加载完成，请稍候再试。');
|
||
return;
|
||
}
|
||
const scoreOutcomes = defaultPayload.score_outcomes;
|
||
const groups = defaultPayload.groups;
|
||
|
||
const completedMatches = [];
|
||
const rows = document.querySelectorAll('.match-input-row');
|
||
rows.forEach(row => {
|
||
const teamA = row.getAttribute('data-team-a');
|
||
const teamB = row.getAttribute('data-team-b');
|
||
const scoreA = parseInt(row.querySelector('.score-a').value);
|
||
const scoreB = parseInt(row.querySelector('.score-b').value);
|
||
const isCompleted = row.querySelector('.completed-chk').checked;
|
||
|
||
completedMatches.push({
|
||
team_a: teamA,
|
||
team_b: teamB,
|
||
score_a: isNaN(scoreA) ? 0 : scoreA,
|
||
score_b: isNaN(scoreB) ? 0 : scoreB,
|
||
is_completed: isCompleted
|
||
});
|
||
});
|
||
|
||
const simulations = parseInt(document.getElementById('sim-count').value);
|
||
|
||
const startTime = performance.now();
|
||
const response = await fetch('/api/football/simulate', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
groups,
|
||
completed_matches: completedMatches,
|
||
score_outcomes: scoreOutcomes,
|
||
simulations
|
||
})
|
||
});
|
||
const results = await response.json();
|
||
const endTime = performance.now();
|
||
|
||
renderGroupedResults(results, endTime - startTime);
|
||
loadingDiv.style.display = 'none';
|
||
resultsDiv.style.display = 'block';
|
||
} catch (err) {
|
||
alert('计算出错！' + err.message);
|
||
loadingDiv.style.display = 'none';
|
||
} finally {
|
||
runBtn.disabled = false;
|
||
}
|
||
}
|
||
|
||
function renderGroupedResults(results, clientDuration) {
|
||
const grid = document.getElementById('groups-results-grid');
|
||
grid.innerHTML = '';
|
||
|
||
document.getElementById('sim-duration-badge').innerText = `耗时: ${(clientDuration / 1000).toFixed(2)} 秒`;
|
||
|
||
// Group the flat list by group name
|
||
const grouped = {};
|
||
results.forEach(r => {
|
||
if (!grouped[r.group]) {
|
||
grouped[r.group] = [];
|
||
}
|
||
grouped[r.group].push(r);
|
||
});
|
||
|
||
// Get sorted groups keys
|
||
const sortedGroups = Object.keys(grouped).sort();
|
||
|
||
sortedGroups.forEach(grpName => {
|
||
const groupTeams = grouped[grpName];
|
||
|
||
// Create a group card
|
||
const card = document.createElement('div');
|
||
card.className = 'group-result-card';
|
||
|
||
let tableRowsHTML = '';
|
||
groupTeams.forEach((teamProb, idx) => {
|
||
const flag = getFlag(teamProb.team_name);
|
||
const isQualifying = idx < 2; // top 2
|
||
const rankColor = isQualifying ? '#34c759' : '#86868b';
|
||
|
||
tableRowsHTML += `
|
||
<tr style="border-bottom: 1px solid #f5f5f7;">
|
||
<td style="padding: 8px 0; font-weight: bold; color: ${rankColor}; width: 20px;">${idx + 1}</td>
|
||
<td style="padding: 8px 0; display: flex; align-items: center; gap: 6px;">
|
||
<span>${flag}</span>
|
||
<span style="font-weight: 600;">${teamProb.team_name}</span>
|
||
</td>
|
||
<td style="padding: 8px 0; text-align: right; font-family: monospace; font-size: 13px;" title="直接出线概率 (小组前二)">
|
||
${(teamProb.direct_qual_prob * 100).toFixed(1)}%
|
||
</td>
|
||
<td style="padding: 8px 0; text-align: right; font-family: monospace; font-size: 13px; color: #86868b;" title="最佳第三名出线概率">
|
||
${(teamProb.third_qual_prob * 100).toFixed(1)}%
|
||
</td>
|
||
<td style="padding: 8px 0; text-align: right; font-family: monospace; font-size: 13px; font-weight: bold; color: var(--apple-blue);" title="总出线概率">
|
||
${(teamProb.total_qual_prob * 100).toFixed(1)}%
|
||
</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
|
||
card.innerHTML = `
|
||
<h3>
|
||
<span>小组 ${grpName}</span>
|
||
<span style="font-size: 12px; font-weight: normal; color: #86868b;">前2名 / 第3名 / 总出线</span>
|
||
</h3>
|
||
<table style="width: 100%; border-collapse: collapse; font-size: 14px;">
|
||
<tbody>
|
||
${tableRowsHTML}
|
||
</tbody>
|
||
</table>
|
||
`;
|
||
grid.appendChild(card);
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
loadFootballDefaults();
|
||
});
|
||
</script>
|
||
{{end}}
|