const gameListSection = document.

getElementById('game-list');
const gameAreaSection = document.getElementById('game-area');
const gameCanvasContainer = document.getElementById('game-canvas-container');
const currentGameTitle = document.getElementById('current-game-title');
const backToMenuButton = document.getElementById('back-to-menu');
const gameCardContainer = document.getElementById('game-card-container');

const games = {}; // Object to store registered games

let currentGameInstance = null;

// Function to register a game

function registerGame(name, thumbnail, description, loadFunction, unloadFunction) {
games[`${name}`] = {
name: name,
thumbnail: thumbnail,
description: description,
load: loadFunction,
unload: unloadFunction || (() => {}) // Default empty unload function
};
}

// Function to dynamically create game cards

function createGameCards() {
gameCardContainer.innerHTML = ''; // Clear existing cards
for (const gameKey in games) {
const game = games[`${gameKey}`];
const gameCard = document.createElement('div');
gameCard.classList.add('game-card');
gameCard.dataset.game = game.name;

const img = document.createElement('img');

img.src = game.thumbnail;
img.alt = `${game.name} Game`;

const content = document.createElement('div');

content.classList.add('game-card-content');

const title = document.createElement('h3');

title.textContent = game.name.charAt(0).toUpperCase() + game.name.slice(1);

const description = document.createElement('p');

description.textContent = game.description;

const playButton = document.createElement('button');

playButton.classList.add('play-button');
playButton.textContent = 'Play';
playButton.addEventListener('click', () => loadGame(game.name));

content.appendChild(title);
content.appendChild(description);
content.appendChild(playButton);

gameCard.appendChild(img);
gameCard.appendChild(content);
gameCardContainer.appendChild(gameCard);
}
}

function loadGame(gameName) {
 const gameToLoad = games[`${gameName}`];
if (!gameToLoad) {
console.error(`Game "${gameName}" not found.`);
return;
}

gameListSection.classList.add('hidden');
gameAreaSection.classList.remove('hidden');
currentGameTitle.textContent = gameToLoad.name.charAt(0).toUpperCase() +
gameToLoad.name.slice(1);
gameCanvasContainer.innerHTML = ''; // Clear previous game content

if (currentGameInstance && currentGameInstance.unload) {

currentGameInstance.unload();
currentGameInstance = null;
}

currentGameInstance = gameToLoad.load(gameCanvasContainer); // Pass the

container
}

backToMenuButton.addEventListener('click', () => {
if (currentGameInstance && currentGameInstance.unload) {
currentGameInstance.unload();
currentGameInstance = null;
}
gameAreaSection.classList.add('hidden');
gameListSection.classList.remove('hidden');
currentGameTitle.textContent = '';
gameCanvasContainer.innerHTML = '';
});

// --- Game Logic ---

function loadSnake(container) {
const canvas = document.createElement('canvas');
canvas.id = 'snake-canvas';
canvas.width = 400;
canvas.height = 400;
container.appendChild(canvas);

const ctx = canvas.getContext('2d');

let snake = [{ x: 100, y: 100 }];
let food = { x: 200, y: 200 };
let dx = 10;
let dy = 0;

function drawSnakePart(snakePart) {
ctx.fillStyle = 'green';
ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
ctx.strokeStyle = 'darkgreen';
ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

function drawSnake() {
snake.forEach(drawSnakePart);
}

function drawFood() {
 ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, 10, 10);
}

function moveSnake() {
const head = { x: snake.at(-1).x + dx, y: snake.at(-1).y + dy };
snake.push(head);
snake.shift();
}

function gameLoop() {
setTimeout(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawFood();
moveSnake();
drawSnake();
gameLoop();
}, 100);
}

gameLoop();

return {
unload: () => {
console.log('Unloading Snake Game');
}
};
}

function loadMemory(container) {
const memoryGrid = document.createElement('div');
memoryGrid.classList.add('memory-grid');
container.appendChild(memoryGrid);
memoryGrid.textContent = 'Memory game logic will go here...';

return {
unload: () => {
console.log('Unloading Memory Game');
memoryGrid.innerHTML = '';
}
};
}

function loadClicker(container) {
const clickerContainer = document.createElement('div');
clickerContainer.classList.add('clicker-container');

const scoreDisplay = document.createElement('h2');

scoreDisplay.textContent = 'Score: 0';
let score = 0;

const clickButton = document.createElement('button');

clickButton.textContent = 'Click Me!';
clickButton.classList.add('click-button');
clickButton.addEventListener('click', () => {
score++;
scoreDisplay.textContent = `Score: ${score}`;
});
 clickerContainer.appendChild(scoreDisplay);
clickerContainer.appendChild(clickButton);
container.appendChild(clickerContainer);

return {
unload: () => {
console.log('Unloading Clicker Game');
}
};
}

function loadColorGuess(container) {
const guessContainer = document.createElement('div');
guessContainer.classList.add('color-guess-container');

const colorDisplay = document.createElement('div');

colorDisplay.classList.add('color-display');
colorDisplay.textContent = '???';
colorDisplay.style.backgroundColor = '#ccc'; // Initial gray color

const guessInput = document.createElement('input');

guessInput.type = 'text';
guessInput.placeholder = 'Enter color name (e.g., red, blue)';

const guessButton = document.createElement('button');

guessButton.textContent = 'Guess';

const messageDisplay = document.createElement('p');

messageDisplay.textContent = '';

let secretColor;

function generateRandomColor() {
const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange',
'pink', 'cyan', 'magenta'];
return colors[Math.floor(Math.random() * colors.length)];
}

function checkGuess() {
const guess = guessInput.value.trim().toLowerCase();
if (guess === secretColor) {
messageDisplay.textContent = 'Correct!';
colorDisplay.style.backgroundColor = secretColor;
guessInput.disabled = true;
guessButton.disabled = true;
} else {
messageDisplay.textContent = 'Incorrect. Try again!';
}
guessInput.value = '';
}

function startGame() {
secretColor = generateRandomColor();
colorDisplay.style.backgroundColor = '#ccc';
colorDisplay.textContent = '???';
messageDisplay.textContent = '';
guessInput.disabled = false;
guessButton.disabled = false;
guessInput.focus();
}

guessButton.addEventListener('click', checkGuess);
guessInput.addEventListener