AstraOS-Panel/AstraOS/Frontend/HTML/ayrantracker.html

{% extends "sidebar.html" %}

{% block title %}AstraOS — AyranTracker{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 py-6">
    <header class="mb-10 text-center">
        <h2 class="text-4xl font-black tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-violet-200 to-white">
            AYRAN<span class="text-purple-400">TRACKER</span>
        </h2>
        <p class="text-sm text-slate-400 mt-2">Professional Valorant Analytics für AstraOS</p>
    </header>

    <div id="searchSection" class="bg-black/40 border {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %} rounded-2xl p-8 backdrop-blur-md shadow-xl max-w-md mx-auto">
        <h3 class="text-lg font-bold text-purple-300 mb-4 text-center">Spieler-Analyse</h3>
        <div class="space-y-4">
            <div>
                <label class="block text-xs font-semibold text-slate-400 mb-2">Riot ID (Name#TAG)</label>
                <input type="text" id="riotIdInput" placeholder="Z.B. TenZ#NA1" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:border-purple-500 transition text-white">
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-400 mb-2">Match Typ</label>
                <select id="matchModeSelect" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:border-purple-500 transition text-white">
                    <option value="competitive" selected>Competitive (Standard)</option>
                    <option value="swiftplay">Swiftplay</option>
                    <option value="unrated">Unrated</option>
                    <option value="spikerush">Spike Rush</option>
                </select>
            </div>
            <button id="searchBtn" class="w-full py-3 rounded-lg font-bold text-sm transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
                Analyse starten
            </button>
        </div>
    </div>

    <div id="profileSection" class="hidden space-y-8 w-full">
        <button onclick="location.reload()" class="text-xs font-bold text-slate-400 hover:text-white transition flex items-center gap-1">
            ← Neue Suche
        </button>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <div class="bg-black/40 border border-purple-500/10 p-6 rounded-2xl flex flex-col items-center text-center backdrop-blur-md justify-center">
                <img id="playerCard" src="" alt="Player Card" class="w-24 h-24 rounded-xl object-cover mb-4 border border-purple-500/30 shadow-md">
                <h4 id="playerNameTag" class="text-xl font-black text-white truncate max-w-full">Loading...</h4>
                <p id="playerLevel" class="text-xs text-slate-400 mt-1 bg-slate-950 px-3 py-0.5 rounded-full">Level: --</p>

                <div class="mt-6 w-full border-t border-slate-800/60 pt-4">
                    <p class="text-xs text-slate-400 font-semibold">Aktueller Rang</p>
                    <p id="playerRank" class="text-xl font-bold text-purple-300 mt-1">Unranked</p>
                    <p id="playerRR" class="text-xs text-slate-500 mt-0.5">0 RR</p>
                </div>
            </div>

            <div class="lg:col-span-3 bg-black/40 border border-purple-500/10 p-6 rounded-2xl backdrop-blur-md flex flex-col justify-between">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="bg-slate-950/50 border border-slate-900 p-4 rounded-xl text-center">
                        <span class="block text-xs text-slate-500 font-semibold uppercase tracking-wider">Winrate</span>
                        <span id="statWinrate" class="text-3xl font-black text-emerald-400 block mt-2">0%</span>
                    </div>
                    <div class="bg-slate-950/50 border border-slate-900 p-4 rounded-xl text-center">
                        <span class="block text-xs text-slate-500 font-semibold uppercase tracking-wider">K/D Ratio</span>
                        <span id="statKD" class="text-3xl font-black text-purple-400 block mt-2">0.0</span>
                    </div>
                    <div class="bg-slate-950/50 border border-slate-900 p-4 rounded-xl text-center">
                        <span class="block text-xs text-slate-500 font-semibold uppercase tracking-wider">Ø Schaden / Rnd.</span>
                        <span id="statADR" class="text-3xl font-black text-blue-400 block mt-2">0.0</span>
                    </div>
                    <div class="bg-slate-950/50 border border-slate-900 p-4 rounded-xl text-center">
                        <span class="block text-xs text-slate-500 font-semibold uppercase tracking-wider">Analysiert</span>
                        <span id="statMatches" class="text-3xl font-black text-slate-300 block mt-2">0</span>
                    </div>
                </div>

                <div class="mt-6">
                    <h5 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">Top Agenten in dieser Session</h5>
                    <div id="agentContainer" class="grid grid-cols-1 sm:grid-cols-2 gap-3"></div>
                </div>
            </div>
        </div>

        <div class="space-y-4 pt-4">
            <h4 class="text-lg font-black text-slate-300 tracking-wider uppercase border-b border-slate-900 pb-2">Match Historie (Letzte 15 Matches)</h4>
            <div id="matchHistoryContainer" class="space-y-4">
                </div>
        </div>
    </div>
</div>

<script>
    // Lokales Mapping für Map-ListView-Icons von valorant-api.com, damit alles perfekt geladen wird
    const mapIcons = {
        "ascent": "https://media.valorant-api.com/maps/7eae2356-4a54-2a30-5731-93ad3242274d/listViewIcon.png",
        "bind": "https://media.valorant-api.com/maps/2c9b3b9b-4314-8583-60d8-856d94c0e45a/listViewIcon.png",
        "haven": "https://media.valorant-api.com/maps/2bee0dc1-43e0-ab88-66d5-a3a69470566e/listViewIcon.png",
        "split": "https://media.valorant-api.com/maps/d962e550-4c7b-1410-1050-e3c6c001f3e4/listViewIcon.png",
        "icebox": "https://media.valorant-api.com/maps/e2ad5c54-4114-a870-96ae-19b2e030d18e/listViewIcon.png",
        "breeze": "https://media.valorant-api.com/maps/2fb9a4aa-42c8-7de2-4d52-04b5833e25d9/listViewIcon.png",
        "fracture": "https://media.valorant-api.com/maps/b5294485-4d60-4a4e-f416-43b35583b639/listViewIcon.png",
        "pearl": "https://media.valorant-api.com/maps/fd2673d9-41d7-4987-ee8b-5f1905d92b74/listViewIcon.png",
        "lotus": "https://media.valorant-api.com/maps/2fe4ed3a-450a-948b-6d6b-e89a78e680a9/listViewIcon.png",
        "sunset": "https://media.valorant-api.com/maps/92dac14f-4ee3-5e18-bfbf-9a96d5d5e7d6/listViewIcon.png",
        "abyss": "https://media.valorant-api.com/maps/224b0a95-4ae7-8a10-5a2b-2895a10a5344/listViewIcon.png",
        "district": "https://media.valorant-api.com/maps/12452a2d-48e7-916c-e63d-4988bbdbed51/listViewIcon.png",
        "kasbah": "https://media.valorant-api.com/maps/de28aa9b-4cbe-1003-320e-6cb3ec309557/listViewIcon.png",
        "piazza": "https://media.valorant-api.com/maps/690b3aea-4c13-a87e-4031-f3933e287b37/listViewIcon.png"
    };

    document.getElementById('searchBtn').addEventListener('click', async () => {
        const riotId = document.getElementById('riotIdInput').value.trim();
        const mode = document.getElementById('matchModeSelect').value;
        const btn = document.getElementById('searchBtn');

        if (!riotId.includes('#')) {
            alert("Format ungültig! Bitte nutze Name#TAG (z.B. TenZ#NA1)");
            return;
        }

        const parts = riotId.split('#');
        const name = parts[0].trim();
        const tag = parts[1].trim();

        btn.innerText = "Analysiere...";
        btn.disabled = true;

        try {
            const response = await fetch(`/api/v1/profile/${encodeURIComponent(name)}/${encodeURIComponent(tag)}?mode=${mode}`);
            const data = await response.json();

            if (response.ok && data.status === "success") {
                // Dashboard füllen
                document.getElementById('playerNameTag').innerText = `${data.account.name}#${data.account.tag}`;
                document.getElementById('playerLevel').innerText = `Level: ${data.account.level}`;
                document.getElementById('playerCard').src = data.account.card_url || 'https://media.valorant-api.com/playercards/9fb348bc-41a4-91ad-d131-1ca1efdc3535/smallart.png';

                document.getElementById('playerRank').innerText = data.rank.current_tier_name;
                document.getElementById('playerRR').innerText = `${data.rank.ranking_in_tier} RR`;

                document.getElementById('statWinrate').innerText = data.calculated_stats.win_rate;
                document.getElementById('statKD').innerText = data.calculated_stats.kd_ratio;
                document.getElementById('statADR').innerText = data.calculated_stats.avg_damage_round;
                document.getElementById('statMatches').innerText = data.calculated_stats.matches_analyzed;

                // Agenten Boxen
                const agentContainer = document.getElementById('agentContainer');
                agentContainer.innerHTML = '';
                data.top_agents.forEach(agent => {
                    agentContainer.insertAdjacentHTML('beforeend', `
                        <div class="flex justify-between items-center bg-slate-950/60 p-3 rounded-lg border border-slate-900 text-sm">
                            <span class="font-bold text-purple-300">${agent.name}</span>
                            <span class="text-slate-400 bg-slate-950 px-2 py-0.5 rounded font-bold">${agent.count} Match(es)</span>
                        </div>
                    `);
                });

                // Match History groß aufbauen
                const historyContainer = document.getElementById('matchHistoryContainer');
                historyContainer.innerHTML = '';

                if (!data.matches || data.matches.length === 0) {
                    historyContainer.innerHTML = '<p class="text-xs text-slate-500 text-center py-6">Keine Matches gefunden.</p>';
                } else {
                    data.matches.forEach(match => {
                        const borderClass = match.has_won ? 'border-emerald-500/40 bg-emerald-950/5' : 'border-rose-500/40 bg-rose-950/5';
                        const badgeBg = match.has_won ? 'bg-emerald-500/20 text-emerald-400' : 'bg-rose-500/20 text-rose-400';
                        const statusLabel = match.has_won ? 'SIEG' : 'NIEDERLAGE';

                        // Finde passendes ListView Icon für die Map heraus
                        const mapKey = match.map.toLowerCase().trim();
                        const mapIconUrl = mapIcons[mapKey] || 'https://media.valorant-api.com/maps/7eae2356-4a54-2a30-5731-93ad3242274d/listViewIcon.png';

                        // RR String bauen (+/-)
                        let rrDisplay = '';
                        if (match.mmr_change !== null && mode === 'competitive') {
                            if (match.mmr_change > 0) {
                                rrDisplay = `<span class="text-emerald-400 font-black text-sm bg-emerald-950/90 px-3 py-1.5 rounded-lg border border-emerald-500/30 shadow-sm">+${match.mmr_change} RR</span>`;
                            } else if (match.mmr_change < 0) {
                                rrDisplay = `<span class="text-rose-400 font-black text-sm bg-rose-950/90 px-3 py-1.5 rounded-lg border border-rose-500/30 shadow-sm">${match.mmr_change} RR</span>`;
                            } else {
                                rrDisplay = `<span class="text-slate-400 font-black text-sm bg-slate-950 px-3 py-1.5 rounded-lg border border-slate-900 shadow-sm">0 RR</span>`;
                            }
                        }

                        historyContainer.insertAdjacentHTML('beforeend', `
                            <div class="border rounded-2xl p-5 flex flex-col md:flex-row justify-between items-center transition duration-200 hover:bg-slate-900/20 ${borderClass}" style="min-height: 100px;">

                                <div class="flex items-center gap-5 w-full md:w-auto">
                                    <img src="${mapIconUrl}" alt="${match.map}" class="w-24 h-14 rounded-xl object-cover border border-slate-800 shadow-md hidden sm:block">

                                    <img src="${match.agent_img}" alt="${match.agent}" class="w-14 h-14 rounded-xl border border-slate-800 bg-slate-950 object-cover shadow-inner">

                                    <div>
                                        <div class="flex items-center gap-3">
                                            <span class="text-base font-black text-white">${match.agent}</span>
                                            <span class="text-xs px-2 py-0.5 rounded-md font-black tracking-wider ${badgeBg}">${statusLabel}</span>
                                        </div>
                                        <span class="block text-xs text-slate-400 font-semibold mt-1">Map: <span class="text-white">${match.map}</span> • <span class="capitalize text-purple-400 font-bold">${match.mode}</span></span>
                                    </div>
                                </div>

                                <div class="flex justify-between md:justify-end items-center w-full md:w-auto mt-4 md:mt-0 gap-8 border-t md:border-t-0 border-slate-900 pt-3 md:pt-0">
                                    <div class="text-left md:text-right space-y-0.5">
                                        <span class="block text-sm font-mono font-black text-slate-200 tracking-wide">KDA: ${match.kills} / ${match.deaths} / ${match.assists}</span>
                                        <span class="block text-xs text-slate-400">Ergebnis: <span class="font-bold text-slate-300 text-sm">${match.score}</span></span>
                                    </div>
                                    <div class="flex items-center min-w-[90px] justify-end">
                                        ${rrDisplay}
                                    </div>
                                </div>

                            </div>
                        `);
                    });
                }

                // Ansichten wechseln
                document.getElementById('searchSection').classList.add('hidden');
                document.getElementById('profileSection').classList.remove('hidden');
            } else {
                alert("Fehler: " + (data.message || "Spieler konnte nicht geladen werden. Checke Name, Tag und Modus."));
            }
        } catch (error) {
            alert("Verbindungsabbruch oder API temporär offline.");
        } finally {
            btn.innerText = "Analyse starten";
            btn.disabled = false;
        }
    });
</script>
{% endblock %}