Initial commit: NovelasVM platform with multi-engine support and Umineko Web integration
This commit is contained in:
224
var-www/assets/app.js
Normal file
224
var-www/assets/app.js
Normal file
@@ -0,0 +1,224 @@
|
||||
/**
|
||||
* 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();
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user