| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Game Theory Matrix Classifier</title> |
| <meta |
| name="description" |
| content="Static 2x2 game theory matrix explorer with Nash equilibrium detection and classic game classification." |
| > |
| <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=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="./styles.css"> |
| </head> |
| <body> |
| <main class="page-shell"> |
| <section class="hero card"> |
| <p class="eyebrow">Public Space / Static / 2x2 only</p> |
| <h1>Game Theory Matrix Classifier</h1> |
| <p class="hero-copy"> |
| Lightweight public demo. Enter any 2x2 payoff matrix, find pure-strategy Nash equilibria, |
| compute mixed equilibrium when needed, classify classic game type. |
| </p> |
| </section> |
|
|
| <section class="layout"> |
| <aside class="card controls"> |
| <div class="section-head"> |
| <p class="eyebrow">Inputs</p> |
| <h2>Matrix Builder</h2> |
| </div> |
|
|
| <label class="control-label" for="preset">Load preset</label> |
| <select id="preset" class="control-input"></select> |
|
|
| <div class="grid-head"> |
| <span>Top row</span> |
| <span>Bottom row</span> |
| </div> |
|
|
| <div class="input-grid"> |
| <label class="payoff-card"> |
| <span class="payoff-label">(0,0)</span> |
| <div class="payoff-pair"> |
| <input id="r0c0_p1" class="control-input" type="number" step="1" value="3"> |
| <input id="r0c0_p2" class="control-input" type="number" step="1" value="3"> |
| </div> |
| </label> |
|
|
| <label class="payoff-card"> |
| <span class="payoff-label">(0,1)</span> |
| <div class="payoff-pair"> |
| <input id="r0c1_p1" class="control-input" type="number" step="1" value="0"> |
| <input id="r0c1_p2" class="control-input" type="number" step="1" value="5"> |
| </div> |
| </label> |
|
|
| <label class="payoff-card"> |
| <span class="payoff-label">(1,0)</span> |
| <div class="payoff-pair"> |
| <input id="r1c0_p1" class="control-input" type="number" step="1" value="5"> |
| <input id="r1c0_p2" class="control-input" type="number" step="1" value="0"> |
| </div> |
| </label> |
|
|
| <label class="payoff-card"> |
| <span class="payoff-label">(1,1)</span> |
| <div class="payoff-pair"> |
| <input id="r1c1_p1" class="control-input" type="number" step="1" value="1"> |
| <input id="r1c1_p2" class="control-input" type="number" step="1" value="1"> |
| </div> |
| </label> |
| </div> |
|
|
| <div class="button-row"> |
| <button id="analyze" class="primary-button" type="button">Analyze Matrix</button> |
| <button id="reset" class="ghost-button" type="button">Reset</button> |
| </div> |
|
|
| <div class="mini-note"> |
| Presets include Prisoner's Dilemma, Battle of the Sexes, Stag Hunt, Chicken, Coordination, Matching Pennies. |
| </div> |
| </aside> |
|
|
| <section class="results"> |
| <div class="card"> |
| <div class="section-head"> |
| <p class="eyebrow">Output 01</p> |
| <h2>Equilibrium Explorer</h2> |
| </div> |
|
|
| <div class="matrix-wrap"> |
| <table class="matrix-table"> |
| <thead> |
| <tr> |
| <th>Col 0</th> |
| <th>Col 1</th> |
| </tr> |
| </thead> |
| <tbody id="matrix-body"></tbody> |
| </table> |
| </div> |
|
|
| <div id="summary" class="summary-card"></div> |
| </div> |
|
|
| <div class="card"> |
| <div class="section-head"> |
| <p class="eyebrow">Output 02</p> |
| <h2>Classification</h2> |
| </div> |
|
|
| <div id="game-type-badge" class="game-type-badge"></div> |
| <p id="game-type-description" class="game-type-description"></p> |
|
|
| <div class="table-wrap"> |
| <table class="properties-table"> |
| <thead> |
| <tr> |
| <th>Property</th> |
| <th>Value</th> |
| <th>Note</th> |
| </tr> |
| </thead> |
| <tbody id="properties-body"></tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
| </section> |
| </main> |
|
|
| <script type="module" src="./app.mjs"></script> |
| </body> |
| </html> |
|
|
