This commit is contained in:
Dongho Kim
+16
-16
@@ -3,22 +3,22 @@
|
||||
// Group stage: June 11 – June 27, 2026
|
||||
|
||||
export const venues = {
|
||||
'Mexico City': { city: 'Mexico City', country: '🇲🇽 Mexico', stadium: 'Estadio Azteca', capacity: '87,523' },
|
||||
'Guadalajara': { city: 'Guadalajara', country: '🇲🇽 Mexico', stadium: 'Estadio Akron', capacity: '49,850' },
|
||||
'Monterrey': { city: 'Monterrey', country: '🇲🇽 Mexico', stadium: 'Estadio BBVA', capacity: '53,500' },
|
||||
'Toronto': { city: 'Toronto', country: '🇨🇦 Canada', stadium: 'BMO Field', capacity: '45,000' },
|
||||
'Vancouver': { city: 'Vancouver', country: '🇨🇦 Canada', stadium: 'BC Place', capacity: '54,500' },
|
||||
'Kansas City': { city: 'Kansas City', country: '🇺🇸 USA', stadium: 'Arrowhead Stadium', capacity: '76,416' },
|
||||
'Los Angeles': { city: 'Los Angeles', country: '🇺🇸 USA', stadium: 'SoFi Stadium', capacity: '70,240' },
|
||||
'San Francisco': { city: 'San Francisco', country: '🇺🇸 USA', stadium: 'Levi\'s Stadium', capacity: '68,500' },
|
||||
'Seattle': { city: 'Seattle', country: '🇺🇸 USA', stadium: 'Lumen Field', capacity: '69,000' },
|
||||
'Dallas': { city: 'Dallas', country: '🇺🇸 USA', stadium: 'AT&T Stadium', capacity: '80,000' },
|
||||
'Atlanta': { city: 'Atlanta', country: '🇺🇸 USA', stadium: 'Mercedes-Benz Stadium', capacity: '71,000' },
|
||||
'Miami': { city: 'Miami', country: '🇺🇸 USA', stadium: 'Hard Rock Stadium', capacity: '65,326' },
|
||||
'New York': { city: 'New York / New Jersey', country: '🇺🇸 USA', stadium: 'MetLife Stadium', capacity: '82,500' },
|
||||
'Boston': { city: 'Boston', country: '🇺🇸 USA', stadium: 'Gillette Stadium', capacity: '65,878' },
|
||||
'Philadelphia': { city: 'Philadelphia', country: '🇺🇸 USA', stadium: 'Lincoln Financial Field', capacity: '69,796' },
|
||||
'Houston': { city: 'Houston', country: '🇺🇸 USA', stadium: 'NRG Stadium', capacity: '72,220' },
|
||||
'Mexico City': { city: 'Mexico City', country: '🇲🇽 Mexico', stadium: 'Estadio Azteca', capacity: '87,523', utcOffset: -6 },
|
||||
'Guadalajara': { city: 'Guadalajara', country: '🇲🇽 Mexico', stadium: 'Estadio Akron', capacity: '49,850', utcOffset: -6 },
|
||||
'Monterrey': { city: 'Monterrey', country: '🇲🇽 Mexico', stadium: 'Estadio BBVA', capacity: '53,500', utcOffset: -6 },
|
||||
'Toronto': { city: 'Toronto', country: '🇨🇦 Canada', stadium: 'BMO Field', capacity: '45,000', utcOffset: -4 },
|
||||
'Vancouver': { city: 'Vancouver', country: '🇨🇦 Canada', stadium: 'BC Place', capacity: '54,500', utcOffset: -7 },
|
||||
'Kansas City': { city: 'Kansas City', country: '🇺🇸 USA', stadium: 'Arrowhead Stadium', capacity: '76,416', utcOffset: -5 },
|
||||
'Los Angeles': { city: 'Los Angeles', country: '🇺🇸 USA', stadium: 'SoFi Stadium', capacity: '70,240', utcOffset: -7 },
|
||||
'San Francisco': { city: 'San Francisco', country: '🇺🇸 USA', stadium: 'Levi\'s Stadium', capacity: '68,500', utcOffset: -7 },
|
||||
'Seattle': { city: 'Seattle', country: '🇺🇸 USA', stadium: 'Lumen Field', capacity: '69,000', utcOffset: -7 },
|
||||
'Dallas': { city: 'Dallas', country: '🇺🇸 USA', stadium: 'AT&T Stadium', capacity: '80,000', utcOffset: -5 },
|
||||
'Atlanta': { city: 'Atlanta', country: '🇺🇸 USA', stadium: 'Mercedes-Benz Stadium', capacity: '71,000', utcOffset: -4 },
|
||||
'Miami': { city: 'Miami', country: '🇺🇸 USA', stadium: 'Hard Rock Stadium', capacity: '65,326', utcOffset: -4 },
|
||||
'New York': { city: 'New York / New Jersey', country: '🇺🇸 USA', stadium: 'MetLife Stadium', capacity: '82,500', utcOffset: -4 },
|
||||
'Boston': { city: 'Boston', country: '🇺🇸 USA', stadium: 'Gillette Stadium', capacity: '65,878', utcOffset: -4 },
|
||||
'Philadelphia': { city: 'Philadelphia', country: '🇺🇸 USA', stadium: 'Lincoln Financial Field', capacity: '69,796', utcOffset: -4 },
|
||||
'Houston': { city: 'Houston', country: '🇺🇸 USA', stadium: 'NRG Stadium', capacity: '72,220', utcOffset: -5 },
|
||||
};
|
||||
|
||||
export const groups = [
|
||||
|
||||
+24
-1
@@ -49,6 +49,28 @@ function groupCard(group) {
|
||||
}
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────────────
|
||||
function getUserLocalTime(match, venue) {
|
||||
if (!venue || venue.utcOffset === undefined) return '';
|
||||
const matchResult = match.date.match(/([A-Za-z]+)\s+(\d+)/);
|
||||
if (!matchResult) return '';
|
||||
const [, monthStr, dayStr] = matchResult;
|
||||
const [hour, minute] = match.time.split(':');
|
||||
|
||||
const monthMap = { 'Jun': 5, 'Jul': 6 };
|
||||
const utcHours = parseInt(hour, 10) - venue.utcOffset;
|
||||
const matchDateUTC = new Date(Date.UTC(2026, monthMap[monthStr], parseInt(dayStr, 10), utcHours, parseInt(minute, 10)));
|
||||
|
||||
const options = {
|
||||
weekday: 'short',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
timeZoneName: 'short'
|
||||
};
|
||||
return matchDateUTC.toLocaleString(undefined, options);
|
||||
}
|
||||
|
||||
function buildMatchdayHTML(group) {
|
||||
const matchdayNames = { 1: 'Matchday 1', 2: 'Matchday 2', 3: 'Matchday 3' };
|
||||
return [1, 2, 3].map(md => {
|
||||
@@ -58,6 +80,7 @@ function buildMatchdayHTML(group) {
|
||||
const home = group.teams.find(t => t.name === match.home);
|
||||
const away = group.teams.find(t => t.name === match.away);
|
||||
const cardId = `match-${group.id}-${md}-${idx}`;
|
||||
const userLocalTimeStr = getUserLocalTime(match, venue);
|
||||
return `
|
||||
<div class="match-card" style="--match-color:${group.color}" id="${cardId}">
|
||||
<button class="match-summary" onclick="toggleMatch('${cardId}')" aria-expanded="false">
|
||||
@@ -77,7 +100,7 @@ function buildMatchdayHTML(group) {
|
||||
<div class="match-details-panel">
|
||||
<div class="match-details-inner">
|
||||
<div class="match-detail-row"><span class="md-icon">📅</span><div class="md-text"><span class="md-label">Date</span><span class="md-value">${match.date}</span></div></div>
|
||||
<div class="match-detail-row"><span class="md-icon">🕐</span><div class="md-text"><span class="md-label">Kick-off</span><span class="md-value">${match.time} local time</span></div></div>
|
||||
<div class="match-detail-row"><span class="md-icon">🕐</span><div class="md-text"><span class="md-label">Kick-off</span><span class="md-value">${match.time} local time${userLocalTimeStr ? ' / ' + userLocalTimeStr + ' your time' : ''}</span></div></div>
|
||||
<div class="match-detail-row"><span class="md-icon">📍</span><div class="md-text"><span class="md-label">Venue</span><span class="md-value">${venue ? venue.stadium : match.venue}</span></div></div>
|
||||
<div class="match-detail-row"><span class="md-icon">🏙️</span><div class="md-text"><span class="md-label">City</span><span class="md-value">${match.venue}${venue ? ', ' + venue.country : ''}</span></div></div>
|
||||
<div class="match-detail-row"><span class="md-icon">👥</span><div class="md-text"><span class="md-label">Capacity</span><span class="md-value">${venue ? venue.capacity : '—'}</span></div></div>
|
||||
|
||||
Reference in New Issue
Block a user