MENACE/index.html at master · ap0ught/MENACE · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="theme-color" content="#2d3748">
<meta name="description" content="Machine Educable Noughts And Crosses Engine — a browser tic-tac-toe demo where an AI learns by reinforcement.">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="MENACE">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'none'; form-action 'none'; object-src 'none'; img-src 'self'; connect-src 'self'; manifest-src 'self'; worker-src 'self'; script-src 'self' 'sha256-QSHO4L+ETJUF4Ccc/GUbqSmKrBE5KFBqO3prLODbVNE=' 'sha256-iN7wpJdxHlpujRppkOA8N0+Mzp0ZqZr3lCtxM00Y63c='; style-src 'self' 'unsafe-inline';">
<title>MENACE: Machine Educable Noughts And Crosses Engine</title>
<link rel="manifest" href="manifest.webmanifest">
<link rel="icon" href="icons/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="icons/icon-192.png">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="human-move" id="human_move_wrap" hidden>
  <input type="text" id="human_cell_input" maxlength="1" inputmode="numeric" pattern="[1-9]" autocomplete="off" autocorrect="off" spellcheck="false" aria-label="Your move: cell 1–9 (bottom row 1–3, top row 7–9). Type a digit to play." />
</div>
<div class="moves-container" id="menace_panels_root" aria-label="MENACE O and MENACE X matchbox panels"></div>
<table class="board large">
<tr>
    <td id="pos0" class="p0" data-cell-n="7"></td>
    <td id="pos1" class="p1" data-cell-n="8"></td>
    <td id="pos2" class="p2" data-cell-n="9"></td>
</tr>
<tr>
    <td id="pos3" class="p3" data-cell-n="4"></td>
    <td id="pos4" class="p4" data-cell-n="5"></td>
    <td id="pos5" class="p5" data-cell-n="6"></td>
</tr>
<tr>
    <td id="pos6" class="p6" data-cell-n="1"></td>
    <td id="pos7" class="p7" data-cell-n="2"></td>
    <td id="pos8" class="p8" data-cell-n="3"></td>
</tr>
</table>
<div class="players">
<div class="player-block">
<label class="player-label" for="p1picker">O:</label>
<div class="player-picker-row">
<select id="p1picker" aria-label="Player O (first move); MENACE uses the MENACE O learner (left panel)">
<option value="h">Human</option>
<option value="r">Random</option>
<option value="m">MENACE</option>
<option value="p">Perfect</option>
</select>
<div class="player-matchbox-track" id="p1_matchbox_track" role="status" aria-live="polite">
<span class="player-matchbox-track-box" aria-hidden="true"></span>
<span class="player-matchbox-track-caption">MENACE O</span>
</div>
</div>
<span class="player-learner-tag" title="If you pick MENACE here, moves train the learner saved as MENACE O (left column).">MENACE O</span>
<p class="player-help" id="p1_help" hidden></p>
</div>
<div class="player-block">
<label class="player-label" for="p2picker">X:</label>
<div class="player-picker-row">
<select id="p2picker" aria-label="Player X (second move); MENACE uses the MENACE X learner (right panel)">
<option value="h">Human</option>
<option value="r">Random</option>
<option value="m">MENACE</option>
<option value="p">Perfect</option>
</select>
<div class="player-matchbox-track" id="p2_matchbox_track" role="status" aria-live="polite">
<span class="player-matchbox-track-box" aria-hidden="true"></span>
<span class="player-matchbox-track-caption">MENACE X</span>
</div>
</div>
<span class="player-learner-tag" title="If you pick MENACE here, moves train the learner saved as MENACE X (right column).">MENACE X</span>
<p class="player-help" id="p2_help" hidden></p>
</div>
</div>
<div class="wins" id="n1"><small>O wins</small><div class="dis" id="dis1">0</div></div>
<div class="wins" id="n2"><small>Draws</small><div class="dis" id="dis0">0</div></div>
<div class="wins" id="n3"><small>X wins</small><div class="dis" id="dis2">0</div></div>
<div class="summary" id="list_here"></div>
<div class="graph-section" id="graph_section">
<div class="speed" id="speeddiv">
  Speed (pause ← → fast):<br /><input type="range" min="0" max="1000" value="1000" step="10" class="slider" id="speed_slider" aria-label="Automated play speed; left is pause" /><span class="speed-slider-value" id="speed_slider_display" aria-live="polite">1000</span>
</div>
<div class="streak-indicator-wrap">
<div id="streak_indicator" class="streak-indicator" role="text" aria-label="Recent game outcomes, oldest on the left"></div>
</div>
<div class="graph-controls">
<label for="plot_mode">Chart</label>
<select id="plot_mode" aria-label="Chart type">
<option value="beads">Reinforcement (both learners)</option>
<option value="wins">Cumulative wins &amp; draws</option>
<option value="rate">Rolling win rate</option>
</select>
<label id="plot_window_label" for="plot_window" hidden>Window</label>
<input type="number" id="plot_window" min="3" max="2000" value="50" title="Games in rolling average" aria-label="Rolling window size in games" hidden />
</div>
<canvas class="graph" id="plot_here" width="500" height="316" aria-label="Learning and statistics graphs"></canvas>
</div>
<script src="js/menace-state.js" defer></script>
<script src="js/menace-utils.js" defer></script>
<script src="js/menace-rules.js" defer></script>
<script src="js/menace-plot.js" defer></script>
<script src="js/menace-ui-summary.js" defer></script>
<script src="js/menace-ui-panel.js" defer></script>
<script src="js/menace-engine.js" defer></script>
<script src="js/menace-persistence.js" defer></script>
<script src="js/menace-opponents.js" defer></script>
<script src="js/menace-game.js" defer></script>
<script src="js/menace-init.js" defer></script>
<script src="js/pwa-register.js" defer></script>

</body>
</html>