Add killfeed module

modules/killfeed/killfeed.js

@@ -0,0 +1,138 @@
+/* global loadCSSModule, SBdispatcher, getModuleUrl */
+;(function () {
+  const DEFAULT_DELAY_SECONDS = 12;
+  const MAX_ITEMS = 8;
+  const MODULE_ID = 'killfeed-container';
+
+  const moduleUrl = window.getModuleUrl ? window.getModuleUrl() : '';
+  loadCSSModule('overlay-killfeed-css', moduleUrl + '/css/killfeed.css');
+
+  // ==== Init DOM ====
+  function initModule() {
+    if (document.getElementById(MODULE_ID)) return;
+
+    const root = document.createElement('div');
+    root.id = MODULE_ID;
+
+    const list = document.createElement('ul');
+    list.id = 'killfeed-list';
+
+    root.appendChild(list);
+    document.body.appendChild(root);
+  }
+
+  // Construit un LI de killfeed
+  function buildKillItem(p1Name, p1Img, p2Name, p2Img, eventName) {
+    const li = document.createElement('li');
+    li.className = 'killfeed-item';
+
+    // Zone gauche (joueur 1)
+    const left = document.createElement('div');
+    left.className = 'kf-left';
+
+    const leftName = document.createElement('span');
+    leftName.className = 'kf-name kf-name-left';
+    leftName.textContent = p1Name || '';
+
+    const leftImg = document.createElement('img');
+    leftImg.className = 'kf-avatar kf-avatar-left';
+    if (p1Img) leftImg.src = p1Img;
+    leftImg.alt = p1Name ? `Avatar ${p1Name}` : 'Avatar joueur 1';
+
+    left.append(leftName, leftImg);
+
+    // Zone centrale (event)
+    const center = document.createElement('div');
+    center.className = 'kf-center';
+    const evtImg = document.createElement('img');
+    evtImg.className = 'kf-event';
+    if (eventName) evtImg.src = `${moduleUrl}/assets/${eventName}.png`;
+    evtImg.alt = eventName || 'Event';
+    center.appendChild(evtImg);
+
+    // Zone droite (joueur 2)
+    const right = document.createElement('div');
+    right.className = 'kf-right';
+
+    const rightImg = document.createElement('img');
+    rightImg.className = 'kf-avatar kf-avatar-right';
+    if (p2Img) rightImg.src = p2Img;
+    rightImg.alt = p2Name ? `Avatar ${p2Name}` : 'Avatar joueur 2';
+
+    const rightName = document.createElement('span');
+    rightName.className = 'kf-name kf-name-right';
+    rightName.textContent = p2Name || '';
+
+    right.append(rightImg, rightName);
+
+    li.append(left, center, right);
+    return li;
+  }
+
+  // Ajoute un event (kill)
+function addKill(p1Name, p1Img, p2Name, p2Img, eventName, delaySeconds) {
+  const list = document.getElementById('killfeed-list');
+  if (!list) return;
+
+  const li = buildKillItem(p1Name, p1Img, p2Name, p2Img, eventName);
+  li.classList.add('appearing');
+
+  // ✅ AJOUT EN DESSOUS (fin de liste)
+  list.appendChild(li);
+
+  // Auto-disparition
+  const ms = (isFinite(delaySeconds) && delaySeconds > 0)
+    ? delaySeconds * 1000
+    : DEFAULT_DELAY_SECONDS * 1000;
+
+  const fadeRemove = () => {
+    li.style.opacity = '0';
+    setTimeout(() => {
+      if (li.parentElement === list) list.removeChild(li);
+    }, 500);
+  };
+  setTimeout(fadeRemove, ms);
+
+  // Limite par nombre (supprime en haut)
+  while (list.children.length > MAX_ITEMS) {
+    list.removeChild(list.firstElementChild);
+  }
+
+  // Limite par hauteur (supprime en haut tant que ça dépasse)
+  const container = document.getElementById('killfeed-container');
+  if (container) {
+    while (list.scrollHeight > container.clientHeight && list.firstElementChild) {
+      list.removeChild(list.firstElementChild);
+    }
+  }
+
+  setTimeout(() => li.classList.remove('appearing'), 400);
+}
+
+
+
+  // Expose globalement
+  window.Killfeed = { addKill };
+
+  // === SBdispatcher Listener ===
+  // wsParam1 = pseudo joueur 1
+  // wsParam2 = image joueur 1
+  // wsParam3 = pseudo joueur 2
+  // wsParam4 = image joueur 2
+  // wsParam5 = eventName
+  // wsParam6 = délai (secondes)
+  if (window.SBdispatcher) {
+    SBdispatcher.on('killfeed-add', data => {
+      addKill(
+        data.param1, // Joueur 1
+        data.param2, // Avatar joueur 1
+        data.param3, // Joueur 2
+        data.param4, // Avatar joueur 2
+        data.param5, // Nom de l'event (image)
+        parseFloat(data.param6) // Délai (optionnel)
+      );
+    });
+  }
+
+  initModule();
+})();