Add killfeed module
This commit is contained in:
Stephane Bouvard
BIN
modules/killfeed/assets/genjikill.png
Normal file
BIN
modules/killfeed/assets/genjikill.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
138
modules/killfeed/css/killfeed.css
Normal file
138
modules/killfeed/css/killfeed.css
Normal file
@@ -0,0 +1,138 @@
|
||||
#killfeed-container {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: auto;
|
||||
right: 20px;
|
||||
width: 620px;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
overflow: hidden;
|
||||
z-index: 250;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
#killfeed-container ul#killfeed-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#killfeed-container .killfeed-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease-out, transform 0.4s ease;
|
||||
transform: translateY(0);
|
||||
}
|
||||
#killfeed-container .killfeed-item.appearing {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
animation: kf-slidein 0.35s ease-out forwards;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-left,
|
||||
#killfeed-container .killfeed-item .kf-center,
|
||||
#killfeed-container .killfeed-item .kf-right {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
|
||||
padding: 0 8px;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-left {
|
||||
background: #66c4ff;
|
||||
color: #0b2a3a;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-left .kf-name-left {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-left .kf-avatar-left {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-center {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0 2px;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-center .kf-event {
|
||||
display: block;
|
||||
height: 36px;
|
||||
max-width: 120px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-right {
|
||||
background: #e44848;
|
||||
color: #2a0b0b;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-right .kf-avatar-right {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
#killfeed-container .killfeed-item .kf-right .kf-name-right {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-left,
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-right {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0 4px;
|
||||
}
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-left .kf-avatar-left {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
}
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-right .kf-avatar-right {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
}
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-left .kf-name-left,
|
||||
#killfeed-container.outline-mode .killfeed-item .kf-right .kf-name-right {
|
||||
color: #f0f0f0;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
@keyframes kf-slidein {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
216
modules/killfeed/css/killfeed.less
Normal file
216
modules/killfeed/css/killfeed.less
Normal file
@@ -0,0 +1,216 @@
|
||||
// out: killfeed.css, sourcemap: false, compress: false
|
||||
|
||||
////////////////////////////////////
|
||||
// ⚙️ VARIABLES GLOBALES DE STYLE //
|
||||
////////////////////////////////////
|
||||
|
||||
// --- Position et taille du module ---
|
||||
@pos-top: 20px;
|
||||
@pos-left: auto; // mettre à "20px" pour ancrer à gauche
|
||||
@pos-right: 20px; // mettre à "auto" pour ancrer à gauche
|
||||
@feed-width: 620px;
|
||||
@feed-height: 400px;
|
||||
|
||||
// --- Couleurs Joueur 1 ---
|
||||
@p1-bg: #66c4ff; // fond du bloc joueur 1
|
||||
@p1-avatar-bg: rgba(0,0,0,0.2); // fond derrière la PP joueur 1
|
||||
@p1-avatar-border: 2px solid rgba(255,255,255,0); // bordure de la PP joueur 1
|
||||
|
||||
// --- Couleurs Joueur 2 ---
|
||||
@p2-bg: #e44848; // fond du bloc joueur 2
|
||||
@p2-avatar-bg: rgba(0,0,0,0.2); // fond derrière la PP joueur 2
|
||||
@p2-avatar-border: 2px solid rgba(255,255,255,0); // bordure de la PP joueur 2
|
||||
|
||||
// --- Style global ---
|
||||
@text: #f0f0f0;
|
||||
@shadow: rgba(0,0,0,0.35);
|
||||
@radius: 8px;
|
||||
@gapX: 10px;
|
||||
@gapY: 6px;
|
||||
@avatarSize: 36px;
|
||||
@fontName: 0.95rem;
|
||||
|
||||
|
||||
//////////////////////////////
|
||||
// 💬 CONTAINER PRINCIPAL //
|
||||
//////////////////////////////
|
||||
|
||||
#killfeed-container {
|
||||
position: absolute;
|
||||
top: @pos-top;
|
||||
left: @pos-left;
|
||||
right: @pos-right;
|
||||
width: @feed-width;
|
||||
height: @feed-height;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end; // ✅ aligné à droite
|
||||
overflow: hidden;
|
||||
z-index: 250;
|
||||
color: @text;
|
||||
|
||||
ul#killfeed-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
gap: @gapY;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// 🧩 ÉLÉMENT DU KILLFEED //
|
||||
//////////////////////////////
|
||||
.killfeed-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: @gapX;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease-out, transform 0.4s ease;
|
||||
transform: translateY(0);
|
||||
|
||||
// animation d'apparition
|
||||
&.appearing {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
animation: kf-slidein 0.35s ease-out forwards;
|
||||
}
|
||||
|
||||
// Trois zones : joueur 1 / event / joueur 2
|
||||
.kf-left,
|
||||
.kf-center,
|
||||
.kf-right {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: @radius;
|
||||
box-shadow: 0 2px 6px @shadow;
|
||||
padding: 0 8px;
|
||||
gap: 6px;
|
||||
height: @avatarSize;
|
||||
}
|
||||
|
||||
///////////////////////////
|
||||
// 🎯 JOUEUR 1 (à gauche)
|
||||
///////////////////////////
|
||||
.kf-left {
|
||||
background: @p1-bg;
|
||||
color: #0b2a3a;
|
||||
|
||||
.kf-name-left {
|
||||
font-size: @fontName;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.kf-avatar-left {
|
||||
width: @avatarSize;
|
||||
height: @avatarSize;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
background: @p1-avatar-bg;
|
||||
border: @p1-avatar-border;
|
||||
box-sizing: border-box; // ✅ empêche le débordement vertical
|
||||
display: block; // ✅ supprime l’espace baseline
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////
|
||||
// ⚡ EVENT CENTRAL
|
||||
///////////////////////////
|
||||
.kf-center {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0 2px;
|
||||
|
||||
.kf-event {
|
||||
display: block;
|
||||
height: @avatarSize;
|
||||
max-width: 120px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 2px 4px @shadow);
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////
|
||||
// 🔥 JOUEUR 2 (à droite)
|
||||
///////////////////////////
|
||||
.kf-right {
|
||||
background: @p2-bg;
|
||||
color: #2a0b0b;
|
||||
|
||||
.kf-avatar-right {
|
||||
width: @avatarSize;
|
||||
height: @avatarSize;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
background: @p2-avatar-bg;
|
||||
border: @p2-avatar-border;
|
||||
box-sizing: border-box; // ✅ idem : la bordure ne dépasse pas
|
||||
display: block;
|
||||
}
|
||||
|
||||
.kf-name-right {
|
||||
font-size: @fontName;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////////////
|
||||
// 🧱 MODE OUTLINE (sans fond bloc)
|
||||
/////////////////////////////////////
|
||||
&.outline-mode {
|
||||
.killfeed-item {
|
||||
.kf-left,
|
||||
.kf-right {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.kf-left .kf-avatar-left {
|
||||
background: @p1-avatar-bg;
|
||||
border: @p1-avatar-border;
|
||||
}
|
||||
|
||||
.kf-right .kf-avatar-right {
|
||||
background: @p2-avatar-bg;
|
||||
border: @p2-avatar-border;
|
||||
}
|
||||
|
||||
.kf-left .kf-name-left,
|
||||
.kf-right .kf-name-right {
|
||||
color: @text;
|
||||
text-shadow: 0 1px 2px @shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////
|
||||
// ✨ ANIMATION ENTRÉE ✨
|
||||
//////////////////////////
|
||||
@keyframes kf-slidein {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
138
modules/killfeed/killfeed.js
Normal file
138
modules/killfeed/killfeed.js
Normal file
@@ -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();
|
||||
})();
|
||||
@@ -15,6 +15,7 @@
|
||||
<!-- Modules -->
|
||||
<script type="text/javascript" src="modules/popup/popup.js"></script>
|
||||
<script type="text/javascript" src="modules/chat/chat.js"></script>
|
||||
<script type="text/javascript" src="modules/killfeed/killfeed.js"></script>
|
||||
<script type="text/javascript" src="modules/scrolling-banner/scrolling-banner.js"></script>
|
||||
<script type="text/javascript" src="modules/alert-banner/alert-banner.js"></script>
|
||||
<script type="text/javascript" src="modules/big-emote/big-emote.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user