{% extends 'base.html' %}{% block title %}Sklepy offline · {{ panel_brand }}{% endblock %}{% block content %}
<p class="eyebrow">GOSPODARKA</p><h1>Sklepy offline</h1><p class="muted">Ostatni odczyt kolektora (co 5 minut): {{latest or 'kolektor jeszcze nie wykonał odczytu'}}. Stragany graczy i botów (IkarusShop) — stan i wartość rynku per królestwo.</p>
<section class="cards"><article><span>Aktywne sklepy</span><strong>{{kpi.shops}}</strong><small>otwarte stragany</small></article><article><span>Oferty / Sztuk towaru</span><strong>{{kpi.offers}} / {{'{:,}'.format(kpi['items']).replace(',', ' ')}}</strong><small>pozycji / łączna ilość</small></article><article><span>Wartość rynku</span><strong>{{'{:,}'.format(kpi.value).replace(',', ' ')}}</strong><small>yang, suma ofert</small></article><article><span>Transakcji łącznie</span><strong>{{'{:,}'.format(kpi.transactions_total).replace(',', ' ')}}</strong><small>ostatnie 24h: {{kpi.transactions_24h}}</small></article></section>
<div class="map-legend"><span><i class="dot" style="background:#ef4444"></i>Shinsoo</span><span><i class="dot" style="background:#f6c85f"></i>Chunjo</span><span><i class="dot" style="background:#4ea5ff"></i>Jinno</span></div>
<section class="grid two"><article class="panel"><h2>🏪 Sklepy na mapach</h2>{% if by_map %}<canvas id="shopsByMap"></canvas>{% else %}<p class="muted">Brak aktywnych sklepów w ostatnim odczycie.</p>{% endif %}</article><article class="panel"><h2>📦 Sztuk towaru wg królestwa</h2><canvas id="itemsByEmpire"></canvas></article></section>
<section class="panel"><h2>💰 Wartość rynku w czasie · 7 dni</h2>{% if value_trend.labels %}<canvas id="valueTrend"></canvas>{% else %}<p class="muted">Za mało odczytów kolektora, żeby pokazać trend — wróć za kilka cykli (co 5 minut).</p>{% endif %}</section>
<section class="panel"><h2>🔥 Najszybciej rozchodzące się przedmioty · ostatnie 24h</h2><p class="muted">Ranking wg liczby faktycznych sprzedaży ze straganów (nie samych ofert) — im wyżej, tym bardziej pożądany towar; wskaźnik ceny porównuje ostatnie 12h z wcześniejszymi 12h w oknie. Punkt odniesienia do podnoszenia cen botom.</p>{% set trend_icon={'up':'▲','down':'▼','flat':'–'} %}{% set trend_color={'up':'#39e890','down':'#ef4444','flat':'#8fa5c1'} %}<table><thead><tr><th>Przedmiot</th><th>Sprzedaży/24h</th><th>Tempo</th><th>Sztuk</th><th>Śr. cena/szt.</th></tr></thead><tbody>{% for i in sales_velocity %}<tr><td class="item-cell">{% if item_icon(i.vnum) %}<img src="{{item_icon(i.vnum)}}" loading="lazy" alt="">{% endif %}<a href="{{url_for('economy_item',vnum=i.vnum)}}">{{i.item_name}}</a></td><td>{{i.sales}}</td><td>{{i.per_hour}}/h</td><td>{{i.units}}</td><td>{{'{:,}'.format(i.avg_price).replace(',', ' ')}} <span style="color:{{trend_color[i.price_trend]}}" title="Śr. cena: ostatnie 12h vs wcześniejsze 12h">{{trend_icon[i.price_trend]}}</span></td></tr>{% else %}<tr><td colspan="5" class="muted">Brak sprzedaży ze straganów w ostatnich 24h.</td></tr>{% endfor %}</tbody></table></section>
<section class="panel"><h2>📚 Najlepiej sprzedające się księgi umiejętności · ostatnie 24h</h2><p class="muted">Wszystkie Księgi mają ten sam VNUM w grze — konkretną umiejętność ustalamy z socketu przedmiotu, co udaje się tylko dla części sprzedaży (reszta to już zużyte przez bota egzemplarze, bez śladu w bazie), więc lista poniżej pokazuje tylko te, które dało się rozpoznać.</p><table><thead><tr><th>Umiejętność</th><th>Sprzedaży/24h</th><th>Śr. cena/szt.</th></tr></thead><tbody>{% for i in skillbook_velocity %}<tr><td class="item-cell">{% if item_icon(i.vnum) %}<img src="{{item_icon(i.vnum)}}" loading="lazy" alt="">{% endif %}<a href="{{url_for('economy_item',vnum=i.vnum)}}">{{i.item_name}}</a></td><td>{{i.sales}}</td><td>{{'{:,}'.format(i.avg_price).replace(',', ' ')}}</td></tr>{% else %}<tr><td colspan="3" class="muted">Brak rozpoznanych sprzedaży ksiąg w ostatnich 24h.</td></tr>{% endfor %}</tbody></table></section>
<section class="panel"><h2>🧾 Ostatnie sprzedaże na straganach</h2><p class="muted">Kto sprzedał co i za ile — silnik nie zapisuje tożsamości kupującego przy sprzedaży ze straganu (IkarusShop), więc feed pokazuje wyłącznie stronę sprzedawcy. Odświeża się co 20s.</p><table id="saleFeedTable"><thead><tr><th>Czas</th><th>Przedmiot</th><th>Sprzedawca</th><th>Królestwo</th><th>Sztuk</th><th>Cena</th></tr></thead><tbody>{% for s in recent_sales %}<tr><td>{{s.time}}</td><td class="item-cell">{% if item_icon(s.vnum) %}<img src="{{item_icon(s.vnum)}}" loading="lazy" alt="">{% endif %}<a href="{{url_for('economy_item',vnum=s.vnum)}}">{{s.item_name}}</a></td><td>{% if s.seller_id %}<a href="{{url_for('player',pid=s.seller_id)}}">{{s.seller}}</a>{% else %}{{s.seller}}{% endif %}</td><td>{% if empire_flag(s.empire) %}<img class="empire-flag-inline" src="{{empire_flag(s.empire)}}" alt="{{empire_info(s.empire).name}}" title="{{empire_info(s.empire).name}}">{% endif %}</td><td>{{s.qty}}</td><td>{{'{:,}'.format(s.price).replace(',', ' ')}}</td></tr>{% else %}<tr><td colspan="6" class="muted">Brak zarejestrowanych sprzedaży.</td></tr>{% endfor %}</tbody></table></section>
<form class="search" action="{{url_for('economy_shops')}}#market-items"><input name="q" value="{{query}}" placeholder="Nazwa lub VNUM przedmiotu"><button>Szukaj</button></form>
<section id="market-items" class="panel"><h2>{% if query %}⭐ Wyniki wyszukiwania{% else %}⭐ Najpopularniejsze przedmioty w sklepach{% endif %}</h2>{% set trend_icon={'up':'▲','down':'▼','flat':'–'} %}{% set trend_color={'up':'#39e890','down':'#ef4444','flat':'#8fa5c1'} %}<table><thead><tr><th>Przedmiot</th><th>VNUM</th><th>Oferty</th><th>Sztuk</th><th>Śr. cena/szt.</th><th>Status</th></tr></thead><tbody>{% for i in market_items %}<tr><td class="item-cell">{% if item_icon(i.vnum) %}<img src="{{item_icon(i.vnum)}}" loading="lazy" alt="">{% endif %}<a href="{{url_for('economy_item',vnum=i.vnum)}}">{{i.item_name}}</a></td><td>{{i.vnum}}</td><td>{{i.offers}}</td><td>{{i.total_units}} <span style="color:{{trend_color[i.units_trend]}}" title="Zmiana od ~24h">{{trend_icon[i.units_trend]}}</span></td><td>{{'{:,}'.format(i.avg_price).replace(',', ' ')}} <span style="color:{{trend_color[i.price_trend]}}" title="Zmiana od ~24h">{{trend_icon[i.price_trend]}}</span></td><td>{% if i.on_market %}<span style="color:#39e890">● na rynku</span>{% elif i.last_seen %}<span class="muted">ostatnio {{i.last_seen}}</span>{% else %}<span class="muted">brak danych</span>{% endif %}</td></tr>{% else %}<tr><td colspan="6" class="muted">{% if query %}Brak wyników.{% else %}Brak aktywnych ofert w sklepach.{% endif %}</td></tr>{% endfor %}</tbody></table></section>
<script>
document.body.dataset.ajaxForms='1';
(() => {
if(window.__shopFeedInterval)clearInterval(window.__shopFeedInterval);
const EMPIRE_COLORS={1:'#ef4444',2:'#f6c85f',3:'#4ea5ff'};
const EMPIRE_NAMES={1:'Shinsoo',2:'Chunjo',3:'Jinno'};
const EMPIRE_FLAGS={1:"{{empire_flag(1)}}",2:"{{empire_flag(2)}}",3:"{{empire_flag(3)}}"};
const byMap={{by_map|tojson}};
if(byMap.length){
  // Small flag + "M1"/"M2" per bar instead of the full rotated map name --
  // built-in ticks are hidden and this plugin draws both below the axis.
  const flagImgs={};Object.keys(EMPIRE_FLAGS).forEach(id=>{const img=new Image();img.src=EMPIRE_FLAGS[id];flagImgs[id]=img;});
  const mapTickPlugin={id:'mapTickPlugin',afterDatasetsDraw(chart){
    const {ctx,chartArea:{bottom},scales:{x}}=chart;
    ctx.save();
    byMap.forEach((m,i)=>{
      const xPos=x.getPixelForTick(i);
      const img=flagImgs[m.empire];
      if(img&&img.complete)ctx.drawImage(img,xPos-9,bottom+6,18,12);
      ctx.fillStyle='#8fa5c1';ctx.font='11px system-ui,sans-serif';ctx.textAlign='center';
      ctx.fillText(m.map_short,xPos,bottom+28);
    });
    ctx.restore();
  }};
  new Chart(document.getElementById('shopsByMap'),{type:'bar',data:{labels:byMap.map(m=>m.map_short),datasets:[{label:'Sklepy',data:byMap.map(m=>m.shop_count),backgroundColor:byMap.map(m=>EMPIRE_COLORS[m.empire]||'#8fa5c1')}]},options:{layout:{padding:{bottom:30}},plugins:{legend:{display:false}},scales:{x:{ticks:{display:false},grid:{display:false}},y:{beginAtZero:true,ticks:{color:'#8fa5c1',precision:0}}}},plugins:[mapTickPlugin]});
}
const empireTotals={{empire_totals|tojson}};
const empireIds=[1,2,3];
new Chart(document.getElementById('itemsByEmpire'),{type:'bar',data:{labels:empireIds.map(e=>EMPIRE_NAMES[e]),datasets:[{label:'Sztuk',data:empireIds.map(e=>(empireTotals[e]||{}).items||0),backgroundColor:empireIds.map(e=>EMPIRE_COLORS[e])}]},options:{plugins:{legend:{display:false}},scales:{x:{ticks:{color:'#8fa5c1'}},y:{beginAtZero:true,ticks:{color:'#8fa5c1',precision:0}}}}});
const trend={{value_trend|tojson}};
if(trend.labels.length){new Chart(document.getElementById('valueTrend'),{type:'line',data:{labels:trend.labels,datasets:trend.series.map(s=>({label:s.name,data:s.data,borderColor:EMPIRE_COLORS[s.id],backgroundColor:EMPIRE_COLORS[s.id]+'22',fill:false,tension:.25,pointRadius:0,spanGaps:false}))},options:{interaction:{mode:'index',intersect:false},plugins:{legend:{labels:{color:'#cfe0f7'}}},scales:{x:{ticks:{color:'#8fa5c1',maxTicksLimit:12},grid:{color:'#1d3048'}},y:{beginAtZero:true,ticks:{color:'#8fa5c1'},grid:{color:'#1d3048'}}}}});}

// Live sale feed: repaint the table body every 20s from /api/shop-feed
// rather than a full page reload, so the search form above keeps its state.
function esc(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
function renderSaleFeed(sales){
  const body=document.querySelector('#saleFeedTable tbody');
  if(!body)return;
  if(!sales.length){body.innerHTML='<tr><td colspan="6" class="muted">Brak zarejestrowanych sprzedaży.</td></tr>';return;}
  body.innerHTML=sales.map(s=>{
    const icon=s.icon_url?`<img src="${esc(s.icon_url)}" loading="lazy" alt="">`:'';
    const flagSrc=EMPIRE_FLAGS[s.empire];
    const flag=flagSrc?`<img class="empire-flag-inline" src="${esc(flagSrc)}" alt="${esc(EMPIRE_NAMES[s.empire]||'')}" title="${esc(EMPIRE_NAMES[s.empire]||'')}">`:'';
    const seller=s.seller_id?`<a href="/player/${Number(s.seller_id)}">${esc(s.seller)}</a>`:esc(s.seller);
    return `<tr><td>${esc(s.time)}</td><td class="item-cell">${icon}<a href="/economy/item/${s.vnum}">${esc(s.item_name)}</a></td><td>${seller}</td><td>${flag}</td><td>${s.qty}</td><td>${s.price.toLocaleString('pl-PL')}</td></tr>`;
  }).join('');
}
window.__shopFeedInterval=setInterval(()=>{
  fetch('{{url_for("api_shop_feed")}}').then(r=>r.json()).then(d=>{if(d.ok)renderSaleFeed(d.sales);}).catch(()=>{});
}, 20000);
})();
</script>{% endblock %}