-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
66 lines (64 loc) · 3.51 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flood It</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Duncan">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<div class="outer">
<h3>Flood It (<span id="counter">?</span>/<span id="computer-solution" data-toggle="tooltip" title="The computer has solved the puzzle in this many moves. Can you beat it?" data-placement="bottom">?</span>)</h3>
<div class="form-inline bottom-right">
<label>Theme:</label>
<select class="form-control" id="themes"></select>
</div>
</div>
<div class="form-group">
<table id="grid" border="1"></table>
</div>
<div class="form-group form-inline">
<button class="btn btn-primary" id="new-game-btn">New Game</button>
<button class="btn btn-default" id="reset-btn">Reset</button>
<button class="btn btn-default" id="solve-btn">Solve for me</button>
<label>Size: </label>
<select id="size" class="form-control input-sm">
<option value="7">7</option>
<option selected value="14">14</option>
<option value="21">21</option>
<option value="28">28</option>
</select>
<button class="btn btn-primary" data-toggle="modal" data-target="#help">Help</button> </div>
<div id="palette"></div>
</div>
<!-- Modal -->
<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Help</h4>
</div>
<div class="modal-body">
<p>Your objective is to fill the entire grid with the same colour. To do this, select a colour from the palette on the right. The top left square and all squares connected to it will be changed to that color. Two squares are connected if they are adjacent and of the same colour.</p>
<p>Can you fill the entire grid in less steps than the computer?</p>
<p>The computer's number of moves is shown on top as (n/m) where n is the number of moves you have taken, and m is the number of moves to beat.</p>
<p>Enjoy!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<script src="src/themes.js"></script>
<script src="src/flood-it.js"></script>
</body>
</html>