|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Dota 2 Match Stats Viewer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); |
|
|
} |
|
|
.radiant-gradient { |
|
|
background: linear-gradient(135deg, rgba(26, 160, 93, 0.1) 0%, rgba(26, 160, 93, 0.2) 100%); |
|
|
} |
|
|
.dire-gradient { |
|
|
background: linear-gradient(135deg, rgba(160, 26, 26, 0.1) 0%, rgba(160, 26, 26, 0.2) 100%); |
|
|
} |
|
|
.hero-icon { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
border-radius: 50%; |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
.player-item:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.loading-spinner { |
|
|
border: 4px solid rgba(255, 255, 255, 0.3); |
|
|
border-radius: 50%; |
|
|
border-top: 4px solid #ffffff; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="hero-gradient rounded-xl p-6 mb-8 shadow-lg"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<h1 class="text-3xl font-bold text-green-400">Dota 2 Match Stats</h1> |
|
|
<p class="text-gray-300">Analyze match details in real-time</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<input |
|
|
type="number" |
|
|
id="matchIdInput" |
|
|
placeholder="Enter Match ID" |
|
|
class="px-4 py-2 rounded-lg bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-green-500" |
|
|
> |
|
|
<button |
|
|
id="fetchBtn" |
|
|
class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg transition duration-200 flex items-center" |
|
|
> |
|
|
<i class="fas fa-search mr-2"></i> Fetch |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="loading" class="hidden flex flex-col items-center justify-center py-16"> |
|
|
<div class="loading-spinner mb-4"></div> |
|
|
<p class="text-xl">Fetching match data...</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="error" class="hidden bg-red-900 text-white p-6 rounded-xl mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle text-2xl mr-4"></i> |
|
|
<div> |
|
|
<h3 class="font-bold text-xl">Error</h3> |
|
|
<p id="errorMessage">Failed to fetch match data. Please try again.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="matchInfo" class="hidden bg-gray-800 rounded-xl p-6 mb-8 shadow-lg"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center mb-6"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold">Match <span id="matchIdDisplay" class="text-green-400"></span></h2> |
|
|
<div class="flex items-center mt-2"> |
|
|
<span id="gameMode" class="bg-gray-700 px-3 py-1 rounded-full text-sm"></span> |
|
|
<span id="lobbyType" class="bg-gray-700 px-3 py-1 rounded-full text-sm ml-2"></span> |
|
|
<span id="duration" class="bg-gray-700 px-3 py-1 rounded-full text-sm ml-2"></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 flex items-center"> |
|
|
<div class="text-center px-4"> |
|
|
<div class="text-green-400 font-bold text-xl" id="radiantScore">0</div> |
|
|
<div class="text-sm text-gray-300">Radiant</div> |
|
|
</div> |
|
|
<div class="text-2xl mx-2">vs</div> |
|
|
<div class="text-center px-4"> |
|
|
<div class="text-red-400 font-bold text-xl" id="direScore">0</div> |
|
|
<div class="text-sm text-gray-300">Dire</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0"> |
|
|
<div id="resultBadge" class="px-4 py-2 rounded-full font-bold"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="radiant-gradient rounded-xl p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-green-400">Radiant</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm mr-2">Advantage:</span> |
|
|
<span id="radiantAdvantage" class="font-bold">0</span> |
|
|
</div> |
|
|
</div> |
|
|
<div id="radiantPlayers" class="space-y-3"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="dire-gradient rounded-xl p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-red-400">Dire</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm mr-2">Advantage:</span> |
|
|
<span id="direAdvantage" class="font-bold">0</span> |
|
|
</div> |
|
|
</div> |
|
|
<div id="direPlayers" class="space-y-3"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="matchDetails" class="hidden bg-gray-800 rounded-xl p-6 shadow-lg mt-8"> |
|
|
<h3 class="text-xl font-bold mb-4">Match Details</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h4 class="font-bold mb-3 text-green-400">Combat Stats</h4> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Total Kills</span> |
|
|
<span id="totalKills" class="font-bold">0</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-600 rounded-full h-2"> |
|
|
<div id="killsBar" class="bg-gradient-to-r from-green-400 to-red-500 h-2 rounded-full" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Hero Damage</span> |
|
|
<span id="heroDamage" class="font-bold">0</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-600 rounded-full h-2"> |
|
|
<div id="damageBar" class="bg-gradient-to-r from-green-400 to-red-500 h-2 rounded-full" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Tower Damage</span> |
|
|
<span id="towerDamage" class="font-bold">0</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-600 rounded-full h-2"> |
|
|
<div id="towerDamageBar" class="bg-gradient-to-r from-green-400 to-red-500 h-2 rounded-full" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h4 class="font-bold mb-3 text-yellow-400">Economy</h4> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Gold Earned</span> |
|
|
<span id="goldEarned" class="font-bold">0</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-600 rounded-full h-2"> |
|
|
<div id="goldBar" class="bg-gradient-to-r from-green-400 to-red-500 h-2 rounded-full" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>XP Earned</span> |
|
|
<span id="xpEarned" class="font-bold">0</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-600 rounded-full h-2"> |
|
|
<div id="xpBar" class="bg-gradient-to-r from-green-400 to-red-500 h-2 rounded-full" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Last Hits</span> |
|
|
<span id="lastHits" class="font-bold">0</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-600 rounded-full h-2"> |
|
|
<div id="lastHitsBar" class="bg-gradient-to-r from-green-400 to-red-500 h-2 rounded-full" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h4 class="font-bold mb-3 text-blue-400">Objectives</h4> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="text-center"> |
|
|
<div class="text-3xl font-bold text-green-400" id="radiantTowers">0</div> |
|
|
<div class="text-sm">Towers</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-3xl font-bold text-green-400" id="radiantBarracks">0</div> |
|
|
<div class="text-sm">Barracks</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-3xl font-bold text-red-400" id="direTowers">0</div> |
|
|
<div class="text-sm">Towers</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-3xl font-bold text-red-400" id="direBarracks">0</div> |
|
|
<div class="text-sm">Barracks</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-600"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span>Roshan Kills</span> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-green-400 mr-2" id="radiantRoshan">0</span> |
|
|
<span class="text-gray-400">-</span> |
|
|
<span class="text-red-400 ml-2" id="direRoshan">0</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chartsSection" class="hidden bg-gray-800 rounded-xl p-6 shadow-lg mt-8"> |
|
|
<h3 class="text-xl font-bold mb-4">Gold & XP Advantage</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h4 class="font-bold mb-3 text-yellow-400">Gold Advantage</h4> |
|
|
<canvas id="goldChart" height="250"></canvas> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h4 class="font-bold mb-3 text-blue-400">XP Advantage</h4> |
|
|
<canvas id="xpChart" height="250"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
|
|
|
const matchIdInput = document.getElementById('matchIdInput'); |
|
|
const fetchBtn = document.getElementById('fetchBtn'); |
|
|
const loading = document.getElementById('loading'); |
|
|
const error = document.getElementById('error'); |
|
|
const matchInfo = document.getElementById('matchInfo'); |
|
|
const matchDetails = document.getElementById('matchDetails'); |
|
|
const chartsSection = document.getElementById('chartsSection'); |
|
|
const errorMessage = document.getElementById('errorMessage'); |
|
|
|
|
|
|
|
|
fetchBtn.addEventListener('click', fetchMatchData); |
|
|
matchIdInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') fetchMatchData(); |
|
|
}); |
|
|
|
|
|
|
|
|
let goldChart = null; |
|
|
let xpChart = null; |
|
|
|
|
|
|
|
|
async function fetchMatchData() { |
|
|
const matchId = matchIdInput.value.trim(); |
|
|
|
|
|
if (!matchId) { |
|
|
showError('Please enter a valid Match ID'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
loading.classList.remove('hidden'); |
|
|
error.classList.add('hidden'); |
|
|
matchInfo.classList.add('hidden'); |
|
|
matchDetails.classList.add('hidden'); |
|
|
chartsSection.classList.add('hidden'); |
|
|
|
|
|
try { |
|
|
|
|
|
if (goldChart) goldChart.destroy(); |
|
|
if (xpChart) xpChart.destroy(); |
|
|
|
|
|
|
|
|
const matchResponse = await fetch(`https://api.opendota.com/api/matches/${matchId}`); |
|
|
if (!matchResponse.ok) throw new Error('Match not found or API error'); |
|
|
|
|
|
const matchData = await matchResponse.json(); |
|
|
|
|
|
|
|
|
let playersData = []; |
|
|
try { |
|
|
const playersResponse = await fetch(`https://api.opendota.com/api/matches/${matchId}/players`); |
|
|
if (!playersResponse.ok) { |
|
|
console.warn('Failed to fetch player details, using basic match data only'); |
|
|
} else { |
|
|
playersData = await playersResponse.json(); |
|
|
} |
|
|
} catch (err) { |
|
|
console.warn('Error fetching player details:', err); |
|
|
} |
|
|
|
|
|
|
|
|
displayMatchData(matchData, playersData); |
|
|
|
|
|
|
|
|
loading.classList.add('hidden'); |
|
|
matchInfo.classList.remove('hidden'); |
|
|
matchDetails.classList.remove('hidden'); |
|
|
chartsSection.classList.remove('hidden'); |
|
|
|
|
|
} catch (err) { |
|
|
console.error('Error fetching match data:', err); |
|
|
let errorMsg = err.message || 'Failed to fetch match data.'; |
|
|
if (errorMsg.includes('player details')) { |
|
|
errorMsg += ' Some player details may be missing.'; |
|
|
} |
|
|
showError(errorMsg + ' Please try again.'); |
|
|
loading.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
function showError(message) { |
|
|
errorMessage.textContent = message; |
|
|
error.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function displayMatchData(match, players) { |
|
|
|
|
|
document.getElementById('matchIdDisplay').textContent = match.match_id; |
|
|
document.getElementById('gameMode').textContent = getGameMode(match.game_mode); |
|
|
document.getElementById('lobbyType').textContent = getLobbyType(match.lobby_type); |
|
|
document.getElementById('duration').textContent = formatDuration(match.duration); |
|
|
|
|
|
|
|
|
document.getElementById('radiantScore').textContent = match.radiant_score; |
|
|
document.getElementById('direScore').textContent = match.dire_score; |
|
|
|
|
|
const resultBadge = document.getElementById('resultBadge'); |
|
|
if (match.radiant_win) { |
|
|
resultBadge.textContent = 'Radiant Victory'; |
|
|
resultBadge.className = 'px-4 py-2 rounded-full font-bold bg-green-600 text-white'; |
|
|
} else { |
|
|
resultBadge.textContent = 'Dire Victory'; |
|
|
resultBadge.className = 'px-4 py-2 rounded-full font-bold bg-red-600 text-white'; |
|
|
} |
|
|
|
|
|
|
|
|
const radiantPlayers = players.filter(p => p.isRadiant); |
|
|
const direPlayers = players.filter(p => !p.isRadiant); |
|
|
|
|
|
|
|
|
const radiantStats = calculateTeamStats(radiantPlayers); |
|
|
const direStats = calculateTeamStats(direPlayers); |
|
|
|
|
|
|
|
|
document.getElementById('radiantAdvantage').textContent = radiantStats.networth.toLocaleString(); |
|
|
document.getElementById('direAdvantage').textContent = direStats.networth.toLocaleString(); |
|
|
|
|
|
|
|
|
displayPlayers(radiantPlayers, 'radiantPlayers'); |
|
|
displayPlayers(direPlayers, 'direPlayers'); |
|
|
|
|
|
|
|
|
displayMatchDetails(radiantStats, direStats, match); |
|
|
|
|
|
|
|
|
prepareCharts(match); |
|
|
} |
|
|
|
|
|
function calculateTeamStats(players) { |
|
|
return players.reduce((stats, player) => { |
|
|
stats.kills += player.kills || 0; |
|
|
stats.deaths += player.deaths || 0; |
|
|
stats.assists += player.assists || 0; |
|
|
stats.heroDamage += player.hero_damage || 0; |
|
|
stats.towerDamage += player.tower_damage || 0; |
|
|
stats.lastHits += player.last_hits || 0; |
|
|
stats.goldPerMin += player.gold_per_min || 0; |
|
|
stats.xpPerMin += player.xp_per_min || 0; |
|
|
stats.networth += player.net_worth || 0; |
|
|
stats.totalGold += player.total_gold || 0; |
|
|
stats.totalXp += player.total_xp || 0; |
|
|
return stats; |
|
|
}, { |
|
|
kills: 0, |
|
|
deaths: 0, |
|
|
assists: 0, |
|
|
heroDamage: 0, |
|
|
towerDamage: 0, |
|
|
lastHits: 0, |
|
|
goldPerMin: 0, |
|
|
xpPerMin: 0, |
|
|
networth: 0, |
|
|
totalGold: 0, |
|
|
totalXp: 0 |
|
|
}); |
|
|
} |
|
|
|
|
|
function displayPlayers(players, containerId) { |
|
|
const container = document.getElementById(containerId); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
players.forEach(player => { |
|
|
const playerElement = document.createElement('div'); |
|
|
playerElement.className = 'player-item bg-gray-700 rounded-lg p-3 transition duration-200'; |
|
|
playerElement.innerHTML = ` |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="hero-icon mr-3" style="background-image: url('https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/${getHeroShortName(player.hero_id)}.png')"></div> |
|
|
<div> |
|
|
<div class="font-bold">${player.personaname || 'Anonymous'}</div> |
|
|
<div class="text-sm text-gray-400">${getHeroName(player.hero_id)}</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="font-bold">${player.kills || 0}/${player.deaths || 0}/${player.assists || 0}</div> |
|
|
<div class="text-sm text-gray-400">K/D/A</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-4 gap-2 mt-3 text-center text-xs"> |
|
|
<div> |
|
|
<div class="font-bold">${player.last_hits || 0}</div> |
|
|
<div class="text-gray-400">LH</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-bold">${player.denies || 0}</div> |
|
|
<div class="text-gray-400">DN</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-bold">${player.gold_per_min || 0}</div> |
|
|
<div class="text-gray-400">GPM</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-bold">${player.xp_per_min || 0}</div> |
|
|
<div class="text-gray-400">XPM</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(playerElement); |
|
|
}); |
|
|
} |
|
|
|
|
|
function displayMatchDetails(radiantStats, direStats, match) { |
|
|
|
|
|
document.getElementById('totalKills').textContent = `${radiantStats.kills} - ${direStats.kills}`; |
|
|
document.getElementById('heroDamage').textContent = `${radiantStats.heroDamage.toLocaleString()} - ${direStats.heroDamage.toLocaleString()}`; |
|
|
document.getElementById('towerDamage').textContent = `${radiantStats.towerDamage.toLocaleString()} - ${direStats.towerDamage.toLocaleString()}`; |
|
|
|
|
|
|
|
|
const totalKills = radiantStats.kills + direStats.kills; |
|
|
const killsPercentage = totalKills > 0 ? (radiantStats.kills / totalKills * 100) : 50; |
|
|
document.getElementById('killsBar').style.width = `${killsPercentage}%`; |
|
|
|
|
|
const totalDamage = radiantStats.heroDamage + direStats.heroDamage; |
|
|
const damagePercentage = totalDamage > 0 ? (radiantStats.heroDamage / totalDamage * 100) : 50; |
|
|
document.getElementById('damageBar').style.width = `${damagePercentage}%`; |
|
|
|
|
|
const totalTowerDamage = radiantStats.towerDamage + direStats.towerDamage; |
|
|
const towerDamagePercentage = totalTowerDamage > 0 ? (radiantStats.towerDamage / totalTowerDamage * 100) : 50; |
|
|
document.getElementById('towerDamageBar').style.width = `${towerDamagePercentage}%`; |
|
|
|
|
|
|
|
|
document.getElementById('goldEarned').textContent = `${radiantStats.totalGold.toLocaleString()} - ${direStats.totalGold.toLocaleString()}`; |
|
|
document.getElementById('xpEarned').textContent = `${radiantStats.totalXp.toLocaleString()} - ${direStats.totalXp.toLocaleString()}`; |
|
|
document.getElementById('lastHits').textContent = `${radiantStats.lastHits} - ${direStats.lastHits}`; |
|
|
|
|
|
const totalGold = radiantStats.totalGold + direStats.totalGold; |
|
|
const goldPercentage = totalGold > 0 ? (radiantStats.totalGold / totalGold * 100) : 50; |
|
|
document.getElementById('goldBar').style.width = `${goldPercentage}%`; |
|
|
|
|
|
const totalXp = radiantStats.totalXp + direStats.totalXp; |
|
|
const xpPercentage = totalXp > 0 ? (radiantStats.totalXp / totalXp * 100) : 50; |
|
|
document.getElementById('xpBar').style.width = `${xpPercentage}%`; |
|
|
|
|
|
const totalLastHits = radiantStats.lastHits + direStats.lastHits; |
|
|
const lastHitsPercentage = totalLastHits > 0 ? (radiantStats.lastHits / totalLastHits * 100) : 50; |
|
|
document.getElementById('lastHitsBar').style.width = `${lastHitsPercentage}%`; |
|
|
|
|
|
|
|
|
document.getElementById('radiantTowers').textContent = match.tower_status_radiant ? countBits(match.tower_status_radiant) : 0; |
|
|
document.getElementById('direTowers').textContent = match.tower_status_dire ? countBits(match.tower_status_dire) : 0; |
|
|
document.getElementById('radiantBarracks').textContent = match.barracks_status_radiant ? countBits(match.barracks_status_radiant) : 0; |
|
|
document.getElementById('direBarracks').textContent = match.barracks_status_dire ? countBits(match.barracks_status_dire) : 0; |
|
|
|
|
|
|
|
|
document.getElementById('radiantRoshan').textContent = match.roshan_respawn_timer ? 'Unknown' : 0; |
|
|
document.getElementById('direRoshan').textContent = match.roshan_respawn_timer ? 'Unknown' : 0; |
|
|
} |
|
|
|
|
|
function prepareCharts(match) { |
|
|
|
|
|
const goldAdvantage = match.radiant_gold_adv || []; |
|
|
const xpAdvantage = match.radiant_xp_adv || []; |
|
|
|
|
|
|
|
|
const durationMinutes = Math.ceil(match.duration / 60); |
|
|
const timeLabels = Array.from({length: durationMinutes}, (_, i) => `${i+1}'`); |
|
|
|
|
|
|
|
|
const goldCtx = document.getElementById('goldChart').getContext('2d'); |
|
|
goldChart = new Chart(goldCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: timeLabels, |
|
|
datasets: [{ |
|
|
label: 'Gold Advantage', |
|
|
data: goldAdvantage, |
|
|
borderColor: '#f6e05e', |
|
|
backgroundColor: 'rgba(246, 224, 94, 0.1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.1, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
}, |
|
|
ticks: { |
|
|
color: 'rgba(255, 255, 255, 0.7)' |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
}, |
|
|
ticks: { |
|
|
color: 'rgba(255, 255, 255, 0.7)' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const xpCtx = document.getElementById('xpChart').getContext('2d'); |
|
|
xpChart = new Chart(xpCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: timeLabels, |
|
|
datasets: [{ |
|
|
label: 'XP Advantage', |
|
|
data: xpAdvantage, |
|
|
borderColor: '#63b3ed', |
|
|
backgroundColor: 'rgba(99, 179, 237, 0.1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.1, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
}, |
|
|
ticks: { |
|
|
color: 'rgba(255, 255, 255, 0.7)' |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
}, |
|
|
ticks: { |
|
|
color: 'rgba(255, 255, 255, 0.7)' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function getGameMode(modeId) { |
|
|
const modes = { |
|
|
0: 'Unknown', |
|
|
1: 'All Pick', |
|
|
2: 'Captains Mode', |
|
|
3: 'Random Draft', |
|
|
4: 'Single Draft', |
|
|
5: 'All Random', |
|
|
6: 'Intro', |
|
|
7: 'Diretide', |
|
|
8: 'Reverse Captains Mode', |
|
|
9: 'Greeviling', |
|
|
10: 'Tutorial', |
|
|
11: 'Mid Only', |
|
|
12: 'Least Played', |
|
|
13: 'Limited Heroes', |
|
|
14: 'Compendium Matchmaking', |
|
|
15: 'Custom', |
|
|
16: 'Captains Draft', |
|
|
17: 'Balanced Draft', |
|
|
18: 'Ability Draft', |
|
|
19: 'Event', |
|
|
20: 'All Random Deathmatch', |
|
|
21: '1v1 Mid', |
|
|
22: 'All Draft', |
|
|
23: 'Turbo', |
|
|
24: 'Mutation' |
|
|
}; |
|
|
return modes[modeId] || `Mode ${modeId}`; |
|
|
} |
|
|
|
|
|
function getLobbyType(lobbyId) { |
|
|
const lobbies = { |
|
|
0: 'Normal', |
|
|
1: 'Practice', |
|
|
2: 'Tournament', |
|
|
3: 'Tutorial', |
|
|
4: 'Co-op Bots', |
|
|
5: 'Ranked', |
|
|
6: 'Solo Ranked', |
|
|
7: 'Ranked Roles', |
|
|
8: 'Battle Cup' |
|
|
}; |
|
|
return lobbies[lobbyId] || `Lobby ${lobbyId}`; |
|
|
} |
|
|
|
|
|
function formatDuration(seconds) { |
|
|
const mins = Math.floor(seconds / 60); |
|
|
const secs = seconds % 60; |
|
|
return `${mins}m ${secs}s`; |
|
|
} |
|
|
|
|
|
function getHeroName(heroId) { |
|
|
|
|
|
|
|
|
return `Hero ${heroId}`; |
|
|
} |
|
|
|
|
|
function getHeroShortName(heroId) { |
|
|
|
|
|
|
|
|
return `hero_placeholder`; |
|
|
} |
|
|
|
|
|
function countBits(n) { |
|
|
|
|
|
let count = 0; |
|
|
while (n) { |
|
|
count += n & 1; |
|
|
n >>= 1; |
|
|
} |
|
|
return count; |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Siddheart/dota-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
