Udavač - Kontrolor

Stiskni tlačítko nebo klikni na ENTER

{% extends "templates/base.html" %}
{% set game_name = "Hra - Kontrolor" %}
{% block content %}
    <div class="container d-flex justify-content-center align-items-center p-5" id="content">
        <div class="text-center gap-3">
            <img src="/assets/img/ForrestHub-helceletka.png" width="500px" alt="Helceletka" class="mb-4">
            <div class="d-flex justify-content-center gap-2 mb-4">
                <input type="number" maxlength="1" class="form-control form-control-lg text-center" id="digit1" pattern="[0-9]*" inputmode="numeric" autofocus>
                <input type="number" maxlength="1" class="form-control form-control-lg text-center" id="digit2" pattern="[0-9]*" inputmode="numeric">
                <input type="number" maxlength="1" class="form-control form-control-lg text-center" id="digit3" pattern="[0-9]*" inputmode="numeric">
                <input type="number" maxlength="1" class="form-control form-control-lg text-center" id="digit4" pattern="[0-9]*" inputmode="numeric">
            </div>
            <div class="d-grid gap-2">
                <button type="button" class="btn btn-primary btn-lg mb-2" id="checkNumberButton">Zkontroluj číslo</button>
            </div>
            <p>Stiskni tlačítko nebo klikni na ENTER</p>
            <div id="result" class="alert" role="alert" style="display: none;"></div>
        </div>
    </div>

async function checkNumber() {
            const number = inputs.map(input => input.value).join('');

if (number.length !== 4 || isNaN(number)) {
                showResult('Zadej čtyřmístné číslo', 'alert alert-danger');
                return;
            }

const allNumbers = await forrestHubLib.dbArrayFetchAllRecords(arrayName) || {};

if (Object.values(allNumbers).includes(number)) {
                showResult('Stůj', 'alert alert-danger');
            } else {
                showResult('Můžeš dál', 'alert alert-success');
            }
        }

function showResult(message, className) {
            resultDiv.innerText = message;
            resultDiv.className = className;
            resultDiv.style.display = 'block';
            setTimeout(() => resultDiv.style.display = 'none', 3000);
        }

inputs.forEach((input, index) => {
            input.addEventListener('input', () => {
                if (input.value.length === 1 && index < inputs.length - 1) {
                    inputs[index + 1].focus();
                }
            });

input.addEventListener('keydown', (e) => {
                if (e.key === 'Backspace' && index > 0 && input.value === '') {
                    inputs[index - 1].focus();
                }
            });
        });

inputs[inputs.length - 1].addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                checkNumber();
            }
        });

document.getElementById('checkNumberButton').addEventListener('click', checkNumber);
    </script>
{% endblock %}