From f5d254185b50c4ddab03ac0ae66ed3792cdc60ec Mon Sep 17 00:00:00 2001
From: elias <elias.gew@hotmail.com>
Date: Sun, 7 Jun 2026 12:29:48 +0200
Subject: [PATCH] AstraOS Ver. 1.31: - AyranTracker bearbeitet

---
 AstraOS/Frontend/HTML/ayrantracker.html | 133 ++++++++++++++----------
 AstraOS/astra_os.py                     |  10 +-
 2 files changed, 82 insertions(+), 61 deletions(-)

diff --git a/AstraOS/Frontend/HTML/ayrantracker.html b/AstraOS/Frontend/HTML/ayrantracker.html
index f1af2e8..e544431 100644
--- a/AstraOS/Frontend/HTML/ayrantracker.html
+++ b/AstraOS/Frontend/HTML/ayrantracker.html
@@ -3,7 +3,7 @@
 {% block title %}AstraOS — AyranTracker{% endblock %}
 
 {% block content %}
-<div class="max-w-4xl mx-auto px-4 py-6">
+<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>
@@ -33,60 +33,78 @@
         </div>
     </div>
 
-    <div id="profileSection" class="hidden space-y-8 max-w-3xl mx-auto">
+    <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 md:grid-cols-3 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">
-                <img id="playerCard" src="" alt="Player Card" class="w-20 h-20 rounded-xl object-cover mb-3 border border-purple-500/30 shadow-md">
-                <h4 id="playerNameTag" class="text-lg font-black text-white truncate max-w-full">Loading...</h4>
-                <p id="playerLevel" class="text-[11px] text-slate-400 mt-1 bg-slate-950 px-2 py-0.5 rounded-full">Level: --</p>
+        <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-4 w-full border-t border-slate-800/60 pt-3">
+                <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-base font-bold text-purple-300 mt-0.5">Unranked</p>
-                    <p id="playerRR" class="text-xs text-slate-500">0 RR</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="md:col-span-2 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 gap-4">
-                    <div class="bg-slate-950/50 border border-slate-900 p-3 rounded-xl">
-                        <span class="block text-[11px] text-slate-500 font-medium">Winrate</span>
-                        <span id="statWinrate" class="text-xl font-black text-emerald-400">0%</span>
+            <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-3 rounded-xl">
-                        <span class="block text-[11px] text-slate-500 font-medium">K/D Ratio</span>
-                        <span id="statKD" class="text-xl font-black text-purple-400">0.0</span>
+                    <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-3 rounded-xl">
-                        <span class="block text-[11px] text-slate-500 font-medium">Ø Schaden / Rnd.</span>
-                        <span id="statADR" class="text-xl font-black text-blue-400">0.0</span>
+                    <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-3 rounded-xl">
-                        <span class="block text-[11px] text-slate-500 font-medium">Matches Analysiert</span>
-                        <span id="statMatches" class="text-xl font-black text-slate-300">0</span>
+                    <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-4">
-                    <h5 class="text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">Top Agenten</h5>
-                    <div id="agentContainer" class="grid grid-cols-2 gap-2"></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">
-            <h4 class="text-sm font-bold text-slate-400 tracking-wider uppercase text-center md:text-left">Match Historie (Letzte 15 Matches)</h4>
-            <div id="matchHistoryContainer" class="space-y-3">
+        <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;
@@ -127,14 +145,14 @@
                 agentContainer.innerHTML = '';
                 data.top_agents.forEach(agent => {
                     agentContainer.insertAdjacentHTML('beforeend', `
-                        <div class="flex justify-between items-center bg-slate-950/40 p-2 rounded-lg border border-slate-900 text-xs">
+                        <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-1.5 py-0.5 rounded">${agent.count}x</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 sauber rendern (Wie dein Altes liebgewonnenes Layout!)
+                // Match History groß aufbauen
                 const historyContainer = document.getElementById('matchHistoryContainer');
                 historyContainer.innerHTML = '';
 
@@ -142,46 +160,49 @@
                     historyContainer.innerHTML = '<p class="text-xs text-slate-500 text-center py-6">Keine Matches gefunden.</p>';
                 } else {
                     data.matches.forEach(match => {
-                        // Dynamisches Styling je nach Win/Loss
-                        const borderClass = match.has_won ? 'border-emerald-500/30' : 'border-rose-500/30';
-                        const badgeBg = match.has_won ? 'bg-emerald-500/20 text-emerald-300' : 'bg-rose-500/20 text-rose-300';
-                        const statusLabel = match.has_won ? 'WIN' : 'LOSS';
+                        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';
 
-                        // RR String bauen (+ / - oder verstecken wenn Modus != Comp)
+                        // 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-xs bg-emerald-950/80 px-2 py-1 rounded border border-emerald-500/20">+${match.mmr_change} RR</span>`;
+                                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-xs bg-rose-950/80 px-2 py-1 rounded border border-rose-500/20">${match.mmr_change} RR</span>`;
+                                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-xs bg-slate-950 px-2 py-1 rounded">0 RR</span>`;
+                                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="relative overflow-hidden border rounded-xl p-4 flex flex-col sm:flex-row justify-between items-center transition hover:scale-[1.01] duration-200 ${borderClass}" style="min-height: 85px;">
+                            <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="absolute inset-0 bg-cover bg-center pointer-events-none opacity-[0.12] mix-blend-luminosity" style="background-image: url('${match.map_img}');"></div>
-                                <div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-transparent to-slate-950/40 pointer-events-none"></div>
+                                <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 class="relative z-10 flex items-center gap-4 w-full sm:w-auto">
-                                    <img src="${match.agent_img}" alt="${match.agent}" class="w-12 h-12 rounded-lg border border-slate-800 bg-slate-950 object-cover shadow-inner">
                                     <div>
-                                        <div class="flex items-center gap-2">
-                                            <span class="text-sm font-black text-white">${match.agent}</span>
-                                            <span class="text-[10px] px-1.5 py-0.5 rounded font-extrabold tracking-wider ${badgeBg}">${statusLabel}</span>
+                                        <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-medium mt-0.5">${match.map} • <span class="capitalize text-purple-300 text-[11px]">${match.mode}</span></span>
+                                        <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="relative z-10 flex justify-between sm:justify-end items-center w-full sm:w-auto mt-3 sm:mt-0 gap-6 border-t sm:border-t-0 border-slate-900 pt-2 sm:pt-0">
-                                    <div class="text-left sm:text-right">
-                                        <span class="block text-xs font-mono font-bold text-slate-200 tracking-wide">KDA: ${match.kills} / ${match.deaths} / ${match.assists}</span>
-                                        <span class="block text-[11px] text-slate-500 mt-0.5">Ergebnis: <span class="font-bold text-slate-300">${match.score}</span></span>
+                                <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-[75px] justify-end">
+                                    <div class="flex items-center min-w-[90px] justify-end">
                                         ${rrDisplay}
                                     </div>
                                 </div>
@@ -191,7 +212,7 @@
                     });
                 }
 
-                // Ansichten umschalten
+                // Ansichten wechseln
                 document.getElementById('searchSection').classList.add('hidden');
                 document.getElementById('profileSection').classList.remove('hidden');
             } else {
diff --git a/AstraOS/astra_os.py b/AstraOS/astra_os.py
index fe761c9..3e71da3 100644
--- a/AstraOS/astra_os.py
+++ b/AstraOS/astra_os.py
@@ -1558,7 +1558,7 @@ def get_valorant_stats(name, tag):
         mmr_data = mmr_res.json().get('data', {}) if mmr_res.status_code == 200 else {}
         if not mmr_data: mmr_data = {}
 
-        # 3. RR-Verlauf (MMR History) für Plus/Minus Erkennung abrufen
+        # 3. RR-Verlauf (MMR History) abrufen
         rr_history = {}
         if match_mode == 'competitive':
             history_res = requests.get(f"{VALORANT_API_BASE}/v1/mmr-history/{region}/{name}/{tag}", headers=headers,
@@ -1634,16 +1634,16 @@ def get_valorant_stats(name, tag):
                     match_damage += p_round_stat.get('damage', 0)
             total_damage += match_damage
 
-            # Bestimme den RR Change aus unserer History-Map
             mmr_change = rr_history.get(match_id, 0) if match_mode == 'competitive' else None
 
+            # Holen des Map-Namen für die standardisierte Bild-URL im Frontend
+            map_name = metadata.get('map', 'Unknown')
+
             processed_matches.append({
-                "map": metadata.get('map', 'Unknown'),
+                "map": map_name,
                 "mode": metadata.get('mode', 'Unknown'),
                 "agent": agent_name,
                 "agent_img": me.get('assets', {}).get('agent', {}).get('small', ''),
-                # Map-Hintergrundbild aus den Match-Metadaten ziehen
-                "map_img": metadata.get('images', {}).get('wide', ''),
                 "kills": m_kills,
                 "deaths": m_deaths,
                 "assists": m_assists,