"use strict"; const left = document.querySelector("#left"); const right = document.querySelector("#right"); const gameboy = document.querySelector(".gameboy"); const html = document.documentElement; const body = document.body; const screen = document.querySelector(".screen"); const dpadButtons = document.querySelectorAll(".dpad-btn"); const dpadCenter = document.querySelector(".dpad-center"); // Darker variant const actionButtons = document.querySelectorAll(".btn"); const colors = [ { gameboyColor: "#B39DDB", htmlColor: "#D1C4E9", screenColor: "#E1BEE7", buttonColor: "#673AB7", buttonTextColor: "#FFFFFF", dpadCenterColor: "#5E35B1", }, { gameboyColor: "#FFC107", htmlColor: "#FFF9C4", screenColor: "#FFEB3B", buttonColor: "#FF9800", buttonTextColor: "#000000", dpadCenterColor: "#EF6C00", }, { gameboyColor: "#8BC34A", htmlColor: "#C5E1A5", screenColor: "#A5D6A7", buttonColor: "#FF5722", buttonTextColor: "#FFFFFF", dpadCenterColor: "#E64A19", }, { gameboyColor: "#F44336", htmlColor: "#FFCDD2", screenColor: "#EF9A9A", buttonColor: "#E91E63", buttonTextColor: "#FFFFFF", dpadCenterColor: "#C2185B", }, { gameboyColor: "#03A9F4", htmlColor: "#BBDEFB", screenColor: "#90CAF9", buttonColor: "#FFEB3B", buttonTextColor: "#000000", dpadCenterColor: "#0277BD", }, { gameboyColor: "#FF7043", htmlColor: "#FFCCBC", screenColor: "#FFAB91", buttonColor: "#FF5722", buttonTextColor: "#FFFFFF", dpadCenterColor: "#D84315", }, { gameboyColor: "#9C27B0", htmlColor: "#E1BEE7", screenColor: "#D1C4E9", buttonColor: "#7B1FA2", buttonTextColor: "#FFFFFF", dpadCenterColor: "#6A1B9A", }, { gameboyColor: "#FFD700", htmlColor: "#FFF9C4", screenColor: "#FFF59D", buttonColor: "#FF9800", buttonTextColor: "#FFFFFF", dpadCenterColor: "#F57F17", }, { gameboyColor: "#009688", htmlColor: "#B2DFDB", screenColor: "#80CBC4", buttonColor: "#4CAF50", buttonTextColor: "#FFFFFF", dpadCenterColor: "#00796B", }, { gameboyColor: "#795548", htmlColor: "#D7CCC8", screenColor: "#A1887F", buttonColor: "#9E9E9E", buttonTextColor: "#000000", dpadCenterColor: "#5D4037", }, { gameboyColor: "#FF5733", htmlColor: "#FFCCCB", screenColor: "#FFABAB", buttonColor: "#C70039", buttonTextColor: "#FFFFFF", dpadCenterColor: "#B71C1C", }, { gameboyColor: "#00BCD4", htmlColor: "#B2EBF2", screenColor: "#80DEEA", buttonColor: "#00ACC1", buttonTextColor: "#FFFFFF", dpadCenterColor: "#00838F", }, ]; let currentColorIndex = localStorage.getItem("gameboyColorIndex") ? parseInt(localStorage.getItem("gameboyColorIndex")) : 0; function updateGameBoyColor() { gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; html.style.backgroundColor = colors[currentColorIndex].htmlColor; body.style.backgroundColor = colors[currentColorIndex].htmlColor; screen.style.backgroundColor = colors[currentColorIndex].screenColor; dpadButtons.forEach((button) => { button.style.backgroundColor = colors[currentColorIndex].buttonColor; button.style.color = colors[currentColorIndex].buttonTextColor; }); // Using darker dpad center color dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; actionButtons.forEach((button) => { button.style.backgroundColor = colors[currentColorIndex].buttonColor; button.style.color = colors[currentColorIndex].buttonTextColor; }); } left.addEventListener("click", () => { currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; localStorage.setItem("gameboyColorIndex", currentColorIndex); updateGameBoyColor(); }); right.addEventListener("click", () => { currentColorIndex = (currentColorIndex + 1) % colors.length; localStorage.setItem("gameboyColorIndex", currentColorIndex); updateGameBoyColor(); }); updateGameBoyColor();