比赛信息

• 时间：
• 地点：
• 裁判：

比分

const scoreboard = document.getElementById('scoreboard');const team1Name = document.getElementById('team-1-name');const team1Score = document.getElementById('team-1-score');const team2Name = document.getElementById('team-2-name');const team2Score = document.getElementById('team-2-score');const matchEvents = document.getElementById('match-events');const matchGoals = document.getElementById('match-goals');const matchAssists = document.getElementById('match-assists');const matchYellowCards = document.getElementById('match-yellow-cards');const matchRedCards = document.getElementById('match-red-cards');let currentMatchId = 1;const socket = new WebSocket('ws://localhost:8080');socket.onopen = () => {console.log('WebSocket connection established');socket.send(JSON.stringify({ type: 'subscribe', matchId: currentMatchId }));};socket.onmessage = (event) => {const data = JSON.parse(event.data);if (data.type === 'match-update') {updateMatchDetails(data.match);}};const updateMatchDetails = (match) => {matchDetails.classList.remove('visually-hidden');matchTime.innerText = match.time;matchLocation.innerText = match.location;matchReferee.innerText = match.referee;team1Name.innerText = match.teams[0].name;team1Score.innerText = match.teams[0].score;team2Name.innerText =match.teams[1].name;team2Score.innerText = match.teams[1].score;matchGoals.innerText = match.events.filter((event) => event.type === 'goal').map((event) => event.player).join(', ');matchAssists.innerText = match.events.filter((event) => event.type === 'assist').map((event) => event.player).join(', ');matchYellowCards.innerText = match.events.filter((event) => event.type === 'yellow-card').map((event) => event.player).join(', ');matchRedCards.innerText = match.events.filter((event) => event.type === 'red-card').map((event) => event.player).join(', '); };const setActiveMatch = (matchId) => {const matchItem = matches.querySelector(`[data-match-id="${matchId}"]`);const activeMatch = matches.querySelector('.active');if (matchItem && activeMatch) {activeMatch.classList.remove('active');matchItem.classList.add('active');currentMatchId = matchId;socket.send(JSON.stringify({ type: 'subscribe', matchId: currentMatchId }));}};matches.addEventListener('click', (event) => {const matchId = event.target.getAttribute('data-match-id');if (matchId) {setActiveMatch(matchId);}});

球队	比分