-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathminekeeper.html
50 lines (48 loc) · 2.8 KB
/
minekeeper.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
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<title>Demo</title>
<style style="text/css">
.minefield {
line-height: 0;
border-spacing: 0;
}
.minefield td {
padding: 0
}
</style>
</head>
<body ng-controller="gameController">
<h1 style="font-family: 'Courier New', Monospace; margin-left: 37%; margin-top: 10%">Minekeeper Demo</h1>
<p style="font-family: Georgia, Sans-serif; margin-left: 37%">Disclaimer: Fall in love with spicy food is not my fault.</h3>
<div>
<table class="minefield" style="margin-left: 40%; margin-top: 5%">
<tr ng-repeat="row in minefield.rows">
<td ng-repeat="spot in row.spots" ng-click="uncoverSpot(spot)" ng-mousedown="rightClick($event, spot)" oncontextmenu="return false">
<img ng-if="spot.isCovered && !spot.isFlag" src="static/images/covered.png" />
<img ng-if="!spot.isCovered && spot.content == 'empty'" src="static/images/empty.png" />
<img ng-if="!spot.isCovered && spot.content == 'mine'" src="static/images/mine.png" />
<img ng-if="!spot.isCovered && spot.content == 1" src="static/images/number-1.png" />
<img ng-if="!spot.isCovered && spot.content == 2" src="static/images/number-2.png" />
<img ng-if="!spot.isCovered && spot.content == 3" src="static/images/number-3.png" />
<img ng-if="!spot.isCovered && spot.content == 4" src="static/images/number-4.png" />
<img ng-if="!spot.isCovered && spot.content == 5" src="static/images/number-5.png" />
<img ng-if="!spot.isCovered && spot.content == 6" src="static/images/number-6.png" />
<img ng-if="!spot.isCovered && spot.content == 7" src="static/images/number-7.png" />
<img ng-if="!spot.isCovered && spot.content == 8" src="static/images/number-8.png" />
<img ng-if="spot.isFlag" src="static/images/flag.png" />
</td>
</tr>
</table>
<h3 ng-if="isWinMessage" style="margin-left: 35%">You Won!</h3>
<h3 ng-if="lostMessage" style="margin-left: 25%">You Lose!(You can continue to click to see where mines are)</h3>
<button class="btn btn-primary" ng-click="reStart()" style="margin-top:10px; margin-left: 45%">Restart</button>
</div>
<script src="static/js/minekeeper.js"></script>
</body>
</html>