feat: écran Timers — compte à rebours automatique au kill de mob

- Nouvel onglet "Timers" dans le hub - Ajout de timers mob + durée (ex: 5:00 ou 90s) - Détection automatique : chaque kill du mob configuré démarre/reset le timer - Affichage des comptes à rebours avec barre de progression colorée (vert → orange → rouge) - Configs persistées en localStorage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-30 12:36:26 +02:00
1 changed files with 188 additions and 1 deletions
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -299,6 +299,32 @@
    font-family:var(--font-mono);font-size:11px;margin-bottom:5px;}
  .live-chart-header .chart-label{color:var(--text-dim);}
  .live-chart-header .chart-val{font-size:12px;font-weight:600;}
+
+  /* ---------- Timers ---------- */
+  .timer-add-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px;}
+  .timer-add-row input{background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text);
+    font-family:var(--font-body);font-size:13px;padding:7px 10px;min-width:0;}
+  .timer-add-row input:focus{outline:2px solid var(--gold);outline-offset:0;}
+  .timer-add-row input::placeholder{color:var(--text-dim);}
+  .timer-config-list{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
+  .timer-config-row{display:flex;align-items:center;gap:10px;padding:8px 10px;
+    background:var(--bg-panel-2);border:1px solid var(--border);}
+  .timer-config-mob{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+  .timer-config-dur{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);white-space:nowrap;}
+  .timer-active-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:12px;}
+  .timer-card{background:var(--bg-panel-2);border:2px solid var(--border);padding:14px 16px;}
+  .timer-card.timer-ok{border-color:var(--moss);}
+  .timer-card.timer-warn{border-color:var(--paused);}
+  .timer-card.timer-done{border-color:var(--boss);background:rgba(224,85,107,.07);}
+  .timer-card-mob{font-size:13px;font-weight:600;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+  .timer-card-countdown{font-family:var(--font-mono);font-size:32px;font-weight:700;line-height:1;letter-spacing:.04em;}
+  .timer-card-countdown.timer-ok{color:var(--moss);}
+  .timer-card-countdown.timer-warn{color:var(--paused);}
+  .timer-card-countdown.timer-done{color:var(--boss);}
+  .timer-card-sub{font-size:11px;color:var(--text-dim);margin-top:5px;}
+  .timer-card-bar{height:3px;background:var(--border);margin-top:10px;overflow:hidden;}
+  .timer-card-bar-fill{height:100%;transition:width .9s linear;}
+  .timer-empty-msg{color:var(--text-dim);font-size:13px;padding:20px 0;}
 </style>
 </head>
 <body>
@@ -356,6 +382,12 @@
        <span class="app-tile-desc">Statistiques des sessions passées et évolution du farm au fil du temps.</span>
        <span class="app-tile-status" id="tileHistoryStatus">●&nbsp;0 session</span>
      </button>
+      <button class="app-tile" id="tileTimers">
+        <span class="app-tile-icon">⏱</span>
+        <span class="app-tile-title">Timers</span>
+        <span class="app-tile-desc">Compte à rebours automatique au kill — idéal pour les respawns de boss.</span>
+        <span class="app-tile-status" id="tileTimersStatus">●&nbsp;0 timer</span>
+      </button>
    </div>
  </section>

@@ -621,6 +653,32 @@

  </section>

+  <!-- ============ ÉCRAN 5 : Timers ============ -->
+  <section class="app-screen" id="appTimers" hidden>
+
+    <div class="panel" style="margin-bottom:14px;">
+      <div class="panel-head-row">
+        <h2>Ajouter un timer</h2>
+      </div>
+      <div class="timer-add-row">
+        <input type="text" id="timerMobInput" placeholder="Nom du mob (ex: Skeleton)" style="flex:2;">
+        <input type="text" id="timerDurInput" placeholder="Durée (ex: 5:00 ou 90)" style="flex:1;max-width:130px;">
+        <button class="btn-ghost" id="timerAddBtn">Ajouter</button>
+      </div>
+      <div id="timerConfigList" class="timer-config-list"></div>
+    </div>
+
+    <div class="panel">
+      <div class="panel-head-row">
+        <h2>Comptes à rebours actifs</h2>
+        <div class="spacer"></div>
+        <span style="font-family:var(--font-mono);font-size:10px;color:var(--text-dim);">se déclenchent automatiquement au kill</span>
+      </div>
+      <div id="timerActiveGrid" class="timer-active-grid"></div>
+    </div>
+
+  </section>
+
 </div>

 <!-- Modal 1 : confirmation sync -->
@@ -750,7 +808,8 @@
    hub: $('hubScreen'),
    farmTracker: $('appFarmTracker'),
    dropBoard: $('appDropBoard'),
-    history: $('appHistory')
+    history: $('appHistory'),
+    timers: $('appTimers')
  };
  const homeBtn = $('homeBtn');
  const changeFolderBtn = $('changeFolderBtn');
@@ -786,6 +845,7 @@
  $('tileFarmTracker').addEventListener('click', () => showScreen('farmTracker'));
  $('tileDropBoard').addEventListener('click', () => { showScreen('dropBoard'); renderDropBoard(); });
  $('tileHistory').addEventListener('click', () => { showScreen('history'); renderHistoryScreen(); });
+  $('tileTimers').addEventListener('click', () => { showScreen('timers'); renderTimerScreen(); });

  const globalState = { logPath: null, serverUrl: '', clientId: '' };
  let sessionHistory = { type: 'farm-tracker-session-history', version: 1, sessions: [] };
@@ -1218,6 +1278,7 @@
      state.mobCounts.set(mobPlain, (state.mobCounts.get(mobPlain) || 0) + 1);
      state.expTotal += exp;
      state.killCols += col;
+      triggerTimer(mobPlain);

      if (!state.dropStats.has(mobPlain)) state.dropStats.set(mobPlain, {kills: 0, items: new Map()});
      const dropEntry = state.dropStats.get(mobPlain);
@@ -1919,6 +1980,132 @@
    renderHistoryScreen();
  });

+  // ======================================================================
+  // TIMERS
+  // ======================================================================
+
+  let timerConfigs = JSON.parse(localStorage.getItem('timerConfigs') || '[]');
+  // activeTimers : Map<configId, { endsAt: number, durationSec: number, mobName: string }>
+  const activeTimers = new Map();
+  let timerClockId = null;
+
+  function saveTimerConfigs(){
+    localStorage.setItem('timerConfigs', JSON.stringify(timerConfigs));
+    updateTimerTileStatus();
+  }
+
+  function parseDuration(str){
+    str = str.trim();
+    if (str.includes(':')) {
+      const parts = str.split(':');
+      const m = parseInt(parts[0], 10) || 0;
+      const s = parseInt(parts[1], 10) || 0;
+      return m * 60 + s;
+    }
+    return parseInt(str, 10) || 0;
+  }
+
+  function fmtCountdown(sec){
+    if (sec <= 0) return 'PRÊT';
+    const m = Math.floor(sec / 60), s = sec % 60;
+    return String(m).padStart(2,'0') + ':' + String(s).padStart(2,'0');
+  }
+
+  function updateTimerTileStatus(){
+    const el = $('tileTimersStatus');
+    if (el) el.textContent = '● ' + timerConfigs.length + ' timer' + (timerConfigs.length !== 1 ? 's' : '');
+  }
+
+  function triggerTimer(mobPlain){
+    for (const cfg of timerConfigs){
+      if (cfg.mobName.toLowerCase() === mobPlain.toLowerCase()){
+        const endsAt = Date.now() + cfg.durationSec * 1000;
+        activeTimers.set(cfg.id, { endsAt, durationSec: cfg.durationSec, mobName: cfg.mobName });
+        renderTimerActiveGrid();
+      }
+    }
+  }
+
+  function startTimerClock(){
+    if (timerClockId) return;
+    timerClockId = setInterval(() => {
+      if (activeTimers.size > 0) renderTimerActiveGrid();
+    }, 1000);
+  }
+
+  function renderTimerActiveGrid(){
+    const grid = $('timerActiveGrid');
+    if (!grid) return;
+    if (activeTimers.size === 0){
+      grid.innerHTML = '<p class="timer-empty-msg">Aucun timer actif — tue un mob configuré pour démarrer un compte à rebours.</p>';
+      return;
+    }
+    const now = Date.now();
+    let html = '';
+    for (const [id, timer] of activeTimers){
+      const remaining = Math.max(0, Math.ceil((timer.endsAt - now) / 1000));
+      const pct = Math.max(0, remaining / timer.durationSec * 100);
+      const cls = remaining <= 0 ? 'timer-done' : pct < 25 ? 'timer-warn' : 'timer-ok';
+      const barColor = remaining <= 0 ? 'var(--boss)' : pct < 25 ? 'var(--paused)' : 'var(--moss)';
+      html +=
+        '<div class="timer-card '+cls+'" data-timer-id="'+escHtml(id)+'">' +
+          '<div class="timer-card-mob">'+escHtml(timer.mobName)+'</div>' +
+          '<div class="timer-card-countdown '+cls+'">'+fmtCountdown(remaining)+'</div>' +
+          '<div class="timer-card-sub">'+(remaining<=0?'Respawn disponible !':'reste '+fmtCountdown(remaining))+'</div>'+
+          '<div class="timer-card-bar"><div class="timer-card-bar-fill" style="width:'+pct.toFixed(1)+'%;background:'+barColor+';"></div></div>'+
+        '</div>';
+    }
+    grid.innerHTML = html;
+  }
+
+  function renderTimerConfigList(){
+    const list = $('timerConfigList');
+    if (!list) return;
+    if (!timerConfigs.length){ list.innerHTML = ''; return; }
+    list.innerHTML = timerConfigs.map(cfg => {
+      const m = Math.floor(cfg.durationSec/60), s = cfg.durationSec%60;
+      const durStr = m > 0 ? m+'min'+(s>0?' '+s+'s':'') : s+'s';
+      return '<div class="timer-config-row">' +
+        '<span class="timer-config-mob">'+escHtml(cfg.mobName)+'</span>' +
+        '<span class="timer-config-dur">'+escHtml(durStr)+'</span>' +
+        '<button class="btn-ghost small danger" data-del-timer="'+escHtml(cfg.id)+'">✕</button>' +
+        '</div>';
+    }).join('');
+  }
+
+  function renderTimerScreen(){
+    renderTimerConfigList();
+    renderTimerActiveGrid();
+    startTimerClock();
+  }
+
+  $('timerAddBtn').addEventListener('click', () => {
+    const mobName = $('timerMobInput').value.trim();
+    const durationSec = parseDuration($('timerDurInput').value);
+    if (!mobName || durationSec <= 0) return;
+    timerConfigs.push({ id: generateUUID(), mobName, durationSec });
+    saveTimerConfigs();
+    $('timerMobInput').value = '';
+    $('timerDurInput').value = '';
+    renderTimerConfigList();
+  });
+
+  $('timerMobInput').addEventListener('keydown', e => { if (e.key === 'Enter') $('timerAddBtn').click(); });
+  $('timerDurInput').addEventListener('keydown', e => { if (e.key === 'Enter') $('timerAddBtn').click(); });
+
+  $('timerConfigList').addEventListener('click', e => {
+    const id = e.target.dataset.delTimer;
+    if (!id) return;
+    timerConfigs = timerConfigs.filter(c => c.id !== id);
+    activeTimers.delete(id);
+    saveTimerConfigs();
+    renderTimerConfigList();
+    renderTimerActiveGrid();
+  });
+
+  updateTimerTileStatus();
+  startTimerClock();
+
  async function initFarmTracker(logPath, resetCounters){
    if (!ft) ft = createFarmTracker();
    await ft.start(logPath, resetCounters);