diff --git a/script.js b/script.js
index 3cd983c..1f358e9 100644
--- a/script.js
+++ b/script.js
@@ -1,41 +1,161 @@
// === Constants & DOM Elements ===
-const GRID_SIZE = 4;
-const gridCells = document.querySelectorAll(".grid-cell");
+let GRID_SIZE = 4; // Make it let so we can change it
+let grid = [];
+let score = 0;
+let bestScore = 0;
+let gameWon = false;
+let gridCells = []; // Will be initialized in initializeGrid
+
+// Initialize DOM elements
const newGameBtn = document.getElementById("new-game");
const tryAgainBtn = document.getElementById("retry");
const continueBtn = document.getElementById("continue");
const messageBox = document.getElementById("message");
-const messageText = messageBox.querySelector("p");
+const messageText = messageBox ? messageBox.querySelector("p") : null;
const scoreElement = document.getElementById("score");
const bestScoreElement = document.getElementById("best-score");
const toggleBtn = document.getElementById('theme-toggle');
-let grid = [];
-let score = 0;
-let bestScore = 0;
-let gameWon = false;
+// Debug logging
+console.log('DOM Elements initialized:', {
+ newGameBtn: !!newGameBtn,
+ tryAgainBtn: !!tryAgainBtn,
+ continueBtn: !!continueBtn,
+ messageBox: !!messageBox,
+ scoreElement: !!scoreElement,
+ bestScoreElement: !!bestScoreElement,
+ toggleBtn: !!toggleBtn
+});
// === Initialize Game ===
-document.addEventListener("DOMContentLoaded", startNewGame);
+document.addEventListener("DOMContentLoaded", () => {
+ console.log('DOM fully loaded, initializing game...');
+
+ // Initialize with default grid size (4x4)
+ initializeGrid(4);
+
+ // Set up grid size buttons
+ const sizeButtons = document.querySelectorAll('.grid-size-btn');
+ console.log(`Found ${sizeButtons.length} grid size buttons`);
+
+ sizeButtons.forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.preventDefault();
+ const size = parseInt(btn.dataset.size);
+ console.log('Grid size button clicked:', size);
+ handleGridSizeChange(size);
+ });
+
+ // Log button info for debugging
+ console.log(`Button ${btn.textContent} has size: ${btn.dataset.size}`);
+ });
+
+ // Start the game
+ startNewGame();
+
+ // Focus the game container for keyboard events
+ const gameContainer = document.querySelector('.game-container');
+ if (gameContainer) {
+ gameContainer.tabIndex = 0;
+ gameContainer.focus();
+ }
+
+ console.log('Game initialization complete');
+});
+
newGameBtn.addEventListener("click", startNewGame);
tryAgainBtn.addEventListener("click", () => startNewGame());
continueBtn.addEventListener("click", () => {
messageBox.style.display = "none"; // Hide win message
});
+// === Grid Management ===
+function initializeGrid(size) {
+ const gridContainer = document.querySelector('.grid');
+ if (!gridContainer) {
+ console.error('Grid container not found!');
+ return;
+ }
+
+ // Clear existing grid
+ gridContainer.innerHTML = '';
+
+ // Set new grid dimensions
+ gridContainer.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
+ gridContainer.style.gridTemplateRows = `repeat(${size}, 1fr)`;
+
+ // Create grid cells
+ for (let i = 0; i < size * size; i++) {
+ const cell = document.createElement('div');
+ cell.className = 'grid-cell';
+ cell.textContent = '';
+ gridContainer.appendChild(cell);
+ }
+
+ // Update grid cells reference
+ gridCells = Array.from(document.querySelectorAll(".grid-cell"));
+ GRID_SIZE = size;
+
+ // Update active button state
+ const buttons = document.querySelectorAll('.grid-size-btn');
+ if (buttons.length > 0) {
+ buttons.forEach(btn => {
+ const isActive = parseInt(btn.dataset.size) === size;
+ btn.classList.toggle('active', isActive);
+ console.log(`Button ${btn.textContent} active: ${isActive}`);
+ });
+ } else {
+ console.error('Grid size buttons not found!');
+ }
+
+ console.log(`Grid initialized to ${size}x${size} with ${gridCells.length} cells`);
+}
+
// === Start / Reset Game ===
function startNewGame() {
+ console.log('Starting new game with grid size:', GRID_SIZE);
+
+ // Initialize grid with zeros
grid = Array.from({ length: GRID_SIZE }, () => Array(GRID_SIZE).fill(0));
score = 0;
gameWon = false;
+
+ // Update UI
updateScore();
- messageBox.style.display = "none";
-
- // Spawn two starting tiles
+ if (messageBox) messageBox.style.display = "none";
+
+ // Initialize grid cells if not already done
+ if (gridCells.length !== GRID_SIZE * GRID_SIZE) {
+ initializeGrid(GRID_SIZE);
+ }
+
+ // Clear any existing tiles and spawn new ones
+ clearTiles();
spawnRandomTile();
spawnRandomTile();
-
+
renderGrid();
+ console.log('New game started');
+}
+
+function clearTiles() {
+ const tiles = document.querySelectorAll('.tile');
+ tiles.forEach(tile => tile.remove());
+}
+
+// Handle grid size change
+function handleGridSizeChange(size) {
+ console.log('Changing grid size to:', size);
+ if (size < 3 || size > 5) {
+ console.error('Invalid grid size:', size);
+ return;
+ }
+
+ // Only reinitialize if size actually changed
+ if (size !== GRID_SIZE) {
+ initializeGrid(size);
+ startNewGame();
+ }
}
// === Core Utility Functions ===
diff --git a/style.css b/style.css
index 2a54bff..0bf0d37 100644
--- a/style.css
+++ b/style.css
@@ -48,60 +48,139 @@ body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
- gap: 12px;
+ gap: 10px;
background:var(--grid-bg-color);
- padding: 14px;
+ padding: 10px;
border-radius: 6px;
width: 100%;
- height: 100%;
- box-sizing: border-box;
+ max-width: 400px;
aspect-ratio: 1/1;
+ margin: 0 auto;
+ transition: all 0.3s ease;
}
.grid-cell {
- background:var(--grid-cell-bg-color);
- border-radius: 4px;
+ background: rgba(238, 228, 218, 0.35);
+ border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
- font-size: 1.4rem;
+ font-size: 2rem;
+ font-weight: bold;
color: var(--grid-text-color);
- user-select: none;
+ transition: all 0.15s ease;
aspect-ratio: 1/1;
- /*squares update-2 */
width: 100%;
height: 100%;
}
+/* Game Controls */
+.game-controls {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 1rem 0;
+ gap: 1rem;
+ flex-wrap: wrap;
+ width: 100%;
+}
+
+/* Grid size selector */
+.grid-size-selector {
+ display: flex;
+ gap: 0.5rem;
+ background: rgba(0, 0, 0, 0.05);
+ padding: 0.5rem;
+ border-radius: 50px;
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.grid-size-btn {
+ background: none;
+ border: none;
+ padding: 0.5rem 1.2rem;
+ border-radius: 50px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ color: var(--text-color);
+ opacity: 0.7;
+}
+
+.grid-size-btn.active {
+ background: #8f7a66;
+ color: white;
+ opacity: 1;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.grid-size-btn:hover:not(.active) {
+ background: rgba(0, 0, 0, 0.1);
+ transform: translateY(-2px);
+}
+
/* Light Theme Default */
-:root{
- --bg-color: #ffffff;
- --text-color: #000000;
+:root {
+ --bg-color: #faf8ef;
+ --text-color: #776e65;
--grid-bg-color: #bbada0;
- --grid-cell-bg-color:#eee4da;
+ --grid-cell-bg-color: #eee4da;
--grid-text-color: #776e65;
-
+ --button-bg: #8f7a66;
+ --button-hover: #9f8b77;
+ --button-active: #7f6a56;
}
-/* Drak Theme */
+/* Dark Theme */
.dark-theme {
- --bg-color: #776e65;
- --text-color: #ffffff;
+ --bg-color: #2c2c2c;
+ --text-color: #f8f8f8;
--grid-bg-color: #4d443b;
- --grid-cell-bg-color:#eee4da;
- --grid-text-color: #131110;
+ --grid-cell-bg-color: #3a3329;
+ --grid-text-color: #f8f8f8;
+ --button-bg: #6d5c4d;
+ --button-hover: #7d6c5d;
+ --button-active: #5d4c3d;
+}
+.dark-theme .grid-size-selector {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.dark-theme .grid-size-btn:hover:not(.active) {
+ background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 500px) {
.game-container {
max-width: 98vw;
padding: 1rem;
}
+
+ .game-controls {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .grid-size-selector {
+ justify-content: space-between;
+ }
+
+ .grid-size-btn {
+ flex: 1;
+ text-align: center;
+ padding: 0.5rem;
+ }
+
.grid-container {
- max-width: 90vw;
+ max-width: 100%;
}
+
.grid {
- gap: 8px;
+ gap: 6px;
padding: 8px;
}
+
+ .grid-cell {
+ font-size: 1rem;
+ }
}