input.js (6314a1e) - functle · DKL9 GitList

Fetch problem, track plays, mobile input

dkl9 commited 6314a1e at 2025-209 17:33:57

input.js

Blame History Raw

const keyToToken = { x:"x", 1:"1", 2:"2", q:"^2", c:"^3", s:"sin", e:"exp", l:"ln", "+":"+", "-":"-", "*":"*", "/":"/" };
const maxGuesses = 6;
const mobile = /Mobi|Android/i.test(navigator.userAgent);
const buttonKeys = [["x", "1", "2", "q"], ["c", "s", "e", "l"], ["+", "-", "*", "/"]];
const grid = document.getElementById("grid");

if (mobile) {
    const ib = document.createElement("table");
    ib.id = "mobile";
    for (let i = 0; i < 3; i++) {
        const r = document.createElement("tr");
        for (let j = 0; j < 4; j++) {
            const t = keyToToken[buttonKeys[i][j]];
            r.append(makeButton(t, 3.5 - 0.5 * t.length, () => {
                const row = grid.rows[currentRow];
                if (currentRow >= maxGuesses) {
                } else if (currentInput.length < tl) {
                    currentInput.push(t);
                    const c = row.cells[currentInput.length - 1];
                    c.style.fontSize = `${3.5 - 0.5 * t.length}em`;
                    c.textContent = t;
                } else {
                    shakeRow(row);
                }
            }));
        }
        ib.append(r);
    }
    const lr = document.createElement("tr");
    const dc = makeButton("delete", 3, () => {
        const row = grid.rows[currentRow];
        if (currentInput.length > 0) {
            currentInput.pop();
            row.cells[currentInput.length].textContent = "";
        } else {
            shakeRow(row);
        }
    });
    dc.colSpan = buttonKeys[0].length / 2;
    lr.append(dc);
    const sc = makeButton("check", 3, submitGuess);
    sc.colSpan = buttonKeys[0].length / 2;
    lr.append(sc);
    ib.append(lr);
    grid.after(ib);
}

function makeButton(label, size, handler) {
    const b = document.createElement("td");
    b.textContent = label;
    b.style.fontSize = `${size}em`;
    b.addEventListener("click", handler);
    return b;
}

function shakeRow(row) {
    row.classList.remove("shake");
    void row.offsetWidth;
    row.classList.add("shake");
}

for (let i = 0; i < maxGuesses; i++) {
    const tr = document.createElement("tr");
    for (let j = 0; j < tl; j++) {
        const td = document.createElement("td");
        tr.appendChild(td);
    }
    grid.appendChild(tr);
}

let currentRow = 0;
let currentInput = [];

document.addEventListener("keyup", e => {
    const row = grid.rows[currentRow];
    if (e.key === "Backspace") {
        if (currentInput.length > 0) {
            currentInput.pop();
            row.cells[currentInput.length].textContent = "";
        } else {
            shakeRow(row);
        }
    } else if (e.key === "Enter") {
        submitGuess();
    } else if (keyToToken.hasOwnProperty(e.key)) {
        if (currentRow >= maxGuesses) {
        } else if (currentInput.length < tl) {
            const token = keyToToken[e.key];
            currentInput.push(token);
            const c = row.cells[currentInput.length - 1];
            c.style.fontSize = `${3.5 - 0.5 * token.length}em`;
            c.textContent = token;
        } else {
            shakeRow(row);
        }
    }
});