139 lines
4.0 KiB
JavaScript
139 lines
4.0 KiB
JavaScript
/* 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();
|
|
})();
|