Isaac Aracena
130 lines
4.7 KiB
PHP
130 lines
4.7 KiB
PHP
<?php
|
|
// memoria/index.php
|
|
session_start();
|
|
require_once __DIR__ . '/../admin/db.php'; // ajusta la ruta si tu db.php está en otro lugar
|
|
|
|
$juego_id = (int)($_GET['juego_id'] ?? 1);
|
|
|
|
// 1) Cargar config del juego (banners, fondo, reverso, icono FS y ruleta_id a la que enlaza)
|
|
$stmt = $conn->prepare("SELECT
|
|
nombre, banner_1, banner_2, banner_3, banner_4,
|
|
background_image, fullscreen_icon, reverso_default, ruleta_id
|
|
FROM juegos_config
|
|
WHERE juego_id = ? LIMIT 1");
|
|
$stmt->bind_param("i", $juego_id);
|
|
$stmt->execute();
|
|
$config = $stmt->get_result()->fetch_assoc();
|
|
$stmt->close();
|
|
|
|
if (!$config) {
|
|
die("Config del juego no encontrada (juego_id=$juego_id).");
|
|
}
|
|
|
|
// 2) Cargar cartas activas (traseras a emparejar). Puedes manejar n pares desde la BD.
|
|
$cartas = [];
|
|
$res = $conn->prepare("SELECT id, nombre, imagen_trasera, COALESCE(imagen_frontal, '') AS imagen_frontal
|
|
FROM cartas
|
|
WHERE juego_id = ? AND activo = 1");
|
|
$res->bind_param("i", $juego_id);
|
|
$res->execute();
|
|
$q = $res->get_result();
|
|
while ($row = $q->fetch_assoc()) { $cartas[] = $row; }
|
|
$res->close();
|
|
|
|
if (!$cartas) {
|
|
die("No hay cartas activas para este juego (juego_id=$juego_id).");
|
|
}
|
|
|
|
// Reverso por defecto (lado frontal que se ve al inicio)
|
|
$reverso = $config['reverso_default'] ?: '/memoria/images/back.png';
|
|
|
|
// Generar parejas: duplico la lista de cartas. Si tienes más de 12, puedes recortar.
|
|
$base = $cartas;
|
|
shuffle($base);
|
|
$max_pairs = 6; // cambia si quieres más o menos pares
|
|
$base = array_slice($base, 0, $max_pairs);
|
|
|
|
// Duplicar para formar pares y asignar una clave de pareja consistente
|
|
$deck = [];
|
|
$pair_idx = 1;
|
|
foreach ($base as $c) {
|
|
$key = 'pair_' . $pair_idx++;
|
|
$deck[] = ['key'=>$key, 'back'=>$c['imagen_trasera'], 'front'=>$c['imagen_frontal'] ?: $reverso];
|
|
$deck[] = ['key'=>$key, 'back'=>$c['imagen_trasera'], 'front'=>$c['imagen_frontal'] ?: $reverso];
|
|
}
|
|
shuffle($deck);
|
|
|
|
// Pasar al front la config necesaria
|
|
$CONFIG_JS = [
|
|
'juego_id' => $juego_id,
|
|
'ruleta_id' => (int)$config['ruleta_id'],
|
|
'banners' => [
|
|
'banner_1' => $config['banner_1'] ?: null,
|
|
'banner_2' => $config['banner_2'] ?: null,
|
|
'banner_3' => $config['banner_3'] ?: null,
|
|
'banner_4' => $config['banner_4'] ?: null,
|
|
],
|
|
'background_image' => $config['background_image'] ?: null,
|
|
'fullscreen_icon' => $config['fullscreen_icon'] ?: null,
|
|
];
|
|
?>
|
|
<!doctype html>
|
|
<html lang="es" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Juego de Memoria - ePromo</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Banners dinámicos -->
|
|
<div class="banner banner-1"></div>
|
|
<div class="banner banner-2"></div>
|
|
<div class="banner banner-3"></div>
|
|
<div class="banner banner-4"></div>
|
|
|
|
<div class="wrapper">
|
|
<ul class="cards" id="cards">
|
|
<?php foreach ($deck as $card): ?>
|
|
<li class="card" data-key="<?= htmlspecialchars($card['key']) ?>">
|
|
<div class="view front-view">
|
|
<img src="<?= htmlspecialchars($card['front']) ?>" alt="front">
|
|
</div>
|
|
<div class="view back-view">
|
|
<img src="<?= htmlspecialchars($card['back']) ?>" alt="back">
|
|
</div>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Fullscreen -->
|
|
<button id="fullscreen-btn"><img id="fullscreen-icon" src="" alt="Pantalla Completa"></button>
|
|
|
|
<script>
|
|
// Inyectar config al front
|
|
window.MEMORIA_CONFIG = <?= json_encode($CONFIG_JS, JSON_UNESCAPED_SLASHES|JSON_UNESCAPED_UNICODE) ?>;
|
|
// Aplicar banners/bg/icono
|
|
(function(){
|
|
const C = window.MEMORIA_CONFIG || {};
|
|
if (C.background_image) {
|
|
document.body.style.backgroundImage = `url("${C.background_image}")`;
|
|
document.body.style.backgroundSize = 'cover';
|
|
document.body.style.backgroundRepeat = 'no-repeat';
|
|
document.body.style.backgroundPosition = 'center center';
|
|
}
|
|
const b1 = document.querySelector('.banner-1'), b2 = document.querySelector('.banner-2'),
|
|
b3 = document.querySelector('.banner-3'), b4 = document.querySelector('.banner-4');
|
|
if (b1 && C.banners.banner_1) b1.style.backgroundImage = `url("${C.banners.banner_1}")`;
|
|
if (b2 && C.banners.banner_2) b2.style.backgroundImage = `url("${C.banners.banner_2}")`;
|
|
if (b3 && C.banners.banner_3) b3.style.backgroundImage = `url("${C.banners.banner_3}")`;
|
|
if (b4 && C.banners.banner_4) b4.style.backgroundImage = `url("${C.banners.banner_4}")`;
|
|
if (C.fullscreen_icon) document.getElementById('fullscreen-icon').src = C.fullscreen_icon;
|
|
})();
|
|
</script>
|
|
|
|
<script src="script.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
|
|
</body>
|
|
</html>
|