24f58765ac
The solver form gains an Objective section with a product/sum mode select and per-resource factor inputs (E/B/S/C, zero = excluded). The /solve handler parses both fields and forwards them to solve(), falling back to solve.py defaults when omitted. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
874 lines
33 KiB
HTML
874 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>City Resource Optimization Solver</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
padding: 40px;
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center;
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.form-section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #667eea;
|
|
}
|
|
|
|
.form-section h2 {
|
|
color: #333;
|
|
font-size: 18px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: #555;
|
|
font-weight: 500;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"],
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
input[type="number"]:focus,
|
|
input[type="text"]:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.resource-inputs {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.arrivals-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.step-arrivals {
|
|
padding: 15px;
|
|
background: white;
|
|
border-radius: 5px;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.step-arrivals h3 {
|
|
color: #667eea;
|
|
font-size: 16px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.cities-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.actions-grid,
|
|
.agents-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-group label {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
color: #666;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
button {
|
|
padding: 12px 30px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-solve {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
flex: 1;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.btn-solve:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.btn-solve:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-reset {
|
|
background: #e0e0e0;
|
|
color: #333;
|
|
flex: 1;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.btn-reset:hover {
|
|
background: #d0d0d0;
|
|
}
|
|
|
|
.btn-solve:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.output-section {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
border-radius: 8px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.output-section.show {
|
|
display: block;
|
|
}
|
|
|
|
.output-section h2 {
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.status {
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
margin-bottom: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status.success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.status.error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
|
|
.loading {
|
|
display: none;
|
|
text-align: center;
|
|
color: #667eea;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.loading.show {
|
|
display: block;
|
|
}
|
|
|
|
.spinner {
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid #667eea;
|
|
border-radius: 50%;
|
|
width: 30px;
|
|
height: 30px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 10px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.agent-steps-input {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.constraint-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.constraint-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr auto;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
align-items: center;
|
|
}
|
|
|
|
.constraint-row.governor {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr auto;
|
|
}
|
|
|
|
.constraint-row select,
|
|
.constraint-row input {
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.btn-remove {
|
|
background: #dc3545;
|
|
color: white;
|
|
border: none;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
min-width: 70px;
|
|
}
|
|
|
|
.btn-remove:hover {
|
|
background: #c82333;
|
|
}
|
|
|
|
.btn-add {
|
|
background: #28a745;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.btn-add:hover {
|
|
background: #218838;
|
|
}
|
|
|
|
pre {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
border: 1px solid #ddd;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
details>summary {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
details>summary:hover {
|
|
color: #667eea;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>🏛️ City Resource Optimization</h1>
|
|
<p class="subtitle">Solve for optimal resource distribution across cities</p>
|
|
|
|
<form id="solverForm">
|
|
<!-- Initial Resources Section -->
|
|
<div class="form-section">
|
|
<h2>Initial Resources (Step 1 Start)</h2>
|
|
<div class="resource-inputs">
|
|
<div class="form-group">
|
|
<label for="initial_E">Electrum</label>
|
|
<input type="number" id="initial_E" name="initial_E" value="{{ (initial[0] / 10) | round(1) }}"
|
|
min="0" step="0.1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="initial_B">Brass</label>
|
|
<input type="number" id="initial_B" name="initial_B" value="{{ initial[1] // 10 }}" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="initial_S">Steel</label>
|
|
<input type="number" id="initial_S" name="initial_S" value="{{ initial[2] // 10 }}" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="initial_C">Capital</label>
|
|
<input type="number" id="initial_C" name="initial_C" value="{{ initial[3] // 10 }}" min="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Arrivals Schedule Section -->
|
|
<div class="form-section">
|
|
<h2>Cities</h2>
|
|
<div class="arrivals-grid" id="citiesContainer"></div>
|
|
<button type="button" class="btn-add" onclick="addCity()">+ Add City</button>
|
|
</div>
|
|
|
|
<!-- Enabled Actions Section -->
|
|
<div class="form-section">
|
|
<h2>Available Actions</h2>
|
|
<div class="actions-grid">
|
|
{% for action_name in actions.keys() | sort %}
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="action_{{ action_name }}" name="action_{{ action_name }}" {% if
|
|
actions[action_name] %}checked{% endif %}>
|
|
<label for="action_{{ action_name }}">{{ action_name }}</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agent Availability Section -->
|
|
<div class="form-section">
|
|
<h2>Agent Availability</h2>
|
|
<p style="color: #666; font-size: 13px; margin-bottom: 15px;">
|
|
Specify steps where each agent is available (comma-separated, e.g., "1,2,3,4,5")
|
|
</p>
|
|
<div class="agents-grid">
|
|
{% for agent_name in agents.keys() | sort %}
|
|
<div class="form-group">
|
|
<label for="agent_{{ agent_name }}_steps">{{ agent_name }}</label>
|
|
<input type="text" id="agent_{{ agent_name }}_steps" name="agent_{{ agent_name }}_steps"
|
|
placeholder="e.g., 1,2,3" class="agent-steps-input" {% if agents[agent_name]
|
|
%}value="{{ agents[agent_name] | join(',') }}" {% endif %}>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Objective Section -->
|
|
<div class="form-section">
|
|
<h2>Objective</h2>
|
|
<p style="color: #666; font-size: 13px; margin-bottom: 15px;">
|
|
Factor = exponent in product mode, weight in sum mode. A factor of 0 excludes that
|
|
resource from the objective (it is not forced to zero). Negative factors are only
|
|
allowed in sum mode. Factors are unaffected by the internal x10 resource scaling.
|
|
</p>
|
|
<div class="form-group">
|
|
<label for="objective_mode">Mode</label>
|
|
<select id="objective_mode" name="objective_mode">
|
|
<option value="product" {% if objective_mode=="product" %}selected{% endif %}>Product
|
|
(maximize E^a × B^b × ...)</option>
|
|
<option value="sum" {% if objective_mode=="sum" %}selected{% endif %}>Sum
|
|
(maximize a·E + b·B + ...)</option>
|
|
</select>
|
|
</div>
|
|
<div class="resource-inputs">
|
|
<div class="form-group">
|
|
<label for="objective_factor_E">Electrum Factor</label>
|
|
<input type="number" id="objective_factor_E" name="objective_factor_E"
|
|
value="{{ objective_factors.get('E', 0) }}" step="1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="objective_factor_B">Brass Factor</label>
|
|
<input type="number" id="objective_factor_B" name="objective_factor_B"
|
|
value="{{ objective_factors.get('B', 0) }}" step="1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="objective_factor_S">Steel Factor</label>
|
|
<input type="number" id="objective_factor_S" name="objective_factor_S"
|
|
value="{{ objective_factors.get('S', 0) }}" step="1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="objective_factor_C">Capital Factor</label>
|
|
<input type="number" id="objective_factor_C" name="objective_factor_C"
|
|
value="{{ objective_factors.get('C', 0) }}" step="1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Solver Settings Section -->
|
|
<div class="form-section">
|
|
<h2>Solver Settings</h2>
|
|
<div class="form-group">
|
|
<label for="time_limit">Time Limit (seconds)</label>
|
|
<input type="number" id="time_limit" name="time_limit" value="60" min="1">
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="verbose" name="verbose">
|
|
<label for="verbose">Verbose Output</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fixed Actions Section -->
|
|
<div class="form-section">
|
|
<h2>Fixed Actions (Optional)</h2>
|
|
<p style="color: #666; font-size: 13px; margin-bottom: 15px;">
|
|
Force specific actions for cities at specific steps
|
|
</p>
|
|
<div class="constraint-rows" id="actionConstraints"></div>
|
|
<button type="button" class="btn-add" onclick="addActionConstraint()">+ Add Action Constraint</button>
|
|
</div>
|
|
|
|
<!-- Fixed Governors Section -->
|
|
<div class="form-section">
|
|
<h2>Fixed Governors (Optional)</h2>
|
|
<p style="color: #666; font-size: 13px; margin-bottom: 15px;">
|
|
Force specific agents to govern cities at specific steps
|
|
</p>
|
|
<div class="constraint-rows" id="governorConstraints"></div>
|
|
<button type="button" class="btn-add" onclick="addGovernorConstraint()">+ Add Governor
|
|
Constraint</button>
|
|
</div>
|
|
|
|
<!-- Resource Constraints Section -->
|
|
<div class="form-section">
|
|
<h2>Resource Constraints (Optional)</h2>
|
|
<p style="color: #666; font-size: 13px; margin-bottom: 15px;">
|
|
Enforce minimum resource levels at specific steps. Examples: <code
|
|
style="background: #f0f0f0; padding: 2px 4px;">E[3] >= 50</code>, <code
|
|
style="background: #f0f0f0; padding: 2px 4px;">B[2] + S[2] >= 100</code>
|
|
</p>
|
|
<p style="color: red; font-size:13px;">Warning: all resources are multiplied by 10 internally so
|
|
constraints should also be multiplied by 10 e.g. <code>E[2]>=10</code> checks if electrum is
|
|
greater or equal than 1 not 10 on day 2</p>
|
|
<div class="constraint-rows" id="resourceConstraints"></div>
|
|
<button type="button" class="btn-add" onclick="addResourceConstraint()">+ Add Resource
|
|
Constraint</button>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="button-group">
|
|
<button type="submit" class="btn-solve">Solve</button>
|
|
<button type="reset" class="btn-reset">Reset</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Loading Indicator -->
|
|
<div class="loading" id="loading">
|
|
<div class="spinner"></div>
|
|
<p>Solving... This may take a moment.</p>
|
|
</div>
|
|
|
|
<!-- Output Section -->
|
|
<div class="output-section" id="outputSection">
|
|
<h2>Results</h2>
|
|
<div id="outputContainer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let cityCount = 0;
|
|
let actionConstraintCount = 0;
|
|
let governorConstraintCount = 0;
|
|
let resourceConstraintCount = 0;
|
|
|
|
const AVAILABLE_ACTIONS = {{actions | tojson }};
|
|
const AVAILABLE_AGENTS = {{agents | tojson }};
|
|
const NUM_STEPS = {{num_steps}};
|
|
|
|
function updateDepartureOptions(cityId) {
|
|
const arrivalSelect = document.getElementById(`city_${cityId}_arrival_step`);
|
|
const departureSelect = document.getElementById(`city_${cityId}_departure_step`);
|
|
|
|
if (!arrivalSelect || !departureSelect) return;
|
|
|
|
const arrivalStep = parseInt(arrivalSelect.value);
|
|
const currentDeparture = departureSelect.value;
|
|
|
|
// Clear departure options
|
|
departureSelect.innerHTML = '';
|
|
|
|
// Add Game End option
|
|
const gameEndOption = document.createElement('option');
|
|
gameEndOption.value = NUM_STEPS + 1;
|
|
gameEndOption.textContent = 'Game End';
|
|
departureSelect.appendChild(gameEndOption);
|
|
|
|
// Add step options only for steps after arrival
|
|
for (let step = arrivalStep + 1; step <= NUM_STEPS; step++) {
|
|
const option = document.createElement('option');
|
|
option.value = step;
|
|
option.textContent = `Step ${step}`;
|
|
departureSelect.appendChild(option);
|
|
}
|
|
|
|
// Set departure to Game End if current value is no longer valid
|
|
if (currentDeparture <= arrivalStep) {
|
|
departureSelect.value = NUM_STEPS + 1;
|
|
} else if (departureSelect.querySelector(`option[value="${currentDeparture}"]`)) {
|
|
departureSelect.value = currentDeparture;
|
|
}
|
|
}
|
|
|
|
function updateVatInputs(cityId) {
|
|
const typeSelect = document.getElementById(`city_${cityId}_type`);
|
|
const vatsContainer = document.getElementById(`city_${cityId}_vats`);
|
|
if (!typeSelect || !vatsContainer) return;
|
|
|
|
if (typeSelect.value === 'F') {
|
|
vatsContainer.style.display = 'block';
|
|
} else {
|
|
vatsContainer.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function addCity() {
|
|
const container = document.getElementById('citiesContainer');
|
|
const id = cityCount++;
|
|
|
|
const cityDiv = document.createElement('div');
|
|
cityDiv.className = 'step-arrivals';
|
|
cityDiv.id = `city-${id}`;
|
|
cityDiv.innerHTML = `
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
|
|
<h3 style="margin: 0;">City ${id}</h3>
|
|
<button type="button" class="btn-remove" style="margin: 0;" onclick="document.getElementById('city-${id}').remove()">Remove</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="city_${id}_type">Type</label>
|
|
<select id="city_${id}_type" name="city_${id}_type" onchange="updateVatInputs(${id})">
|
|
<option value="H">Hub</option>
|
|
<option value="F">Foundry</option>
|
|
<option value="M">Metropolis</option>
|
|
<option value="N">Monument</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="city_${id}_arrival_step">Arrival Step</label>
|
|
<select id="city_${id}_arrival_step" name="city_${id}_arrival_step" onchange="updateDepartureOptions(${id})">
|
|
${Array.from({length: NUM_STEPS}, (_, i) => `<option value="${i + 1}">Step ${i + 1}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="city_${id}_departure_step">Departure Step</label>
|
|
<select id="city_${id}_departure_step" name="city_${id}_departure_step">
|
|
<option value="${NUM_STEPS + 1}">Game End</option>
|
|
${Array.from({length: NUM_STEPS}, (_, i) => `<option value="${i + 1}">Step ${i + 1}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="city_${id}_adjacent">Adjacent Cities</label>
|
|
<input type="text" id="city_${id}_adjacent" name="city_${id}_adjacent" placeholder="e.g., 0,2,3" class="agent-steps-input">
|
|
</div>
|
|
<div id="city_${id}_vats" style="display: none;">
|
|
<p style="color: #666; font-size: 12px; margin-bottom: 10px; margin-top: 10px;">Foundry Vat Values (defaults to 1):</p>
|
|
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
|
|
<div class="form-group">
|
|
<label for="city_${id}_vat_E">Electrum</label>
|
|
<input type="number" id="city_${id}_vat_E" name="city_${id}_vat_E" value="1" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="city_${id}_vat_B">Brass</label>
|
|
<input type="number" id="city_${id}_vat_B" name="city_${id}_vat_B" value="1" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="city_${id}_vat_S">Steel</label>
|
|
<input type="number" id="city_${id}_vat_S" name="city_${id}_vat_S" value="1" min="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.appendChild(cityDiv);
|
|
|
|
// Initialize departure options based on default arrival step (1)
|
|
updateDepartureOptions(id);
|
|
}
|
|
|
|
function addActionConstraint() {
|
|
const container = document.getElementById('actionConstraints');
|
|
const id = actionConstraintCount++;
|
|
|
|
// Get existing city indices
|
|
const existingCities = Array.from(document.querySelectorAll('[id^="city-"]')).map(el =>
|
|
parseInt(el.id.split('-')[1])
|
|
);
|
|
const maxCity = existingCities.length > 0 ? Math.max(...existingCities) + 1 : 1;
|
|
const cityOptions = Array.from({length: maxCity}, (_, i) =>
|
|
`<option value="${i}">${i}</option>`
|
|
).join('');
|
|
|
|
const row = document.createElement('div');
|
|
row.className = 'constraint-row';
|
|
row.id = `action-constraint-${id}`;
|
|
row.innerHTML = `
|
|
<select name="action_city_${id}" class="action-city">
|
|
${cityOptions}
|
|
</select>
|
|
<select name="action_step_${id}">
|
|
${Array.from({length: NUM_STEPS}, (_, i) => `<option value="${i + 1}">Step ${i + 1}</option>`).join('')}
|
|
</select>
|
|
<select name="action_action_${id}">
|
|
${Object.keys(AVAILABLE_ACTIONS).map(a => `<option value="${a}">${a}</option>`).join('')}
|
|
</select>
|
|
<button type="button" class="btn-remove" onclick="document.getElementById('action-constraint-${id}').remove()">Remove</button>
|
|
`;
|
|
container.appendChild(row);
|
|
}
|
|
|
|
function addGovernorConstraint() {
|
|
const container = document.getElementById('governorConstraints');
|
|
const id = governorConstraintCount++;
|
|
|
|
// Get existing city indices
|
|
const existingCities = Array.from(document.querySelectorAll('[id^="city-"]')).map(el =>
|
|
parseInt(el.id.split('-')[1])
|
|
);
|
|
const maxCity = existingCities.length > 0 ? Math.max(...existingCities) + 1 : 1;
|
|
const cityOptions = Array.from({length: maxCity}, (_, i) =>
|
|
`<option value="${i}">${i}</option>`
|
|
).join('');
|
|
|
|
const row = document.createElement('div');
|
|
row.className = 'constraint-row governor';
|
|
row.id = `governor-constraint-${id}`;
|
|
row.innerHTML = `
|
|
<select name="gov_city_${id}">
|
|
${cityOptions}
|
|
</select>
|
|
<select name="gov_step_${id}">
|
|
${Array.from({length: NUM_STEPS}, (_, i) => `<option value="${i + 1}">Step ${i + 1}</option>`).join('')}
|
|
</select>
|
|
<select name="gov_agent_${id}">
|
|
${Object.keys(AVAILABLE_AGENTS).map(a => `<option value="${a}">${a}</option>`).join('')}
|
|
</select>
|
|
<div class="checkbox-group" style="margin: 0; gap: 4px;">
|
|
<input type="checkbox" name="gov_enabled_${id}" id="gov_enabled_${id}" checked>
|
|
<label for="gov_enabled_${id}" style="margin: 0;">Enabled</label>
|
|
</div>
|
|
<button type="button" class="btn-remove" onclick="document.getElementById('governor-constraint-${id}').remove()">Remove</button>
|
|
`;
|
|
container.appendChild(row);
|
|
}
|
|
|
|
function addResourceConstraint() {
|
|
const container = document.getElementById('resourceConstraints');
|
|
const id = resourceConstraintCount++;
|
|
|
|
const row = document.createElement('div');
|
|
row.className = 'constraint-row';
|
|
row.id = `resource-constraint-${id}`;
|
|
row.style.gridTemplateColumns = '1fr auto';
|
|
row.innerHTML = `
|
|
<input type="text" name="resource_expr_${id}" placeholder="e.g., E[3] >= 50 or B[2] + S[2] >= 100" style="flex: 1;">
|
|
<button type="button" class="btn-remove" onclick="document.getElementById('resource-constraint-${id}').remove()">Remove</button>
|
|
`;
|
|
container.appendChild(row);
|
|
}
|
|
|
|
document.getElementById('solverForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const form = e.target;
|
|
const formData = new FormData(form);
|
|
const data = Object.fromEntries(formData);
|
|
|
|
// Convert verbose checkbox to boolean
|
|
data['verbose'] = document.getElementById('verbose').checked;
|
|
|
|
// Convert checked checkboxes to true/false for all action enable/disable inputs
|
|
const enableCheckboxes = form.querySelectorAll('input[name^="action_"][type="checkbox"]');
|
|
enableCheckboxes.forEach(input => {
|
|
data[input.name] = input.checked;
|
|
});
|
|
|
|
// Collect objective mode and factors (only nonzero factors; missing = excluded)
|
|
data.objective_mode = document.getElementById('objective_mode').value;
|
|
const objectiveFactors = {};
|
|
['E', 'B', 'S', 'C'].forEach(r => {
|
|
const factor = parseInt(document.getElementById(`objective_factor_${r}`).value);
|
|
if (factor) {
|
|
objectiveFactors[r] = factor;
|
|
}
|
|
});
|
|
data.objective_factors = objectiveFactors;
|
|
|
|
// Collect fixed action constraints
|
|
const fixedActions = {};
|
|
form.querySelectorAll('[id^="action-constraint-"]').forEach(row => {
|
|
const city = parseInt(row.querySelector('[name^="action_city_"]').value);
|
|
const step = parseInt(row.querySelector('[name^="action_step_"]').value);
|
|
const action = row.querySelector('[name^="action_action_"]').value;
|
|
fixedActions[`${city},${step}`] = action;
|
|
});
|
|
|
|
// Collect fixed governor constraints
|
|
const fixedGovernors = {};
|
|
form.querySelectorAll('[id^="governor-constraint-"]').forEach(row => {
|
|
const city = parseInt(row.querySelector('[name^="gov_city_"]').value);
|
|
const step = parseInt(row.querySelector('[name^="gov_step_"]').value);
|
|
const agent = row.querySelector('[name^="gov_agent_"]').value;
|
|
const enabled = row.querySelector('[name^="gov_enabled_"]').checked;
|
|
fixedGovernors[`${city},${step},${agent}`] = enabled;
|
|
});
|
|
|
|
// Collect resource constraints
|
|
const resourceConstraints = [];
|
|
form.querySelectorAll('[id^="resource-constraint-"]').forEach(row => {
|
|
const expr = row.querySelector('[name^="resource_expr_"]').value.trim();
|
|
if (expr) {
|
|
resourceConstraints.push(expr);
|
|
}
|
|
});
|
|
|
|
// Add constraints to data if any exist
|
|
if (Object.keys(fixedActions).length > 0) {
|
|
data.fixed_actions = fixedActions;
|
|
}
|
|
if (Object.keys(fixedGovernors).length > 0) {
|
|
data.fixed_governors = fixedGovernors;
|
|
}
|
|
if (resourceConstraints.length > 0) {
|
|
data.resource_constraints = resourceConstraints;
|
|
}
|
|
|
|
document.getElementById('loading').classList.add('show');
|
|
document.getElementById('outputSection').classList.remove('show');
|
|
|
|
try {
|
|
const response = await fetch('/solve', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
document.getElementById('loading').classList.remove('show');
|
|
document.getElementById('outputSection').classList.add('show');
|
|
|
|
// Generate summary of configuration
|
|
const numCities = Array.from(document.querySelectorAll('[id^="city-"]')).filter(
|
|
el => document.getElementById(`city_${el.id.split('-')[1]}_type`).value !== 'none'
|
|
).length;
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const summaryText = `${timestamp} • ${numCities} city(cities) • ${result.status}`;
|
|
|
|
if (result.success) {
|
|
// Create new result section
|
|
const resultDiv = document.createElement('div');
|
|
resultDiv.style.marginBottom = '20px';
|
|
resultDiv.innerHTML = `
|
|
<div class="status success" style="margin-bottom: 10px;">✓ ${summaryText}</div>
|
|
<details open>
|
|
<summary>Solver Output</summary>
|
|
<pre>${result.output}</pre>
|
|
</details>
|
|
`;
|
|
|
|
// Prepend to output container (newest first)
|
|
const container = document.getElementById('outputContainer');
|
|
container.insertBefore(resultDiv, container.firstChild);
|
|
} else {
|
|
// Create new error section
|
|
const resultDiv = document.createElement('div');
|
|
resultDiv.style.marginBottom = '20px';
|
|
resultDiv.innerHTML = `
|
|
<div class="status error" style="margin-bottom: 10px;">✗ ${summaryText}</div>
|
|
<details open>
|
|
<summary>Error Details</summary>
|
|
<pre>${result.error}</pre>
|
|
</details>
|
|
`;
|
|
|
|
const container = document.getElementById('outputContainer');
|
|
container.insertBefore(resultDiv, container.firstChild);
|
|
}
|
|
} catch (error) {
|
|
document.getElementById('loading').classList.remove('show');
|
|
document.getElementById('outputSection').classList.add('show');
|
|
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const resultDiv = document.createElement('div');
|
|
resultDiv.style.marginBottom = '20px';
|
|
resultDiv.innerHTML = `
|
|
<div class="status error" style="margin-bottom: 10px;">✗ ${timestamp} • Request failed</div>
|
|
<details open>
|
|
<summary>Error Details</summary>
|
|
<pre>${error.message}</pre>
|
|
</details>
|
|
`;
|
|
|
|
const container = document.getElementById('outputContainer');
|
|
container.insertBefore(resultDiv, container.firstChild);
|
|
}
|
|
});
|
|
|
|
// Initialize with one city on page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
addCity();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|