-
Constants
-
+
+
Calculator Keys
+
+
Functions
+
Numbers
+
Operators
+
+
+
@@ -264,36 +412,352 @@
const editingLabel = document.getElementById('editingLabel');
const modeLabel = document.getElementById('modeLabel');
const angleMode = document.getElementById('angleMode');
+ const functionsKeypadEl = document.getElementById('functionsKeypad');
+ const numbersKeypadEl = document.getElementById('numbersKeypad');
+ const operatorsKeypadEl = document.getElementById('operatorsKeypad');
+ const keypadPanelEl = document.getElementById('keypadPanel');
+ const constantsMenuEl = document.getElementById('constantsMenu');
- const groups = {
- stack: ['enter', 'dup', 'drop', 'swap', 'clear'],
- arithmetic: ['add', 'sub', 'mul', 'div', 'mod', 'pow', 'sqr', 'neg', 'sqrt', 'recip', 'log', 'ln'],
- trig: ['sin', 'cos', 'tan', 'asin', 'acos', 'atan'],
- const: ['pi', 'e'],
- };
+ let stackCursor = null;
+ let isConstantsMenuOpen = false;
+ let isMovingStackItem = false;
+ let stackSnapshotBeforeMove = null;
- function labelFor(command) {
- return ({ add: '+', sub: '−', mul: '×', div: '÷', pow: 'y^x', recip: '1/x', sqr: 'x²' }[command] || command);
+ function getKeypadLayout() {
+ return {
+ functions: [
+ [
+ { label: 'consts', type: 'special', value: 'toggleConstsMenu', active: isConstantsMenuOpen, menuAnchor: true },
+ null,
+ null,
+ null,
+ ],
+ [
+ { label: 'sqrt', type: 'command', value: 'sqrt' },
+ { label: 'y^x', type: 'command', value: 'pow' },
+ { label: 'x²', type: 'command', value: 'sqr' },
+ { label: '1/x', type: 'command', value: 'recip' },
+ ],
+ [
+ { label: 'log', type: 'command', value: 'log' },
+ { label: 'ln', type: 'command', value: 'ln' },
+ null,
+ { label: '%', type: 'command', value: 'mod' },
+ ],
+ [
+ { label: 'sin', type: 'command', value: 'sin' },
+ { label: 'cos', type: 'command', value: 'cos' },
+ { label: 'tan', type: 'command', value: 'tan' },
+ null,
+ ],
+ [
+ { label: 'asin', type: 'command', value: 'asin' },
+ { label: 'acos', type: 'command', value: 'acos' },
+ { label: 'atan', type: 'command', value: 'atan' },
+ null,
+ ],
+ ],
+ numbers: [
+ [null, null, null],
+ [
+ { label: '7', type: 'input', value: '7' },
+ { label: '8', type: 'input', value: '8' },
+ { label: '9', type: 'input', value: '9' },
+ ],
+ [
+ { label: '4', type: 'input', value: '4' },
+ { label: '5', type: 'input', value: '5' },
+ { label: '6', type: 'input', value: '6' },
+ ],
+ [
+ { label: '1', type: 'input', value: '1' },
+ { label: '2', type: 'input', value: '2' },
+ { label: '3', type: 'input', value: '3' },
+ ],
+ [
+ { label: '0', type: 'input', value: '0' },
+ { label: '.', type: 'input', value: '.' },
+ { label: '+/-', type: 'command', value: 'neg' },
+ ],
+ ],
+ operators: [
+ [
+ { label: 'del', type: 'special', value: 'clear' },
+ { label: 'esc', type: 'special', value: 'escape' },
+ ],
+ [
+ { label: '/', type: 'command', value: 'div' },
+ { label: 'backspace', type: 'special', value: 'backspace' },
+ ],
+ [
+ { label: '*', type: 'command', value: 'mul' },
+ null,
+ ],
+ [
+ { label: '-', type: 'command', value: 'sub' },
+ { label: 'Enter', type: 'command', value: 'enter', rowspan: 2 },
+ ],
+ [
+ { label: '+', type: 'command', value: 'add' },
+ null,
+ ],
+ ],
+ };
}
- function addButtons(container, commands) {
- container.innerHTML = '';
- commands.forEach((commandName) => {
- const button = document.createElement('button');
- button.textContent = labelFor(commandName);
- button.addEventListener('click', () => execute(commandName));
- container.appendChild(button);
+ function renderKeypadGroup(groupEl, layout) {
+ groupEl.innerHTML = '';
+ const occupied = new Set();
+
+ layout.forEach((row, rowIndex) => {
+ row.forEach((key, colIndex) => {
+ const cellId = `${rowIndex}-${colIndex}`;
+ if (occupied.has(cellId)) {
+ return;
+ }
+
+ if (!key) {
+ const spacer = document.createElement('div');
+ spacer.className = 'keypad-spacer';
+ spacer.style.gridColumn = String(colIndex + 1);
+ spacer.style.gridRow = String(rowIndex + 1);
+ groupEl.appendChild(spacer);
+ return;
+ }
+
+ const button = document.createElement('button');
+ button.textContent = key.label;
+ button.style.gridColumn = String(colIndex + 1);
+ button.style.gridRow = `${rowIndex + 1} / span ${key.rowspan || 1}`;
+ if (key.rowspan && key.rowspan > 1) {
+ button.classList.add('enter-tall');
+ for (let offset = 1; offset < key.rowspan; offset += 1) {
+ occupied.add(`${rowIndex + offset}-${colIndex}`);
+ }
+ }
+ if (key.active) {
+ button.classList.add('active-toggle');
+ }
+ if (key.menuAnchor) {
+ button.dataset.menuAnchor = 'constants';
+ }
+ button.addEventListener('click', (event) => handleKeypadAction(key, event));
+ groupEl.appendChild(button);
+ });
});
}
+ function renderKeypad() {
+ const layout = getKeypadLayout();
+ renderKeypadGroup(functionsKeypadEl, layout.functions);
+ renderKeypadGroup(numbersKeypadEl, layout.numbers);
+ renderKeypadGroup(operatorsKeypadEl, layout.operators);
+ if (isConstantsMenuOpen) {
+ positionConstantsMenu();
+ }
+ }
+
+ function openConstantsMenu(anchorEl) {
+ isConstantsMenuOpen = true;
+ constantsMenuEl.hidden = false;
+ if (anchorEl) {
+ const panelRect = keypadPanelEl.getBoundingClientRect();
+ const anchorRect = anchorEl.getBoundingClientRect();
+ constantsMenuEl.style.left = `${anchorRect.left - panelRect.left}px`;
+ constantsMenuEl.style.top = `${anchorRect.bottom - panelRect.top + 6}px`;
+ }
+ }
+
+ function closeConstantsMenu() {
+ isConstantsMenuOpen = false;
+ constantsMenuEl.hidden = true;
+ }
+
+ function positionConstantsMenu() {
+ const anchorEl = keypadPanelEl.querySelector('[data-menu-anchor="constants"]');
+ if (!anchorEl) {
+ return;
+ }
+ openConstantsMenu(anchorEl);
+ }
+
+ function toggleConstantsMenu(anchorEl) {
+ if (isConstantsMenuOpen) {
+ closeConstantsMenu();
+ return;
+ }
+ openConstantsMenu(anchorEl);
+ }
+
+ function runEscapeAction() {
+ if (isConstantsMenuOpen) {
+ closeConstantsMenu();
+ render();
+ return;
+ }
+ if (calc.isEditing) {
+ calc.inputValue = '';
+ calc.isEditing = false;
+ syncInputFromState();
+ render();
+ return;
+ }
+ if (isMovingStackItem) {
+ cancelMoveMode();
+ render();
+ }
+ }
+
+ function handleKeypadAction(key, event) {
+ try {
+ if (key.type === 'input') {
+ clearStackSelection();
+ editXWithKey(key.value);
+ render();
+ return;
+ }
+
+ if (key.type === 'special') {
+ if (key.value === 'toggleConstsMenu') {
+ toggleConstantsMenu(event?.currentTarget);
+ render();
+ return;
+ }
+ if (key.value === 'backspace') {
+ if (calc.isEditing) {
+ editXWithKey('Backspace');
+ render();
+ } else {
+ execute('drop');
+ }
+ return;
+ }
+ if (key.value === 'clear') {
+ execute('clear');
+ return;
+ }
+ if (key.value === 'escape') {
+ runEscapeAction();
+ }
+ return;
+ }
+
+ if (key.type === 'command') {
+ execute(key.value);
+ }
+ } catch (error) {
+ errorEl.textContent = error.message;
+ }
+ }
+
+ function getStackValue(index) {
+ return calc.isValidIndex(index) ? calc.stack[index] : undefined;
+ }
+
function getLineValue(line) {
if (calc.isEditing) {
if (line === 0) {
return calc.inputValue;
}
- return calc.stack[line - 1];
+ return getStackValue(line - 1);
}
- return calc.stack[line];
+ return getStackValue(line);
+ }
+
+ function hasStackSelection() {
+ return stackCursor !== null && calc.isValidIndex(stackCursor);
+ }
+
+ function clearStackSelection() {
+ stackCursor = null;
+ isMovingStackItem = false;
+ stackSnapshotBeforeMove = null;
+ }
+
+ 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;
+ } else {
+ calc.inputValue = '';
+ calc.isEditing = true;
+ }
+ syncInputFromState();
+ }
+
+ function moveStackSelection(direction) {
+ if (!hasStackSelection()) {
+ if (direction === 'up') {
+ ensureValidSelection();
+ } else {
+ reactivateEditOnX();
+ }
+ return;
+ }
+
+ const nextIndex = direction === 'up' ? stackCursor + 1 : stackCursor - 1;
+ if (calc.isValidIndex(nextIndex)) {
+ stackCursor = nextIndex;
+ return;
+ }
+
+ if (direction === 'down' && stackCursor === 0) {
+ reactivateEditOnX();
+ }
+ }
+
+ 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 render() {
@@ -301,27 +765,37 @@
const lines = [];
for (let line = 3; line >= 0; line -= 1) {
const value = getLineValue(line);
- lines.push(`
${names[3 - line]}
${value !== undefined && value !== '' ? calc.formatNumber(value) : ''}
`);
+ const isSelected = stackCursor === line;
+ const classes = ['stack-line'];
+ if (isSelected) {
+ classes.push(isMovingStackItem ? 'moving' : 'selected');
+ }
+ lines.push(`
${names[3 - line]}
${value !== undefined && value !== '' ? calc.formatNumber(value) : ''}
`);
}
stackEl.innerHTML = lines.join('');
- displayEl.textContent = calc.isEditing ? `ENTERING: ${calc.inputValue}` : 'READY';
+ if (calc.isEditing) {
+ displayEl.textContent = `ENTERING: ${calc.inputValue}`;
+ } else if (isMovingStackItem && hasStackSelection()) {
+ displayEl.textContent = `MOVING: ${['X', 'Y', 'Z', 'T'][stackCursor] || '?'}`;
+ } else if (hasStackSelection()) {
+ displayEl.textContent = `SELECTED: ${['X', 'Y', 'Z', 'T'][stackCursor] || '?'}`;
+ } else {
+ displayEl.textContent = 'READY';
+ }
inputValueLabel.textContent = calc.inputValue || '∅';
editingLabel.textContent = String(calc.isEditing);
modeLabel.textContent = calc.angleMode;
angleMode.value = calc.angleMode;
errorEl.textContent = '';
+ renderKeypad();
}
function pushEditingValueIfNeeded() {
if (!calc.isEditing) return;
if (calc.inputValue !== '') {
const value = calc.parseInputValue(calc.inputValue);
- if (calc.stack.length >= calc.maxSize) {
- throw new Error('Stack overflow');
- }
- calc.stack.unshift(value);
- if (calc.stack.length > 4) calc.stack.length = 4;
+ calc.push(value);
}
calc.inputValue = '';
calc.isEditing = false;
@@ -330,20 +804,31 @@
function execute(name) {
try {
- if (name === 'swap') {
- pushEditingValueIfNeeded();
- if (calc.stack.length >= 2) calc.swap(0, 1);
- } else if (name === 'drop') {
- pushEditingValueIfNeeded();
- if (calc.stack.length >= 1) calc.remove(0);
- } else if (name === 'clear') {
- calc.clear();
- } else if (name === 'enter') {
+ 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();
@@ -354,7 +839,85 @@
}
function isInputChar(key) {
- return /^[0-9a-fA-F.+\-]$/.test(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() {
@@ -382,46 +945,112 @@
syncInputFromState();
}
- screen.addEventListener('keydown', (event) => {
+ function handleKeydown(event) {
+ if (shouldIgnoreKeyboardEvent(event)) {
+ return;
+ }
+
+ const action = getKeyboardAction(event);
+ if (!action) {
+ return;
+ }
+
try {
- if (event.key === 'Enter') {
+ if (action.type === 'escapeKey') {
event.preventDefault();
- execute('enter');
+ runEscapeAction();
return;
}
- if (event.key === 'Backspace') {
- event.preventDefault();
- if (calc.isEditing) {
- editXWithKey('Backspace');
- render();
- }
- return;
- }
+ event.preventDefault();
- if (isInputChar(event.key)) {
- event.preventDefault();
- editXWithKey(event.key);
+ if (action.type === 'input') {
+ clearStackSelection();
+ editXWithKey(action.value);
render();
return;
}
- const keyMap = {
- '+': 'add',
- '-': 'sub',
- '*': 'mul',
- '/': 'div',
- '%': 'mod',
- '^': 'pow',
- };
+ if (action.type === 'stackSelect') {
+ if (calc.isEditing || isMovingStackItem) {
+ return;
+ }
+ stackCursor = calc.isValidIndex(action.value) ? action.value : null;
+ render();
+ return;
+ }
- if (keyMap[event.key]) {
- event.preventDefault();
- execute(keyMap[event.key]);
+ if (action.type === 'stackArrow') {
+ 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);
+
+ constantsMenuEl.addEventListener('click', (event) => {
+ const button = event.target.closest('[data-const]');
+ if (!button) {
+ return;
+ }
+ closeConstantsMenu();
+ execute(button.dataset.const);
+ });
+
+ document.addEventListener('click', (event) => {
+ if (!isConstantsMenuOpen) {
+ return;
+ }
+ if (constantsMenuEl.contains(event.target)) {
+ return;
+ }
+ if (event.target.closest('[data-menu-anchor="constants"]')) {
+ return;
+ }
+ closeConstantsMenu();
+ render();
+ });
+
+ window.addEventListener('resize', () => {
+ if (isConstantsMenuOpen) {
+ positionConstantsMenu();
+ }
});
screen.addEventListener('click', focusScreen);
@@ -432,11 +1061,6 @@
render();
});
- addButtons(document.getElementById('stackButtons'), groups.stack);
- addButtons(document.getElementById('arithButtons'), groups.arithmetic);
- addButtons(document.getElementById('trigButtons'), groups.trig);
- addButtons(document.getElementById('constButtons'), groups.const);
-
render();
focusScreen();
diff --git a/samples/hp48/visual.txt b/samples/hp48/visual.txt
new file mode 100644
index 0000000..4732b1a
--- /dev/null
+++ b/samples/hp48/visual.txt
@@ -0,0 +1,7 @@
+┌───────────── Functions ────────────┬──── Numbers ────┬─── Operators ───┐
+| consts | | | | | | | del | esc |
+| sqrt | y^x | x² | 1/x | 7 | 8 | 9 | / | backspace |
+| log | ln | | % | 4 | 5 | 6 | * | |
+| sin | cos | tan | | 1 | 2 | 3 | - | Enter |
+| asin | acos | atan | | 0 | . | +/- | + | Enter |
+└────────────────────────────────────┴─────────────────┴─────────────────┘