No matches found

';\n return;\n }\n \n matches.forEach(match => {\n const template = document.getElementById('match-card-template');\n const matchCard = template.content.cloneNode(true);\n \n // Fill in match data\n matchCard.querySelector('.tournament-name').textContent = match.tournament_id ? 'Tournament' : 'Friendly Match';\n matchCard.querySelector('.game-type').textContent = match.game_type;\n matchCard.querySelector('.player-a').textContent = `Player A`; // Would need player names from API\n matchCard.querySelector('.player-b').textContent = `Player B`; // Would need player names from API\n matchCard.querySelector('.score').textContent = `${match.player_a_score}-${match.player_b_score}`;\n matchCard.querySelector('.race-info').textContent = `Race to ${match.race_to}`;\n \n // Add click event to open match\n const card = matchCard.querySelector('.match-card');\n card.addEventListener('click', () => {\n state.currentMatch = match;\n state.currentView = 'match-scoring';\n views.renderMatchScoring(match.id);\n });\n \n container.appendChild(matchCard);\n });\n }\n },\n \n // Render the new match form\n renderNewMatch() {\n const appElement = document.getElementById('app');\n const template = document.getElementById('new-match-template');\n appElement.innerHTML = '';\n appElement.appendChild(template.content.cloneNode(true));\n \n // Add event listeners\n document.getElementById('back-btn').addEventListener('click', () => {\n state.currentView = 'dashboard';\n views.renderDashboard();\n });\n \n document.getElementById('new-match-form').addEventListener('submit', async (e) => {\n e.preventDefault();\n \n // Get form values\n const gameType = document.getElementById('game-type').value;\n const tableSize = document.getElementById('table-size').value;\n const raceTo = parseInt(document.getElementById('race-to').value);\n const tournamentName = document.getElementById('tournament-name').value;\n \n const playerAFirstName = document.getElementById('player-a-first-name').value;\n const playerALastName = document.getElementById('player-a-last-name').value;\n const playerAFargo = document.getElementById('player-a-fargo').value;\n \n const playerBFirstName = document.getElementById('player-b-first-name').value;\n const playerBLastName = document.getElementById('player-b-last-name').value;\n const playerBFargo = document.getElementById('player-b-fargo').value;\n \n // In a real implementation, we would create or look up players first\n // For this demo, we'll simulate player IDs\n const playerAId = 1;\n const playerBId = 2;\n \n // Create match\n const matchData = {\n player_a_id: playerAId,\n player_b_id: playerBId,\n race_to: raceTo,\n game_type: gameType,\n table_size: tableSize,\n status: 'active'\n };\n \n // If tournament name provided, we would create or look up tournament\n if (tournamentName) {\n // For demo, simulate tournament ID\n matchData.tournament_id = 1;\n }\n \n // Create match via API\n const match = await api.createMatch(matchData);\n \n if (match) {\n state.currentMatch = match;\n state.currentView = 'match-scoring';\n views.renderMatchScoring(match.id);\n } else {\n alert('Failed to create match. Please try again.');\n }\n });\n },\n \n // Render the match scoring view\n async renderMatchScoring(matchId) {\n // Fetch latest match data\n const match = await api.getMatch(matchId);\n if (!match) {\n alert('Failed to load match data');\n state.currentView = 'dashboard';\n views.renderDashboard();\n return;\n }\n \n state.currentMatch = match;\n state.pendingEvents = [];\n state.activePlayer = null;\n \n const appElement = document.getElementById('app');\n const template = document.getElementById('match-scoring-template');\n appElement.innerHTML = '';\n appElement.appendChild(template.content.cloneNode(true));\n \n // Fill in match data\n document.querySelector('.match-title').textContent = 'Match Scoring';\n document.querySelector('.tournament-name').textContent = match.tournament_id ? 'Tournament' : 'Friendly Match';\n document.querySelector('.game-info').textContent = `${match.game_type} (${match.table_size})`;\n document.querySelector('.player-a-name').textContent = 'Player A'; // Would need player name from API\n document.querySelector('.player-b-name').textContent = 'Player B'; // Would need player name from API\n document.querySelector('.player-a-btn-name').textContent = 'Player A';\n document.querySelector('.player-b-btn-name').textContent = 'Player B';\n document.querySelector('.score').textContent = `${match.player_a_score}-${match.player_b_score}`;\n document.querySelector('.race-info').textContent = `Race to ${match.race_to}`;\n \n // Add event listeners\n document.getElementById('back-to-dashboard').addEventListener('click', () => {\n state.currentView = 'dashboard';\n views.renderDashboard();\n });\n \n document.getElementById('player-a-wins').addEventListener('click', async () => {\n await recordRackWin(match.player_a_id);\n });\n \n document.getElementById('player-b-wins').addEventListener('click', async () => {\n await recordRackWin(match.player_b_id);\n });\n \n // Event buttons\n const eventButtons = [\n 'break-and-run',\n 'rack-runout',\n 'foul',\n 'scratch-on-break',\n 'money-ball-miss'\n ];\n \n eventButtons.forEach(id => {\n const button = document.getElementById(id);\n button.addEventListener('click', () => {\n toggleEvent(id);\n button.classList.toggle('ring-2');\n button.classList.toggle('ring-blue-500');\n });\n });\n \n document.getElementById('undo-last-rack').addEventListener('click', async () => {\n if (!match.racks || match.racks.length === 0) {\n alert('No racks to undo');\n return;\n }\n \n const lastRack = match.racks[match.racks.length - 1];\n const updatedMatch = await api.undoLastRack(match.id, lastRack.id);\n \n if (updatedMatch) {\n state.currentMatch = updatedMatch;\n views.renderMatchScoring(match.id);\n } else {\n alert('Failed to undo last rack');\n }\n });\n \n document.getElementById('end-match').addEventListener('click', () => {\n if (match.status === 'completed') {\n views.renderMatchComplete(match.id);\n } else {\n const confirm = window.confirm('End match before completion? This will mark the match as completed with the current score.');\n if (confirm) {\n // In a real implementation, we would call an API to end the match\n views.renderMatchComplete(match.id);\n }\n }\n });\n \n // Render rack history\n renderRackHistory(match.racks || []);\n \n // Helper functions\n async function recordRackWin(winnerId) {\n // Convert pending events to API format\n const events = state.pendingEvents.map(eventId => {\n let eventType;\n switch (eventId) {\n case 'break-and-run': eventType = 'break_and_run'; break;\n case 'rack-runout': eventType = 'rack_runout'; break;\n case 'foul': eventType = 'foul'; break;\n case 'scratch-on-break': eventType = 'scratch_on_break'; break;\n case 'money-ball-miss': eventType = 'money_ball_miss'; break;\n default: eventType = eventId;\n }\n \n return {\n type: eventType,\n player_id: winnerId // In a real implementation, we would determine the correct player for each event\n };\n });\n \n const updatedMatch = await api.recordRack(match.id, winnerId, events);\n \n if (updatedMatch) {\n state.currentMatch = updatedMatch;\n state.pendingEvents = [];\n \n // Reset event button styling\n eventButtons.forEach(id => {\n const button = document.getElementById(id);\n button.classList.remove('ring-2', 'ring-blue-500');\n });\n \n // Check if match is complete\n if (updatedMatch.status === 'completed') {\n views.renderMatchComplete(match.id);\n } else {\n views.renderMatchScoring(match.id);\n }\n } else {\n alert('Failed to record rack');\n }\n }\n \n function toggleEvent(eventId) {\n const index = state.pendingEvents.indexOf(eventId);\n if (index === -1) {\n state.pendingEvents.push(eventId);\n } else {\n state.pendingEvents.splice(index, 1);\n }\n }\n \n function renderRackHistory(racks) {\n const container = document.querySelector('.rack-list');\n container.innerHTML = '';\n \n if (racks.length === 0) {\n container.innerHTML = '

No racks recorded yet

';\n return;\n }\n \n racks.forEach(rack => {\n const template = document.getElementById('rack-item-template');\n const rackItem = template.content.cloneNode(true);\n \n rackItem.querySelector('.rack-number').textContent = rack.rack_number;\n rackItem.querySelector('.rack-winner').textContent = rack.winner_id === match.player_a_id ? 'Player A' : 'Player B';\n \n // In a real implementation, we would show events for this rack\n rackItem.querySelector('.rack-events').textContent = 'No special events';\n \n container.appendChild(rackItem);\n });\n }\n },\n \n // Render the match complete view\n async renderMatchComplete(matchId) {\n // Fetch latest match data\n const match = await api.getMatch(matchId);\n if (!match) {\n alert('Failed to load match data');\n state.currentView = 'dashboard';\n views.renderDashboard();\n return;\n }\n \n state.currentMatch = match;\n \n const appElement = document.getElementById('app');\n const template = document.getElementById('match-complete-template');\n appElement.innerHTML = '';\n appElement.appendChild(template.content.cloneNode(true));\n \n // Fill in match data\n document.querySelector('.tournament-name').textContent = match.tournament_id ? 'Tournament' : 'Friendly Match';\n document.querySelector('.game-info').textContent = `${match.game_type} (${match.table_size})`;\n document.querySelector('.player-a-name').textContent = 'Player A'; // Would need player name from API\n document.querySelector('.player-b-name').textContent = 'Player B'; // Would need player name from API\n document.querySelector('.score').textContent = `${match.player_a_score}-${match.player_b_score}`;\n \n // Show winner\n const winnerDisplay = document.querySelector('.winner-display');\n if (match.winner_id === match.player_a_id) {\n winnerDisplay.textContent = 'Player A Wins!';\n } else if (match.winner_id === match.player_b_id) {\n winnerDisplay.textContent = 'Player B Wins!';\n } else {\n winnerDisplay.textContent = 'Match Complete';\n }\n \n // In a real implementation, we would show actual statistics\n document.querySelector('.player-a-stats').textContent = 'Player A';\n document.querySelector('.player-b-stats').textContent = 'Player B';\n \n const statsRows = document.querySelector('.stats-rows');\n statsRows.innerHTML = `\n

Break & Runs

Runouts

Fouls

\n `;\n \n // Add event listeners\n document.getElementById('back-to-dashboard').addEventListener('click', () => {\n state.currentView = 'dashboard';\n views.renderDashboard();\n });\n \n document.getElementById('new-match').addEventListener('click', () => {\n state.currentView = 'new-match';\n views.renderNewMatch();\n });\n \n // Export buttons\n document.getElementById('export-json').addEventListener('click', async () => {\n const data = await api.exportMatch(match.id, 'json');\n if (data) {\n downloadJSON(data, `match_${match.id}_export.json`);\n } else {\n alert('Failed to export match data');\n }\n });\n \n document.getElementById('export-csv').addEventListener('click', async () => {\n const data = await api.exportMatch(match.id, 'csv');\n if (data) {\n downloadText(data, `match_${match.id}_export.csv`);\n } else {\n alert('Failed to export match data');\n }\n });\n \n document.getElementById('export-summary').addEventListener('click', async () => {\n const data = await api.getMatchSummary(match.id);\n if (data) {\n showTextModal('Match Summary', data);\n } else {\n alert('Failed to get match summary');\n }\n });\n \n document.getElementById('export-fargo').addEventListener('click', async () => {\n const data = await api.exportMatch(match.id, 'fargo');\n if (data) {\n downloadJSON(data, `match_${match.id}_fargo.json`);\n } else {\n alert('Failed to export match data for FargoRate');\n }\n });\n \n // Helper functions\n function downloadJSON(data, filename) {\n const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }\n \n function downloadText(text, filename) {\n const blob = new Blob([text], { type: 'text/plain' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }\n \n function showTextModal(title, text) {\n // Create a modal to display the text\n const modal = document.createElement('div');\n modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50';\n \n modal.innerHTML = `\n

${title}

\n \n

${text}

\n \n

\n `;\n \n document.body.appendChild(modal);\n \n // Add event listeners\n document.getElementById('close-modal').addEventListener('click', () => {\n document.body.removeChild(modal);\n });\n \n document.getElementById('copy-text').addEventListener('click', () => {\n navigator.clipboard.writeText(text)\n .then(() => {\n alert('Copied to clipboard!');\n })\n .catch(err => {\n console.error('Failed to copy text: ', err);\n });\n });\n }\n }\n};\n\n// Initialize the app\ndocument.addEventListener('DOMContentLoaded', () => {\n // Start with the dashboard view\n views.renderDashboard();\n \n // Add offline support notification\n window.addEventListener('online', () => {\n console.log('App is online');\n });\n \n window.addEventListener('offline', () => {\n console.log('App is offline');\n // In a real implementation, we would show a notification and enable offline mode\n });\n});","deleted","label",[167,149],"frontend","permalink","https://www.val.town/x/join/concept/code/frontend/index.js","extension","actionData","errors"]