55 lines
2.8 KiB
JavaScript
55 lines
2.8 KiB
JavaScript
|
'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();
|