-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (138 loc) · 7.13 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!-- Tic Tacs Toe
Created by: Chris Garvin
On: 5/17/15 -->
<!DOCTYPE html>
<html ng-app="ticTacs">
<head>
<title>Tic Tacs Toe</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/ticTacController.js"></script>
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body ng-controller="TicTacController as ticTacCtrl">
<div id="wrapper">
<div id="container">
<div id="content">
<div id="player-one">
<h5>Player One: {{ticTacCtrl.gameData.playerOneFlavor}}</h5>
<h5>{{ticTacCtrl.playerOneWins}}</h5>
<span ng-show="ticTacCtrl.gameData.playerOneClass" class="{{ticTacCtrl.gameData.playerOneClass}} icons">
</span>
<div class="playerTurn" ng-show="ticTacCtrl.gameData.turn % 2 == 1 && ticTacCtrl.gameData.turn > 0
&& ticTacCtrl.gameData.playerOneClass && ticTacCtrl.gameData.playerTwoClass">
your move!
</div>
<!-- end playerTurn div -->
<ul ng-show="!ticTacCtrl.gameData.playerOneClass" class="tictacs">
<li ng-click="ticTacCtrl.playerOne($index)" ng-repeat="tictac in ticTacCtrl.players.tictacs track by $index">
<img id="tokens" ng-src="{{tictac.image}}" alt="{{tictac.type}}">
<h4>{{tictac.type}}
<span ng-show="tictac.count > 0">({{tictac.count}})</span>
</h4>
</li>
</ul>
</div>
<!-- end player-one div -->
<div class="gameboard-container" ng-class="{flipBoard: chatOpened &&
(ticTacCtrl.localPlayerOneTurn || ticTacCtrl.localPlayerTwoTurn)}">
<div id="gameboard" ng-class="{winner: ticTacCtrl.winner}">
<div id="openchat" ng-click="chatOpened = !chatOpened" ng-class="{opened: chatOpened}">
open chat
</div>
<!-- end openchat div -->
<img id="banner" src="images/TicTacToe.png">
<h4 id="winner">{{ticTacCtrl.gameData.winner}}</h4>
<h2 ng-click="ticTacCtrl.newGame();" id="reset">fresh game</h2>
<div id="tictactoe">
<span class="pieces {{piece.ticTacClass}} slideDown" ng-click="showme = true;
ticTacCtrl.gameMove($index);" ng-repeat="piece in ticTacCtrl.pieces.spaces track by $index">
</span>
</div>
<!-- end tictactoe div -->
</div>
<!-- end gameboard div -->
<div class="player-one-chat-wrapper" ng-show="ticTacCtrl.localPlayerOneTurn && !ticTacCtrl.localPlayerTwoTurn">
<div id="player-one-chat-window" ng-show="ticTacCtrl.localPlayerOneTurn && !ticTacCtrl.localPlayerTwoTurn">
<div id="closechat" ng-click="chatOpened = !chatOpened" ng-class="{closed: chatOpened}">
close chat
</div>
<!-- end closechat div -->
<div class="messages">
<ul ng-repeat="messages in ticTacCtrl.playerOneMessages track by $index">
<li id="{{ticTacCtrl.playerOneMessages[$index].id}}">
<span>{{messages.message}}</span>
</li>
</ul>
</div>
<!-- end messages div -->
</div>
<!-- end player-one-chat-window -->
<form class="add-chat" ng-submit="ticTacCtrl.addChat(playerOneMessage, 'playerOneAligned');
ticTacCtrl.clearPlayerOneChat(playerOneMessage); ticTacCtrl.playerOneWindow = !ticTacCtrl.playerOneWindow;
playerOneMessage=''" ng-show="chatOpened">
<input class="text-box" type="text" placeholder="type here... (type 'clear' to clear chat)" ng-model="playerOneMessage" ng-click="ticTacCtrl.playerOneWindow = !ticTacCtrl.playerOneWindow">
<input type="submit" class="btn btn-add" value="send" style="display: none;">
</form>
</div>
<!-- end player-one-chat-wrapper div -->
<div class="player-two-chat-wrapper" ng-show="ticTacCtrl.localPlayerTwoTurn && !ticTacCtrl.localPlayerOneTurn">
<div id="player-two-chat-window" ng-show="ticTacCtrl.localPlayerTwoTurn && !ticTacCtrl.localPlayerOneTurn">
<div id="closechat" ng-click="chatOpened = !chatOpened" ng-class="{closed: chatOpened}">
close chat
</div>
<!-- end closechat div -->
<div class="messages">
<ul ng-repeat="message in ticTacCtrl.playerTwoMessages track by $index">
<li id="{{ticTacCtrl.playerTwoMessages[$index].id}}">
<span>{{message.message}}</span>
</li>
</ul>
</div>
<!-- end messages div -->
</div>
<!-- player-two-chat-window -->
<form class="add-chat" ng-submit="ticTacCtrl.addChat(playerTwoMessage, 'playerTwoAligned');
ticTacCtrl.clearPlayerTwoChat(playerTwoMessage); ticTacCtrl.playerTwoWindow = !ticTacCtrl.playerTwoWindow;
playerTwoMessage=''" ng-show="chatOpened">
<input class="text-box" type="text" placeholder="type here... (type 'clear' to clear chat)" ng-model="playerTwoMessage" ng-click="ticTacCtrl.playerTwoWindow = !ticTacCtrl.playerTwoWindow">
<input type="submit" class="btn btn-add" value="send" style="display: none;">
</form>
</div>
<!-- end player-two-chat-wrapper div -->
<div id="local-player-chat" ng-show="ticTacCtrl.localPlayerOneTurn && ticTacCtrl.localPlayerTwoTurn">
<div id="closechat" ng-click="chatOpened = !chatOpened" ng-class="{closed: chatOpened}">close chat</div>
</div>
<!-- end local-player-chat div -->
</div>
<!-- end gameboard-container div -->
<div id="player-two">
<h5>Player Two: {{ticTacCtrl.gameData.playerTwoFlavor}}</h5>
<h5>{{ticTacCtrl.playerTwoWins}}</h5>
<span ng-show="ticTacCtrl.gameData.playerTwoClass" class="{{ticTacCtrl.gameData.playerTwoClass}} icons"></span>
<div class="playerTurn" ng-show="ticTacCtrl.gameData.turn % 2 == 0 && ticTacCtrl.gameData.turn > 1">
your move!
</div>
<!-- end playerTurn div -->
<ul ng-show="!ticTacCtrl.gameData.playerTwoClass" class="tictacs">
<li ng-click="ticTacCtrl.playerTwo($index)" ng-repeat="tictac in ticTacCtrl.players.tictacs track by $index">
<img id="tokens" ng-src="{{tictac.image}}" alt="{{tictac.type}}">
<h4>{{tictac.type}}
<span ng-show="tictac.count > 0">({{tictac.count}})</span>
</h4>
</li>
</ul>
</div>
<!-- end player-two div -->
</div>
<!-- end content div -->
</div>
<!-- end container div -->
</div>
<!-- end wrapper div -->
</body>
</html>