input.js (b2623df) - functle · DKL9 GitList

Bypass Firefox's handling of /

dkl9 commited b2623df at 2025-361 17:44:49

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 = 4;
const mobile = /Mobi|Android/i.test(navigator.userAgent);
const buttonKeys = [["x", "1", "2", "q"], ["c", "s", "e", "l"], ["+", "-", "*", "/"]];
const grid = document.getElementById("grid");

function makeKeyboard() {
    const ib = document.createElement("table");
    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);
    return 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");
}

function inputting() {
    const focus = document.activeElement.tagName.toLowerCase();
    return focus == "textarea" || focus == "input";
}

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 = [];

// https://stackoverflow.com/a/8563788 for a quirk of Firefox
document.addEventListener("keydown", e => {
    if (!inputting() && e.key == "/") {
        e.preventDefault();
    }
});

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);
        }
    }
});

const inputButtons = makeKeyboard();
inputButtons.id = "mobile";
grid.after(inputButtons);
if (!mobile) {
    const toggleLabel = document.createElement("label");
    toggleLabel.textContent = "Show on-screen keyboard";
    toggleLabel.htmlFor = "tosk";
    const toggleCheck = document.createElement("input");
    toggleCheck.id = "tosk";
    toggleCheck.type = "checkbox";
    inputButtons.before(toggleLabel, toggleCheck);
}