1079 lines
29 KiB
HTML
1079 lines
29 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>HP48-style RPN Calculator</title>
|
|
<style>
|
|
:root {
|
|
--body: #d8d8d8;
|
|
--panel: #202020;
|
|
--panel-2: #2b2b2b;
|
|
--screen: #d8e7b8;
|
|
--screen-text: #1b2a12;
|
|
--screen-dim: #5b6f45;
|
|
--key: #3a3a3a;
|
|
--key-text: #f2f2f2;
|
|
--accent: #8cff6d;
|
|
--border: #111;
|
|
--key-number: #5a5a5a;
|
|
--key-number-2: #444;
|
|
--key-arithmetic: #7f5c24;
|
|
--key-arithmetic-2: #5f4216;
|
|
--key-trig: #2d6d73;
|
|
--key-trig-2: #1f4f54;
|
|
--key-stack: #6b4a8f;
|
|
--key-stack-2: #4f356b;
|
|
--key-special: #3d5d8a;
|
|
--key-special-2: #2c4464;
|
|
--key-danger: #8a3f3f;
|
|
--key-danger-2: #632d2d;
|
|
--key-enter: #5d8a3d;
|
|
--key-enter-2: #45662e;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background: linear-gradient(180deg, #efefef, var(--body));
|
|
color: #111;
|
|
}
|
|
|
|
.wrap {
|
|
max-width: 980px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.calc {
|
|
background: linear-gradient(180deg, #2f2f2f, #1f1f1f);
|
|
border: 1px solid #111;
|
|
border-radius: 20px;
|
|
padding: 18px;
|
|
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
|
|
.screen {
|
|
background: linear-gradient(180deg, #dbe8b8, var(--screen));
|
|
color: var(--screen-text);
|
|
border: 2px inset #8aa36b;
|
|
border-radius: 10px;
|
|
padding: 14px;
|
|
min-height: 190px;
|
|
font-family: "Courier New", monospace;
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.screen-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
color: var(--screen-dim);
|
|
}
|
|
|
|
.stack {
|
|
border-top: 1px solid rgba(27, 42, 18, 0.35);
|
|
padding-top: 10px;
|
|
line-height: 1.5;
|
|
font-size: 18px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.stack-line {
|
|
display: grid;
|
|
grid-template-columns: 26px 1fr;
|
|
gap: 8px;
|
|
padding: 1px 4px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.stack-line.selected {
|
|
background: rgba(27, 42, 18, 0.14);
|
|
outline: 1px dashed rgba(27, 42, 18, 0.45);
|
|
}
|
|
|
|
.stack-line.moving {
|
|
background: rgba(140, 255, 109, 0.18);
|
|
outline: 1px solid rgba(27, 42, 18, 0.55);
|
|
}
|
|
|
|
.stack-line .label {
|
|
text-align: right;
|
|
color: var(--screen-dim);
|
|
}
|
|
|
|
.stack-line.selected .label,
|
|
.stack-line.moving .label {
|
|
color: var(--screen-text);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hidden-input {
|
|
position: absolute;
|
|
left: -9999px;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
input, button {
|
|
border-radius: 10px;
|
|
border: 1px solid #000;
|
|
font: inherit;
|
|
}
|
|
|
|
.panel {
|
|
position: relative;
|
|
margin-top: 14px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 14px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.keypad-wrap {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr);
|
|
gap: 12px;
|
|
align-items: start;
|
|
}
|
|
|
|
.keypad-group {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.keypad-group.functions {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.keypad-group.numbers {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.keypad-group.operators {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.keypad-group button,
|
|
.keypad-group .keypad-spacer {
|
|
min-height: 46px;
|
|
}
|
|
|
|
.keypad-spacer {
|
|
min-height: 46px;
|
|
}
|
|
|
|
.keypad button.active-toggle,
|
|
.active-toggle {
|
|
background: linear-gradient(180deg, #6a8c52, #49693a);
|
|
color: #fff;
|
|
}
|
|
|
|
.key-number {
|
|
background: linear-gradient(180deg, var(--key-number), var(--key-number-2));
|
|
}
|
|
|
|
.key-arithmetic {
|
|
background: linear-gradient(180deg, var(--key-arithmetic), var(--key-arithmetic-2));
|
|
}
|
|
|
|
.key-trigonometry {
|
|
background: linear-gradient(180deg, var(--key-trig), var(--key-trig-2));
|
|
}
|
|
|
|
.key-stack {
|
|
background: linear-gradient(180deg, var(--key-stack), var(--key-stack-2));
|
|
}
|
|
|
|
.key-special {
|
|
background: linear-gradient(180deg, var(--key-special), var(--key-special-2));
|
|
}
|
|
|
|
.key-danger {
|
|
background: linear-gradient(180deg, var(--key-danger), var(--key-danger-2));
|
|
}
|
|
|
|
.key-enter {
|
|
background: linear-gradient(180deg, var(--key-enter), var(--key-enter-2));
|
|
font-weight: bold;
|
|
}
|
|
|
|
.keypad-group button.enter-tall {
|
|
grid-row: span 2;
|
|
}
|
|
|
|
button {
|
|
padding: 12px 10px;
|
|
background: linear-gradient(180deg, #4a4a4a, var(--key));
|
|
color: var(--key-text);
|
|
cursor: pointer;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
button:hover { filter: brightness(1.08); }
|
|
button:active { transform: translateY(1px); }
|
|
|
|
|
|
.popup-menu {
|
|
position: absolute;
|
|
top: 54px;
|
|
left: 14px;
|
|
z-index: 10;
|
|
display: grid;
|
|
gap: 6px;
|
|
min-width: 84px;
|
|
padding: 8px;
|
|
background: linear-gradient(180deg, #373737, #242424);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 12px;
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.popup-menu[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.popup-menu button {
|
|
width: 100%;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.display-error {
|
|
color: #8a2a1c;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
@media (max-width: 820px) {
|
|
.wrap {
|
|
padding: 16px;
|
|
}
|
|
|
|
.keypad-wrap {
|
|
gap: 8px;
|
|
}
|
|
|
|
.keypad-group.functions {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.keypad-group.numbers,
|
|
.keypad-group.operators {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.calc {
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.keypad-wrap {
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.keypad-group.functions {
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.keypad-group.numbers {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.keypad-group.operators {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="calc">
|
|
<div class="screen" id="screen" tabindex="0" role="application" aria-label="HP48 style calculator screen">
|
|
<div class="screen-top">
|
|
<div>RPN stack</div>
|
|
<div id="modeLabel">deg</div>
|
|
</div>
|
|
<div id="stack" class="stack"></div>
|
|
<div id="display"></div>
|
|
</div>
|
|
|
|
<input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
|
|
|
|
<div class="panel" id="keypadPanel">
|
|
<div class="keypad-wrap">
|
|
<div class="keypad-group functions" id="functionsKeypad"></div>
|
|
<div class="keypad-group numbers" id="numbersKeypad"></div>
|
|
<div class="keypad-group operators" id="operatorsKeypad"></div>
|
|
</div>
|
|
<div id="angleModeMenu" class="popup-menu" hidden>
|
|
<button type="button" data-angle-mode="deg">deg</button>
|
|
<button type="button" data-angle-mode="rad">rad</button>
|
|
<button type="button" data-angle-mode="grad">grad</button>
|
|
</div>
|
|
<div id="constantsMenu" class="popup-menu" hidden>
|
|
<button type="button" data-const="pi">π</button>
|
|
<button type="button" data-const="e">e</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../src/rpn-calculator.js"></script>
|
|
<script>
|
|
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 modeLabel = document.getElementById('modeLabel');
|
|
const functionsKeypadEl = document.getElementById('functionsKeypad');
|
|
const numbersKeypadEl = document.getElementById('numbersKeypad');
|
|
const operatorsKeypadEl = document.getElementById('operatorsKeypad');
|
|
const keypadPanelEl = document.getElementById('keypadPanel');
|
|
const angleModeMenuEl = document.getElementById('angleModeMenu');
|
|
const constantsMenuEl = document.getElementById('constantsMenu');
|
|
|
|
let stackCursor = null;
|
|
let openMenuName = null;
|
|
let isMovingStackItem = false;
|
|
let stackSnapshotBeforeMove = null;
|
|
let currentErrorMessage = '';
|
|
|
|
function getKeypadLayout() {
|
|
return {
|
|
functions: [
|
|
[
|
|
{ label: calc.angleMode, type: 'special', value: 'toggleAngleModeMenu', active: openMenuName === 'angle-mode', menuAnchor: 'angle-mode' },
|
|
{ label: 'consts', type: 'special', value: 'toggleConstsMenu', active: openMenuName === 'constants', menuAnchor: 'constants' },
|
|
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 getKeyClassName(key) {
|
|
if (key.type === 'input') {
|
|
return 'key-number';
|
|
}
|
|
|
|
if (key.value === 'clear') {
|
|
return 'key-danger';
|
|
}
|
|
|
|
if (key.value === 'enter') {
|
|
return 'key-enter';
|
|
}
|
|
|
|
if (key.type === 'special') {
|
|
return 'key-special';
|
|
}
|
|
|
|
const stackCommands = new Set(['neg']);
|
|
const arithmeticCommands = new Set(['add', 'sub', 'mul', 'div', 'mod', 'pow', 'sqr', 'sqrt', 'recip', 'log', 'ln']);
|
|
const trigonometryCommands = new Set(['sin', 'cos', 'tan', 'asin', 'acos', 'atan']);
|
|
|
|
if (stackCommands.has(key.value)) {
|
|
return 'key-stack';
|
|
}
|
|
|
|
if (arithmeticCommands.has(key.value)) {
|
|
return 'key-arithmetic';
|
|
}
|
|
|
|
if (trigonometryCommands.has(key.value)) {
|
|
return 'key-trigonometry';
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
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;
|
|
const keyClassName = getKeyClassName(key);
|
|
if (keyClassName) {
|
|
button.classList.add(keyClassName);
|
|
}
|
|
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 = key.menuAnchor;
|
|
}
|
|
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 (openMenuName) {
|
|
positionMenu(openMenuName);
|
|
}
|
|
}
|
|
|
|
function getMenuElement(name) {
|
|
if (name === 'angle-mode') {
|
|
return angleModeMenuEl;
|
|
}
|
|
if (name === 'constants') {
|
|
return constantsMenuEl;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function openMenu(name, anchorEl) {
|
|
const menuEl = getMenuElement(name);
|
|
if (!menuEl) {
|
|
return;
|
|
}
|
|
|
|
closeMenu();
|
|
openMenuName = name;
|
|
menuEl.hidden = false;
|
|
|
|
if (anchorEl) {
|
|
const panelRect = keypadPanelEl.getBoundingClientRect();
|
|
const anchorRect = anchorEl.getBoundingClientRect();
|
|
menuEl.style.left = `${anchorRect.left - panelRect.left}px`;
|
|
menuEl.style.top = `${anchorRect.bottom - panelRect.top + 6}px`;
|
|
}
|
|
}
|
|
|
|
function closeMenu() {
|
|
openMenuName = null;
|
|
angleModeMenuEl.hidden = true;
|
|
constantsMenuEl.hidden = true;
|
|
}
|
|
|
|
function positionMenu(name) {
|
|
const anchorEl = keypadPanelEl.querySelector(`[data-menu-anchor="${name}"]`);
|
|
if (!anchorEl) {
|
|
return;
|
|
}
|
|
openMenu(name, anchorEl);
|
|
}
|
|
|
|
function toggleMenu(name, anchorEl) {
|
|
if (openMenuName === name) {
|
|
closeMenu();
|
|
return;
|
|
}
|
|
openMenu(name, anchorEl);
|
|
}
|
|
|
|
function runEscapeAction() {
|
|
if (openMenuName) {
|
|
closeMenu();
|
|
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 === 'toggleAngleModeMenu') {
|
|
toggleMenu('angle-mode', event?.currentTarget);
|
|
render();
|
|
return;
|
|
}
|
|
if (key.value === 'toggleConstsMenu') {
|
|
toggleMenu('constants', 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) {
|
|
currentErrorMessage = error.message;
|
|
render();
|
|
}
|
|
}
|
|
|
|
function getStackValue(index) {
|
|
return calc.isValidIndex(index) ? calc.stack[index] : undefined;
|
|
}
|
|
|
|
function getLineValue(line) {
|
|
if (calc.isEditing) {
|
|
if (line === 0) {
|
|
return calc.inputValue;
|
|
}
|
|
return getStackValue(line - 1);
|
|
}
|
|
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() {
|
|
const names = ['T', 'Z', 'Y', 'X'];
|
|
const lines = [];
|
|
for (let line = 3; line >= 0; line -= 1) {
|
|
const value = getLineValue(line);
|
|
const isSelected = stackCursor === line;
|
|
const classes = ['stack-line'];
|
|
if (isSelected) {
|
|
classes.push(isMovingStackItem ? 'moving' : 'selected');
|
|
}
|
|
lines.push(`<div class="${classes.join(' ')}"><div class="label">${names[3 - line]}</div><div>${value !== undefined && value !== '' ? calc.formatNumber(value) : ''}</div></div>`);
|
|
}
|
|
|
|
stackEl.innerHTML = lines.join('');
|
|
if (currentErrorMessage) {
|
|
displayEl.textContent = `ERROR: ${currentErrorMessage}`;
|
|
displayEl.classList.add('display-error');
|
|
} else if (calc.isEditing) {
|
|
displayEl.textContent = `ENTERING: ${calc.inputValue}`;
|
|
displayEl.classList.remove('display-error');
|
|
} else if (isMovingStackItem && hasStackSelection()) {
|
|
displayEl.textContent = `MOVING: ${['X', 'Y', 'Z', 'T'][stackCursor] || '?'}`;
|
|
displayEl.classList.remove('display-error');
|
|
} else if (hasStackSelection()) {
|
|
displayEl.textContent = `SELECTED: ${['X', 'Y', 'Z', 'T'][stackCursor] || '?'}`;
|
|
displayEl.classList.remove('display-error');
|
|
} else {
|
|
displayEl.textContent = 'READY';
|
|
displayEl.classList.remove('display-error');
|
|
}
|
|
modeLabel.textContent = calc.angleMode;
|
|
renderKeypad();
|
|
}
|
|
|
|
function pushEditingValueIfNeeded() {
|
|
if (!calc.isEditing) return;
|
|
if (calc.inputValue !== '') {
|
|
const value = calc.parseInputValue(calc.inputValue);
|
|
calc.push(value);
|
|
}
|
|
calc.inputValue = '';
|
|
calc.isEditing = false;
|
|
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);
|
|
}
|
|
currentErrorMessage = '';
|
|
syncInputFromState();
|
|
render();
|
|
} catch (error) {
|
|
currentErrorMessage = error.message;
|
|
render();
|
|
}
|
|
}
|
|
|
|
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 = '';
|
|
}
|
|
if (key === 'Backspace') {
|
|
calc.inputValue = calc.inputValue.slice(0, -1);
|
|
} else {
|
|
calc.inputValue += key;
|
|
}
|
|
if (calc.inputValue === '') {
|
|
calc.isEditing = false;
|
|
}
|
|
syncInputFromState();
|
|
}
|
|
|
|
function handleKeydown(event) {
|
|
if (shouldIgnoreKeyboardEvent(event)) {
|
|
return;
|
|
}
|
|
|
|
const action = getKeyboardAction(event);
|
|
if (!action) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (action.type === 'escapeKey') {
|
|
event.preventDefault();
|
|
runEscapeAction();
|
|
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 (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) {
|
|
currentErrorMessage = error.message;
|
|
render();
|
|
}
|
|
}
|
|
|
|
window.addEventListener('keydown', handleKeydown);
|
|
|
|
angleModeMenuEl.addEventListener('click', (event) => {
|
|
const button = event.target.closest('[data-angle-mode]');
|
|
if (!button) {
|
|
return;
|
|
}
|
|
calc.angleMode = button.dataset.angleMode;
|
|
closeMenu();
|
|
render();
|
|
});
|
|
|
|
constantsMenuEl.addEventListener('click', (event) => {
|
|
const button = event.target.closest('[data-const]');
|
|
if (!button) {
|
|
return;
|
|
}
|
|
closeMenu();
|
|
execute(button.dataset.const);
|
|
});
|
|
|
|
document.addEventListener('click', (event) => {
|
|
if (!openMenuName) {
|
|
return;
|
|
}
|
|
const openMenuEl = getMenuElement(openMenuName);
|
|
if (openMenuEl && openMenuEl.contains(event.target)) {
|
|
return;
|
|
}
|
|
if (event.target.closest(`[data-menu-anchor="${openMenuName}"]`)) {
|
|
return;
|
|
}
|
|
closeMenu();
|
|
render();
|
|
});
|
|
|
|
window.addEventListener('resize', () => {
|
|
if (openMenuName) {
|
|
positionMenu(openMenuName);
|
|
}
|
|
});
|
|
|
|
screen.addEventListener('click', focusScreen);
|
|
window.addEventListener('load', focusScreen);
|
|
|
|
render();
|
|
focusScreen();
|
|
</script>
|
|
</body>
|
|
</html> |