(function () {
const API_URL = '/data/api/mods-mc.php';
// Injecte le CSS dans
const style = document.createElement('style');
style.textContent = `
.mc-mods-section {
margin-top: 0.5rem;
border-top: 1px solid rgba(98, 114, 164, 0.3);
padding-top: 0.5rem;
}
.mc-mods-toggle {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 0.25rem 0;
user-select: none;
}
.mc-mods-toggle-label {
font-size: 0.72rem;
font-weight: 700;
color: #6272a4;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.mc-mods-toggle-meta {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.68rem;
color: #6272a4;
}
.mc-mods-arrow {
font-size: 0.6rem;
color: #6272a4;
transition: transform 0.2s;
display: inline-block;
}
.mc-mods-arrow.open { transform: rotate(90deg); }
.mc-mods-pills {
display: none;
flex-wrap: wrap;
gap: 0.3rem;
padding-top: 0.45rem;
}
.mc-mods-pills.open { display: flex; }
.mc-mod-pill {
background: rgba(98, 114, 164, 0.25);
color: #f8f8f2;
font-size: 0.65rem;
padding: 2px 7px;
border-radius: 20px;
border: 1px solid rgba(98, 114, 164, 0.35);
white-space: nowrap;
cursor: default;
}
.mc-mod-pill:hover {
background: rgba(189, 147, 249, 0.2);
border-color: rgba(189, 147, 249, 0.5);
color: #bd93f9;
}
.mc-mods-error {
font-size: 0.7rem;
color: #ff5555;
padding-top: 0.3rem;
font-style: italic;
}
`;
document.head.appendChild(style);
function buildModsBlock(srv, cardEl) {
const section = document.createElement('div');
section.className = 'mc-mods-section';
if (srv.error) {
const err = document.createElement('div');
err.className = 'mc-mods-error';
err.textContent = srv.error;
section.appendChild(err);
cardEl.appendChild(section);
return;
}
const count = srv.mods.length;
const toggle = document.createElement('div');
toggle.className = 'mc-mods-toggle';
toggle.innerHTML = `
Mods
${count} mod${count !== 1 ? 's' : ''}
▸
`;
const pills = document.createElement('div');
pills.className = 'mc-mods-pills';
srv.mods.forEach(mod => {
const pill = document.createElement('span');
pill.className = 'mc-mod-pill';
pill.title = mod.file;
pill.textContent = mod.name;
pills.appendChild(pill);
});
toggle.addEventListener('click', () => {
const arrow = toggle.querySelector('.mc-mods-arrow');
pills.classList.toggle('open');
arrow.classList.toggle('open');
});
section.appendChild(toggle);
section.appendChild(pills);
cardEl.appendChild(section);
}
fetch(API_URL)
.then(r => r.json())
.then(data => {
data.forEach((srv, i) => {
const card = document.getElementById('mc-card-' + i);
if (card) buildModsBlock(srv, card);
});
})
.catch(err => {
console.warn('[mods-mc] Erreur fetch :', err);
});
})();