/
index.html
116 lines (77 loc) · 3.61 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html x-ng-app="TTTApp">
<head>
<title>TTT REFERENCE USING FIREBASE</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/ngTTT.css">
<link rel="stylesheet" href="css/animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script>
<script src="js/app.js"></script>
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.18/firebase.js'></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
</head>
<body>
<section id="result">
<p id="used"></p>
<p id="winner"></p>
</section>
<div x-ng-controller="TTTController" ng-model="cellListContainer">
<p><!--TTT Reference with Firebase: --><br /><br /><!--{{clickCount}} clicks--></p>
<div class="theBox" >
<div ng-class="({startScreen: cellListContainer.firstScreen == 'YES', hideStart: cellListContainer.firstScreen !== 'YES'})">
<br /><br />
<h1 class="startTxt bigEntrance">
Welcome to<br/>
Tic Tac Toe.
</h1>
<button ng-click="startScreen()" class="startBtn pullUp">
Play!
</button>
</div>
<div ng-class="({winnerScreen: cellListContainer.winScreen == 'YES', hideStart: cellListContainer.winScreen !== 'YES'})"><br /><br />
<h1 class="bigEntrance">Player X Wins!</h1>
<button onclick="window.location.href='index.html'" ng-click="endScreen()" class="startBtn pullUp">
Play Again!
</button>
</div>
<div ng-class="({winnerScreenTwo: cellListContainer.winScreenTwo == 'YES', hideStart: cellListContainer.winScreenTwo !== 'YES'})"><br /><br />
<h1 class="bigEntrance">Player O Wins!</h1>
<button onclick="window.location.href='index.html'" ng-click="endScreen()" class="startBtn pullUp">
Play Again!
</button>
</div>
<!-- <div="userOptn" ng-show="userOptnOne">
<button ng-click="onePlayer" class="startBtn">
One Player
</button>
<button ng-click="twoPlayer" class="startBtn">
Two Player
</button>
</div>
<div class="onePlayerNameInput" ng-show="playerName" ng-model="playerInput">
<input ng-bind="poneInput" type="text" class="pName" placeholder="Player 1">
<button ng-click="onePlayer" class="startBtn">
Play!
</button>
</div>
<div class="twoPlayerNameInput" ng-show="twoPlayerNames" ng-model="playerInput">
<input ng-bind="poneInput" type="text" class="pName" placeholder="Player 1">
<input ng-bind="ptwoInput" type="text" class="pName" placeholder="Player 2">
<button ng-click="twoPlayer" class="startBtn">
Play!
</button>
</div>-->
<div x-ng-repeat="currentCell in cellListContainer.cellListArray">
<div class="allCellsAlways" ng-click="playerPicks(currentCell)"
ng-class="{xclass: currentCell.status=='X', yclass: currentCell.status =='O' }" id="aBox">
<!--Box: {{currentCell.status}}-->
</div>
</div>
</div>
<br>
<!-- {{testString}}-->
<p></p>
<!-- <button ng-click="testJS()">TEST BUTTON</button>-->
</div>
</body>
</html>