Lights out with modified wildfire
For playing with the owl puzzle when it's not available in game.
HTML
<div class="containerParent">
<div class="container" id="defaultSide">
</div>
<div class="container" id="wildfireSide">
</div>
</div>
CSS
div.container {
flex-basis: 50%;
border: 1px solid black;
}
div.containerParent {
width: 100%;
display: flex;
}
button.gameButton {
width: 30px;
height: 30px;
margin: 5px;
text-align: center;
padding: 0px;
}
button[data-state="false"] {
background-color: red;
}
button[data-state="true"] {
background-color: green;
}
.reset {
width: 100px;
margin: 5px;
}
.highlight {
border: 5px solid black;
font-weight: bold;
}
.affects {
opacity: 50%;
}
JavaScript
const startingState = [
1,0,0,0,1,
0,0,1,0,0,
0,1,1,1,0,
0,0,1,0,0,
1,0,0,0,1
]
const wildfirePartners = [
1, 2, 8, 9, 5,
6, 7, 13, 14, 10,
11, 12, 18, 19, 15,
16, 17, 23, 24, 20,
21, 22, 25, 3, 4
]
const defaultButtons = [];
const wildfireButtons = [];
const defaultDiv = document.getElementById('defaultSide');
const wildfireDiv = document.getElementById('wildfireSide');
const defaultHistory = document.createElement('div');
defaultHistory.id = 'defaultHistory';
defaultHistory.innerHTML = '';
const wildfireHistory = document.createElement('div');
wildfireHistory.id = 'wildfireHistory';
wildfireHistory.innerHTML = '';
for (i = 1; i <= 25; i++) {
CreateButton(i);
CreateButton(i, true);
if (i % 5 == 0) {
defaultDiv.appendChild(document.createElement('br'));
wildfireDiv.appendChild(document.createElement('br'));
}
}
defaultDiv.appendChild(CreateResetButton());
wildfireDiv.appendChild(CreateResetButton());
defaultDiv.appendChild(CreateHistory());
wildfireDiv.appendChild(CreateHistory(true));
function CreateButton(id, wildfire) {
let btn = document.createElement('button');
btn.classList.add('gameButton');
btn.dataset.id = id;
btn.innerHTML = id;
btn.dataset.partner = GetPartner(id, wildfire);
btn.dataset.state = GetStartingState(id, btn.dataset.partner, wildfire)
btn.dataset.affects = JSON.stringify(GetAffectedButtons(id, wildfire));
btn.dataset.isWildfire = !!wildfire
btn.onclick = OnButtonClick;
btn.onmouseover = OnMouseOver;
btn.onmouseout = OnMouseOut;
if (wildfire) {
wildfireDiv.appendChild(btn);
wildfireButtons.push(btn);
} else {
defaultDiv.appendChild(btn);
defaultButtons.push(btn);
}
}
function CreateResetButton() {
let btn = document.createElement('button');
btn.classList.add('reset');
btn.innerHTML = 'Reset';
btn.onclick = ResetState;
return btn;
}
function CreateHistory(wildfire) {
const div = document.createElement('div');
div.innerHTML = 'History';
if...