Update graphics on easter egg.
This commit is contained in:
parent
b02f85065d
commit
b396f63342
1 changed files with 30 additions and 6 deletions
|
|
@ -1,19 +1,19 @@
|
|||
{% extends 'layout.html' %}
|
||||
|
||||
{% block style %}
|
||||
.clicked {
|
||||
outline: 2px solid red;
|
||||
.light {
|
||||
transition: background-color .25s;
|
||||
}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
{% for x in range(level + 3) %}
|
||||
<div class="row" style="min-height: {{ 100 / (level + 3) }}vh;">
|
||||
<div class="row" style="min-height: {{ 80 / (level + 3) }}vh;">
|
||||
{% for y in range(level + 3) %}
|
||||
<div class="col p-0 align-items-center d-flex justify-content-center">
|
||||
<div class="col m-2 p-0 align-items-center d-flex justify-content-center border border-black rounded light shadow" id="light-{{ x }}-{{ y }}">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="checkbox-{{ x }}-{{ y }}"{% if matrix[x][y] %} checked{% endif %}>
|
||||
<input type="checkbox" class="form-check-input d-none" id="checkbox-{{ x }}-{{ y }}"{% if matrix[x][y] %} checked{% endif %}>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
@ -25,9 +25,33 @@
|
|||
{% block script %}
|
||||
const gridSize = {{ level + 3 }};
|
||||
|
||||
updateLights();
|
||||
|
||||
function updateLights() {
|
||||
document.querySelectorAll('.light').forEach(light => {
|
||||
const [x, y] = light.id.split('-').slice(1).map(Number);
|
||||
const checkbox = document.querySelector(`#checkbox-${x}-${y}`);
|
||||
|
||||
if(checkbox.checked) {
|
||||
light.classList.add('bg-danger-subtle');
|
||||
} else {
|
||||
light.classList.remove('bg-danger-subtle');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('.light').forEach(light => {
|
||||
light.addEventListener('click', function() {
|
||||
const [x, y] = this.id.split('-').slice(1).map(Number);
|
||||
const checkbox = document.querySelector(`#checkbox-${x}-${y}`);
|
||||
|
||||
checkbox.click();
|
||||
updateLights();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.form-check-input').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', function() {
|
||||
checkbox.classList.toggle('clicked');
|
||||
const [x, y] = this.id.split('-').slice(1).map(Number);
|
||||
const neighbors = [
|
||||
[x - 1, y],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue