225 lines
9.6 KiB
JavaScript
225 lines
9.6 KiB
JavaScript
/**
|
|
* NovelasVM Portal
|
|
* Carga el catalogo de juegos y gestiona temas.
|
|
*/
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
const THEME_KEY = 'novelasvm-theme';
|
|
const THEMES = ['dark', 'light', 'immersive'];
|
|
|
|
const engineConfig = {
|
|
renpy: {
|
|
label: 'Ren\'Py',
|
|
icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg>'
|
|
},
|
|
'umineko-ru': {
|
|
label: 'ONScripter-RU',
|
|
icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><path d="M8 9h8"></path><path d="M8 13h5"></path><path d="M8 17h3"></path></svg>'
|
|
},
|
|
unity: {
|
|
label: 'Unity',
|
|
icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>'
|
|
},
|
|
web: {
|
|
label: 'Web',
|
|
icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></path><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>'
|
|
}
|
|
};
|
|
|
|
// --- Theme handling ------------------------------------------------------
|
|
|
|
function getSavedTheme() {
|
|
const saved = localStorage.getItem(THEME_KEY);
|
|
if (saved && THEMES.includes(saved)) return saved;
|
|
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
|
|
return 'light';
|
|
}
|
|
return 'dark';
|
|
}
|
|
|
|
function setTheme(theme) {
|
|
if (!THEMES.includes(theme)) return;
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem(THEME_KEY, theme);
|
|
updateThemeButtons(theme);
|
|
}
|
|
|
|
function updateThemeButtons(activeTheme) {
|
|
document.querySelectorAll('.theme-btn').forEach(btn => {
|
|
const btnTheme = btn.getAttribute('data-theme-value');
|
|
btn.classList.toggle('active', btnTheme === activeTheme);
|
|
btn.setAttribute('aria-pressed', btnTheme === activeTheme ? 'true' : 'false');
|
|
});
|
|
}
|
|
|
|
function initThemeSwitcher() {
|
|
setTheme(getSavedTheme());
|
|
document.querySelectorAll('.theme-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => setTheme(btn.getAttribute('data-theme-value')));
|
|
});
|
|
}
|
|
|
|
// --- Catalog rendering ---------------------------------------------------
|
|
|
|
function formatDate(isoString) {
|
|
if (!isoString) return '';
|
|
try {
|
|
const date = new Date(isoString);
|
|
return date.toLocaleDateString('es-ES', {
|
|
year: 'numeric', month: 'short', day: 'numeric'
|
|
});
|
|
} catch (e) {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
function getEngineBadge(engine) {
|
|
const cfg = engineConfig[engine] || engineConfig.web;
|
|
return `<span class="engine-badge ${engine}">${cfg.icon}<span>${cfg.label}</span></span>`;
|
|
}
|
|
|
|
function getCoverImage(game) {
|
|
if (game.cover) {
|
|
return `<img src="${escapeHtml(game.cover)}" alt="Portada de ${escapeHtml(game.title)}">`;
|
|
}
|
|
return `
|
|
<div class="game-cover-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
|
<polyline points="21 15 16 10 5 21"></polyline>
|
|
</svg>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
if (text === null || text === undefined) return '';
|
|
return String(text)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
function renderCard(game, index) {
|
|
const engine = game.engine || 'web';
|
|
const metaParts = [];
|
|
if (game.version) metaParts.push(`v${escapeHtml(game.version)}`);
|
|
if (game.author) metaParts.push(escapeHtml(game.author));
|
|
const date = formatDate(game.createdAt);
|
|
if (date) metaParts.push(date);
|
|
|
|
return `
|
|
<article class="game-card" style="animation-delay: ${index * 80}ms">
|
|
<div class="game-cover">
|
|
${getCoverImage(game)}
|
|
${getEngineBadge(engine)}
|
|
</div>
|
|
<div class="game-info">
|
|
<h2 class="game-title">${escapeHtml(game.title || game.slug)}</h2>
|
|
${game.subtitle ? `<p class="game-subtitle">${escapeHtml(game.subtitle)}</p>` : ''}
|
|
${game.description ? `<p class="game-description">${escapeHtml(game.description)}</p>` : ''}
|
|
<div class="game-meta">${metaParts.join(' · ')}</div>
|
|
<div class="game-actions">
|
|
<a class="btn btn-primary" href="${escapeHtml(game.entryPoint || `/games/${game.slug}/`)}" target="_self">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
|
</svg>
|
|
Jugar
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
`;
|
|
}
|
|
|
|
function renderLegend() {
|
|
const legend = document.getElementById('engineLegend');
|
|
if (!legend) return;
|
|
legend.innerHTML = Object.entries(engineConfig).map(([key, cfg]) => `
|
|
<span class="legend-item">
|
|
<span class="legend-dot" style="background: var(--engine-${key})"></span>
|
|
${cfg.label}
|
|
</span>
|
|
`).join('');
|
|
}
|
|
|
|
function showSkeletons(grid) {
|
|
grid.innerHTML = Array.from({ length: 6 }).map(() => `
|
|
<div class="game-card">
|
|
<div class="game-cover skeleton" style="aspect-ratio: 16/9"></div>
|
|
<div class="game-info">
|
|
<div class="skeleton" style="height: 1.1rem; width: 70%; margin-bottom: 0.5rem"></div>
|
|
<div class="skeleton" style="height: 0.875rem; width: 100%"></div>
|
|
<div class="skeleton" style="height: 0.875rem; width: 80%; margin-top: 0.4rem"></div>
|
|
<div class="skeleton" style="height: 2.25rem; width: 100%; margin-top: 1rem; border-radius: var(--radius-md)"></div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
async function loadCatalog() {
|
|
const grid = document.getElementById('gamesGrid');
|
|
const stats = document.getElementById('stats');
|
|
const empty = document.getElementById('emptyState');
|
|
|
|
if (!grid || !stats || !empty) return;
|
|
|
|
showSkeletons(grid);
|
|
grid.setAttribute('aria-busy', 'true');
|
|
|
|
try {
|
|
const response = await fetch('/games.json', { cache: 'no-store' });
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
const games = Array.isArray(data.games) ? data.games : [];
|
|
|
|
// Ordenar: primero por motor (renpy, unity, web) luego por titulo
|
|
games.sort((a, b) => {
|
|
const engineOrder = { renpy: 0, 'umineko-ru': 1, unity: 2, web: 3 };
|
|
const ea = engineOrder[a.engine] ?? 99;
|
|
const eb = engineOrder[b.engine] ?? 99;
|
|
if (ea !== eb) return ea - eb;
|
|
return (a.title || a.slug).localeCompare(b.title || b.slug);
|
|
});
|
|
|
|
if (games.length === 0) {
|
|
grid.innerHTML = '';
|
|
grid.classList.add('hidden');
|
|
empty.classList.remove('hidden');
|
|
stats.textContent = 'No hay novelas publicadas';
|
|
} else {
|
|
empty.classList.add('hidden');
|
|
grid.classList.remove('hidden');
|
|
grid.innerHTML = games.map((game, i) => renderCard(game, i)).join('');
|
|
const countText = games.length === 1 ? '1 novela disponible' : `${games.length} novelas disponibles`;
|
|
stats.textContent = countText;
|
|
}
|
|
} catch (err) {
|
|
console.error('Error cargando catalogo:', err);
|
|
grid.innerHTML = '';
|
|
grid.classList.add('hidden');
|
|
empty.classList.remove('hidden');
|
|
empty.querySelector('h2').textContent = 'No se pudo cargar el catalogo';
|
|
empty.querySelector('p').textContent = 'Revisa que /games.json exista o intenta recargar la pagina.';
|
|
stats.textContent = 'Error de carga';
|
|
} finally {
|
|
grid.setAttribute('aria-busy', 'false');
|
|
}
|
|
}
|
|
|
|
// --- Init ----------------------------------------------------------------
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initThemeSwitcher();
|
|
renderLegend();
|
|
loadCatalog();
|
|
});
|
|
})();
|