forked from mkbwang/SEGT
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (88 loc) · 2.92 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
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
<!DOCTYPE html>
<html lang="">
<!-- grid data example: https://bl.ocks.org/cagrimmett/07f8c8daea00946b9e704e3efcbd5739
http://bl.ocks.org/eesur/raw/3fc83ddc4c060e6bd43e/?raw=true
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEGT</title>
<link rel="stylesheet" href="style.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="sketch.js" type="text/javascript" async></script>
<!-- <script src="../addons/p5.sound.js"></script> -->
</head>
<body>
<h1>Spatial Evolutionary Game Theory</h1>
<section>
<nav>
<h2>Payoff Matrix</h2>
<div id="payoffmatrix">
<table class="crosstable">
<tr>
<th class="crossth"> </th>
<th class="crossth">C </th>
<th class="crossth"> D</th>
</tr>
<tr>
<th class="crossth">C</th>
<td contenteditable="true" class="crosstd" id="cSurroundedByC">1</td>
<td contenteditable="true" class="crosstd" id="cSurroundedByD">0</td>
</tr>
<tr>
<th class="crossth">D</th>
<td contenteditable="true" class="crosstd" id="dSurroundedByC">1</td>
<td contenteditable="true" class="crosstd" id="dSurroundedByD">0</td>
</tr>
</table>
<table class="controltable">
<tr>
<th class="controlth">
<input type="checkbox" id="play-pause" /><label for="play-pause" id="play-pause-label"
class="win-button"></label>
</th>
<th class="controlth">
<button type="button" id="resetbutton">Reset</button>
</th>
<th class="controlth">
<button type="button" id="setAllDefectorButton">Change all cell default type</button>
</th>
</tr>
</table>
<tr>
<th>
<form class="arenaControl">
<label for="gridSize">Grid Size</label>
<input type="text" id="gridSize"><br><br>
</form>
</th>
<th class="controlth">
<button type="button" id="resetgrid">Set Grid Size</button>
</th>
</tr>
</div>
</nav>
<article width="600">
<h2>Arena</h2>
<div id="d3sketch">
</div>
</article>
</section>
<div>
<div id="rectangle" style="width:20 px; height: 20px; background-color: #fca973; margin:auto">
</div> C cells
</div>
<div>
<div id="rectangle" style="width:20 px; height: 20px; background-color: #8080ff; margin:auto">
</div>D cells
</div>
<div>
<div id="rectangle" style="width:20 px; height: 20px; background-color: #4c2c13; margin:auto">
</div>C cells (same as last iteration)
</div>
<div>
<div id="rectangle" style="width:20 px; height: 20px; background-color: #232652; margin:auto">
</div>D cells (same as last iteration)
</div>
</body>
</html>