feat: add HP48-style RPN calculator sample

2026-04-25 01:43:05 +02:00
parent 4ef19b1339
commit 6a28aaaac6
4 changed files with 1008 additions and 0 deletions
@@ -0,0 +1,594 @@
+const calc = new RpnCalculator({ angleMode: 'deg' });
+const input = document.getElementById('input');
+const screen = document.getElementById('screen');
+const stackEl = document.getElementById('stack');
+
+const displayEl = document.getElementById('display');
+const errorEl = document.getElementById('error');
+const inputValueLabel = document.getElementById('inputValueLabel');
+const editingLabel = document.getElementById('editingLabel');
+const modeLabel = document.getElementById('modeLabel');
+const angleMode = document.getElementById('angleMode');
+
+const keyLayouts = {
+  functions: [
+    [
+      { type: 'command', value: 'pi', label: 'π', className: 'key-function' },
+      { type: 'command', value: 'e', label: 'e', className: 'key-function' },
+      null,
+      null,
+    ],
+    [
+      { type: 'command', value: 'sqrt', label: 'sqrt', className: 'key-function' },
+      { type: 'command', value: 'pow', label: 'y^x', className: 'key-function' },
+      { type: 'command', value: 'sqr', label: 'x²', className: 'key-function' },
+      { type: 'command', value: 'recip', label: '1/x', className: 'key-function' },
+    ],
+    [
+      { type: 'command', value: 'log', label: 'log', className: 'key-function' },
+      { type: 'command', value: 'ln', label: 'ln', className: 'key-function' },
+      null,
+      { type: 'command', value: 'mod', label: '%', className: 'key-function' },
+    ],
+    [
+      { type: 'command', value: 'sin', label: 'sin', className: 'key-function' },
+      { type: 'command', value: 'cos', label: 'cos', className: 'key-function' },
+      { type: 'command', value: 'tan', label: 'tan', className: 'key-function' },
+      null,
+    ],
+    [
+      { type: 'command', value: 'asin', label: 'asin', className: 'key-function' },
+      { type: 'command', value: 'acos', label: 'acos', className: 'key-function' },
+      { type: 'command', value: 'atan', label: 'atan', className: 'key-function' },
+      null,
+    ],
+  ],
+  numbers: [
+    [null, null, null],
+    [
+      { type: 'input', value: '7', label: '7', className: 'key-number' },
+      { type: 'input', value: '8', label: '8', className: 'key-number' },
+      { type: 'input', value: '9', label: '9', className: 'key-number' },
+    ],
+    [
+      { type: 'input', value: '4', label: '4', className: 'key-number' },
+      { type: 'input', value: '5', label: '5', className: 'key-number' },
+      { type: 'input', value: '6', label: '6', className: 'key-number' },
+    ],
+    [
+      { type: 'input', value: '1', label: '1', className: 'key-number' },
+      { type: 'input', value: '2', label: '2', className: 'key-number' },
+      { type: 'input', value: '3', label: '3', className: 'key-number' },
+    ],
+    [
+      { type: 'input', value: '0', label: '0', className: 'key-number' },
+      { type: 'input', value: '.', label: '.', className: 'key-number' },
+      { type: 'command', value: 'neg', label: '+/−', className: 'key-number' },
+    ],
+  ],
+  operators: [
+    [
+      { type: 'command', value: 'clear', label: 'del', className: 'key-danger' },
+      { type: 'action', value: 'escape', label: 'esc', className: 'key-danger' },
+    ],
+    [
+      { type: 'command', value: 'div', label: '/', className: 'key-operator' },
+      { type: 'command', value: 'drop', label: 'back', className: 'key-operator' },
+    ],
+    [
+      { type: 'command', value: 'mul', label: '*', className: 'key-operator' },
+      null,
+    ],
+    [
+      { type: 'command', value: 'sub', label: '-', className: 'key-operator' },
+      { type: 'command', value: 'enter', label: 'Enter', className: 'key-enter' },
+    ],
+    [
+      { type: 'command', value: 'add', label: '+', className: 'key-operator' },
+      null,
+    ],
+  ],
+};
+
+let stackCursor = null;
+let isMovingStackItem = false;
+let stackSnapshotBeforeMove = null;
+let stackViewOffset = 0;
+let editRestoreValue = null;
+
+function handleEscapeAction() {
+  if (calc.isEditing) {
+    if (editRestoreValue !== null) {
+      calc.push(editRestoreValue);
+      editRestoreValue = null;
+    }
+    calc.inputValue = '';
+    calc.isEditing = false;
+    syncInputFromState();
+    render();
+    return;
+  }
+
+  if (isMovingStackItem) {
+    cancelMoveMode();
+    clearStackSelection();
+    render();
+    return;
+  }
+
+  if (hasStackSelection()) {
+    clearStackSelection();
+    render();
+  }
+}
+
+function pressKey(key) {
+  clearStackSelection();
+  editXWithKey(key);
+  render();
+}
+
+function createButton(cell) {
+  if (!cell) {
+    const spacer = document.createElement('div');
+    spacer.className = 'key-spacer';
+    spacer.setAttribute('aria-hidden', 'true');
+    return spacer;
+  }
+
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.textContent = cell.label;
+  button.className = cell.className;
+  button.addEventListener('click', () => {
+    focusScreen();
+    if (cell.type === 'input') {
+      pressKey(cell.value);
+      return;
+    }
+    if (cell.type === 'action' && cell.value === 'escape') {
+      handleEscapeAction();
+      return;
+    }
+    execute(cell.value);
+  });
+  return button;
+}
+
+function renderKeyLayout(container, rows) {
+  container.innerHTML = '';
+  rows.flat().forEach((cell) => {
+    container.appendChild(createButton(cell));
+  });
+}
+
+function getStackValue(index) {
+  return calc.isValidIndex(index) ? calc.stack[index] : undefined;
+}
+
+function getDisplayValue(index) {
+  if (calc.isEditing) {
+    if (index === 0) {
+      return calc.inputValue;
+    }
+    return getStackValue(index - 1);
+  }
+  return getStackValue(index);
+}
+
+function hasStackSelection() {
+  return stackCursor !== null && calc.isValidIndex(stackCursor);
+}
+
+function clearStackSelection() {
+  stackCursor = null;
+  isMovingStackItem = false;
+  stackSnapshotBeforeMove = null;
+  stackViewOffset = 0;
+}
+
+function ensureValidSelection() {
+  if (hasStackSelection()) {
+    return;
+  }
+  stackCursor = calc.isValidIndex(0) ? 0 : null;
+}
+
+function beginMoveMode() {
+  if (!hasStackSelection()) {
+    return;
+  }
+  isMovingStackItem = true;
+  stackSnapshotBeforeMove = calc.stack.slice();
+}
+
+function commitMoveMode() {
+  isMovingStackItem = false;
+  stackSnapshotBeforeMove = null;
+}
+
+function cancelMoveMode() {
+  if (!isMovingStackItem || !stackSnapshotBeforeMove) {
+    return;
+  }
+
+  const snapshot = stackSnapshotBeforeMove.slice();
+  calc.clear();
+  for (let index = snapshot.length - 1; index >= 0; index -= 1) {
+    calc.push(snapshot[index]);
+  }
+
+  isMovingStackItem = false;
+  stackSnapshotBeforeMove = null;
+  stackCursor = calc.isValidIndex(stackCursor) ? stackCursor : (calc.isValidIndex(0) ? 0 : null);
+  syncInputFromState();
+}
+
+function reactivateEditOnX() {
+  clearStackSelection();
+  if (calc.isValidIndex(0)) {
+    const value = getStackValue(0);
+    calc.remove(0);
+    calc.inputValue = calc.formatNumber(value);
+    calc.isEditing = true;
+    editRestoreValue = value;
+  } else {
+    calc.inputValue = '';
+    calc.isEditing = true;
+    editRestoreValue = null;
+  }
+  syncInputFromState();
+}
+
+function moveStackSelection(direction) {
+  if (!hasStackSelection()) {
+    if (direction === 'up') {
+      ensureValidSelection();
+    } else if (direction === 'down') {
+      reactivateEditOnX();
+    }
+    return;
+  }
+
+  const nextIndex = direction === 'up' ? stackCursor + 1 : stackCursor - 1;
+  if (calc.isValidIndex(nextIndex)) {
+    stackCursor = nextIndex;
+  }
+}
+
+function moveStackItem(direction) {
+  if (!hasStackSelection()) {
+    return;
+  }
+
+  const targetIndex = direction === 'up' ? stackCursor + 1 : stackCursor - 1;
+  if (!calc.isValidIndex(targetIndex)) {
+    return;
+  }
+
+  calc.swap(stackCursor, targetIndex);
+  stackCursor = targetIndex;
+}
+
+function getVisibleStackIndex(visualLine) {
+  return stackViewOffset + visualLine;
+}
+
+function clampStackViewOffset() {
+  const maxOffset = Math.max(0, calc.stack.length - 4);
+  if (stackViewOffset < 0) {
+    stackViewOffset = 0;
+  } else if (stackViewOffset > maxOffset) {
+    stackViewOffset = maxOffset;
+  }
+}
+
+function ensureSelectionVisible() {
+  if (!hasStackSelection()) {
+    stackViewOffset = 0;
+    return;
+  }
+
+  if (stackCursor < stackViewOffset) {
+    stackViewOffset = stackCursor;
+  } else if (stackCursor > stackViewOffset + 3) {
+    stackViewOffset = stackCursor - 3;
+  }
+
+  clampStackViewOffset();
+}
+
+function render() {
+  const names = ['T', 'Z', 'Y', 'X'];
+  const lines = [];
+  const showStackIndexes = hasStackSelection() || isMovingStackItem;
+
+  clampStackViewOffset();
+  ensureSelectionVisible();
+
+  for (let visualLine = 3; visualLine >= 0; visualLine -= 1) {
+    const stackIndex = getVisibleStackIndex(visualLine);
+    const value = getDisplayValue(stackIndex);
+    const isSelected = stackCursor === stackIndex;
+    const classes = ['stack-line'];
+    const label = showStackIndexes ? String(stackIndex) : names[3 - visualLine];
+
+    if (isSelected) {
+      classes.push(isMovingStackItem ? 'moving' : 'selected');
+    }
+
+    lines.push(`<div class="${classes.join(' ')}"><div class="label">${label}</div><div>${value !== undefined && value !== '' ? calc.formatNumber(value) : ''}</div></div>`);
+  }
+
+  stackEl.innerHTML = lines.join('');
+  if (calc.isEditing) {
+    displayEl.textContent = `ENTERING: ${calc.inputValue}`;
+  } else if (isMovingStackItem && hasStackSelection()) {
+    displayEl.textContent = `MOVING: ${stackCursor}`;
+  } else if (hasStackSelection()) {
+    displayEl.textContent = `SELECTED: ${stackCursor}`;
+  } else {
+    displayEl.textContent = 'READY';
+  }
+  inputValueLabel.textContent = calc.inputValue || '∅';
+  editingLabel.textContent = String(calc.isEditing);
+  modeLabel.textContent = calc.angleMode;
+  angleMode.value = calc.angleMode;
+  errorEl.textContent = '';
+}
+
+function pushEditingValueIfNeeded() {
+  if (!calc.isEditing) return;
+  if (calc.inputValue !== '') {
+    const value = calc.parseInputValue(calc.inputValue);
+    calc.push(value);
+  }
+  calc.inputValue = '';
+  calc.isEditing = false;
+  editRestoreValue = null;
+  syncInputFromState();
+}
+
+function execute(name) {
+  try {
+    if (name === 'enter') {
+      if (calc.isEditing) {
+        pushEditingValueIfNeeded();
+      } else if (calc.isValidIndex(0)) {
+        calc.push(getStackValue(0));
+      }
+    } else if (name === 'swap') {
+      pushEditingValueIfNeeded();
+      clearStackSelection();
+      if (calc.isValidIndex(1)) calc.swap(0, 1);
+    } else if (name === 'drop') {
+      pushEditingValueIfNeeded();
+      if (hasStackSelection()) {
+        calc.remove(stackCursor);
+        stackCursor = calc.isValidIndex(stackCursor) ? stackCursor : (calc.isValidIndex(stackCursor - 1) ? stackCursor - 1 : null);
+      } else if (calc.isValidIndex(0)) {
+        calc.remove(0);
+      }
+      commitMoveMode();
+    } else if (name === 'clear') {
+      calc.clear();
+      clearStackSelection();
+    } else {
+      pushEditingValueIfNeeded();
+      clearStackSelection();
+      calc.command(name);
+    }
+    syncInputFromState();
+    render();
+  } catch (error) {
+    errorEl.textContent = error.message;
+  }
+}
+
+function isInputChar(key) {
+  return /^[0-9a-fA-F.]$/.test(key);
+}
+
+function shouldIgnoreKeyboardEvent(event) {
+  const target = event.target;
+  if (!target) return false;
+
+  const tagName = target.tagName;
+  return (
+    tagName === 'INPUT' ||
+    tagName === 'TEXTAREA' ||
+    tagName === 'SELECT' ||
+    target.isContentEditable
+  );
+}
+
+function getKeyboardAction(event) {
+  const numpadMap = {
+    Numpad0: { type: 'input', value: '0' },
+    Numpad1: { type: 'input', value: '1' },
+    Numpad2: { type: 'input', value: '2' },
+    Numpad3: { type: 'input', value: '3' },
+    Numpad4: { type: 'input', value: '4' },
+    Numpad5: { type: 'input', value: '5' },
+    Numpad6: { type: 'input', value: '6' },
+    Numpad7: { type: 'input', value: '7' },
+    Numpad8: { type: 'input', value: '8' },
+    Numpad9: { type: 'input', value: '9' },
+    NumpadDecimal: { type: 'input', value: '.' },
+    NumpadAdd: { type: 'command', value: 'add' },
+    NumpadSubtract: { type: 'command', value: 'sub' },
+    NumpadMultiply: { type: 'command', value: 'mul' },
+    NumpadDivide: { type: 'command', value: 'div' },
+    NumpadEnter: { type: 'command', value: 'enter' },
+  };
+
+  if (numpadMap[event.code]) {
+    return numpadMap[event.code];
+  }
+
+  if (isInputChar(event.key)) {
+    return { type: 'input', value: event.key };
+  }
+
+  const keyMap = {
+    Enter: { type: 'enterKey' },
+    Backspace: { type: 'stackOrEdit', value: 'drop' },
+    Delete: { type: 'command', value: 'clear' },
+    Escape: { type: 'escapeKey' },
+    ArrowUp: { type: 'stackArrow', value: 'up' },
+    ArrowDown: { type: 'stackArrow', value: 'down' },
+    ArrowRight: { type: 'command', value: 'swap' },
+    '+': { type: 'command', value: 'add' },
+    '-': { type: 'command', value: 'sub' },
+    '*': { type: 'command', value: 'mul' },
+    '/': { type: 'command', value: 'div' },
+    '%': { type: 'command', value: 'mod' },
+    '^': { type: 'command', value: 'pow' },
+    q: { type: 'command', value: 'sqr' },
+    n: { type: 'command', value: 'neg' },
+    r: { type: 'command', value: 'sqrt' },
+    i: { type: 'command', value: 'recip' },
+    g: { type: 'command', value: 'log' },
+    l: { type: 'command', value: 'ln' },
+    s: { type: 'command', value: 'sin' },
+    c: { type: 'command', value: 'cos' },
+    S: { type: 'command', value: 'asin' },
+    C: { type: 'command', value: 'acos' },
+    x: { type: 'stackSelect', value: 0 },
+    y: { type: 'stackSelect', value: 1 },
+    z: { type: 'stackSelect', value: 2 },
+    t: { type: 'stackSelect', value: 3 },
+    X: { type: 'stackSelect', value: 0 },
+    Y: { type: 'stackSelect', value: 1 },
+    Z: { type: 'stackSelect', value: 2 },
+    T: { type: 'stackSelect', value: 3 },
+  };
+
+  return keyMap[event.key] || null;
+}
+
+function focusScreen() {
+  screen.focus();
+}
+
+function syncInputFromState() {
+  input.value = calc.inputValue;
+}
+
+function editXWithKey(key) {
+  if (!calc.isEditing) {
+    pushEditingValueIfNeeded();
+    calc.isEditing = true;
+    calc.inputValue = '';
+    editRestoreValue = null;
+  }
+  if (key === 'Backspace') {
+    calc.inputValue = calc.inputValue.slice(0, -1);
+  } else {
+    calc.inputValue += key;
+  }
+  if (calc.inputValue === '') {
+    calc.isEditing = false;
+    editRestoreValue = null;
+  }
+  syncInputFromState();
+}
+
+function handleKeydown(event) {
+  if (shouldIgnoreKeyboardEvent(event)) {
+    return;
+  }
+
+  const action = getKeyboardAction(event);
+  if (!action) {
+    return;
+  }
+
+  try {
+    if (action.type === 'escapeKey') {
+      event.preventDefault();
+      handleEscapeAction();
+      return;
+    }
+
+    event.preventDefault();
+
+    if (action.type === 'input') {
+      clearStackSelection();
+      editXWithKey(action.value);
+      render();
+      return;
+    }
+
+    if (action.type === 'stackSelect') {
+      if (calc.isEditing || isMovingStackItem) {
+        return;
+      }
+      stackCursor = calc.isValidIndex(action.value) ? action.value : null;
+      render();
+      return;
+    }
+
+    if (action.type === 'stackArrow') {
+      if (calc.isEditing) {
+        render();
+        return;
+      }
+
+      if (isMovingStackItem) {
+        moveStackItem(action.value);
+      } else {
+        moveStackSelection(action.value);
+      }
+      render();
+      return;
+    }
+
+    if (action.type === 'stackOrEdit') {
+      if (calc.isEditing) {
+        editXWithKey('Backspace');
+        render();
+      } else {
+        execute(action.value);
+      }
+      return;
+    }
+
+    if (action.type === 'enterKey') {
+      if (hasStackSelection()) {
+        if (isMovingStackItem) {
+          commitMoveMode();
+        } else {
+          beginMoveMode();
+        }
+        render();
+        return;
+      }
+      execute('enter');
+      return;
+    }
+
+    if (action.type === 'command') {
+      execute(action.value);
+    }
+  } catch (error) {
+    errorEl.textContent = error.message;
+  }
+}
+
+window.addEventListener('keydown', handleKeydown);
+
+screen.addEventListener('click', focusScreen);
+window.addEventListener('load', focusScreen);
+
+angleMode.addEventListener('change', (event) => {
+  calc.angleMode = event.target.value;
+  render();
+});
+
+renderKeyLayout(document.getElementById('functionsButtons'), keyLayouts.functions);
+renderKeyLayout(document.getElementById('numbersButtons'), keyLayouts.numbers);
+renderKeyLayout(document.getElementById('operatorsButtons'), keyLayouts.operators);
+
+render();
+focusScreen();