fix player win % and visual overhaul

templates/league_players.html

@@ -43,15 +43,27 @@
             <p class="kicker" style="margin:0;">Roster</p>
             <h2 class="panel__title">Active players</h2>
         </div>
-        <span class="panel__tag">{{ active_players|length }} players</span>
+        {% if active_players %}
+        <div class="player-toolbar">
+            <input id="playerSearch" type="search" placeholder="Search players…" autocomplete="off"
+                class="player-search">
+            <div class="player-view-toggle" role="group" aria-label="Player view">
+                <button class="player-view-toggle__btn is-on" type="button" data-player-view="cards" aria-pressed="true">Cards</button>
+                <button class="player-view-toggle__btn" type="button" data-player-view="list" aria-pressed="false">List</button>
+            </div>
+            <span class="panel__tag" id="playerCount">{{ active_players|length }} players</span>
+        </div>
+        {% else %}
+        <span class="panel__tag">0 players</span>
+        {% endif %}
     </div>
     {% if active_players %}
-    <div class="player-grid">
+    <div class="player-grid" id="playerGrid">
         {% for player in active_players %}
         {% set stats = stats_by_name.get(player.display_name) %}
         {% set initials = player.display_name.split()|map('first')|join('')|upper %}
         {% set avatar_cls = 'player-avatar--pos' if stats and stats.total_net_cents > 0 else 'player-avatar--neg' if stats and stats.total_net_cents < 0 else '' %}
-        <div class="player-card">
+        <div class="player-card" data-player-name="{{ player.display_name | lower }}">
             <div class="player-card__head">
                 <div class="player-avatar {{ avatar_cls }}">{{ initials[:2] }}</div>
                 <div class="player-card__name-block">
@@ -87,7 +99,7 @@
                 </div>
                 <div class="player-card__stat">
                     <span class="kicker">Win rate</span>
-                    <span class="player-card__stat-val">{{ "%.0f"|format(stats.win_pct * 100) }}%</span>
+                    <span class="player-card__stat-val">{{ "%.0f"|format(stats.win_pct) }}%</span>
                 </div>
                 <div class="player-card__stat">
                     <span class="kicker">Best win</span>
@@ -98,6 +110,7 @@
         </div>
         {% endfor %}
     </div>
+    <p class="player-grid__empty" id="playerSearchEmpty">No players match your search.</p>
     {% else %}
     <div class="empty-panel">
         <p class="kicker">Empty roster</p>
@@ -147,6 +160,55 @@
 </div>
 {% endif %}
 
+<script>
+(function () {
+    var input = document.getElementById('playerSearch');
+    var grid  = document.getElementById('playerGrid');
+    var empty = document.getElementById('playerSearchEmpty');
+    var count = document.getElementById('playerCount');
+    var viewButtons = Array.from(document.querySelectorAll('[data-player-view]'));
+    if (!input || !grid) return;
+    var cards = Array.from(grid.querySelectorAll('.player-card'));
+    var total = cards.length;
+
+    function setView(view) {
+        var nextView = view === 'list' ? 'list' : 'cards';
+        grid.dataset.view = nextView;
+        try { window.localStorage.setItem('myboker.playerView', nextView); } catch (e) {}
+        viewButtons.forEach(function (button) {
+            var active = button.dataset.playerView === nextView;
+            button.classList.toggle('is-on', active);
+            button.setAttribute('aria-pressed', active ? 'true' : 'false');
+        });
+    }
+
+    viewButtons.forEach(function (button) {
+        button.addEventListener('click', function () {
+            setView(this.dataset.playerView);
+        });
+    });
+
+    try {
+        setView(window.localStorage.getItem('myboker.playerView') || 'cards');
+    } catch (e) {
+        setView('cards');
+    }
+
+    input.addEventListener('input', function () {
+        var q = this.value.trim().toLowerCase();
+        var visible = 0;
+        cards.forEach(function (card) {
+            var name = card.dataset.playerName || '';
+            var show = !q || name.includes(q);
+            card.style.display = show ? '' : 'none';
+            if (show) visible++;
+        });
+        if (empty) empty.style.display = (q && visible === 0) ? 'block' : 'none';
+        if (count) count.textContent = (q ? visible + ' of ' + total : total) + ' players';
+    });
+})();
+</script>
+
 {% if can_manage %}
 <div class="modal-backdrop" id="modal-edit-player" hidden>
     <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modal-edit-player-title">