Spaces:
Running
Running
| /** | |
| * CombatDebugRenderer - State-focused combat renderer for debugging. | |
| * | |
| * Per SPEC-VIEWER §5.3: | |
| * - R1: init() MUST be callable multiple times (re-init for new match) | |
| * - R2: renderFrame() MUST handle any valid GameplayFrame | |
| * - R3: destroy() MUST remove all DOM elements added by renderer | |
| * - R4: Renderers MUST NOT modify MatchData or GameplayFrame objects | |
| */ | |
| class CombatDebugRenderer { | |
| constructor() { | |
| this._container = null; | |
| this._matchData = null; | |
| this._elements = {}; | |
| } | |
| /** | |
| * Initialize renderer in container | |
| * @param {HTMLElement} container | |
| * @param {MatchData} matchData | |
| */ | |
| init(container, matchData) { | |
| // R1: Clean up previous init | |
| this.destroy(); | |
| this._container = container; | |
| this._matchData = matchData; | |
| this._createDebugView(); | |
| this._renderLifecyclePanels(); | |
| } | |
| /** | |
| * Render a gameplay frame | |
| * @param {GameplayFrame} frame | |
| */ | |
| renderFrame(frame) { | |
| if (!this._container) return; | |
| // Update frame info | |
| this._elements.frameNumber.textContent = frame.index + 1; | |
| this._elements.turnNumber.textContent = frame.turnNumber; | |
| this._elements.player.textContent = frame.player; | |
| this._elements.action.textContent = frame.action; | |
| // Update state before/after | |
| this._elements.stateBefore.textContent = JSON.stringify(frame.stateBefore, null, 2); | |
| this._elements.stateAfter.textContent = JSON.stringify(frame.stateAfter, null, 2); | |
| // Update reasoning if present | |
| if (frame.reasoning) { | |
| this._elements.reasoning.textContent = frame.reasoning; | |
| this._elements.reasoningContainer.style.display = 'block'; | |
| } else { | |
| this._elements.reasoningContainer.style.display = 'none'; | |
| } | |
| // Update prompt data if present | |
| if (frame.prompt) { | |
| this._elements.promptText.textContent = frame.prompt.promptText || 'N/A'; | |
| this._elements.responseText.textContent = frame.prompt.responseText || 'N/A'; | |
| this._elements.duration.textContent = `${frame.prompt.duration || 0}ms`; | |
| this._elements.promptContainer.style.display = 'block'; | |
| } else { | |
| this._elements.promptContainer.style.display = 'none'; | |
| } | |
| } | |
| /** | |
| * Render victory screen | |
| * @param {string | null} winner | |
| * @param {GameState} finalState | |
| */ | |
| renderVictory(winner, finalState, outcomeInfo = {}) { | |
| if (!this._container) return; | |
| const { outcome, forfeitReason, forfeitingPlayer } = outcomeInfo; | |
| this._elements.victoryContainer.style.display = 'block'; | |
| this._elements.victoryTitle.textContent = outcome === 'forfeit' ? 'Match Forfeited' : 'Match Complete'; | |
| this._elements.winner.textContent = winner || 'Draw'; | |
| this._elements.finalState.textContent = JSON.stringify(finalState, null, 2); | |
| if (outcome === 'forfeit') { | |
| this._elements.outcomeRow.style.display = 'flex'; | |
| this._elements.outcome.textContent = 'Forfeit'; | |
| this._elements.outcomeDetailRow.style.display = 'flex'; | |
| this._elements.outcomeDetail.textContent = forfeitingPlayer | |
| ? `${forfeitingPlayer} ${this._formatForfeitReason(forfeitReason)}` | |
| : this._formatForfeitReason(forfeitReason); | |
| return; | |
| } | |
| this._elements.outcomeRow.style.display = 'none'; | |
| this._elements.outcome.textContent = ''; | |
| this._elements.outcomeDetailRow.style.display = 'none'; | |
| this._elements.outcomeDetail.textContent = ''; | |
| } | |
| /** | |
| * Cleanup resources | |
| */ | |
| destroy() { | |
| if (this._container && this._elements.root) { | |
| this._container.removeChild(this._elements.root); | |
| } | |
| this._container = null; | |
| this._matchData = null; | |
| this._elements = {}; | |
| } | |
| // ========================================================================= | |
| // Private: View Creation | |
| // ========================================================================= | |
| _createDebugView() { | |
| const root = document.createElement('div'); | |
| root.className = 'debug-viewer'; | |
| root.innerHTML = ` | |
| <div class="debug-header"> | |
| <h2>Debug Viewer - ${this._escapeHtml(this._matchData.game)}</h2> | |
| <div class="debug-match-info"> | |
| <span>Match: ${this._escapeHtml(this._matchData.matchId)}</span> | |
| <span>Players: ${this._matchData.players.map(p => this._escapeHtml(p)).join(' vs ')}</span> | |
| </div> | |
| </div> | |
| <div id="debug-handshake-container" class="debug-section" style="display: none;"> | |
| <h3>Handshake Prompts</h3> | |
| <div id="debug-handshake-list" class="debug-lifecycle-list"></div> | |
| </div> | |
| <div class="debug-frame-info"> | |
| <div class="debug-row"> | |
| <label>Frame:</label> | |
| <span id="debug-frame-number">-</span> | |
| </div> | |
| <div class="debug-row"> | |
| <label>Turn:</label> | |
| <span id="debug-turn-number">-</span> | |
| </div> | |
| <div class="debug-row"> | |
| <label>Player:</label> | |
| <span id="debug-player">-</span> | |
| </div> | |
| <div class="debug-row"> | |
| <label>Action:</label> | |
| <span id="debug-action">-</span> | |
| </div> | |
| <div id="debug-highlight-row" class="debug-highlight-row" style="display: none;"> | |
| <span id="debug-highlight-icon" class="debug-highlight-icon"></span> | |
| <span id="debug-highlight-text" class="debug-highlight-text"></span> | |
| </div> | |
| </div> | |
| <div class="debug-state-comparison"> | |
| <div class="debug-state-column"> | |
| <h3>State Before</h3> | |
| <pre id="debug-state-before">{}</pre> | |
| </div> | |
| <div class="debug-state-column"> | |
| <h3>State After</h3> | |
| <pre id="debug-state-after">{}</pre> | |
| </div> | |
| </div> | |
| <div id="debug-reasoning-container" class="debug-section" style="display: none;"> | |
| <h3>Reasoning</h3> | |
| <pre id="debug-reasoning"></pre> | |
| </div> | |
| <div id="debug-prompt-container" class="debug-section" style="display: none;"> | |
| <h3>Prompt/Response</h3> | |
| <div class="debug-prompt-response"> | |
| <div class="debug-prompt-section"> | |
| <h4>Prompt</h4> | |
| <pre id="debug-prompt-text"></pre> | |
| </div> | |
| <div class="debug-prompt-section"> | |
| <h4>Response</h4> | |
| <pre id="debug-response-text"></pre> | |
| </div> | |
| <div class="debug-row"> | |
| <label>Duration:</label> | |
| <span id="debug-duration">-</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="debug-victory-container" class="debug-victory" style="display: none;"> | |
| <h2 id="debug-victory-title">Match Complete</h2> | |
| <div id="debug-outcome-row" class="debug-row" style="display: none;"> | |
| <label>Outcome:</label> | |
| <span id="debug-outcome"></span> | |
| </div> | |
| <div id="debug-outcome-detail-row" class="debug-row" style="display: none;"> | |
| <label>Detail:</label> | |
| <span id="debug-outcome-detail"></span> | |
| </div> | |
| <div class="debug-row"> | |
| <label>Winner:</label> | |
| <span id="debug-winner">-</span> | |
| </div> | |
| <h3>Final State</h3> | |
| <pre id="debug-final-state">{}</pre> | |
| </div> | |
| <div id="debug-conclusion-container" class="debug-section" style="display: none;"> | |
| <h3>Conclusions / Reflections</h3> | |
| <div id="debug-conclusion-list" class="debug-lifecycle-list"></div> | |
| </div> | |
| `; | |
| // Store element references | |
| this._elements.root = root; | |
| this._elements.handshakeContainer = root.querySelector('#debug-handshake-container'); | |
| this._elements.handshakeList = root.querySelector('#debug-handshake-list'); | |
| this._elements.conclusionContainer = root.querySelector('#debug-conclusion-container'); | |
| this._elements.conclusionList = root.querySelector('#debug-conclusion-list'); | |
| this._elements.frameNumber = root.querySelector('#debug-frame-number'); | |
| this._elements.turnNumber = root.querySelector('#debug-turn-number'); | |
| this._elements.player = root.querySelector('#debug-player'); | |
| this._elements.action = root.querySelector('#debug-action'); | |
| this._elements.highlightRow = root.querySelector('#debug-highlight-row'); | |
| this._elements.highlightIcon = root.querySelector('#debug-highlight-icon'); | |
| this._elements.highlightText = root.querySelector('#debug-highlight-text'); | |
| this._elements.stateBefore = root.querySelector('#debug-state-before'); | |
| this._elements.stateAfter = root.querySelector('#debug-state-after'); | |
| this._elements.reasoningContainer = root.querySelector('#debug-reasoning-container'); | |
| this._elements.reasoning = root.querySelector('#debug-reasoning'); | |
| this._elements.promptContainer = root.querySelector('#debug-prompt-container'); | |
| this._elements.promptText = root.querySelector('#debug-prompt-text'); | |
| this._elements.responseText = root.querySelector('#debug-response-text'); | |
| this._elements.duration = root.querySelector('#debug-duration'); | |
| this._elements.victoryContainer = root.querySelector('#debug-victory-container'); | |
| this._elements.victoryTitle = root.querySelector('#debug-victory-title'); | |
| this._elements.outcomeRow = root.querySelector('#debug-outcome-row'); | |
| this._elements.outcome = root.querySelector('#debug-outcome'); | |
| this._elements.outcomeDetailRow = root.querySelector('#debug-outcome-detail-row'); | |
| this._elements.outcomeDetail = root.querySelector('#debug-outcome-detail'); | |
| this._elements.winner = root.querySelector('#debug-winner'); | |
| this._elements.finalState = root.querySelector('#debug-final-state'); | |
| this._container.appendChild(root); | |
| } | |
| _renderLifecyclePanels() { | |
| const lifecycle = this._matchData?.lifecycle || {}; | |
| const handshakes = Array.isArray(lifecycle.handshakes) ? lifecycle.handshakes : []; | |
| const conclusions = Array.isArray(lifecycle.conclusions) ? lifecycle.conclusions : []; | |
| if (handshakes.length > 0) { | |
| this._elements.handshakeContainer.style.display = 'block'; | |
| this._elements.handshakeList.innerHTML = handshakes | |
| .map((entry) => { | |
| const status = this._formatHandshakeStatus(entry); | |
| const prompt = entry.promptText || 'N/A'; | |
| const response = entry.responseText || entry.normalizedResponse || 'N/A'; | |
| return ` | |
| <details class="debug-lifecycle-item"> | |
| <summary> | |
| <span class="debug-lifecycle-player">${this._escapeHtml(entry.player)}</span> | |
| <span class="debug-lifecycle-status">${this._escapeHtml(status)}</span> | |
| </summary> | |
| <div class="debug-lifecycle-body"> | |
| <div class="debug-lifecycle-grid"> | |
| <div class="debug-lifecycle-block"> | |
| <h4>Prompt</h4> | |
| <pre>${this._escapeHtml(prompt)}</pre> | |
| </div> | |
| <div class="debug-lifecycle-block"> | |
| <h4>Response</h4> | |
| <pre>${this._escapeHtml(response)}</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </details> | |
| `; | |
| }) | |
| .join(''); | |
| } else { | |
| this._elements.handshakeContainer.style.display = 'none'; | |
| } | |
| if (conclusions.length > 0) { | |
| this._elements.conclusionContainer.style.display = 'block'; | |
| this._elements.conclusionList.innerHTML = conclusions | |
| .map((entry) => { | |
| const prompt = entry.promptText || 'N/A'; | |
| const reflection = entry.reflectionText || entry.responseText || 'N/A'; | |
| return ` | |
| <details class="debug-lifecycle-item"> | |
| <summary> | |
| <span class="debug-lifecycle-player">${this._escapeHtml(entry.player)}</span> | |
| <span class="debug-lifecycle-status">Conclusion</span> | |
| </summary> | |
| <div class="debug-lifecycle-body"> | |
| <div class="debug-lifecycle-grid"> | |
| <div class="debug-lifecycle-block"> | |
| <h4>Prompt</h4> | |
| <pre>${this._escapeHtml(prompt)}</pre> | |
| </div> | |
| <div class="debug-lifecycle-block"> | |
| <h4>Reflection</h4> | |
| <pre>${this._escapeHtml(reflection)}</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </details> | |
| `; | |
| }) | |
| .join(''); | |
| } else { | |
| this._elements.conclusionContainer.style.display = 'none'; | |
| } | |
| } | |
| _formatHandshakeStatus(entry) { | |
| if (entry.status === 'aborted') { | |
| return `Aborted${entry.reason ? ` (${entry.reason})` : ''}`; | |
| } | |
| if (entry.status === 'complete') { | |
| return entry.accepted === false ? 'Rejected' : 'Accepted'; | |
| } | |
| return 'Started'; | |
| } | |
| _escapeHtml(str) { | |
| const div = document.createElement('div'); | |
| div.textContent = str; | |
| return div.innerHTML; | |
| } | |
| _formatForfeitReason(reason) { | |
| switch (reason) { | |
| case 'parse_failure': | |
| return 'failed to provide a valid action'; | |
| case 'timeout': | |
| return 'ran out of time'; | |
| case 'invalid_action': | |
| return 'chose an invalid action'; | |
| case 'disconnect': | |
| return 'disconnected'; | |
| default: | |
| return 'forfeited the match'; | |
| } | |
| } | |
| setActiveHighlight(highlight) { | |
| const row = this._elements.highlightRow; | |
| const icon = this._elements.highlightIcon; | |
| const text = this._elements.highlightText; | |
| if (!row || !icon || !text) return; | |
| if (!highlight || !highlight.label) { | |
| row.style.display = 'none'; | |
| row.removeAttribute('data-kind'); | |
| icon.textContent = ''; | |
| text.textContent = ''; | |
| return; | |
| } | |
| row.style.display = 'flex'; | |
| if (highlight.kind) row.dataset.kind = highlight.kind; | |
| else row.removeAttribute('data-kind'); | |
| icon.textContent = highlight.icon || ''; | |
| text.textContent = highlight.label; | |
| } | |
| } | |
| // Register renderer for the bundled combat games (if registry present). | |
| if (typeof RendererRegistry !== 'undefined') { | |
| RendererRegistry.register('ArchivistChoiceGame', 'debug', CombatDebugRenderer); | |
| RendererRegistry.register('FixedDamageGame', 'debug', CombatDebugRenderer); | |
| RendererRegistry.register('VariableDamageGame', 'debug', CombatDebugRenderer); | |
| } | |
| // Export for module systems, also available as global | |
| if (typeof module !== 'undefined' && module.exports) { | |
| module.exports = CombatDebugRenderer; | |
| } | |