'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 actionButtons = document.querySelectorAll('.btn');


const colors = [
    { gameboyColor: '#A77BCA', htmlColor: '#E8D3E0', screenColor: '#A8D5BA', buttonColor: '#6B8E23', buttonTextColor: '#FFFFFF' }, // Lavender
    { gameboyColor: '#F6D02F', htmlColor: '#F9E79F', screenColor: '#A3D9F1', buttonColor: '#FF5733', buttonTextColor: '#FFFFFF' }, // Bright Yellow
    { gameboyColor: '#4CAF50', htmlColor: '#C8E6C9', screenColor: '#B2DFDB', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF' }, // Vibrant Green
    { gameboyColor: '#FF5252', htmlColor: '#FFCCCB', screenColor: '#FFABAB', buttonColor: '#FF4081', buttonTextColor: '#FFFFFF' }, // Bright Red
    { gameboyColor: '#2196F3', htmlColor: '#BBDEFB', screenColor: '#90CAF9', buttonColor: '#FFEB3B', buttonTextColor: '#000000' }, // Sky Blue
    { gameboyColor: '#FF6F61', htmlColor: '#FFCCBC', screenColor: '#FFAB91', buttonColor: '#FF7043', buttonTextColor: '#FFFFFF' }, // Coral
    { gameboyColor: '#8E24AA', htmlColor: '#E1BEE7', screenColor: '#D1C4E9', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF' }, // Purple
    { gameboyColor: '#FFD700', htmlColor: '#FFF9C4', screenColor: '#FFF59D', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF' }, // Gold
];

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;
    });

    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();