217 lines
10 KiB
HTML
217 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Commander AI Lab — Deck Coach</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="global.css" />
|
|
<link rel="stylesheet" href="coach.css" />
|
|
</head>
|
|
<body>
|
|
<script src="nav.js"></script>
|
|
<div class="page">
|
|
<div class="page-header">
|
|
<h1>Deck Coach</h1>
|
|
<p>LLM-powered deck analysis & improvement suggestions</p>
|
|
</div>
|
|
|
|
<!-- Status Bar -->
|
|
<section class="panel coach-status-bar" id="coach-status-bar">
|
|
<div class="coach-status-items">
|
|
<div class="coach-status-item" id="status-llm">
|
|
<span class="status-dot status-unknown"></span>
|
|
<span class="status-label">LM Studio</span>
|
|
<span class="status-value" id="status-llm-value">Checking...</span>
|
|
</div>
|
|
<div class="coach-status-item" id="status-embeddings">
|
|
<span class="status-dot status-unknown"></span>
|
|
<span class="status-label">Embeddings</span>
|
|
<span class="status-value" id="status-embeddings-value">Checking...</span>
|
|
</div>
|
|
<div class="coach-status-item" id="status-reports">
|
|
<span class="status-dot status-unknown"></span>
|
|
<span class="status-label">Deck Reports</span>
|
|
<span class="status-value" id="status-reports-value">Checking...</span>
|
|
</div>
|
|
<button id="generate-reports-btn" class="btn btn-purple btn-sm coach-gen-btn" style="display:none;" title="Build deck reports from simulation results">
|
|
Generate Reports
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Config Panel -->
|
|
<section class="panel coach-config">
|
|
<div class="panel-header">
|
|
<h2>Coaching Session</h2>
|
|
</div>
|
|
<div class="coach-config-grid">
|
|
<!-- Deck Selector -->
|
|
<div class="form-group coach-field-wide">
|
|
<label class="form-label" for="coach-deck-select">Deck</label>
|
|
<select id="coach-deck-select" class="form-select">
|
|
<option value="">-- Select a deck --</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Power Level Slider -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="coach-power-level">Target Power Level</label>
|
|
<div class="coach-slider-row">
|
|
<input type="range" id="coach-power-level" min="1" max="10" value="7" />
|
|
<span class="coach-slider-value" id="coach-power-value">7</span>
|
|
</div>
|
|
<span class="coach-hint">1 = casual jank · 10 = cEDH</span>
|
|
</div>
|
|
|
|
<!-- Meta Focus -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="coach-meta-focus">Meta Focus</label>
|
|
<select id="coach-meta-focus" class="form-select">
|
|
<option value="">Any / Balanced</option>
|
|
<option value="aggro">Aggro</option>
|
|
<option value="midrange">Midrange</option>
|
|
<option value="control">Control</option>
|
|
<option value="combo">Combo</option>
|
|
<option value="stax">Stax</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Budget -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="coach-budget">Budget</label>
|
|
<select id="coach-budget" class="form-select">
|
|
<option value="">No Limit</option>
|
|
<option value="budget">Budget (< $2 per card)</option>
|
|
<option value="medium">Medium (< $10 per card)</option>
|
|
<option value="no-limit">No Limit</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Focus Areas -->
|
|
<div class="form-group coach-field-wide">
|
|
<label class="form-label">Focus Areas (optional)</label>
|
|
<div class="coach-focus-tags">
|
|
<label class="coach-tag"><input type="checkbox" value="ramp" /> Ramp</label>
|
|
<label class="coach-tag"><input type="checkbox" value="card draw" /> Card Draw</label>
|
|
<label class="coach-tag"><input type="checkbox" value="removal" /> Removal</label>
|
|
<label class="coach-tag"><input type="checkbox" value="board wipes" /> Board Wipes</label>
|
|
<label class="coach-tag"><input type="checkbox" value="mana base" /> Mana Base</label>
|
|
<label class="coach-tag"><input type="checkbox" value="win conditions" /> Win Cons</label>
|
|
<label class="coach-tag"><input type="checkbox" value="protection" /> Protection</label>
|
|
<label class="coach-tag"><input type="checkbox" value="recursion" /> Recursion</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Run Button -->
|
|
<div class="coach-run-row">
|
|
<button id="coach-run-btn" class="btn btn-primary btn-lg" disabled>
|
|
<span class="coach-run-icon">⚡</span> Run Coach
|
|
</button>
|
|
<span class="coach-run-hint" id="coach-run-hint">Select a deck to begin</span>
|
|
</div>
|
|
|
|
<!-- Progress -->
|
|
<div id="coach-progress" class="coach-progress" style="display:none;">
|
|
<div class="spinner"></div>
|
|
<span id="coach-progress-text">Analyzing deck and consulting LLM...</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Results Section -->
|
|
<section id="coach-results" class="coach-results" style="display:none;">
|
|
|
|
<!-- Summary Card -->
|
|
<div class="panel" id="coach-summary-card">
|
|
<div class="panel-header">
|
|
<h2>Coach Summary</h2>
|
|
</div>
|
|
<p id="coach-summary-text" class="coach-summary-text"></p>
|
|
<div class="coach-meta-row" id="coach-meta-row"></div>
|
|
</div>
|
|
|
|
<!-- Suggested Cuts -->
|
|
<div class="panel" id="coach-cuts-card">
|
|
<div class="panel-header">
|
|
<h2>Suggested Cuts <span class="coach-badge" id="coach-cuts-count">0</span></h2>
|
|
</div>
|
|
<p class="coach-card-hint">Cards the coach recommends removing from your deck</p>
|
|
<div class="coach-table-wrap">
|
|
<table class="data-table coach-table" id="coach-cuts-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="coach-th-check"><input type="checkbox" id="coach-cuts-all" /></th>
|
|
<th>Card</th>
|
|
<th>Reason</th>
|
|
<th>Replacements</th>
|
|
<th>Impact</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="coach-cuts-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Suggested Adds -->
|
|
<div class="panel" id="coach-adds-card">
|
|
<div class="panel-header">
|
|
<h2>Suggested Adds <span class="coach-badge coach-badge-green" id="coach-adds-count">0</span></h2>
|
|
</div>
|
|
<p class="coach-card-hint">Cards the coach recommends adding to your deck</p>
|
|
<div class="coach-table-wrap">
|
|
<table class="data-table coach-table" id="coach-adds-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="coach-th-check"><input type="checkbox" id="coach-adds-all" /></th>
|
|
<th>Card</th>
|
|
<th>Role</th>
|
|
<th>Reason</th>
|
|
<th>Synergy With</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="coach-adds-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Heuristic Hints -->
|
|
<div class="panel" id="coach-hints-card" style="display:none;">
|
|
<div class="panel-header">
|
|
<h2>Hints & Tips</h2>
|
|
</div>
|
|
<ul id="coach-hints-list" class="coach-hints-list"></ul>
|
|
</div>
|
|
|
|
<!-- Mana Base Advice -->
|
|
<div class="panel" id="coach-mana-card" style="display:none;">
|
|
<div class="panel-header">
|
|
<h2>Mana Base Advice</h2>
|
|
</div>
|
|
<p id="coach-mana-text" class="coach-mana-text"></p>
|
|
</div>
|
|
|
|
<!-- Raw Explanation (collapsible) -->
|
|
<details class="panel coach-raw-details">
|
|
<summary>Full LLM Response</summary>
|
|
<pre id="coach-raw-text" class="coach-raw-text"></pre>
|
|
</details>
|
|
</section>
|
|
|
|
<!-- Past Sessions -->
|
|
<section class="panel coach-sessions-section">
|
|
<div class="panel-header">
|
|
<h2>Past Sessions</h2>
|
|
</div>
|
|
<div id="coach-sessions-list" class="coach-sessions-list">
|
|
<p class="coach-empty">No coaching sessions yet. Run the coach to get started.</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="coach.js"></script>
|
|
</body>
|
|
</html>
|