@plotinus/matrix-package-calculator
Version:
Calculator components for the Matrix framework - basic arithmetic operations with UI
148 lines (143 loc) • 6.29 kB
JavaScript
export class CalculatorPresentationElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
bindTo(commComponent) {
this.commComponent = commComponent;
// Subscribe to state changes
if (commComponent.eventBus) {
const stateKey = `cmp:${commComponent.id}:_stateChanged`;
commComponent.eventBus.on(stateKey, () => this.render());
}
this.render();
}
render() {
const state = this.commComponent?.state || { display: '0' };
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
font-family: 'Courier New', monospace;
}
.calculator {
border: 2px solid #ff6b35;
padding: 16px;
margin: 8px;
border-radius: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
max-width: 300px;
}
.display {
background: #000;
color: #00ff00;
font-size: 24px;
text-align: right;
padding: 12px;
margin-bottom: 16px;
border-radius: 6px;
border: 2px inset #333;
min-height: 40px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
button {
background: linear-gradient(145deg, #f0f0f0, #d0d0d0);
border: 2px outset #ddd;
padding: 16px;
font-size: 18px;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
transition: all 0.1s;
}
button:hover {
background: linear-gradient(145deg, #e0e0e0, #c0c0c0);
transform: translateY(-1px);
}
button:active {
border: 2px inset #ddd;
transform: translateY(0);
}
.operator {
background: linear-gradient(145deg, #ff6b35, #f4511e);
color: white;
}
.operator:hover {
background: linear-gradient(145deg, #f4511e, #e64a19);
}
.equals {
background: linear-gradient(145deg, #4caf50, #45a049);
color: white;
grid-column: span 2;
}
.equals:hover {
background: linear-gradient(145deg, #45a049, #3d8b40);
}
.clear {
background: linear-gradient(145deg, #f44336, #d32f2f);
color: white;
}
.clear:hover {
background: linear-gradient(145deg, #d32f2f, #c62828);
}
.zero {
grid-column: span 2;
}
h3 {
color: white;
text-align: center;
margin-top: 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
</style>
<div class="calculator">
<h3>Calculator: ${this.commComponent?.id}</h3>
<div class="display">${state.display || '0'}</div>
<div class="buttons">
<button class="clear" onclick="this.getRootNode().host.clearCalculator()">C</button>
<button onclick="this.getRootNode().host.inputOperation('divide')">÷</button>
<button onclick="this.getRootNode().host.inputOperation('multiply')">×</button>
<button onclick="this.getRootNode().host.inputOperation('subtract')">−</button>
<button onclick="this.getRootNode().host.inputNumber(7)">7</button>
<button onclick="this.getRootNode().host.inputNumber(8)">8</button>
<button onclick="this.getRootNode().host.inputNumber(9)">9</button>
<button onclick="this.getRootNode().host.inputOperation('add')">+</button>
<button onclick="this.getRootNode().host.inputNumber(4)">4</button>
<button onclick="this.getRootNode().host.inputNumber(5)">5</button>
<button onclick="this.getRootNode().host.inputNumber(6)">6</button>
<button class="equals" onclick="this.getRootNode().host.calculateEquals()" style="grid-row: span 2;">=</button>
<button onclick="this.getRootNode().host.inputNumber(1)">1</button>
<button onclick="this.getRootNode().host.inputNumber(2)">2</button>
<button onclick="this.getRootNode().host.inputNumber(3)">3</button>
<button class="zero" onclick="this.getRootNode().host.inputNumber(0)">0</button>
<button onclick="this.getRootNode().host.inputNumber('.')">.</button>
</div>
</div>
`;
}
inputNumber(digit) {
if (typeof digit === 'string' && digit === '.') {
// Handle decimal point - for now just ignore or add to display logic
console.log('Decimal point not yet implemented');
return;
}
this.commComponent?.numberInputHandler({ digit: Number(digit) });
}
inputOperation(operation) {
this.commComponent?.operationHandler({ operation });
}
calculateEquals() {
this.commComponent?.equalsHandler();
}
clearCalculator() {
this.commComponent?.clearHandler();
}
}