nix
129 lines
3.9 KiB
JavaScript
Executable File
129 lines
3.9 KiB
JavaScript
Executable File
(function () {
|
|
const API_URL = '/data/api/mods-mc.php';
|
|
|
|
// Injecte le CSS dans <head>
|
|
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 = `
|
|
<span class="mc-mods-toggle-label">Mods</span>
|
|
<span class="mc-mods-toggle-meta">
|
|
<span>${count} mod${count !== 1 ? 's' : ''}</span>
|
|
<span class="mc-mods-arrow">▸</span>
|
|
</span>
|
|
`;
|
|
|
|
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);
|
|
});
|
|
})();
|