276 lines
11 KiB
HTML
276 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Satisfactory Production Calculator</title>
|
|
<style>
|
|
:root { --bg: #0f172a; --card: #111827; --text: #e5e7eb; --muted:#94a3b8; --accent:#22d3ee; --ok:#4ade80; }
|
|
* { box-sizing: border-box; }
|
|
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--text); }
|
|
.container { margin: 0 auto; padding: 24px; }
|
|
h1 { font-size: 1.75rem; margin: 0 0 8px; }
|
|
p { color: var(--muted); margin-top: 0; }
|
|
.card { background: var(--card); border: 1px solid #1f2937; border-radius: 10px; padding: 16px; }
|
|
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
@media (max-width: 800px) { .row { grid-template-columns: 1fr; } }
|
|
label { display:block; margin-bottom:8px; font-weight:600; }
|
|
select, input[type=number] { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #334155; background: #0b1220; color: var(--text); }
|
|
button { padding: 10px 14px; border: 0; border-radius: 8px; background: var(--accent); color: #012b30; font-weight: 700; cursor: pointer; }
|
|
button:hover { filter: brightness(1.08); }
|
|
.mt { margin-top: 16px; }
|
|
.error { color: #fda4af; background: #451a1a; border: 1px solid #7f1d1d; padding: 10px; border-radius: 8px; }
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #1f2937; vertical-align: top; }
|
|
th { color: var(--muted); font-weight: 600; }
|
|
code { color: var(--accent); }
|
|
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
.pill { display:inline-block; padding:2px 8px; border-radius: 999px; background:#0b1220; border:1px solid #334155; color: var(--muted); font-size: 12px; }
|
|
.completed td:not(.done-col) { text-decoration: line-through; color: var(--muted); }
|
|
.done-col { width: 1%; white-space: nowrap; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Satisfactory Production Calculator</h1>
|
|
<p>Compute buildings and raw inputs for a target output rate (items per minute).</p>
|
|
|
|
<form class="card" method="get" id="targets-form">
|
|
<div>
|
|
<label>Products</label>
|
|
<table style="width:100%; border-collapse: collapse;">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:60%">Item</th>
|
|
<th style="width:30%" class="mono">Rate (items/min)</th>
|
|
<th style="width:10%"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="targets-rows">
|
|
{% for row in targets_ui %}
|
|
<tr class="target-row">
|
|
<td>
|
|
<select name="item_{{ loop.index }}" required>
|
|
{% for it in items %}
|
|
<option value="{{ it }}" {% if row.item == it %}selected{% endif %}>{{ it }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<input name="rate_{{ loop.index }}" type="number" step="0.01" min="0" value="{{ row.rate }}" required>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="pill" onclick="removeRow(this)" title="Remove">✕</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<div class="mt">
|
|
<button type="button" onclick="addRow()">Add product</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt">
|
|
<button type="submit">Calculate</button>
|
|
</div>
|
|
{% if error %}
|
|
<div class="mt error">{{ error }}</div>
|
|
{% endif %}
|
|
</form>
|
|
|
|
{% if result %}
|
|
<div class="mt card">
|
|
<h2 style="margin-top:0">Results</h2>
|
|
<h3>Raw resource requirements</h3>
|
|
{% if result.raw %}
|
|
<table>
|
|
<thead>
|
|
<tr><th class="done-col">Done</th><th>Item</th><th class="mono">Rate (items/min)</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item,rate in result.raw.items() %}
|
|
<tr>
|
|
<td class="done-col"><input type="checkbox" onchange="toggleDone(this)"></td>
|
|
<td>{{ item }}</td>
|
|
<td class="mono">{{ '%.2f'|format(rate) }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<p class="pill">No raw resources required (target is a raw resource).</p>
|
|
{% endif %}
|
|
|
|
{% if overrides_ui and overrides_ui|length > 0 %}
|
|
<h3 class="mt">Recipe overrides</h3>
|
|
<form method="get" class="card" style="background: transparent; border:0; padding:0;">
|
|
{# Preserve all target rows in the recalculation #}
|
|
{% for row in targets_ui %}
|
|
<input type="hidden" name="item_{{ loop.index }}" value="{{ row.item }}">
|
|
<input type="hidden" name="rate_{{ loop.index }}" value="{{ row.rate }}">
|
|
{% endfor %}
|
|
{% if selected_recipe %}<input type="hidden" name="recipe" value="{{ selected_recipe }}">{% endif %}
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Item</th>
|
|
<th>Override recipe</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for ov in overrides_ui %}
|
|
<tr>
|
|
<td>{{ ov.item_name }}</td>
|
|
<td>
|
|
<select name="recipe_for_{{ ov.slug }}">
|
|
<option value="" {% if not ov.selected %}selected{% endif %}>Auto-select best</option>
|
|
{% for opt in ov.options %}
|
|
<option value="{{ opt.name }}" {% if ov.selected and opt.name==ov.selected %}selected{% endif %}>{{ opt.name }} ({{ opt.building }})</option>
|
|
{% endfor %}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<div class="mt">
|
|
<button type="submit">Recalculate</button>
|
|
<a href="{{ reset_query }}" class="pill" style="margin-left:8px; display:inline-block; text-decoration:none;">Reset overrides</a>
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
|
|
<h3 class="mt">Production steps</h3>
|
|
{% if result.steps %}
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="done-col">Done</th>
|
|
<th>Output Item</th>
|
|
<th>Recipe</th>
|
|
<th>Building</th>
|
|
<th>Inputs</th>
|
|
<th class="mono">Target rate</th>
|
|
<th class="mono">Per-building output</th>
|
|
<th class="mono">Buildings</th>
|
|
<th class="mono">Utilization</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for s in result.steps %}
|
|
<tr>
|
|
<td class="done-col"><input type="checkbox" onchange="toggleDone(this)"></td>
|
|
<td>{{ s.item }}</td>
|
|
<td>{{ s.recipe }}</td>
|
|
<td>{{ s.building }}</td>
|
|
<td>
|
|
{% if s.inputs and s.inputs|length > 0 %}
|
|
<div>
|
|
{% for inp in s.inputs %}
|
|
<div>{{ inp.item }} — <span class="mono">{{ '%.2f'|format(inp.rate) }}</span></div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<span class="pill">None</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="mono">{{ '%.2f'|format(s.target_rate) }}</td>
|
|
<td class="mono">{{ '%.2f'|format(s.per_building_output) }}</td>
|
|
<td class="mono">{{ '%.2f'|format(s.buildings_float) }} (~ {{ s.buildings }})</td>
|
|
<td class="mono">{{ '%.1f'|format(s.utilization*100) }}%</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<p class="pill">No production steps (target is a raw resource).</p>
|
|
{% endif %}
|
|
|
|
<h3 class="mt">Excess products</h3>
|
|
{% if result.excess and result.excess|length > 0 %}
|
|
<table>
|
|
<thead>
|
|
<tr><th class="done-col">Done</th><th>Item</th><th class="mono">Excess rate (items/min)</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item,rate in result.excess.items() %}
|
|
<tr>
|
|
<td class="done-col"><input type="checkbox" onchange="toggleDone(this)"></td>
|
|
<td>{{ item }}</td>
|
|
<td class="mono">{{ '%.2f'|format(rate) }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<p class="pill">No excess products for this target.</p>
|
|
{% endif %}
|
|
|
|
<h3 class="mt">Unused byproducts</h3>
|
|
{% if result.unused and result.unused|length > 0 %}
|
|
<table>
|
|
<thead>
|
|
<tr><th class="done-col">Done</th><th>Item</th><th class="mono">Unused rate (items/min)</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item,rate in result.unused.items() %}
|
|
<tr>
|
|
<td class="done-col"><input type="checkbox" onchange="toggleDone(this)"></td>
|
|
<td>{{ item }}</td>
|
|
<td class="mono">{{ '%.2f'|format(rate) }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<p class="pill">No unused byproducts for this target.</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
// Dynamic add/remove for multiple product targets
|
|
const itemsList = {{ items | tojson }};
|
|
function addRow() {
|
|
const tbody = document.getElementById('targets-rows');
|
|
const idx = tbody.querySelectorAll('tr').length + 1;
|
|
const tr = document.createElement('tr');
|
|
tr.className = 'target-row';
|
|
const options = itemsList.map(it => `<option value="${it}">${it}</option>`).join('');
|
|
tr.innerHTML = `
|
|
<td>
|
|
<select name="item_${idx}" required>${options}</select>
|
|
</td>
|
|
<td>
|
|
<input name="rate_${idx}" type="number" step="0.01" min="0" value="60.0" required>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="pill" onclick="removeRow(this)" title="Remove">✕</button>
|
|
</td>`;
|
|
tbody.appendChild(tr);
|
|
}
|
|
function removeRow(btn) {
|
|
const tr = btn.closest('tr');
|
|
const tbody = tr && tr.parentElement;
|
|
if (!tbody) return;
|
|
tbody.removeChild(tr);
|
|
// Optionally renumber names to keep indices compact
|
|
Array.from(tbody.querySelectorAll('tr')).forEach((row, i) => {
|
|
const idx = i + 1;
|
|
const sel = row.querySelector('select[name^="item_"]');
|
|
const rate = row.querySelector('input[name^="rate_"]');
|
|
if (sel) sel.name = `item_${idx}`;
|
|
if (rate) rate.name = `rate_${idx}`;
|
|
});
|
|
}
|
|
function toggleDone(cb) {
|
|
const tr = cb.closest('tr');
|
|
if (!tr) return;
|
|
tr.classList.toggle('completed', cb.checked);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|