{% extends 'base.html' %}{% block content %}
<p class="eyebrow">AKTYWNOŚĆ ŚWIATA</p><h1>Mapy w czasie</h1><p class="muted">Natężenie graczy z ostatnich 24 godzin oraz zdarzenia odnotowane w logach serwera.</p>
{% if channels|length > 1 %}<div class="channel-tabs" id="maps-channel-tabs" role="tablist">
  <button type="button" class="active" data-channel="all">Wszystkie kanały</button>
  {% for ch in channels %}<button type="button" data-channel="{{ch}}">Kanał {{ch}}</button>{% endfor %}
</div>{% endif %}
<section class="panel map-history"><header class="map-history-head"><div><h2>Natężenie na mapach</h2><p class="muted">Kliknij wiersz aktualnego natężenia lub zaznacz mapy poniżej, aby odfiltrować wykres.</p></div><button class="secondary" type="button" id="maps-all">Wszystkie mapy</button></header><div id="map-series-filters" class="map-series-filters" aria-label="Mapy na wykresie"></div><canvas id="maps"></canvas></section>
<section class="panel"><h2>Aktualne natężenie</h2><table class="map-current-table"><thead><tr><th>Mapa</th><th>Postacie</th></tr></thead><tbody id="maps-current-body">{% for m in latest['all'] %}<tr data-map-index="{{m.map_index}}" tabindex="0" title="Pokaż tylko tę mapę na wykresie"><td>{{map_name(m.map_index)}}</td><td>{{m.character_count}}</td></tr>{% else %}<tr><td colspan="2" class="muted">Czekam na dane.</td></tr>{% endfor %}</tbody></table></section>
<section class="panel"><h2>🔥 Mapa cieplna zdarzeń</h2><p class="muted">Śmierci botów, rozbite Metiny i zabite bossy z ostatnich 24 godzin — dane są pobierane z logów, z ich faktycznymi współrzędnymi.</p><div class="heat-controls"><select id="heat-kind"><option value="deaths">Zgony botów</option><option value="metins">Rozbite Metiny</option><option value="bosses">Zabite bossy</option></select><select id="heat-map"><option value="21">Chunjo M1</option><option value="23">Chunjo M2</option><option value="24">Chunjo M3 — Waryong</option><option value="25">Loch Małp Chunjo</option><option value="1">Shinsoo M1 — Yongan</option><option value="3">Shinsoo M2 — Jayang</option><option value="4">Shinsoo M3 — Jungrang</option><option value="5">Loch Małp Shinsoo</option><option value="41">Jinno M1 — Pyongmoo</option><option value="43">Jinno M2 — Bakra</option><option value="44">Jinno M3 — Imha</option><option value="45">Loch Małp Jinno</option><option value="108">Loch Małp Normalny</option><option value="109">Loch Małp Trudny</option><option value="64">Dolina Orków</option><option value="63">Pustynia Yongbi</option><option value="61">Góra Sohan</option><option value="104">Loch Pająków V1</option><option value="65">Świątynia Hwang</option><option value="67">Las</option><option value="68">Czerwony Las</option><option value="66">Wieża Demonów</option></select><b id="heat-count">Ładowanie…</b></div><div id="heatmap" class="world-map heatmap"><div class="map-caption" id="heat-caption">Chunjo M1</div></div></section>
<script>
const allCharts={{charts|tojson}};
const allLatest={{latest|tojson}};
let activeChannel='all';
let mapHistory=allCharts[activeChannel];
const mapColors=['#4ea5ff','#36d399','#f6c85f','#c084fc','#fb7185','#22d3ee','#f97316','#a3e635','#e879f9','#facc15','#14b8a6','#ef4444','#818cf8','#84cc16','#f472b6'];
let checked=new Set(mapHistory.series.map(s=>s.id));
const filters=document.getElementById('map-series-filters');
const currentBody=document.getElementById('maps-current-body');
const canvas=document.getElementById('maps');
const makeDataset=(series,index)=>({label:series.name,data:series.data,borderColor:mapColors[index%mapColors.length],backgroundColor:mapColors[index%mapColors.length]+'22',borderWidth:2,tension:.25,pointRadius:0,pointHoverRadius:4});
const chart=new Chart(canvas,{type:'line',data:{labels:mapHistory.labels,datasets:[]},options:{responsive:true,interaction:{mode:'index',intersect:false},plugins:{legend:{display:false},tooltip:{displayColors:true,callbacks:{title:items=>items.length?'Godzina: '+items[0].label:'',label:item=>item.dataset.label+': '+item.formattedValue+' postaci'}}},scales:{x:{ticks:{color:'#8fa5c1',maxTicksLimit:12},grid:{color:'#1d3048'}},y:{beginAtZero:true,ticks:{color:'#8fa5c1',precision:0},grid:{color:'#1d3048'}}}}});
function render(){chart.data.labels=mapHistory.labels;chart.data.datasets=mapHistory.series.filter(s=>checked.has(s.id)).map((s,index)=>makeDataset(s,mapHistory.series.indexOf(s)));chart.update();filters.querySelectorAll('input').forEach(input=>input.checked=checked.has(Number(input.value)));document.querySelectorAll('.map-current-table tr[data-map-index]').forEach(row=>row.classList.toggle('selected',checked.size===1&&checked.has(Number(row.dataset.mapIndex))));}
function renderFilters(){filters.innerHTML='';mapHistory.series.forEach((series,index)=>{const label=document.createElement('label');label.innerHTML=`<input type="checkbox" value="${series.id}" checked><i style="--map-color:${mapColors[index%mapColors.length]}"></i><span>${series.name}</span>`;label.querySelector('input').addEventListener('change',event=>{const id=Number(event.target.value);event.target.checked?checked.add(id):checked.delete(id);render()});filters.append(label)});}
function renderCurrentTable(){const rows=allLatest[activeChannel]||[];currentBody.innerHTML=rows.length?rows.map(m=>`<tr data-map-index="${m.map_index}" tabindex="0" title="Pokaż tylko tę mapę na wykresie"><td>${m.map_name}</td><td>${m.character_count}</td></tr>`).join(''):'<tr><td colspan="2" class="muted">Czekam na dane.</td></tr>';bindCurrentTableRows();}
function bindCurrentTableRows(){document.querySelectorAll('.map-current-table tr[data-map-index]').forEach(row=>{row.addEventListener('click',()=>chooseOne(row.dataset.mapIndex));row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();chooseOne(row.dataset.mapIndex)}})});}
function chooseOne(id){checked.clear();checked.add(Number(id));render();canvas.scrollIntoView({behavior:'smooth',block:'center'});}
function switchChannel(channel){activeChannel=channel;mapHistory=allCharts[channel]||allCharts.all;checked=new Set(mapHistory.series.map(s=>s.id));renderFilters();renderCurrentTable();render();document.querySelectorAll('#maps-channel-tabs button').forEach(btn=>btn.classList.toggle('active',btn.dataset.channel===channel));}
document.querySelectorAll('#maps-channel-tabs button').forEach(btn=>btn.addEventListener('click',()=>switchChannel(btn.dataset.channel)));
renderFilters();bindCurrentTableRows();
document.getElementById('maps-all').addEventListener('click',()=>{mapHistory.series.forEach(s=>checked.add(s.id));render()});render();
</script><script src="{{url_for('static',filename='heatmap.js')}}"></script>{% endblock %}