-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmemory.html
52 lines (49 loc) · 2.41 KB
/
memory.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
<!DOCTYPE html>
<html ng-app="memory">
<head>
<meta charset="utf-8" />
<title>Memory Game</title>
<link rel="stylesheet" href="memory.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.12/css/ngDialog-theme-default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.12/css/ngDialog.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet' type='text/css'>
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.12/js/ngDialog.min.js"></script>
<script type="text/ng-template" id="dialogTemplate">
<div class="ngdialog-message">
<h2>Congratulations, You Won!</h2>
<p>Your current score is <strong>{{score}}</strong>.<br />
Your high score is <strong>{{highScore}}</strong>.<p>
</div>
</script>
</head>
<body ng-controller="MainCtrl">
<div id="overlay" ng-show="timerActive"></div>
<div id="wrapper">
<div id="sideBar">
<h1>Memory</h1>
<div id="buttonsRow">
<div id="reset" class="button" ng-click="reset()" ng-mousedown="dark1=true" ng-mouseup="dark1=false" ng-class="{'darken': dark1==true}">Reset</div>
<div id="peek" class="button" ng-click="peek()" ng-class="{'disabled': peekLock==true}">Peek</div>
</div>
<div class="textRow">
<label>High Score: </label>
<span id="highScoreText">{{highScore}}</span>
</div>
<div class="textRow">
<label>Current Score: </label>
<span id="currentScoreText">{{score}}</span>
<span id="scoreChange" ng-show="scoreChanged != 0" ng-style="{ 'color': scoreChanged > 0 ? 'darkgreen' : 'maroon'}"><strong>{{ scoreChanged > 0 ? '+' + scoreChanged : scoreChanged}}</strong></span>
</div>
<div id="timerRow" class="textRow" ng-show="timerActive">
<label>Timer: </label>
<span id="timerText">0</span>
</div>
</div>
<div id="container">
<div hover-directive ng-repeat="square in squares" class="square" ng-style="{ 'background-color': square.flipped ? square.color : ''}" ng-class="{ 'peek': timerActive==true && !square.flipped }" ng-click="toggle(square)" />
</div>
</div>
</body>
</html>