games

<?php
/**
 * Template Name: Games Page
 *
 * A custom page template.
 */

get_header(); ?>

<?php
// Use WordPress database connection
global $wpdb;

// Fetch data of games
$games = $wpdb->get_results("SELECT recipe_id, recipe_title, video_url, recipe_image FROM {$wpdb->prefix}tbl_recipes WHERE content_type LIKE '%game%'");

if (!$games) {
    echo '<p>No games available.</p>';
    get_footer();
    exit;
}
?>

<div class="container">
    <h1>Games Preview</h1>

    <div class="frame-container">
        <?php
        // Display the first game to load in the iframe
        $first_game = $games[0];
        ?>
        <iframe src="<?php echo esc_url($first_game->video_url); ?>"></iframe>
        <h3><?php echo esc_html($first_game->recipe_title); ?></h3>
    </div>

    <div class="games-list">
        <?php foreach ($games as $game): ?>
            <div class="game-card" onclick="updateFrame('<?php echo esc_url($game->video_url); ?>', '<?php echo esc_js($game->recipe_title); ?>')">
                <img src="upload/<?php echo esc_attr($game->recipe_image); ?>" alt="<?php echo esc_attr($game->recipe_title); ?>">
                <div class="game-card-title"><?php echo esc_html($game->recipe_title); ?></div>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<?php get_footer(); ?>