-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
67 lines (66 loc) · 2.72 KB
/
index.html
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
<html>
<head>
<title>MENACE: Machine Educable Noughts And Crosses Engine</title>
</head>
<body>
<style type='text/css'>
table.moves tr, table.moves {border:0}
td.board {font-family:monospace;border:1px solid black;width:35px;height:35px;text-align:center;vertical-align:middle}
td.num {font-weight:bold;color:#000000}
table.board td {font-family:monospace;text-align:center;vertical-align:middle}
table.board:not(.large) td {font-size:9px;width:8px;height:8px}
table.board.large td {font-size:22px;width:40px;height:40px;}
table.board.large {position:absolute;left:105px;top:20px}
table.board td,table.board tr, table.board {border-collapse:collapse}
table.board td.p1,table.board td.p7 {border-left:1px solid grey;border-right:1px solid grey}
table.board td.p3,table.board td.p5 {border-top:1px solid grey;border-bottom:1px solid grey}
table.board td.p4 {border:1px solid grey;}
.wins {border:2px solid grey;position:absolute;width:120px;height:60px;top:200px;text-align:center}
.summary {border:2px solid grey;position:absolute;width:440px;height:100px;top:300px;left:35px;text-align:center;overflow:hidden}
.graph {position:absolute;top:440px;left:35px;}
.wins#n1 {left:35px}
.wins#n2 {left:195px}
.wins#n3 {left:355px}
.dis {font-size:32px;padding-top:2px}
table.board td form {margin:0px}
.players {position:absolute;left:280px;top:30px}
.speed {position:absolute;top:90px;left:280px;text-align:left}
</style>
<span style='position:absolute;right:5px'>
<span id='_1_moves'></span>
<span id='_2_moves'></span>
</span>
<table class='board large'>
<tr>
<td id='pos0' class='p0'></td>
<td id='pos1' class='p1'></td>
<td id='pos2' class='p2'></td>
</tr>
<tr>
<td id='pos3' class='p3'></td>
<td id='pos4' class='p4'></td>
<td id='pos5' class='p5'></td>
</tr>
<tr>
<td id='pos6' class='p6'></td>
<td id='pos7' class='p7'></td>
<td id='pos8' class='p8'></td>
</tr>
</table>
<div class='players'>O: MENACE<br />X:<select id='p2picker' onchange='setPlayer(this.value)'>
<option value='h'>Human</option>
<option value='r'>Random</option>
<option value='m'>MENACE2</option>
<option value='p'>Perfect</option>
</select></div>
<div class='wins' id='n1'><small>MENACE 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><span id='who'>Human</span> Wins</small><div class='dis' id='dis2'>0</div></div>
<div class="speed" id='speeddiv'>
Speed:<br /><input type="range" min="-1000" max="-10" value="-1000" class="slider" id="speed_slider">
</div>
<div class='summary' id='list_here'></div>
<canvas class='graph' id='plot_here' width='440' height='300'></canvas>
<script type='text/javascript' src='menace.js'></script>
</body>
</html>