# Calculator Upgrade v2.1.0 — Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Extend the Calculator widget with 5 new modes — Scientific, Unit Converter, Satisfactory, Factorio, Stationeers — using a tab-based architecture with mode registration pattern.
**Architecture:** Each mode lives in its own IIFE file that calls `Calculator.registerMode()`. The core `calculator.js` gains a `_modes` Map, tab-bar rendering, and `switchMode()` logic. The Shunting-Yard parser is extended with `^` (power) and `sqrt()` (function). All new files load between `calculator.js` and `timer.js` in newtab.html.
**Tech Stack:** Vanilla JS ES2020, CSS Custom Properties, chrome.storage.local via Store, i18n via t() helper
**Spec:** `docs/superpowers/specs/2026-04-16-calculator-upgrade-design.md`
---
### Task 1: Tab-System im Calculator Core
**Files:**
- Modify: `src/js/calculator.js` (全 Datei — Tab-System, registerMode, switchMode, Standard-Mode-Extraktion)
- Modify: `src/css/main.css:1284` (neue CSS-Klassen nach bestehenden Calculator-Styles)
**Kontext:** Aktuell rendert `Calculator.renderBody()` direkt das Standard-UI (Display + Buttons + History). Wir refactoren das zu einem Tab-System: `renderBody()` baut Tab-Bar + Mode-Container, dann delegiert an den aktiven Modus. Der Standard-Modus wird als interner Modus registriert. Externe Modi registrieren sich per `Calculator.registerMode()`.
- [ ] **Step 1: Neue Properties und registerMode() hinzufügen**
In `calculator.js`, nach `_keydownHandler: null,` (Zeile 19) folgende Properties ergänzen:
```javascript
_modes: new Map(),
_activeMode: 'standard',
_tabBarEl: null,
```
Neue Methode nach `_keydownHandler` Block:
```javascript
/**
* Modus registrieren (wird von externen Mode-Dateien aufgerufen)
* @param {string} name - Eindeutiger Modus-Name
* @param {Object} config - { label, shortName, titleKey, render(bodyEl), destroy() }
*/
registerMode(name, config) {
this._modes.set(name, config);
// Tab-Bar aktualisieren falls Widget bereits offen
if (this._tabBarEl) this._renderTabBar();
},
```
- [ ] **Step 2: Standard-Modus als internen Modus registrieren**
Am Ende der `init()` Methode (vor dem Schließen des Objekts), nach den Event-Listener-Registrierungen, den Standard-Modus registrieren:
```javascript
// Standard-Modus intern registrieren
this._modes.set('standard', {
label: '🔢',
shortName: 'Std',
titleKey: 'calculator.tab.standard',
render: (bodyEl) => this._renderStandardMode(bodyEl),
destroy: () => {
// Standard-Modus hat keinen speziellen Cleanup
this._displayExprEl = null;
this._displayResultEl = null;
}
});
```
- [ ] **Step 3: renderBody() refactoren — Tab-Bar + Mode-Container**
Die bestehende `renderBody()` Methode komplett ersetzen:
```javascript
/**
* Calculator-Body rendern: Tab-Bar + aktiver Modus
* @param {HTMLElement} bodyEl
*/
renderBody(bodyEl) {
bodyEl.textContent = '';
bodyEl.style.padding = '0';
bodyEl.style.display = 'flex';
bodyEl.style.flexDirection = 'column';
bodyEl.style.height = '100%';
// Tab-Bar
const tabBar = document.createElement('div');
tabBar.className = 'calc-tab-bar';
this._tabBarEl = tabBar;
this._renderTabBar();
// Mode-Body Container
const modeBody = document.createElement('div');
modeBody.className = 'calc-mode-body';
bodyEl.append(tabBar, modeBody);
// Aktiven Modus rendern
const mode = this._modes.get(this._activeMode);
if (mode) {
mode.render(modeBody);
}
},
```
- [ ] **Step 4: _renderTabBar() und _updateTabBar() erstellen**
```javascript
/**
* Tab-Bar mit Buttons aus _modes Map befüllen
*/
_renderTabBar() {
if (!this._tabBarEl) return;
// Alle bisherigen Tabs entfernen
while (this._tabBarEl.firstChild) {
this._tabBarEl.removeChild(this._tabBarEl.firstChild);
}
this._modes.forEach((config, name) => {
const tab = document.createElement('button');
tab.type = 'button';
tab.className = 'calc-tab' + (name === this._activeMode ? ' active' : '');
tab.dataset.mode = name;
const icon = document.createElement('span');
icon.className = 'calc-tab-icon';
icon.textContent = config.label;
const label = document.createElement('span');
label.className = 'calc-tab-label';
label.textContent = config.shortName;
tab.append(icon, label);
tab.addEventListener('click', () => this.switchMode(name));
this._tabBarEl.appendChild(tab);
});
},
/**
* Aktiven Tab visuell markieren (ohne Neuaufbau)
*/
_updateTabBar() {
if (!this._tabBarEl) return;
const tabs = this._tabBarEl.querySelectorAll('.calc-tab');
tabs.forEach(tab => {
tab.classList.toggle('active', tab.dataset.mode === this._activeMode);
});
},
```
- [ ] **Step 5: switchMode() erstellen**
```javascript
/**
* Modus wechseln
* @param {string} name - Ziel-Modus
*/
async switchMode(name) {
if (name === this._activeMode) return;
const mode = this._modes.get(name);
if (!mode) return;
// Alten Modus aufräumen
const oldMode = this._modes.get(this._activeMode);
if (oldMode && oldMode.destroy) oldMode.destroy();
this._activeMode = name;
// Mode-Body leeren und neu rendern
const entry = WidgetManager._widgets.get(this.WIDGET_ID);
if (!entry) return;
const modeBody = entry.el.querySelector('.calc-mode-body');
if (!modeBody) return;
modeBody.textContent = '';
mode.render(modeBody);
// Tab-UI aktualisieren
this._updateTabBar();
// Auto-Resize für komplexe Modi
const isComplex = name !== 'standard';
if (isComplex) {
const state = WidgetManager.getState(this.WIDGET_ID);
if (state) {
const newW = Math.max(state.width, 320);
const newH = Math.max(state.height, 480);
if (newW !== state.width || newH !== state.height) {
WidgetManager.resize(this.WIDGET_ID, newW, newH);
}
}
}
// Keyboard neu binden
this._unbindKeyboard();
if (name === 'standard' || name === 'scientific') {
if (entry) this._bindKeyboard(entry.el);
}
await this.save();
},
```
- [ ] **Step 6: _renderStandardMode() extrahieren**
Neue Methode, die den bisherigen `renderBody()` Inhalt enthält (Display + Buttons + History):
```javascript
/**
* Standard-Modus UI rendern
* @param {HTMLElement} bodyEl
*/
_renderStandardMode(bodyEl) {
bodyEl.style.padding = '8px';
bodyEl.style.display = 'flex';
bodyEl.style.flexDirection = 'column';
bodyEl.style.flex = '1';
bodyEl.style.overflow = 'hidden';
// Display
const display = document.createElement('div');
display.className = 'calc-display';
const exprEl = document.createElement('div');
exprEl.className = 'calc-expression';
this._displayExprEl = exprEl;
const resultEl = document.createElement('div');
resultEl.className = 'calc-result';
resultEl.textContent = '0';
this._displayResultEl = resultEl;
display.append(exprEl, resultEl);
// Buttons
const buttonsEl = this._createButtons();
// History
const historyEl = this._createHistoryPanel();
bodyEl.append(display, buttonsEl, historyEl);
// Aktuellen State anzeigen
this._updateDisplay();
},
```
- [ ] **Step 7: save() und load() um activeMode erweitern**
In `save()`, `calcData` um `activeMode` erweitern:
```javascript
const calcData = {
x: widgetState ? widgetState.x : 400,
y: widgetState ? widgetState.y : 120,
width: widgetState ? widgetState.width : 280,
height: widgetState ? widgetState.height : 400,
open: this._isOpen,
activeMode: this._activeMode,
history: this._history.slice(0, this.MAX_HISTORY)
};
```
In `load()`, activeMode wiederherstellen:
```javascript
async load() {
const data = await Store.get(this.STORAGE_KEY);
if (data && data.calculator) {
this._history = Array.isArray(data.calculator.history) ? data.calculator.history : [];
if (data.calculator.activeMode) {
this._activeMode = data.calculator.activeMode;
}
}
},
```
In `onClose()`, alten Modus aufräumen:
```javascript
async onClose() {
// Aktiven Modus aufräumen
const mode = this._modes.get(this._activeMode);
if (mode && mode.destroy) mode.destroy();
this._isOpen = false;
this._unbindKeyboard();
this._tabBarEl = null;
this._displayExprEl = null;
this._displayResultEl = null;
await this.save();
},
```
- [ ] **Step 8: CSS für Tab-Bar und Mode-Body**
In `src/css/main.css`, nach dem `.calc-history-item .calc-h-result` Block (Zeile 1283), vor den Timer-Styles einfügen:
```css
/* Calculator Tab System */
.calc-tab-bar {
display: flex;
background: rgba(0,0,0,0.2);
border-bottom: 1px solid var(--border);
overflow-x: auto;
scrollbar-width: none;
flex-shrink: 0;
}
.calc-tab-bar::-webkit-scrollbar {
display: none;
}
.calc-tab {
display: flex;
align-items: center;
gap: 3px;
padding: 6px 8px;
border: none;
border-bottom: 2px solid transparent;
background: none;
color: var(--text-muted);
font-size: 11px;
font-family: 'Rajdhani', sans-serif;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.calc-tab:hover {
color: var(--text-secondary);
}
.calc-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 600;
}
.calc-tab-icon {
font-size: 12px;
}
.calc-tab-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.calc-mode-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
```
- [ ] **Step 9: i18n-Key für Standard-Tab**
In `src/js/i18n.js`, nach `'calculator.error'` in beiden Sprachen:
DE:
```javascript
'calculator.tab.standard': 'Standard',
```
EN:
```javascript
'calculator.tab.standard': 'Standard',
```
- [ ] **Step 10: Testen**
1. Extension in Chrome laden
2. Calculator öffnen → Tab-Bar mit einem Tab "🔢 Std" sichtbar
3. Calculator schließen und wieder öffnen → State bleibt erhalten
4. Standard-Rechner funktioniert wie vorher (Buttons, History, Keyboard)
- [ ] **Step 11: Commit**
```bash
git add src/js/calculator.js src/css/main.css src/js/i18n.js
git commit -m "feat(calculator): Tab-System mit registerMode() und switchMode()"
```
---
### Task 2: Parser-Erweiterung — ^ und sqrt
**Files:**
- Modify: `src/js/calculator.js` — `_evaluate()`, `_tokenize()`, `_parseExpression()` innere Funktionen
**Kontext:** Der Shunting-Yard-Parser kennt aktuell nur `+`, `-`, `*`, `/`, `%`. Wir fügen `^` (Potenz, rechts-assoziativ) und `sqrt` (unäre Funktion) hinzu. Die neue Hierarchie: `parseExpr(+,-)` → `parseTerm(*,/,%)` → `parsePower(^)` → `parseFactor(number | parens | func)`.
- [ ] **Step 1: Sanitizer erweitern**
In `_evaluate()`, die Sanitizer-Regex erweitern um `^` und Buchstaben (für `sqrt`):
```javascript
_evaluate(expr) {
try {
// Nur erlaubte Zeichen (inkl. ^ und sqrt-Buchstaben)
const sanitized = expr.replace(/[^0-9+\-*/.%()^a-z]/g, '');
if (!sanitized) return null;
const tokens = this._tokenize(sanitized);
if (!tokens) return null;
return this._parseExpression(tokens);
} catch {
return null;
}
},
```
- [ ] **Step 2: Tokenizer um ^ und sqrt erweitern**
In `_tokenize()`, nach dem Operator-Block (`if (/[+\-*/%]/.test(ch))`) und vor dem Klammern-Block, `^` als Operator erkennen. Vor dem Zahlen-Block `sqrt` als Funktion erkennen:
```javascript
_tokenize(expr) {
const tokens = [];
let i = 0;
while (i < expr.length) {
const ch = expr[i];
// Funktion: sqrt
if (expr.substring(i, i + 4) === 'sqrt') {
tokens.push({ type: 'func', value: 'sqrt' });
i += 4;
continue;
}
// Zahl (inkl. Dezimal)
if (/[0-9.]/.test(ch)) {
let num = '';
while (i < expr.length && /[0-9.]/.test(expr[i])) {
num += expr[i];
i++;
}
const parsed = parseFloat(num);
if (isNaN(parsed)) return null;
tokens.push({ type: 'number', value: parsed });
continue;
}
// Potenz-Operator
if (ch === '^') {
tokens.push({ type: 'op', value: '^' });
i++;
continue;
}
// Operator
if (/[+\-*/%]/.test(ch)) {
// Negativer Vorzeichen-Check: am Anfang oder nach Operator/oeffnender Klammer
if (ch === '-') {
const prev = tokens[tokens.length - 1];
if (!prev || prev.type === 'op' || (prev.type === 'paren' && prev.value === '(')) {
let num = '-';
i++;
while (i < expr.length && /[0-9.]/.test(expr[i])) {
num += expr[i];
i++;
}
if (num === '-') return null;
const parsed = parseFloat(num);
if (isNaN(parsed)) return null;
tokens.push({ type: 'number', value: parsed });
continue;
}
}
tokens.push({ type: 'op', value: ch });
i++;
continue;
}
// Klammern
if (ch === '(' || ch === ')') {
tokens.push({ type: 'paren', value: ch });
i++;
continue;
}
// Unbekannte Buchstaben überspringen (können Reste von Funktionsnamen sein)
if (/[a-z]/.test(ch)) {
return null;
}
// Unbekanntes Zeichen
return null;
}
return tokens;
},
```
- [ ] **Step 3: Parser um parsePower() und Funktions-Support erweitern**
Die `_parseExpression()` Methode komplett ersetzen. `parseTerm()` ruft jetzt `parsePower()` statt `parseFactor()` auf. `parsePower()` ist rechts-assoziativ. `parseFactor()` prüft auf Funktionen:
```javascript
_parseExpression(tokens) {
let pos = 0;
function peek() { return tokens[pos]; }
function consume() { return tokens[pos++]; }
// Expression: Term (('+' | '-') Term)*
function parseExpr() {
let left = parseTerm();
if (left === null) return null;
while (pos < tokens.length) {
const tk = peek();
if (!tk || tk.type !== 'op' || (tk.value !== '+' && tk.value !== '-')) break;
consume();
const right = parseTerm();
if (right === null) return null;
left = tk.value === '+' ? left + right : left - right;
}
return left;
}
// Term: Power (('*' | '/' | '%') Power)*
function parseTerm() {
let left = parsePower();
if (left === null) return null;
while (pos < tokens.length) {
const tk = peek();
if (!tk || tk.type !== 'op' || (tk.value !== '*' && tk.value !== '/' && tk.value !== '%')) break;
consume();
const right = parsePower();
if (right === null) return null;
if (tk.value === '*') {
left = left * right;
} else if (tk.value === '/') {
if (right === 0) return null;
left = left / right;
} else {
left = left % right;
}
}
return left;
}
// Power: Factor ('^' Power)? — rechts-assoziativ durch Rekursion
function parsePower() {
let base = parseFactor();
if (base === null) return null;
const tk = peek();
if (tk && tk.type === 'op' && tk.value === '^') {
consume();
const exp = parsePower(); // Rechts-assoziativ!
if (exp === null) return null;
return Math.pow(base, exp);
}
return base;
}
// Factor: func '(' Expression ')' | Number | '(' Expression ')'
function parseFactor() {
const tk = peek();
if (!tk) return null;
// Funktion: sqrt(...)
if (tk.type === 'func') {
const funcName = tk.value;
consume();
// Erwarte öffnende Klammer
const open = peek();
if (!open || open.type !== 'paren' || open.value !== '(') return null;
consume();
const val = parseExpr();
if (val === null) return null;
const close = peek();
if (close && close.type === 'paren' && close.value === ')') {
consume();
}
if (funcName === 'sqrt') {
if (val < 0) return null; // Keine negativen Wurzeln
return Math.sqrt(val);
}
return null;
}
if (tk.type === 'number') {
consume();
return tk.value;
}
if (tk.type === 'paren' && tk.value === '(') {
consume();
const val = parseExpr();
if (val === null) return null;
const closing = peek();
if (closing && closing.type === 'paren' && closing.value === ')') {
consume();
}
return val;
}
return null;
}
const result = parseExpr();
// Alle Tokens muessen verbraucht sein
if (pos < tokens.length) return null;
if (result === null || !isFinite(result)) return null;
return result;
},
```
- [ ] **Step 4: _handleKey() um ^ erweitern**
Im `default`-case der `_handleKey()` Methode, nach dem Ziffern-Check, `^` als Operator behandeln. In den Operator-Case (die bestehende `case '%': case '+': ...` Kette), `'^'` hinzufügen:
```javascript
case '%':
case '+':
case '-':
case '*':
case '/':
case '^': {
// Wenn gerade ein Ergebnis angezeigt wird, damit weiterrechnen
if (this._lastResult && this._currentExpr === '') {
this._currentExpr = this._lastResult;
this._lastResult = '';
}
// Doppelte Operatoren verhindern (letzten ersetzen)
const last = this._currentExpr.slice(-1);
if (/[+\-*/%^]/.test(last)) {
this._currentExpr = this._currentExpr.slice(0, -1) + key;
} else {
this._currentExpr += key;
}
break;
}
```
- [ ] **Step 5: _formatExpression() um ^ erweitern**
```javascript
_formatExpression(expr) {
return expr
.replace(/\*/g, '\u00D7')
.replace(/\//g, '\u00F7')
.replace(/sqrt\(/g, '√(');
},
```
- [ ] **Step 6: Testen**
1. Calculator öffnen
2. `2^10` eingeben → Ergebnis: 1024
3. `2^3^2` eingeben → Ergebnis: 512 (rechts-assoziativ)
4. In Browser-Console: Calculator._evaluate('sqrt(144)') → 12
5. `3+sqrt(16)` → 7
6. `sqrt(-4)` → Fehler
- [ ] **Step 7: Commit**
```bash
git add src/js/calculator.js
git commit -m "feat(calculator): Parser um ^ (Potenz) und sqrt() erweitern"
```
---
### Task 3: Scientific-Modus
**Files:**
- Create: `src/js/calc-scientific.js`
- Modify: `newtab.html:509` (Script-Tag nach calculator.js einfügen)
- Modify: `src/js/i18n.js` (neue Keys)
- Modify: `src/css/main.css` (Scientific-spezifische Styles)
**Kontext:** Der Scientific-Modus erweitert den Standard-Rechner um 6 wissenschaftliche Buttons (√, x², xⁿ, π, e, ±) und einen Formel-Helfer mit 6 vorgefertigten Formeln. Er nutzt den gleichen `_handleKey()`/`_calculate()` Flow des Cores.
- [ ] **Step 1: calc-scientific.js erstellen**
```javascript
/* =============================================
HELLION NEWTAB — calc-scientific.js
Scientific-Modus für Calculator Widget
============================================= */
(function() {
'use strict';
/** Formel-Definitionen */
const FORMULAS = [
{
key: 'circle_area',
fields: [{ key: 'radius', default: '' }],
calc: (vals) => Math.PI * vals.radius * vals.radius
},
{
key: 'circle_circumference',
fields: [{ key: 'radius', default: '' }],
calc: (vals) => 2 * Math.PI * vals.radius
},
{
key: 'celsius_to_fahrenheit',
fields: [{ key: 'temp', default: '' }],
calc: (vals) => (vals.temp * 9 / 5) + 32
},
{
key: 'fahrenheit_to_celsius',
fields: [{ key: 'temp', default: '' }],
calc: (vals) => (vals.temp - 32) * 5 / 9
},
{
key: 'pythagoras',
fields: [{ key: 'a', default: '' }, { key: 'b', default: '' }],
calc: (vals) => Math.sqrt(vals.a * vals.a + vals.b * vals.b)
},
{
key: 'percentage',
fields: [{ key: 'value', default: '' }, { key: 'percent', default: '' }],
calc: (vals) => vals.value * vals.percent / 100
}
];
/** Keyboard-Handler Referenz für Cleanup */
let _keyboardExtHandler = null;
/**
* Scientific-Buttons rendern
* @param {HTMLElement} container
*/
function renderSciButtons(container) {
const grid = document.createElement('div');
grid.className = 'calc-buttons calc-sci-buttons';
const buttons = [
['√', 'sqrt', 'operator'],
['x²', 'square', 'operator'],
['xⁿ', 'power', 'operator'],
['π', 'pi', 'operator'],
['e', 'euler', 'operator'],
['±', 'negate', 'operator']
];
buttons.forEach(([label, value, cls]) => {
const btn = document.createElement('button');
btn.className = 'calc-btn' + (cls ? ' ' + cls : '');
btn.textContent = label;
btn.type = 'button';
btn.addEventListener('click', () => handleSciKey(value));
grid.appendChild(btn);
});
container.appendChild(grid);
}
/**
* Scientific-Taste verarbeiten
* @param {string} key
*/
function handleSciKey(key) {
switch (key) {
case 'sqrt':
Calculator._currentExpr += 'sqrt(';
Calculator._updateDisplay();
break;
case 'square':
Calculator._currentExpr += '^2';
Calculator._updateDisplay();
break;
case 'power':
Calculator._handleKey('^');
break;
case 'pi':
Calculator._currentExpr += '3.14159265359';
Calculator._updateDisplay();
break;
case 'euler':
Calculator._currentExpr += '2.71828182846';
Calculator._updateDisplay();
break;
case 'negate':
handleNegate();
break;
}
}
/**
* Vorzeichen-Wechsel: letzten numerischen Wert negieren
*/
function handleNegate() {
const expr = Calculator._currentExpr;
if (!expr && Calculator._lastResult) {
// Ergebnis negieren
const num = parseFloat(Calculator._lastResult);
if (!isNaN(num)) {
Calculator._currentExpr = String(-num);
Calculator._lastResult = '';
Calculator._updateDisplay();
}
return;
}
// Letzte Zahl in der Expression finden und negieren
const match = expr.match(/(-?\d+\.?\d*)$/);
if (match) {
const num = parseFloat(match[1]);
const negated = String(-num);
Calculator._currentExpr = expr.slice(0, expr.length - match[1].length) + negated;
Calculator._updateDisplay();
}
}
/**
* Formel-Helfer UI rendern
* @param {HTMLElement} container
*/
function renderFormulaHelper(container) {
const wrapper = document.createElement('div');
wrapper.className = 'calc-formula-helper';
const label = document.createElement('div');
label.className = 'calc-formula-label';
label.textContent = t('calculator.sci.formulas');
const select = document.createElement('select');
select.className = 'calc-formula-select';
// Leer-Option
const emptyOpt = document.createElement('option');
emptyOpt.value = '';
emptyOpt.textContent = t('calculator.sci.select_formula');
select.appendChild(emptyOpt);
FORMULAS.forEach((f, i) => {
const opt = document.createElement('option');
opt.value = String(i);
opt.textContent = t('calculator.sci.formula.' + f.key);
select.appendChild(opt);
});
const inputsContainer = document.createElement('div');
inputsContainer.className = 'calc-formula-inputs';
const resultContainer = document.createElement('div');
resultContainer.className = 'calc-formula-result';
select.addEventListener('change', () => {
// Inputs leeren
while (inputsContainer.firstChild) {
inputsContainer.removeChild(inputsContainer.firstChild);
}
resultContainer.textContent = '';
const idx = parseInt(select.value, 10);
if (isNaN(idx)) return;
const formula = FORMULAS[idx];
renderFormulaInputs(formula, inputsContainer, resultContainer);
});
wrapper.append(label, select, inputsContainer, resultContainer);
container.appendChild(wrapper);
}
/**
* Formel-Eingabefelder und Live-Ergebnis rendern
* @param {Object} formula
* @param {HTMLElement} inputsEl
* @param {HTMLElement} resultEl
*/
function renderFormulaInputs(formula, inputsEl, resultEl) {
const inputs = {};
formula.fields.forEach(field => {
const row = document.createElement('div');
row.className = 'calc-formula-row';
const lbl = document.createElement('label');
lbl.textContent = t('calculator.sci.field.' + field.key);
const inp = document.createElement('input');
inp.type = 'number';
inp.className = 'calc-formula-input';
inp.placeholder = '0';
inp.step = 'any';
inputs[field.key] = inp;
inp.addEventListener('input', () => {
recalcFormula(formula, inputs, resultEl);
});
row.append(lbl, inp);
inputsEl.appendChild(row);
});
}
/**
* Formel-Ergebnis live berechnen
* @param {Object} formula
* @param {Object} inputs - { key: HTMLInputElement }
* @param {HTMLElement} resultEl
*/
function recalcFormula(formula, inputs, resultEl) {
const vals = {};
let allValid = true;
for (const field of formula.fields) {
const v = parseFloat(inputs[field.key].value);
if (isNaN(v)) { allValid = false; break; }
vals[field.key] = v;
}
if (!allValid) {
resultEl.textContent = '';
return;
}
const result = formula.calc(vals);
if (result === null || !isFinite(result)) {
resultEl.textContent = t('calculator.error');
return;
}
resultEl.textContent = '= ' + Calculator._formatResult(result);
}
/**
* Keyboard-Erweiterung für Scientific-Modus
* @param {HTMLElement} widgetEl
*/
function bindSciKeyboard(widgetEl) {
_keyboardExtHandler = (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.target.contentEditable === 'true') return;
if (e.key === 'p') {
handleSciKey('pi');
e.preventDefault();
e.stopPropagation();
} else if (e.key === '^') {
handleSciKey('power');
e.preventDefault();
e.stopPropagation();
}
};
widgetEl.addEventListener('keydown', _keyboardExtHandler);
}
// Modus registrieren
Calculator.registerMode('scientific', {
label: '📐',
shortName: 'Sci',
titleKey: 'calculator.tab.scientific',
render(bodyEl) {
bodyEl.style.padding = '8px';
bodyEl.style.display = 'flex';
bodyEl.style.flexDirection = 'column';
bodyEl.style.flex = '1';
bodyEl.style.overflow = 'hidden';
// Display (gemeinsam mit Standard)
const display = document.createElement('div');
display.className = 'calc-display';
const exprEl = document.createElement('div');
exprEl.className = 'calc-expression';
Calculator._displayExprEl = exprEl;
const resultEl = document.createElement('div');
resultEl.className = 'calc-result';
resultEl.textContent = Calculator._lastResult || '0';
Calculator._displayResultEl = resultEl;
display.append(exprEl, resultEl);
// Scientific-Buttons (2x3 Grid)
const sciSection = document.createElement('div');
renderSciButtons(sciSection);
// Standard-Buttons (4x5 Grid)
const stdButtons = Calculator._createButtons();
// History
const historyEl = Calculator._createHistoryPanel();
// Formel-Helfer
const formulaSection = document.createElement('div');
renderFormulaHelper(formulaSection);
bodyEl.append(display, sciSection, stdButtons, historyEl, formulaSection);
Calculator._updateDisplay();
// Keyboard erweitern
const entry = WidgetManager._widgets.get(Calculator.WIDGET_ID);
if (entry) bindSciKeyboard(entry.el);
},
destroy() {
// Keyboard-Extension entfernen
if (_keyboardExtHandler) {
const entry = WidgetManager._widgets.get(Calculator.WIDGET_ID);
if (entry) {
entry.el.removeEventListener('keydown', _keyboardExtHandler);
}
_keyboardExtHandler = null;
}
Calculator._displayExprEl = null;
Calculator._displayResultEl = null;
}
});
})();
```
- [ ] **Step 2: Script-Tag in newtab.html einfügen**
Nach Zeile 509 (``):
```html
```
- [ ] **Step 3: CSS für Scientific-Modus**
In `src/css/main.css`, nach den Tab-System Styles:
```css
/* Calculator Scientific Mode */
.calc-sci-buttons {
grid-template-columns: repeat(3, 1fr);
margin-bottom: 4px;
}
.calc-formula-helper {
border-top: 1px solid var(--border);
padding-top: 8px;
margin-top: 4px;
}
.calc-formula-label {
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.calc-formula-select {
width: 100%;
padding: 4px 6px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 12px;
font-family: 'Rajdhani', sans-serif;
margin-bottom: 6px;
}
.calc-formula-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.calc-formula-row label {
font-size: 11px;
color: var(--text-secondary);
min-width: 50px;
}
.calc-formula-input {
flex: 1;
padding: 4px 6px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 12px;
font-family: 'Rajdhani', sans-serif;
}
.calc-formula-result {
font-size: 14px;
color: var(--accent);
font-weight: 600;
font-family: 'Rajdhani', monospace;
text-align: right;
min-height: 20px;
padding: 2px 0;
}
```
- [ ] **Step 4: i18n-Keys für Scientific**
In `src/js/i18n.js`, DE-Block nach `'calculator.tab.standard'`:
```javascript
'calculator.tab.scientific': 'Wissenschaftlich',
'calculator.sci.formulas': 'Formel-Helfer',
'calculator.sci.select_formula': 'Formel wählen…',
'calculator.sci.formula.circle_area': 'Kreisfläche (π×r²)',
'calculator.sci.formula.circle_circumference':'Kreisumfang (2πr)',
'calculator.sci.formula.celsius_to_fahrenheit':'°C → °F',
'calculator.sci.formula.fahrenheit_to_celsius':'°F → °C',
'calculator.sci.formula.pythagoras': 'Pythagoras (√(a²+b²))',
'calculator.sci.formula.percentage': 'Prozentwert',
'calculator.sci.field.radius': 'Radius',
'calculator.sci.field.temp': 'Temperatur',
'calculator.sci.field.a': 'Seite a',
'calculator.sci.field.b': 'Seite b',
'calculator.sci.field.value': 'Wert',
'calculator.sci.field.percent': 'Prozent',
```
EN-Block nach `'calculator.tab.standard'`:
```javascript
'calculator.tab.scientific': 'Scientific',
'calculator.sci.formulas': 'Formula Helper',
'calculator.sci.select_formula': 'Choose formula…',
'calculator.sci.formula.circle_area': 'Circle Area (π×r²)',
'calculator.sci.formula.circle_circumference':'Circle Circumference (2πr)',
'calculator.sci.formula.celsius_to_fahrenheit':'°C → °F',
'calculator.sci.formula.fahrenheit_to_celsius':'°F → °C',
'calculator.sci.formula.pythagoras': 'Pythagoras (√(a²+b²))',
'calculator.sci.formula.percentage': 'Percentage',
'calculator.sci.field.radius': 'Radius',
'calculator.sci.field.temp': 'Temperature',
'calculator.sci.field.a': 'Side a',
'calculator.sci.field.b': 'Side b',
'calculator.sci.field.value': 'Value',
'calculator.sci.field.percent': 'Percent',
```
- [ ] **Step 5: Testen**
1. Calculator öffnen → 2 Tabs sichtbar (Std, Sci)
2. Sci-Tab klicken → 6 Scientific-Buttons + Standard-Grid + Formel-Helfer
3. √ klicken → `sqrt(` im Display, 9 eingeben, `)` eingeben, = → 3
4. π klicken → 3.14159265359 im Display
5. Formel-Dropdown "Kreisfläche" wählen → Radius-Feld, r=5 → = 78.5398...
6. `p`-Taste → Pi einfügen
7. `^`-Taste → Potenz-Operator
- [ ] **Step 6: Commit**
```bash
git add src/js/calc-scientific.js newtab.html src/css/main.css src/js/i18n.js
git commit -m "feat(calculator): Scientific-Modus mit Formel-Helfer"
```
---
### Task 4: Unit-Converter
**Files:**
- Create: `src/js/calc-converter.js`
- Modify: `newtab.html` (Script-Tag nach calc-scientific.js)
- Modify: `src/js/i18n.js` (neue Keys)
- Modify: `src/css/main.css` (Converter-spezifische Styles)
**Kontext:** 6 Kategorien (Länge, Gewicht, Temperatur, Volumen, Geschwindigkeit, Fläche) mit toBase/fromBase Pattern. Temperatur als Spezialfall. Live-Update bei Eingabe, Swap-Button, Schnellreferenz.
- [ ] **Step 1: calc-converter.js erstellen**
```javascript
/* =============================================
HELLION NEWTAB — calc-converter.js
Unit-Converter Modus für Calculator Widget
============================================= */
(function() {
'use strict';
// ---- UNIT DEFINITIONS ----
const CATEGORIES = {
length: {
titleKey: 'calculator.conv.cat.length',
baseUnit: 'm',
units: {
mm: { toBase: v => v / 1000, fromBase: v => v * 1000 },
cm: { toBase: v => v / 100, fromBase: v => v * 100 },
m: { toBase: v => v, fromBase: v => v },
km: { toBase: v => v * 1000, fromBase: v => v / 1000 },
in: { toBase: v => v * 0.0254, fromBase: v => v / 0.0254 },
ft: { toBase: v => v * 0.3048, fromBase: v => v / 0.3048 },
yd: { toBase: v => v * 0.9144, fromBase: v => v / 0.9144 },
mi: { toBase: v => v * 1609.344, fromBase: v => v / 1609.344 }
}
},
weight: {
titleKey: 'calculator.conv.cat.weight',
baseUnit: 'g',
units: {
mg: { toBase: v => v / 1000, fromBase: v => v * 1000 },
g: { toBase: v => v, fromBase: v => v },
kg: { toBase: v => v * 1000, fromBase: v => v / 1000 },
t: { toBase: v => v * 1000000, fromBase: v => v / 1000000 },
oz: { toBase: v => v * 28.3495, fromBase: v => v / 28.3495 },
lb: { toBase: v => v * 453.592, fromBase: v => v / 453.592 }
}
},
temperature: {
titleKey: 'calculator.conv.cat.temperature',
baseUnit: null, // Spezialfall
units: { '\u00B0C': null, '\u00B0F': null, 'K': null },
convert(value, from, to) {
if (from === to) return value;
const key = from + '_' + to;
const conversions = {
'\u00B0C_\u00B0F': v => (v * 9 / 5) + 32,
'\u00B0C_K': v => v + 273.15,
'\u00B0F_\u00B0C': v => (v - 32) * 5 / 9,
'\u00B0F_K': v => (v - 32) * 5 / 9 + 273.15,
'K_\u00B0C': v => v - 273.15,
'K_\u00B0F': v => (v - 273.15) * 9 / 5 + 32
};
const fn = conversions[key];
return fn ? fn(value) : null;
}
},
volume: {
titleKey: 'calculator.conv.cat.volume',
baseUnit: 'ml',
units: {
ml: { toBase: v => v, fromBase: v => v },
L: { toBase: v => v * 1000, fromBase: v => v / 1000 },
'm\u00B3':{ toBase: v => v * 1000000, fromBase: v => v / 1000000 },
'gal(US)':{ toBase: v => v * 3785.41, fromBase: v => v / 3785.41 },
'gal(UK)':{ toBase: v => v * 4546.09, fromBase: v => v / 4546.09 },
'ft\u00B3':{ toBase: v => v * 28316.8, fromBase: v => v / 28316.8 }
}
},
speed: {
titleKey: 'calculator.conv.cat.speed',
baseUnit: 'm/s',
units: {
'm/s': { toBase: v => v, fromBase: v => v },
'km/h': { toBase: v => v / 3.6, fromBase: v => v * 3.6 },
'mph': { toBase: v => v * 0.44704, fromBase: v => v / 0.44704 },
'kn': { toBase: v => v * 0.514444, fromBase: v => v / 0.514444 }
}
},
area: {
titleKey: 'calculator.conv.cat.area',
baseUnit: 'm\u00B2',
units: {
'mm\u00B2': { toBase: v => v / 1000000, fromBase: v => v * 1000000 },
'cm\u00B2': { toBase: v => v / 10000, fromBase: v => v * 10000 },
'm\u00B2': { toBase: v => v, fromBase: v => v },
'km\u00B2': { toBase: v => v * 1000000, fromBase: v => v / 1000000 },
'ha': { toBase: v => v * 10000, fromBase: v => v / 10000 },
'acre': { toBase: v => v * 4046.86, fromBase: v => v / 4046.86 },
'ft\u00B2': { toBase: v => v * 0.092903, fromBase: v => v / 0.092903 },
'in\u00B2': { toBase: v => v * 0.00064516, fromBase: v => v / 0.00064516 }
}
}
};
const CATEGORY_ORDER = ['length', 'weight', 'temperature', 'volume', 'speed', 'area'];
// ---- STATE ----
let _currentCategory = 'length';
let _fromUnit = 'cm';
let _toUnit = 'in';
let _fromInput = null;
let _toInput = null;
let _refEl = null;
// ---- CONVERSION ----
/**
* Wert konvertieren
* @param {number} value
* @param {string} from - Quelleinheit
* @param {string} to - Zieleinheit
* @returns {number|null}
*/
function convert(value, from, to) {
const cat = CATEGORIES[_currentCategory];
if (!cat) return null;
if (cat.convert) {
return cat.convert(value, from, to);
}
const fromDef = cat.units[from];
const toDef = cat.units[to];
if (!fromDef || !toDef) return null;
const base = fromDef.toBase(value);
return toDef.fromBase(base);
}
/**
* Live-Berechnung auslösen
*/
function recalc() {
if (!_fromInput || !_toInput) return;
const val = parseFloat(_fromInput.value);
if (isNaN(val)) {
_toInput.value = '';
updateReference();
return;
}
const result = convert(val, _fromUnit, _toUnit);
if (result === null) {
_toInput.value = '';
} else {
_toInput.value = Calculator._formatResult(result);
}
updateReference();
}
/**
* Schnellreferenz aktualisieren
*/
function updateReference() {
if (!_refEl) return;
_refEl.textContent = '';
const r1 = convert(1, _fromUnit, _toUnit);
const r2 = convert(1, _toUnit, _fromUnit);
if (r1 !== null) {
const line1 = document.createElement('div');
line1.textContent = '1 ' + _fromUnit + ' = ' + Calculator._formatResult(r1) + ' ' + _toUnit;
_refEl.appendChild(line1);
}
if (r2 !== null) {
const line2 = document.createElement('div');
line2.textContent = '1 ' + _toUnit + ' = ' + Calculator._formatResult(r2) + ' ' + _fromUnit;
_refEl.appendChild(line2);
}
}
/**
* Unit-Selects für aktuelle Kategorie befüllen
* @param {HTMLSelectElement} selectEl
* @param {string} selectedUnit
*/
function populateUnitSelect(selectEl, selectedUnit) {
while (selectEl.firstChild) {
selectEl.removeChild(selectEl.firstChild);
}
const cat = CATEGORIES[_currentCategory];
if (!cat) return;
const units = Object.keys(cat.units);
units.forEach(unit => {
const opt = document.createElement('option');
opt.value = unit;
opt.textContent = unit;
if (unit === selectedUnit) opt.selected = true;
selectEl.appendChild(opt);
});
}
/**
* Kategorie-spezifische Defaults für Units
* @param {string} catKey
* @returns {{ from: string, to: string }}
*/
function getDefaultUnits(catKey) {
const defaults = {
length: { from: 'cm', to: 'in' },
weight: { from: 'kg', to: 'lb' },
temperature: { from: '\u00B0C', to: '\u00B0F' },
volume: { from: 'L', to: 'gal(US)' },
speed: { from: 'km/h', to: 'mph' },
area: { from: 'm\u00B2', to: 'ft\u00B2' }
};
return defaults[catKey] || { from: Object.keys(CATEGORIES[catKey].units)[0], to: Object.keys(CATEGORIES[catKey].units)[1] };
}
/**
* State aus Storage laden
*/
async function loadState() {
const data = await Store.get(Calculator.STORAGE_KEY);
if (data && data.calculator && data.calculator.converter) {
const s = data.calculator.converter;
if (s.lastCategory && CATEGORIES[s.lastCategory]) _currentCategory = s.lastCategory;
if (s.fromUnit) _fromUnit = s.fromUnit;
if (s.toUnit) _toUnit = s.toUnit;
}
}
/**
* State in Storage speichern
*/
async function saveState() {
const data = await Store.get(Calculator.STORAGE_KEY) || {};
if (!data.calculator) data.calculator = {};
data.calculator.converter = {
lastCategory: _currentCategory,
fromUnit: _fromUnit,
toUnit: _toUnit
};
await Store.set(Calculator.STORAGE_KEY, data);
}
// ---- REGISTRATION ----
Calculator.registerMode('converter', {
label: '⚖️',
shortName: 'Unit',
titleKey: 'calculator.tab.converter',
render(bodyEl) {
bodyEl.style.padding = '8px';
bodyEl.style.display = 'flex';
bodyEl.style.flexDirection = 'column';
bodyEl.style.gap = '8px';
loadState().then(() => {
buildUI(bodyEl);
});
},
destroy() {
_fromInput = null;
_toInput = null;
_refEl = null;
saveState();
}
});
/**
* Converter-UI aufbauen
* @param {HTMLElement} bodyEl
*/
function buildUI(bodyEl) {
// Kategorie-Dropdown
const catSelect = document.createElement('select');
catSelect.className = 'calc-conv-select';
CATEGORY_ORDER.forEach(catKey => {
const opt = document.createElement('option');
opt.value = catKey;
opt.textContent = t(CATEGORIES[catKey].titleKey);
if (catKey === _currentCategory) opt.selected = true;
catSelect.appendChild(opt);
});
// From-Zeile
const fromRow = document.createElement('div');
fromRow.className = 'calc-conv-row';
_fromInput = document.createElement('input');
_fromInput.type = 'number';
_fromInput.className = 'calc-conv-input';
_fromInput.placeholder = '0';
_fromInput.step = 'any';
const fromSelect = document.createElement('select');
fromSelect.className = 'calc-conv-unit';
populateUnitSelect(fromSelect, _fromUnit);
fromRow.append(_fromInput, fromSelect);
// Swap-Button
const swapBtn = document.createElement('button');
swapBtn.type = 'button';
swapBtn.className = 'calc-conv-swap';
swapBtn.textContent = '\u21C5';
swapBtn.title = t('calculator.conv.swap');
// To-Zeile
const toRow = document.createElement('div');
toRow.className = 'calc-conv-row';
_toInput = document.createElement('input');
_toInput.type = 'text';
_toInput.className = 'calc-conv-input';
_toInput.readOnly = true;
_toInput.placeholder = '0';
const toSelect = document.createElement('select');
toSelect.className = 'calc-conv-unit';
populateUnitSelect(toSelect, _toUnit);
toRow.append(_toInput, toSelect);
// Schnellreferenz
_refEl = document.createElement('div');
_refEl.className = 'calc-conv-ref';
// Event Listeners
_fromInput.addEventListener('input', () => recalc());
fromSelect.addEventListener('change', () => {
_fromUnit = fromSelect.value;
recalc();
saveState();
});
toSelect.addEventListener('change', () => {
_toUnit = toSelect.value;
recalc();
saveState();
});
swapBtn.addEventListener('click', () => {
const tmpUnit = _fromUnit;
_fromUnit = _toUnit;
_toUnit = tmpUnit;
populateUnitSelect(fromSelect, _fromUnit);
populateUnitSelect(toSelect, _toUnit);
// Swap-Wert übernehmen
const currentVal = _toInput.value;
if (currentVal) {
_fromInput.value = currentVal;
}
recalc();
saveState();
});
catSelect.addEventListener('change', () => {
_currentCategory = catSelect.value;
const defaults = getDefaultUnits(_currentCategory);
_fromUnit = defaults.from;
_toUnit = defaults.to;
populateUnitSelect(fromSelect, _fromUnit);
populateUnitSelect(toSelect, _toUnit);
_fromInput.value = '';
_toInput.value = '';
updateReference();
saveState();
});
bodyEl.append(catSelect, fromRow, swapBtn, toRow, _refEl);
// Initiale Referenz anzeigen
updateReference();
}
})();
```
- [ ] **Step 2: Script-Tag in newtab.html einfügen**
Nach dem `calc-scientific.js` Script-Tag:
```html
```
- [ ] **Step 3: CSS für Converter**
In `src/css/main.css`, nach den Scientific-Styles:
```css
/* Calculator Converter Mode */
.calc-conv-select {
width: 100%;
padding: 6px 8px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13px;
font-family: 'Rajdhani', sans-serif;
}
.calc-conv-row {
display: flex;
gap: 6px;
}
.calc-conv-input {
flex: 1;
padding: 8px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 16px;
font-family: 'Rajdhani', monospace;
}
.calc-conv-input:read-only {
color: var(--accent);
font-weight: 600;
}
.calc-conv-unit {
width: 80px;
padding: 4px 6px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 12px;
font-family: 'Rajdhani', sans-serif;
}
.calc-conv-swap {
align-self: center;
width: 36px;
height: 28px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--accent);
font-size: 16px;
cursor: pointer;
transition: all 0.15s;
}
.calc-conv-swap:hover {
background: var(--accent-dim);
}
.calc-conv-ref {
font-size: 11px;
color: var(--text-muted);
padding: 4px 0;
border-top: 1px solid var(--border);
}
```
- [ ] **Step 4: i18n-Keys für Converter**
DE-Block:
```javascript
'calculator.tab.converter': 'Umrechner',
'calculator.conv.swap': 'Einheiten tauschen',
'calculator.conv.cat.length': 'Länge',
'calculator.conv.cat.weight': 'Gewicht',
'calculator.conv.cat.temperature': 'Temperatur',
'calculator.conv.cat.volume': 'Volumen',
'calculator.conv.cat.speed': 'Geschwindigkeit',
'calculator.conv.cat.area': 'Fläche',
```
EN-Block:
```javascript
'calculator.tab.converter': 'Converter',
'calculator.conv.swap': 'Swap units',
'calculator.conv.cat.length': 'Length',
'calculator.conv.cat.weight': 'Weight',
'calculator.conv.cat.temperature': 'Temperature',
'calculator.conv.cat.volume': 'Volume',
'calculator.conv.cat.speed': 'Speed',
'calculator.conv.cat.area': 'Area',
```
- [ ] **Step 5: Testen**
1. Calculator öffnen → 3 Tabs sichtbar (Std, Sci, Unit)
2. Unit-Tab klicken → Kategorie-Dropdown, Eingabe-Feld, Ergebnis
3. 100 cm eingeben → 39.3701 in
4. Swap-Button → cm und in tauschen, Wert übernehmen
5. Kategorie zu Temperatur wechseln → °C und °F als Units
6. 100 °C → 212 °F
7. 0 °F → -17.7778 °C
- [ ] **Step 6: Commit**
```bash
git add src/js/calc-converter.js newtab.html src/css/main.css src/js/i18n.js
git commit -m "feat(calculator): Unit-Converter mit 6 Kategorien"
```
---
### Task 5: Satisfactory Calculator
**Files:**
- Create: `src/js/calc-satisfactory.js`
- Modify: `newtab.html` (Script-Tag nach calc-converter.js)
- Modify: `src/js/i18n.js` (neue Keys)
- Modify: `src/css/main.css` (Game-Calculator shared Styles)
**Kontext:** 3 Sub-Modi: Items/Min, Overclock Power, Machines. Power-Exponent: 1.321928 (Update 8 Wert). Shared CSS-Klassen `.calc-game-*` werden hier definiert und von Factorio/Stationeers wiederverwendet.
- [ ] **Step 1: calc-satisfactory.js erstellen**
```javascript
/* =============================================
HELLION NEWTAB — calc-satisfactory.js
Satisfactory Calculator Modus
============================================= */
(function() {
'use strict';
const POWER_EXPONENT = 1.321928;
const SUB_MODES = ['itemsPerMin', 'power', 'machines'];
let _activeSubMode = 'itemsPerMin';
// ---- SHARED HELPERS ----
/**
* Sub-Tab-Leiste erstellen
* @param {HTMLElement} container
* @param {Array} modes
* @param {string} activeMode
* @param {string} i18nPrefix
* @param {Function} onSwitch
*/
function createSubTabs(container, modes, activeMode, i18nPrefix, onSwitch) {
const bar = document.createElement('div');
bar.className = 'calc-game-subtabs';
modes.forEach(mode => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'calc-game-subtab' + (mode === activeMode ? ' active' : '');
btn.textContent = t(i18nPrefix + mode);
btn.dataset.mode = mode;
btn.addEventListener('click', () => {
bar.querySelectorAll('.calc-game-subtab').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
onSwitch(mode);
});
bar.appendChild(btn);
});
container.appendChild(bar);
}
/**
* Eingabefeld mit Label erstellen
* @param {string} labelKey - i18n-Key
* @param {number} defaultVal
* @param {Object} opts - { step, min, max }
* @returns {{ row: HTMLElement, input: HTMLInputElement }}
*/
function createField(labelKey, defaultVal, opts) {
opts = opts || {};
const row = document.createElement('div');
row.className = 'calc-game-field';
const label = document.createElement('label');
label.textContent = t(labelKey);
const input = document.createElement('input');
input.type = 'number';
input.className = 'calc-game-input';
input.value = defaultVal;
if (opts.step) input.step = opts.step;
if (opts.min !== undefined) input.min = opts.min;
if (opts.max !== undefined) input.max = opts.max;
row.append(label, input);
return { row, input };
}
/**
* Ergebnis-Zeile erstellen
* @param {string} labelKey
* @returns {{ row: HTMLElement, value: HTMLElement }}
*/
function createOutput(labelKey) {
const row = document.createElement('div');
row.className = 'calc-game-output';
const label = document.createElement('span');
label.textContent = t(labelKey);
const value = document.createElement('span');
value.className = 'calc-game-value';
row.append(label, value);
return { row, value };
}
// ---- SUB-MODE RENDERERS ----
function renderItemsPerMin(container) {
const itemsField = createField('calculator.sat.items_per_craft', 1, { step: 1, min: 1 });
const timeField = createField('calculator.sat.craft_time', 4, { step: 0.1, min: 0.1 });
const clockField = createField('calculator.sat.clock_speed', 100, { step: 1, min: 1, max: 250 });
const output = createOutput('calculator.sat.output_per_min');
function calc() {
const items = parseFloat(itemsField.input.value) || 0;
const time = parseFloat(timeField.input.value) || 1;
const clock = parseFloat(clockField.input.value) || 100;
const result = (items * 60) / time * (clock / 100);
output.value.textContent = Calculator._formatResult(result) + ' items/min';
}
[itemsField, timeField, clockField].forEach(f => {
f.input.addEventListener('input', calc);
});
container.append(itemsField.row, timeField.row, clockField.row, output.row);
calc();
}
function renderPower(container) {
const basePowerField = createField('calculator.sat.base_power', 30, { step: 1, min: 0.1 });
const clockField = createField('calculator.sat.clock_speed', 100, { step: 1, min: 1, max: 250 });
const powerOutput = createOutput('calculator.sat.power_usage');
const effOutput = createOutput('calculator.sat.efficiency');
function calc() {
const basePower = parseFloat(basePowerField.input.value) || 0;
const clock = parseFloat(clockField.input.value) || 100;
const ratio = clock / 100;
const power = basePower * Math.pow(ratio, POWER_EXPONENT);
const effPerItem = Math.pow(ratio, POWER_EXPONENT - 1);
powerOutput.value.textContent = Calculator._formatResult(power) + ' MW';
if (clock > 100) {
const overhead = (effPerItem - 1) * 100;
effOutput.value.textContent = '+' + Calculator._formatResult(overhead) + '% ' + t('calculator.sat.per_item');
effOutput.row.style.display = '';
} else {
effOutput.row.style.display = 'none';
}
}
[basePowerField, clockField].forEach(f => {
f.input.addEventListener('input', calc);
});
container.append(basePowerField.row, clockField.row, powerOutput.row, effOutput.row);
calc();
}
function renderMachines(container) {
const targetField = createField('calculator.sat.target_output', 60, { step: 1, min: 1 });
const itemsField = createField('calculator.sat.items_per_craft', 1, { step: 1, min: 1 });
const timeField = createField('calculator.sat.craft_time', 4, { step: 0.1, min: 0.1 });
const clockField = createField('calculator.sat.clock_speed', 100, { step: 1, min: 1, max: 250 });
const basePowerField = createField('calculator.sat.base_power', 30, { step: 1, min: 0.1 });
const machinesOutput = createOutput('calculator.sat.machines_needed');
const totalPowerOutput = createOutput('calculator.sat.total_power');
function calc() {
const target = parseFloat(targetField.input.value) || 0;
const items = parseFloat(itemsField.input.value) || 1;
const time = parseFloat(timeField.input.value) || 1;
const clock = parseFloat(clockField.input.value) || 100;
const basePower = parseFloat(basePowerField.input.value) || 0;
const ratio = clock / 100;
const itemsPerMin = (items * 60) / time * ratio;
const machines = itemsPerMin > 0 ? Math.ceil(target / itemsPerMin) : 0;
const totalPower = machines * basePower * Math.pow(ratio, POWER_EXPONENT);
machinesOutput.value.textContent = machines;
totalPowerOutput.value.textContent = Calculator._formatResult(totalPower) + ' MW';
}
[targetField, itemsField, timeField, clockField, basePowerField].forEach(f => {
f.input.addEventListener('input', calc);
});
container.append(targetField.row, itemsField.row, timeField.row, clockField.row, basePowerField.row, machinesOutput.row, totalPowerOutput.row);
calc();
}
// ---- STATE ----
async function loadState() {
const data = await Store.get(Calculator.STORAGE_KEY);
if (data && data.calculator && data.calculator.satisfactory) {
const s = data.calculator.satisfactory;
if (s.lastSubMode && SUB_MODES.includes(s.lastSubMode)) _activeSubMode = s.lastSubMode;
}
}
async function saveState() {
const data = await Store.get(Calculator.STORAGE_KEY) || {};
if (!data.calculator) data.calculator = {};
data.calculator.satisfactory = { lastSubMode: _activeSubMode };
await Store.set(Calculator.STORAGE_KEY, data);
}
// ---- RENDER ----
function renderSubMode(container) {
container.textContent = '';
switch (_activeSubMode) {
case 'itemsPerMin': renderItemsPerMin(container); break;
case 'power': renderPower(container); break;
case 'machines': renderMachines(container); break;
}
}
// ---- REGISTRATION ----
Calculator.registerMode('satisfactory', {
label: '⚙️',
shortName: 'SAT',
titleKey: 'calculator.tab.satisfactory',
render(bodyEl) {
bodyEl.style.padding = '8px';
bodyEl.style.display = 'flex';
bodyEl.style.flexDirection = 'column';
bodyEl.style.gap = '8px';
loadState().then(() => {
const subContent = document.createElement('div');
subContent.className = 'calc-game-content';
createSubTabs(bodyEl, SUB_MODES, _activeSubMode, 'calculator.sat.tab.', (mode) => {
_activeSubMode = mode;
renderSubMode(subContent);
saveState();
});
bodyEl.appendChild(subContent);
renderSubMode(subContent);
});
},
destroy() {
saveState();
}
});
})();
```
- [ ] **Step 2: Script-Tag in newtab.html**
Nach dem `calc-converter.js` Script-Tag:
```html
```
- [ ] **Step 3: Shared Game-Calculator CSS**
In `src/css/main.css`, nach den Converter-Styles:
```css
/* Calculator Game Modes (shared) */
.calc-game-subtabs {
display: flex;
gap: 4px;
margin-bottom: 8px;
}
.calc-game-subtab {
flex: 1;
padding: 5px 4px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 10px;
font-family: 'Rajdhani', sans-serif;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.15s;
}
.calc-game-subtab:hover {
color: var(--text-secondary);
}
.calc-game-subtab.active {
background: var(--accent-dim);
border-color: var(--accent);
color: var(--accent);
font-weight: 600;
}
.calc-game-field {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.calc-game-field label {
font-size: 11px;
color: var(--text-secondary);
min-width: 90px;
flex-shrink: 0;
}
.calc-game-input {
flex: 1;
padding: 5px 8px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13px;
font-family: 'Rajdhani', monospace;
}
.calc-game-output {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 8px;
background: rgba(0,0,0,0.2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-top: 4px;
}
.calc-game-output span:first-child {
font-size: 11px;
color: var(--text-muted);
}
.calc-game-value {
font-size: 14px;
color: var(--accent);
font-weight: 600;
font-family: 'Rajdhani', monospace;
}
.calc-game-warning {
font-size: 10px;
color: var(--danger);
padding: 2px 0;
}
.calc-game-content {
display: flex;
flex-direction: column;
gap: 4px;
}
```
- [ ] **Step 4: i18n-Keys für Satisfactory**
DE-Block:
```javascript
'calculator.tab.satisfactory': 'Satisfactory',
'calculator.sat.tab.itemsPerMin': 'Items/Min',
'calculator.sat.tab.power': 'Strom',
'calculator.sat.tab.machines': 'Maschinen',
'calculator.sat.items_per_craft': 'Items/Craft',
'calculator.sat.craft_time': 'Craftzeit (s)',
'calculator.sat.clock_speed': 'Taktrate (%)',
'calculator.sat.base_power': 'Grundleistung (MW)',
'calculator.sat.target_output': 'Ziel Output/Min',
'calculator.sat.output_per_min': 'Output',
'calculator.sat.power_usage': 'Stromverbrauch',
'calculator.sat.efficiency': 'Effizienz',
'calculator.sat.per_item': 'pro Item',
'calculator.sat.machines_needed': 'Maschinen benötigt',
'calculator.sat.total_power': 'Gesamtleistung',
```
EN-Block:
```javascript
'calculator.tab.satisfactory': 'Satisfactory',
'calculator.sat.tab.itemsPerMin': 'Items/Min',
'calculator.sat.tab.power': 'Power',
'calculator.sat.tab.machines': 'Machines',
'calculator.sat.items_per_craft': 'Items/Craft',
'calculator.sat.craft_time': 'Craft Time (s)',
'calculator.sat.clock_speed': 'Clock Speed (%)',
'calculator.sat.base_power': 'Base Power (MW)',
'calculator.sat.target_output': 'Target Output/Min',
'calculator.sat.output_per_min': 'Output',
'calculator.sat.power_usage': 'Power Usage',
'calculator.sat.efficiency': 'Efficiency',
'calculator.sat.per_item': 'per item',
'calculator.sat.machines_needed': 'Machines needed',
'calculator.sat.total_power': 'Total Power',
```
- [ ] **Step 5: Testen**
1. SAT-Tab klicken → 3 Sub-Tabs (Items/Min, Strom, Maschinen)
2. Items/Min: 1 Item, 4s Craft, 100% → 15 items/min
3. Power: 30 MW Base, 250% Clock → ~115 MW (wegen Exponent 1.321928)
4. Machines: 60 Target, 1 Item, 4s, 100%, 30 MW → 4 Maschinen, 120 MW
- [ ] **Step 6: Commit**
```bash
git add src/js/calc-satisfactory.js newtab.html src/css/main.css src/js/i18n.js
git commit -m "feat(calculator): Satisfactory Calculator mit Overclock-Power"
```
---
### Task 6: Factorio Calculator
**Files:**
- Create: `src/js/calc-factorio.js`
- Modify: `newtab.html` (Script-Tag nach calc-satisfactory.js)
- Modify: `src/js/i18n.js` (neue Keys)
**Kontext:** 3 Sub-Modi: Ratio, Belt, Machines. Assembler-Speeds: Asm1=0.5, Asm2=0.75, Asm3=1.25. Belt-Throughput: Yellow=15/s, Red=30/s, Blue=45/s. Nutzt die shared `.calc-game-*` CSS-Klassen aus Task 5.
- [ ] **Step 1: calc-factorio.js erstellen**
```javascript
/* =============================================
HELLION NEWTAB — calc-factorio.js
Factorio Calculator Modus
============================================= */
(function() {
'use strict';
const ASSEMBLERS = [
{ key: 'asm1', speed: 0.5 },
{ key: 'asm2', speed: 0.75 },
{ key: 'asm3', speed: 1.25 }
];
const BELTS = [
{ key: 'yellow', throughput: 15, perSide: 7.5 },
{ key: 'red', throughput: 30, perSide: 15 },
{ key: 'blue', throughput: 45, perSide: 22.5 }
];
const SUB_MODES = ['ratio', 'belt', 'machines'];
let _activeSubMode = 'ratio';
/**
* Assembler-Dropdown erstellen
* @param {string} selectedKey
* @returns {{ row: HTMLElement, select: HTMLSelectElement }}
*/
function createAssemblerSelect(selectedKey) {
const row = document.createElement('div');
row.className = 'calc-game-field';
const label = document.createElement('label');
label.textContent = t('calculator.fac.assembler');
const select = document.createElement('select');
select.className = 'calc-game-input';
ASSEMBLERS.forEach(asm => {
const opt = document.createElement('option');
opt.value = asm.key;
opt.textContent = t('calculator.fac.asm.' + asm.key) + ' (' + asm.speed + 'x)';
if (asm.key === selectedKey) opt.selected = true;
select.appendChild(opt);
});
row.append(label, select);
return { row, select };
}
/**
* Belt-Dropdown erstellen
* @param {string} selectedKey
* @returns {{ row: HTMLElement, select: HTMLSelectElement }}
*/
function createBeltSelect(selectedKey) {
const row = document.createElement('div');
row.className = 'calc-game-field';
const label = document.createElement('label');
label.textContent = t('calculator.fac.belt');
const select = document.createElement('select');
select.className = 'calc-game-input';
BELTS.forEach(belt => {
const opt = document.createElement('option');
opt.value = belt.key;
opt.textContent = t('calculator.fac.belt.' + belt.key) + ' (' + belt.throughput + '/s)';
if (belt.key === selectedKey) opt.selected = true;
select.appendChild(opt);
});
row.append(label, select);
return { row, select };
}
function getAssemblerSpeed(key) {
const asm = ASSEMBLERS.find(a => a.key === key);
return asm ? asm.speed : 1;
}
function getBelt(key) {
return BELTS.find(b => b.key === key) || BELTS[0];
}
/**
* Findet den kleinsten Belt der den Throughput schafft
* @param {number} throughput
* @returns {Object|null}
*/
function findSmallestBelt(throughput) {
for (const belt of BELTS) {
if (belt.throughput >= throughput) return belt;
}
return null;
}
// ---- Field/Output helpers (reuse pattern from Satisfactory) ----
function createField(labelKey, defaultVal, opts) {
opts = opts || {};
const row = document.createElement('div');
row.className = 'calc-game-field';
const label = document.createElement('label');
label.textContent = t(labelKey);
const input = document.createElement('input');
input.type = 'number';
input.className = 'calc-game-input';
input.value = defaultVal;
if (opts.step) input.step = opts.step;
if (opts.min !== undefined) input.min = opts.min;
row.append(label, input);
return { row, input };
}
function createOutput(labelKey) {
const row = document.createElement('div');
row.className = 'calc-game-output';
const label = document.createElement('span');
label.textContent = t(labelKey);
const value = document.createElement('span');
value.className = 'calc-game-value';
row.append(label, value);
return { row, value };
}
// ---- SUB-MODE RENDERERS ----
function renderRatio(container) {
const asmSelect = createAssemblerSelect('asm3');
const outputField = createField('calculator.fac.recipe_output', 1, { step: 1, min: 1 });
const timeField = createField('calculator.fac.recipe_time', 1, { step: 0.1, min: 0.1 });
const perSecOutput = createOutput('calculator.fac.items_per_sec');
const perMinOutput = createOutput('calculator.fac.items_per_min');
function calc() {
const speed = getAssemblerSpeed(asmSelect.select.value);
const output = parseFloat(outputField.input.value) || 0;
const time = parseFloat(timeField.input.value) || 1;
const perSec = output * speed / time;
const perMin = perSec * 60;
perSecOutput.value.textContent = Calculator._formatResult(perSec) + ' /s';
perMinOutput.value.textContent = Calculator._formatResult(perMin) + ' /min';
}
[outputField, timeField].forEach(f => f.input.addEventListener('input', calc));
asmSelect.select.addEventListener('change', calc);
container.append(asmSelect.row, outputField.row, timeField.row, perSecOutput.row, perMinOutput.row);
calc();
}
function renderBelt(container) {
const beltSelect = createBeltSelect('yellow');
const consumeField = createField('calculator.fac.consume_per_sec', 1, { step: 0.1, min: 0.1 });
const machinesOutput = createOutput('calculator.fac.machines_per_belt');
const utilOutput = createOutput('calculator.fac.belt_utilization');
function calc() {
const belt = getBelt(beltSelect.select.value);
const consume = parseFloat(consumeField.input.value) || 1;
const machines = Math.floor(belt.throughput / consume);
const util = (consume * machines) / belt.throughput * 100;
machinesOutput.value.textContent = machines;
utilOutput.value.textContent = Calculator._formatResult(util) + '%';
}
consumeField.input.addEventListener('input', calc);
beltSelect.select.addEventListener('change', calc);
container.append(beltSelect.row, consumeField.row, machinesOutput.row, utilOutput.row);
calc();
}
function renderMachines(container) {
const asmSelect = createAssemblerSelect('asm3');
const targetField = createField('calculator.fac.target_output_sec', 10, { step: 0.1, min: 0.1 });
const outputField = createField('calculator.fac.recipe_output', 1, { step: 1, min: 1 });
const timeField = createField('calculator.fac.recipe_time', 1, { step: 0.1, min: 0.1 });
const machinesOutput = createOutput('calculator.fac.machines_needed');
const beltOutput = createOutput('calculator.fac.belt_needed');
function calc() {
const speed = getAssemblerSpeed(asmSelect.select.value);
const target = parseFloat(targetField.input.value) || 0;
const output = parseFloat(outputField.input.value) || 1;
const time = parseFloat(timeField.input.value) || 1;
const perMachine = output * speed / time;
const machines = perMachine > 0 ? Math.ceil(target / perMachine) : 0;
const totalThroughput = machines * perMachine;
const belt = findSmallestBelt(totalThroughput);
machinesOutput.value.textContent = machines;
if (belt) {
const util = (totalThroughput / belt.throughput) * 100;
beltOutput.value.textContent = t('calculator.fac.belt.' + belt.key) + ' (' + Calculator._formatResult(util) + '%)';
} else {
beltOutput.value.textContent = t('calculator.fac.exceeds_belt');
}
}
[targetField, outputField, timeField].forEach(f => f.input.addEventListener('input', calc));
asmSelect.select.addEventListener('change', calc);
container.append(asmSelect.row, targetField.row, outputField.row, timeField.row, machinesOutput.row, beltOutput.row);
calc();
}
// ---- STATE ----
async function loadState() {
const data = await Store.get(Calculator.STORAGE_KEY);
if (data && data.calculator && data.calculator.factorio) {
const s = data.calculator.factorio;
if (s.lastSubMode && SUB_MODES.includes(s.lastSubMode)) _activeSubMode = s.lastSubMode;
}
}
async function saveState() {
const data = await Store.get(Calculator.STORAGE_KEY) || {};
if (!data.calculator) data.calculator = {};
data.calculator.factorio = { lastSubMode: _activeSubMode };
await Store.set(Calculator.STORAGE_KEY, data);
}
function renderSubMode(container) {
container.textContent = '';
switch (_activeSubMode) {
case 'ratio': renderRatio(container); break;
case 'belt': renderBelt(container); break;
case 'machines': renderMachines(container); break;
}
}
// ---- REGISTRATION ----
Calculator.registerMode('factorio', {
label: '🏭',
shortName: 'FAC',
titleKey: 'calculator.tab.factorio',
render(bodyEl) {
bodyEl.style.padding = '8px';
bodyEl.style.display = 'flex';
bodyEl.style.flexDirection = 'column';
bodyEl.style.gap = '8px';
loadState().then(() => {
const subContent = document.createElement('div');
subContent.className = 'calc-game-content';
// Sub-Tab helper aus Satisfactory ist nicht verfügbar (IIFE-Scope),
// daher lokale Implementierung
const bar = document.createElement('div');
bar.className = 'calc-game-subtabs';
SUB_MODES.forEach(mode => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'calc-game-subtab' + (mode === _activeSubMode ? ' active' : '');
btn.textContent = t('calculator.fac.tab.' + mode);
btn.dataset.mode = mode;
btn.addEventListener('click', () => {
bar.querySelectorAll('.calc-game-subtab').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
_activeSubMode = mode;
renderSubMode(subContent);
saveState();
});
bar.appendChild(btn);
});
bodyEl.append(bar, subContent);
renderSubMode(subContent);
});
},
destroy() {
saveState();
}
});
})();
```
- [ ] **Step 2: Script-Tag in newtab.html**
Nach dem `calc-satisfactory.js` Script-Tag:
```html
```
- [ ] **Step 3: i18n-Keys für Factorio**
DE-Block:
```javascript
'calculator.tab.factorio': 'Factorio',
'calculator.fac.tab.ratio': 'Ratio',
'calculator.fac.tab.belt': 'Belt',
'calculator.fac.tab.machines': 'Maschinen',
'calculator.fac.assembler': 'Assembler',
'calculator.fac.asm.asm1': 'Assembler 1',
'calculator.fac.asm.asm2': 'Assembler 2',
'calculator.fac.asm.asm3': 'Assembler 3',
'calculator.fac.belt': 'Belt-Typ',
'calculator.fac.belt.yellow': 'Gelb',
'calculator.fac.belt.red': 'Rot',
'calculator.fac.belt.blue': 'Blau',
'calculator.fac.recipe_output': 'Rezept-Output',
'calculator.fac.recipe_time': 'Rezeptzeit (s)',
'calculator.fac.consume_per_sec': 'Verbrauch/s',
'calculator.fac.target_output_sec': 'Ziel Output/s',
'calculator.fac.items_per_sec': 'Items/s',
'calculator.fac.items_per_min': 'Items/min',
'calculator.fac.machines_per_belt': 'Maschinen/Belt',
'calculator.fac.belt_utilization': 'Belt-Auslastung',
'calculator.fac.machines_needed': 'Maschinen benötigt',
'calculator.fac.belt_needed': 'Belt benötigt',
'calculator.fac.exceeds_belt': 'Übersteigt max. Belt',
```
EN-Block:
```javascript
'calculator.tab.factorio': 'Factorio',
'calculator.fac.tab.ratio': 'Ratio',
'calculator.fac.tab.belt': 'Belt',
'calculator.fac.tab.machines': 'Machines',
'calculator.fac.assembler': 'Assembler',
'calculator.fac.asm.asm1': 'Assembler 1',
'calculator.fac.asm.asm2': 'Assembler 2',
'calculator.fac.asm.asm3': 'Assembler 3',
'calculator.fac.belt': 'Belt Type',
'calculator.fac.belt.yellow': 'Yellow',
'calculator.fac.belt.red': 'Red',
'calculator.fac.belt.blue': 'Blue',
'calculator.fac.recipe_output': 'Recipe Output',
'calculator.fac.recipe_time': 'Recipe Time (s)',
'calculator.fac.consume_per_sec': 'Consume/s',
'calculator.fac.target_output_sec': 'Target Output/s',
'calculator.fac.items_per_sec': 'Items/s',
'calculator.fac.items_per_min': 'Items/min',
'calculator.fac.machines_per_belt': 'Machines/Belt',
'calculator.fac.belt_utilization': 'Belt Utilization',
'calculator.fac.machines_needed': 'Machines needed',
'calculator.fac.belt_needed': 'Belt needed',
'calculator.fac.exceeds_belt': 'Exceeds max belt',
```
- [ ] **Step 4: Testen**
1. FAC-Tab klicken → 3 Sub-Tabs (Ratio, Belt, Maschinen)
2. Ratio: Asm3 (1.25x), 1 Output, 1s → 1.25/s, 75/min
3. Belt: Yellow (15/s), 1/s consume → 15 Machines, 100%
4. Machines: Asm3, 10/s target, 1 output, 1s → 8 machines, Blue (22.2%)
- [ ] **Step 5: Commit**
```bash
git add src/js/calc-factorio.js newtab.html src/js/i18n.js
git commit -m "feat(calculator): Factorio Calculator mit Assembler-Ratios"
```
---
### Task 7: Stationeers Calculator
**Files:**
- Create: `src/js/calc-stationeers.js`
- Modify: `newtab.html` (Script-Tag nach calc-factorio.js)
- Modify: `src/js/i18n.js` (neue Keys)
- Modify: `src/css/main.css` (Stationeers-spezifische Styles)
**Kontext:** 4 Sub-Modi: Gas (PV=nRT), Furnace, Solar/Battery, Atmosphere. R=8314.46261815324, Combustion Energy=563452 J/mol. Komplexester Modus. Nutzt shared `.calc-game-*` CSS.
- [ ] **Step 1: calc-stationeers.js erstellen**
```javascript
/* =============================================
HELLION NEWTAB — calc-stationeers.js
Stationeers Calculator Modus
============================================= */
(function() {
'use strict';
// ---- CONSTANTS ----
const R = 8314.46261815324; // L·Pa / (mol·K)
const COMBUSTION_ENERGY = 563452; // J/mol bei 95% Effizienz
const HEAT_CAP_PURE_FUEL = 61.9; // J/(mol·K) für 1:2 O₂:H₂
const HEAT_CAP_DELTA = 172.615; // 0.95 × (243.6 − 61.9)
const BATTERY_CAPACITY = 50000; // Ws (Station Battery)
const HEAT_CAPS = [
{ gas: 'O\u2082', cp: 21.1 },
{ gas: 'H\u2082', cp: 20.4 },
{ gas: 'CO\u2082', cp: 28.2 },
{ gas: 'N\u2082', cp: 20.6 },
{ gas: 'H\u2082O', cp: 72.0 },
{ gas: 'N\u2082O', cp: 23.0 },
{ gas: 'Pollutant', cp: 24.8 }
];
const GAS_VARS = ['P', 'V', 'n', 'T'];
const SUB_MODES = ['gas', 'furnace', 'solar', 'atmo'];
let _activeSubMode = 'gas';
// ---- Field/Output helpers ----
function createField(labelKey, defaultVal, opts) {
opts = opts || {};
const row = document.createElement('div');
row.className = 'calc-game-field';
const label = document.createElement('label');
label.textContent = t(labelKey);
const input = document.createElement('input');
input.type = 'number';
input.className = 'calc-game-input';
input.value = defaultVal;
if (opts.step) input.step = opts.step;
if (opts.min !== undefined) input.min = opts.min;
if (opts.max !== undefined) input.max = opts.max;
if (opts.disabled) input.disabled = true;
row.append(label, input);
return { row, input };
}
function createOutput(labelKey) {
const row = document.createElement('div');
row.className = 'calc-game-output';
const label = document.createElement('span');
label.textContent = t(labelKey);
const value = document.createElement('span');
value.className = 'calc-game-value';
row.append(label, value);
return { row, value };
}
// ---- GAS (PV=nRT) ----
function renderGas(container) {
// Solve-for Dropdown
const solveRow = document.createElement('div');
solveRow.className = 'calc-game-field';
const solveLabel = document.createElement('label');
solveLabel.textContent = t('calculator.sta.solve_for');
const solveSelect = document.createElement('select');
solveSelect.className = 'calc-game-input';
GAS_VARS.forEach(v => {
const opt = document.createElement('option');
opt.value = v;
opt.textContent = t('calculator.sta.var.' + v);
solveSelect.appendChild(opt);
});
solveRow.append(solveLabel, solveSelect);
container.appendChild(solveRow);
// Eingabefelder für alle 4 Variablen
const fields = {};
const units = { P: 'kPa', V: 'L', n: 'mol', T: 'K' };
const defaults = { P: 101.325, V: 1000, n: 1, T: 293.15 };
GAS_VARS.forEach(v => {
const f = createField(
'calculator.sta.var.' + v + '_label',
defaults[v],
{ step: 'any' }
);
fields[v] = f;
container.appendChild(f.row);
});
// Hilfstext für Temperatur
const tempHelper = document.createElement('div');
tempHelper.className = 'calc-game-hint';
container.appendChild(tempHelper);
const resultOutput = createOutput('calculator.sta.result');
container.appendChild(resultOutput.row);
function calc() {
const solveFor = solveSelect.value;
// Felder aktivieren/deaktivieren
GAS_VARS.forEach(v => {
fields[v].input.disabled = (v === solveFor);
fields[v].input.style.opacity = (v === solveFor) ? '0.5' : '1';
});
const P_kPa = parseFloat(fields.P.input.value) || 0;
const P = P_kPa * 1000; // kPa → Pa
const V = parseFloat(fields.V.input.value) || 0;
const n = parseFloat(fields.n.input.value) || 0;
const T = parseFloat(fields.T.input.value) || 0;
let result = null;
let unit = '';
switch (solveFor) {
case 'P':
if (V > 0) { result = (n * R * T) / V; result /= 1000; unit = 'kPa'; }
break;
case 'V':
if (P > 0) { result = (n * R * T) / P; unit = 'L'; }
break;
case 'n':
if (R * T > 0) { result = (P * V) / (R * T); unit = 'mol'; }
break;
case 'T':
if (n * R > 0) { result = (P * V) / (n * R); unit = 'K'; }
break;
}
if (result !== null && isFinite(result)) {
fields[solveFor].input.value = Calculator._formatResult(result);
resultOutput.value.textContent = Calculator._formatResult(result) + ' ' + unit;
} else {
resultOutput.value.textContent = '-';
}
// Temperatur-Hilfstext
const tempVal = parseFloat(fields.T.input.value) || 0;
tempHelper.textContent = Calculator._formatResult(tempVal - 273.15) + ' \u00B0C';
}
// Events
GAS_VARS.forEach(v => {
fields[v].input.addEventListener('input', calc);
});
solveSelect.addEventListener('change', calc);
calc();
}
// ---- FURNACE ----
function renderFurnace(container) {
const fuelField = createField('calculator.sta.fuel_ratio', 0.5, { step: 0.01, min: 0, max: 1 });
const tempField = createField('calculator.sta.start_temp', 293.15, { step: 1, min: 0 });
const pressField = createField('calculator.sta.start_pressure', 101.325, { step: 0.1, min: 0 });
const tempOutput = createOutput('calculator.sta.temp_after');
const pressOutput = createOutput('calculator.sta.pressure_after');
const warningEl = document.createElement('div');
warningEl.className = 'calc-game-warning';
function calc() {
const fuel = parseFloat(fuelField.input.value) || 0;
const T_vor = parseFloat(tempField.input.value) || 293.15;
const P_vor = parseFloat(pressField.input.value) || 101.325;
warningEl.textContent = '';
if (fuel < 0.05) {
warningEl.textContent = t('calculator.sta.warn_low_fuel');
}
if (P_vor < 10) {
warningEl.textContent += (warningEl.textContent ? ' ' : '') + t('calculator.sta.warn_low_pressure');
}
const specificHeat = HEAT_CAP_PURE_FUEL;
const T_nach = (T_vor * specificHeat + fuel * COMBUSTION_ENERGY) / (specificHeat + fuel * HEAT_CAP_DELTA);
const P_nach = P_vor * T_nach * (1 + 5.7 * fuel) / T_vor;
tempOutput.value.textContent = Calculator._formatResult(T_nach) + ' K (' + Calculator._formatResult(T_nach - 273.15) + ' \u00B0C)';
pressOutput.value.textContent = Calculator._formatResult(P_nach) + ' kPa';
}
[fuelField, tempField, pressField].forEach(f => f.input.addEventListener('input', calc));
container.append(fuelField.row, tempField.row, pressField.row, warningEl, tempOutput.row, pressOutput.row);
calc();
}
// ---- SOLAR / BATTERY ----
function renderSolar(container) {
const panelField = createField('calculator.sta.panels', 12, { step: 1, min: 1 });
const wattField = createField('calculator.sta.watts_per_panel', 500, { step: 10, min: 1 });
const dayField = createField('calculator.sta.day_length', 600, { step: 1, min: 1 });
const nightField = createField('calculator.sta.night_length', 600, { step: 1, min: 1 });
const consumeField = createField('calculator.sta.consumption', 2000, { step: 10, min: 0 });
const genOutput = createOutput('calculator.sta.generation');
const surplusOutput = createOutput('calculator.sta.surplus');
const nightOutput = createOutput('calculator.sta.night_energy');
const battOutput = createOutput('calculator.sta.batteries_needed');
function calc() {
const panels = parseFloat(panelField.input.value) || 0;
const wpp = parseFloat(wattField.input.value) || 0;
const nightLen = parseFloat(nightField.input.value) || 0;
const consume = parseFloat(consumeField.input.value) || 0;
const generation = panels * wpp;
const surplus = generation - consume;
const nightEnergy = consume * nightLen;
const batteries = nightEnergy > 0 ? Math.ceil(nightEnergy / BATTERY_CAPACITY) : 0;
genOutput.value.textContent = Calculator._formatResult(generation) + ' W';
surplusOutput.value.textContent = Calculator._formatResult(surplus) + ' W';
if (surplus < 0) {
surplusOutput.value.style.color = 'var(--danger)';
} else {
surplusOutput.value.style.color = '';
}
nightOutput.value.textContent = Calculator._formatResult(nightEnergy) + ' Ws';
battOutput.value.textContent = batteries;
}
[panelField, wattField, dayField, nightField, consumeField].forEach(f => f.input.addEventListener('input', calc));
container.append(panelField.row, wattField.row, dayField.row, nightField.row, consumeField.row,
genOutput.row, surplusOutput.row, nightOutput.row, battOutput.row);
calc();
}
// ---- ATMOSPHERE / MIXER ----
function renderAtmo(container) {
const targetField = createField('calculator.sta.target_temp', 293.15, { step: 1 });
const gas1Field = createField('calculator.sta.gas1_temp', 200, { step: 1 });
const gas2Field = createField('calculator.sta.gas2_temp', 400, { step: 1 });
const m1Output = createOutput('calculator.sta.mixer_input1');
const m2Output = createOutput('calculator.sta.mixer_input2');
function calc() {
const T0 = parseFloat(targetField.input.value) || 0;
const T1 = parseFloat(gas1Field.input.value) || 0;
const T2 = parseFloat(gas2Field.input.value) || 0;
const denom = Math.abs(T1 - T0) + Math.abs(T2 - T0);
if (denom === 0) {
m1Output.value.textContent = '50%';
m2Output.value.textContent = '50%';
return;
}
const M1 = Math.abs(T2 - T0) / denom;
const M2 = 1 - M1;
m1Output.value.textContent = Calculator._formatResult(M1 * 100) + '%';
m2Output.value.textContent = Calculator._formatResult(M2 * 100) + '%';
}
[targetField, gas1Field, gas2Field].forEach(f => f.input.addEventListener('input', calc));
container.append(targetField.row, gas1Field.row, gas2Field.row, m1Output.row, m2Output.row);
calc();
// Aufklappbare Wärmekapazität-Referenz
const details = document.createElement('details');
details.className = 'calc-game-details';
const summary = document.createElement('summary');
summary.textContent = t('calculator.sta.heat_cap_ref');
details.appendChild(summary);
const table = document.createElement('table');
table.className = 'calc-game-table';
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');
const thGas = document.createElement('th');
thGas.textContent = t('calculator.sta.gas');
const thCp = document.createElement('th');
thCp.textContent = 'Cp (J/mol\u00B7K)';
headerRow.append(thGas, thCp);
thead.appendChild(headerRow);
const tbody = document.createElement('tbody');
HEAT_CAPS.forEach(entry => {
const tr = document.createElement('tr');
const tdGas = document.createElement('td');
tdGas.textContent = entry.gas;
const tdCp = document.createElement('td');
tdCp.textContent = entry.cp;
tr.append(tdGas, tdCp);
tbody.appendChild(tr);
});
table.append(thead, tbody);
details.appendChild(table);
container.appendChild(details);
}
// ---- STATE ----
async function loadState() {
const data = await Store.get(Calculator.STORAGE_KEY);
if (data && data.calculator && data.calculator.stationeers) {
const s = data.calculator.stationeers;
if (s.lastSubMode && SUB_MODES.includes(s.lastSubMode)) _activeSubMode = s.lastSubMode;
}
}
async function saveState() {
const data = await Store.get(Calculator.STORAGE_KEY) || {};
if (!data.calculator) data.calculator = {};
data.calculator.stationeers = { lastSubMode: _activeSubMode };
await Store.set(Calculator.STORAGE_KEY, data);
}
function renderSubMode(container) {
container.textContent = '';
switch (_activeSubMode) {
case 'gas': renderGas(container); break;
case 'furnace': renderFurnace(container); break;
case 'solar': renderSolar(container); break;
case 'atmo': renderAtmo(container); break;
}
}
// ---- REGISTRATION ----
Calculator.registerMode('stationeers', {
label: '🚀',
shortName: 'STA',
titleKey: 'calculator.tab.stationeers',
render(bodyEl) {
bodyEl.style.padding = '8px';
bodyEl.style.display = 'flex';
bodyEl.style.flexDirection = 'column';
bodyEl.style.gap = '8px';
loadState().then(() => {
const subContent = document.createElement('div');
subContent.className = 'calc-game-content';
const bar = document.createElement('div');
bar.className = 'calc-game-subtabs';
SUB_MODES.forEach(mode => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'calc-game-subtab' + (mode === _activeSubMode ? ' active' : '');
btn.textContent = t('calculator.sta.tab.' + mode);
btn.dataset.mode = mode;
btn.addEventListener('click', () => {
bar.querySelectorAll('.calc-game-subtab').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
_activeSubMode = mode;
renderSubMode(subContent);
saveState();
});
bar.appendChild(btn);
});
bodyEl.append(bar, subContent);
renderSubMode(subContent);
});
},
destroy() {
saveState();
}
});
})();
```
- [ ] **Step 2: Script-Tag in newtab.html**
Nach dem `calc-factorio.js` Script-Tag:
```html
```
- [ ] **Step 3: CSS für Stationeers-spezifische Elemente**
In `src/css/main.css`, nach den Game-Calculator shared Styles:
```css
/* Calculator Stationeers specifics */
.calc-game-hint {
font-size: 10px;
color: var(--text-muted);
font-style: italic;
margin-top: -4px;
text-align: right;
}
.calc-game-details {
border-top: 1px solid var(--border);
padding-top: 6px;
margin-top: 4px;
}
.calc-game-details summary {
font-size: 10px;
color: var(--text-muted);
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.calc-game-table {
width: 100%;
font-size: 11px;
border-collapse: collapse;
margin-top: 4px;
}
.calc-game-table th {
text-align: left;
color: var(--text-muted);
font-weight: 600;
padding: 2px 6px;
border-bottom: 1px solid var(--border);
}
.calc-game-table td {
padding: 2px 6px;
color: var(--text-secondary);
}
.calc-game-table tr:nth-child(even) td {
background: rgba(0,0,0,0.1);
}
```
- [ ] **Step 4: i18n-Keys für Stationeers**
DE-Block:
```javascript
'calculator.tab.stationeers': 'Stationeers',
'calculator.sta.tab.gas': 'Gas',
'calculator.sta.tab.furnace': 'Ofen',
'calculator.sta.tab.solar': 'Solar',
'calculator.sta.tab.atmo': 'Atmo',
'calculator.sta.solve_for': 'Gesucht',
'calculator.sta.var.P': 'Druck (P)',
'calculator.sta.var.V': 'Volumen (V)',
'calculator.sta.var.n': 'Stoffmenge (n)',
'calculator.sta.var.T': 'Temperatur (T)',
'calculator.sta.var.P_label': 'Druck (kPa)',
'calculator.sta.var.V_label': 'Volumen (L)',
'calculator.sta.var.n_label': 'Stoffmenge (mol)',
'calculator.sta.var.T_label': 'Temperatur (K)',
'calculator.sta.result': 'Ergebnis',
'calculator.sta.fuel_ratio': 'Fuel-Anteil (0-1)',
'calculator.sta.start_temp': 'Start-Temperatur (K)',
'calculator.sta.start_pressure': 'Start-Druck (kPa)',
'calculator.sta.temp_after': 'T nach Zündung',
'calculator.sta.pressure_after': 'P nach Zündung',
'calculator.sta.warn_low_fuel': '⚠ Fuel unter 5%',
'calculator.sta.warn_low_pressure': '⚠ Druck unter 10 kPa',
'calculator.sta.panels': 'Anzahl Panels',
'calculator.sta.watts_per_panel': 'Watt/Panel',
'calculator.sta.day_length': 'Taglänge (s)',
'calculator.sta.night_length': 'Nachtlänge (s)',
'calculator.sta.consumption': 'Verbrauch (W)',
'calculator.sta.generation': 'Erzeugung',
'calculator.sta.surplus': 'Überschuss',
'calculator.sta.night_energy': 'Nacht-Energie',
'calculator.sta.batteries_needed': 'Batterien benötigt',
'calculator.sta.target_temp': 'Ziel-Temperatur (K)',
'calculator.sta.gas1_temp': 'Gas 1 Temperatur (K)',
'calculator.sta.gas2_temp': 'Gas 2 Temperatur (K)',
'calculator.sta.mixer_input1': 'Mixer Input 1',
'calculator.sta.mixer_input2': 'Mixer Input 2',
'calculator.sta.heat_cap_ref': 'Wärmekapazitäten (Referenz)',
'calculator.sta.gas': 'Gas',
```
EN-Block:
```javascript
'calculator.tab.stationeers': 'Stationeers',
'calculator.sta.tab.gas': 'Gas',
'calculator.sta.tab.furnace': 'Furnace',
'calculator.sta.tab.solar': 'Solar',
'calculator.sta.tab.atmo': 'Atmo',
'calculator.sta.solve_for': 'Solve for',
'calculator.sta.var.P': 'Pressure (P)',
'calculator.sta.var.V': 'Volume (V)',
'calculator.sta.var.n': 'Amount (n)',
'calculator.sta.var.T': 'Temperature (T)',
'calculator.sta.var.P_label': 'Pressure (kPa)',
'calculator.sta.var.V_label': 'Volume (L)',
'calculator.sta.var.n_label': 'Amount (mol)',
'calculator.sta.var.T_label': 'Temperature (K)',
'calculator.sta.result': 'Result',
'calculator.sta.fuel_ratio': 'Fuel Ratio (0-1)',
'calculator.sta.start_temp': 'Start Temperature (K)',
'calculator.sta.start_pressure': 'Start Pressure (kPa)',
'calculator.sta.temp_after': 'T after ignition',
'calculator.sta.pressure_after': 'P after ignition',
'calculator.sta.warn_low_fuel': '⚠ Fuel below 5%',
'calculator.sta.warn_low_pressure': '⚠ Pressure below 10 kPa',
'calculator.sta.panels': 'Panel Count',
'calculator.sta.watts_per_panel': 'Watts/Panel',
'calculator.sta.day_length': 'Day Length (s)',
'calculator.sta.night_length': 'Night Length (s)',
'calculator.sta.consumption': 'Consumption (W)',
'calculator.sta.generation': 'Generation',
'calculator.sta.surplus': 'Surplus',
'calculator.sta.night_energy': 'Night Energy',
'calculator.sta.batteries_needed': 'Batteries needed',
'calculator.sta.target_temp': 'Target Temperature (K)',
'calculator.sta.gas1_temp': 'Gas 1 Temperature (K)',
'calculator.sta.gas2_temp': 'Gas 2 Temperature (K)',
'calculator.sta.mixer_input1': 'Mixer Input 1',
'calculator.sta.mixer_input2': 'Mixer Input 2',
'calculator.sta.heat_cap_ref': 'Heat Capacities (Reference)',
'calculator.sta.gas': 'Gas',
```
- [ ] **Step 5: Testen**
1. STA-Tab klicken → 4 Sub-Tabs (Gas, Ofen, Solar, Atmo)
2. Gas: P gesucht, V=1000, n=1, T=293.15 → P=2437.66 kPa (Stationeers-R ist groß!)
3. Furnace: Fuel=0.5, T=293K, P=101kPa → hohe Temperatur nach Zündung
4. Solar: 12 Panels, 500W, 600s Tag/Nacht, 2000W → 6000W Gen, 4000W Surplus, 24 Batteries
5. Atmo: Target=300K, Gas1=200K, Gas2=400K → M1=50%, M2=50%
6. Wärmekapazität-Tabelle aufklappbar
- [ ] **Step 6: Commit**
```bash
git add src/js/calc-stationeers.js newtab.html src/css/main.css src/js/i18n.js
git commit -m "feat(calculator): Stationeers Calculator mit Gas/Furnace/Solar/Atmo"
```
---
### Task 8: Version Bump und CHANGELOG
**Files:**
- Modify: `manifest.json` — Version → 2.1.0
- Modify: `manifest.firefox.json` — Version → 2.1.0
- Modify: `manifest.opera.json` — Version → 2.1.0
- Modify: `newtab.html` — Version-String → 2.1.0
- Modify: `src/js/data.js` — Export-Version → 2.1.0
- Modify: `src/js/app.js` — Backup-Version → 2.1.0
- Modify: `CHANGELOG.md` — v2.1.0 Eintrag
- [ ] **Step 1: Manifests aktualisieren**
In allen drei Manifest-Dateien:
```json
"version": "2.1.0"
```
- [ ] **Step 2: newtab.html Version-String**
Den bestehenden Version-String von "2.0.1" auf "2.1.0" ändern.
- [ ] **Step 3: data.js Export-Version**
```javascript
version: '2.1.0',
```
- [ ] **Step 4: app.js Backup-Version**
```javascript
version: '2.1.0',
```
- [ ] **Step 5: CHANGELOG.md Eintrag**
Am Anfang der Datei (nach dem Header):
```markdown
## [2.1.0] — 2026-04-16
### Added
- **Calculator Tab-System:** 6 Modi über Tab-Leiste erreichbar (Standard, Scientific, Unit, SAT, FAC, STA)
- **Scientific-Modus:** Wurzel, Potenz, Pi, Euler, Vorzeichen-Wechsel + Formel-Helfer (Kreis, Pythagoras, Prozent, Temperatur)
- **Unit-Converter:** 6 Kategorien (Länge, Gewicht, Temperatur, Volumen, Geschwindigkeit, Fläche) mit Live-Konvertierung und Swap
- **Satisfactory Calculator:** Items/Min, Overclock-Power (Exponent 1.321928), Maschinen-Rechner
- **Factorio Calculator:** Assembler-Ratios, Belt-Throughput, Maschinen-Rechner mit Belt-Empfehlung
- **Stationeers Calculator:** Idealgas (PV=nRT), Furnace/Verbrennung, Solar/Batterie-Dimensionierung, Atmosphären-Mixer
### Changed
- Parser um `^` (Potenz, rechts-assoziativ) und `sqrt()` erweitert
- Calculator-Widget Auto-Resize auf 320×480 für komplexe Modi
- ~110 neue i18n-Keys (DE + EN)
```
- [ ] **Step 6: Commit**
```bash
git add manifest.json manifest.firefox.json manifest.opera.json newtab.html src/js/data.js src/js/app.js CHANGELOG.md
git commit -m "feat(release): Version auf v2.1.0 bumpen — Calculator Upgrade"
```