-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
208 lines (183 loc) · 9.73 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html>
<head>
<title>TicTac"Toe"</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<script src="public/vendor.js" type="text/javascript" charset="utf-8" defer></script>
<script src="public/application.js" type="text/javascript" charset="utf-8" defer></script>
</head>
<body>
<h2 id="orientation-alert">Please hold your device vertically.</h2>
<nav class="navbar navbar-dark shadow-lg">
<h1 class="logo-text navbar-brand"><span class="logo-span">Tic Tac <img class="logo" src="./public/images/toe.png" alt="A toe image"/></span> </h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#authCollapsible" aria-controls="authCollapsible" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="authCollapsible">
<div class="navbar-nav">
<form id="sign-in" class="form-inline sign-in-wrapper">
<div class="inputs">
<input name="credentials[email]" type="email" class="form-control mr-sm-2" id="sign-in-email" aria-describedby="emailHelp" placeholder="Enter email">
<input name="credentials[password]" type="password" class="form-control mr-sm-2" id="sign-in-password" placeholder="Password">
</div>
<div class="btn-group">
<button type="submit" class="sign-in-button btn btn-light">Sign In</button>
<button class="sign-up-button btn btn-warning" type="button" data-toggle="modal" data-target="#signUpModal">Sign Up</button>
</div>
</form>
<div id="account-wrapper" class="account-wrapper">
<button type="button" class="btn" data-toggle="modal" data-target="#changePwModal">Change Password</button>
<button id="past-games-button" type="button" class="btn" data-toggle="modal" data-target="#gameHistoryModal">Game History</button>
<button id="sign-out" type="submit" class="btn">Sign Out</button>
</div>
</div>
</div>
</nav>
<p id="user-info" class="user-info message"></p>
<div class="message-wrapper message">
<div id="message" class="message"></div>
<div id="message-game-info" class="message-game-info message"></div>
<div id="message-game" class="message-game message"></div>
</div>
<div class="main">
<div id="player-menu" class="player-menu">
<button id="back-button" class="btn btn-outline-light back shadow-sm"> Back </button>
<button id="multiplayer" class="btn btn-outline-light shadow-sm" type="button" name="button">Multiplayer</button>
<button id="create-game" class="btn btn-outline-light" >Multiplayer</button>
<button id="play-against-ai" class="btn btn-outline-light shadow-sm" type="button" name="button">Play Against AI</button>
<button id="easy" class="btn btn-outline-light shadow-sm" type="button" name="button">Human Mode</button>
<button id="hard" class="btn btn-outline-light shadow-sm" type="button" name="button">Impossible Mode</button>
</div>
<div class="thinking">
<h3 style="color: black;">A.I. is Running</h3>
<div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div id="game-board" class="game-board shadow-lg"></div>
</div>
<br>
<div class="options-btn-group">
<button id="reset-button" class="btn btn-outline-light">New Game</button>
<button id="back-to-menu" class="btn btn-outline-light">Go Back to Menu</button>
</div>
<!-- Sign Up Modal -->
<div class="modal fade" id="signUpModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="sign-up-wrapper">
<form id="sign-up" class="form-group">
<div class="col">
<input id="email-up" name="credentials[email]" type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="col">
<input name="credentials[password]" type="password" class="form-control password-up" placeholder="Password">
</div>
<div class="col">
<input name="credentials[password_confirmation]" type="password" class="form-control password-up" placeholder="Confirm Password">
</div>
<div class="modal-footer">
<div id="sign-up-message" class="sign-up-message"></div>
<button type="submit" class="btn btn-primary">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Change Password Modal -->
<div class="modal fade" id="changePwModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Change Password</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="changepw">
<div class="form-group">
<label>Change Password <span id="changepw-message" class=""></span></label>
<input name="passwords[old]" type="password" class="form-control" aria-describedby="emailHelp" placeholder="Old Password">
</div>
<div class="form-group">
<input name="passwords[new]" type="password" class="form-control" placeholder="New Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- Game History Modal -->
<div class="modal fade" id="gameHistoryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="pastGamesHead"></h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body modal-lg">
<button id="get-games"></button>
<div id="game-statistics" class="game-statistics">Game Statistics</div>
<hr>
<form id="show-game">
<input id="game-id" placeholder="Go past game by ID">
<button type="submit" class="btn btn-primary">Bring Up</button>
</form>
<!-- TO DO: JOIN GAME -->
<!-- <hr>
<form id="join-game">
<input id="join-id" placeholder="Join game by ID">
<button id="join-game-button" class="btn btn-primary" type="submit">Join</button>
</form> -->
<hr>
<div id="message-data" class="message-data"></div>
<!-- TO DO: REPAIR REDISPLAY -->
<!-- <button id="redisplay-game" class="redisplay-button btn btn-primary"><a href="#page-top">Redisplay This Game</a></button> -->
<hr>
<table class="table table-md">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Player-X</th>
<th scope="col">Player-O</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id="history-table">
</tbody>
</table>
<button id="send-to-api" class="send-to-api"></button>
</div>
</div>
</div>
</div>
<!-- <div class="footer">
<p><em> m. ege ercan © 2019</em></p>
</div> -->
</body>
</html>