feat(calc-01): move controls into a compact top bar

samples/calc-01/index.js

@@ -12,12 +12,6 @@ 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' },
@@ -44,7 +38,6 @@ const keyLayouts = {
     ],
   ],
   numbers: [
-    [null, null, null],
     [
       { type: 'input', value: '7', label: '7', className: 'key-number' },
       { type: 'input', value: '8', label: '8', className: 'key-number' },
@@ -67,13 +60,9 @@ const keyLayouts = {
     ],
   ],
   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' },
+      null,
     ],
     [
       { type: 'command', value: 'mul', label: '*', className: 'key-operator' },
@@ -90,6 +79,16 @@ const keyLayouts = {
   ],
 };
 
+const topButtons = {
+  consts: [
+    { type: 'command', value: 'pi', label: 'π', className: 'key-function' },
+    { type: 'command', value: 'e', label: 'e', className: 'key-function' },
+  ],
+  del: { type: 'command', value: 'clear', label: 'del', className: 'key-danger' },
+  backspace: { type: 'action', value: 'backspace', label: 'backspace', className: 'key-operator' },
+  escape: { type: 'action', value: 'escape', label: 'esc', className: 'key-danger' },
+};
+
 let stackCursor = null;
 let isMovingStackItem = false;
 let stackSnapshotBeforeMove = null;
@@ -128,6 +127,16 @@ function pressKey(key) {
   render();
 }
 
+function handleBackspaceAction() {
+  if (calc.isEditing) {
+    editXWithKey('Backspace');
+    render();
+    return;
+  }
+
+  execute('drop');
+}
+
 function createButton(cell) {
   if (!cell) {
     const spacer = document.createElement('div');
@@ -146,9 +155,15 @@ function createButton(cell) {
       pressKey(cell.value);
       return;
     }
-    if (cell.type === 'action' && cell.value === 'escape') {
-      handleEscapeAction();
-      return;
+    if (cell.type === 'action') {
+      if (cell.value === 'escape') {
+        handleEscapeAction();
+        return;
+      }
+      if (cell.value === 'backspace') {
+        handleBackspaceAction();
+        return;
+      }
     }
     execute(cell.value);
   });
@@ -589,6 +604,10 @@ angleMode.addEventListener('change', (event) => {
 renderKeyLayout(document.getElementById('functionsButtons'), keyLayouts.functions);
 renderKeyLayout(document.getElementById('numbersButtons'), keyLayouts.numbers);
 renderKeyLayout(document.getElementById('operatorsButtons'), keyLayouts.operators);
+renderKeyLayout(document.getElementById('constButtons'), [topButtons.consts]);
+document.getElementById('deleteButton').appendChild(createButton(topButtons.del));
+document.getElementById('backspaceButton').appendChild(createButton(topButtons.backspace));
+document.getElementById('escapeButton').appendChild(createButton(topButtons.escape));
 
 render();
 focusScreen();