yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update graphics on easter egg.

Browse source
This commit is contained in:
Yaro Kasear 2025-08-08 09:06:17 -05:00
parent b02f85065d
commit b396f63342
1 changed files with 30 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

36
inventory/templates/coffee.html
View file

@ -1,19 +1,19 @@
{% extends 'layout.html' %} {% extends 'layout.html' %}
{% block style %} {% block style %}
.clicked { .light {
outline: 2px solid red; transition: background-color .25s;
} }
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="container"> <div class="container">
{% for x in range(level + 3) %} {% 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) %} {% 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"> <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>
</div> </div>
{% endfor %} {% endfor %}
@ -25,9 +25,33 @@
{% block script %} {% block script %}
const gridSize = {{ level + 3 }}; 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 => { document.querySelectorAll('.form-check-input').forEach(checkbox => {
checkbox.addEventListener('change', function() { checkbox.addEventListener('change', function() {
checkbox.classList.toggle('clicked');
const [x, y] = this.id.split('-').slice(1).map(Number); const [x, y] = this.id.split('-').slice(1).map(Number);
const neighbors = [ const neighbors = [
[x - 1, y], [x - 1, y],