-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
243 lines (214 loc) · 9.04 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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tunes Against Humanity</title>
<link rel="stylesheet" href="/themes/jquery-mobile-tah.min.css" />
<link rel="stylesheet" href="/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="/css/jquery.mobile.structure-1.4.3.min.css" />
<link rel="stylesheet" href="/css/tah.css" />
<script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src="js/firebase.js"></script>
<script src="js/tah-mobile.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script> // When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src="/js/firebase.js"></script>
<script src="/js/tah-mobile.js"></script>
<script src="/js/underscore-min.js"></script>
<script>
var isNewUser = true;
var myFirebaseRef = new Firebase("https://vivid-fire-183.firebaseio.com/users");
var FIREBASE_URL = "https://vivid-fire-183.firebaseio.com/";
var currentGameRef = new Firebase(FIREBASE_URL + "games").limit(1);
var loggedInUser;
var auth = new FirebaseSimpleLogin(myFirebaseRef, function(error, user) {
if (error) {
// an error occurred while attempting login
console.log(error);
} else if (user) {
loggedInUser = user; //global var to save user obj
if (isNewUser) {
// user authenticated with Firebase
id = user.id;
myFirebaseRef.child(user.uid).set(user);
}
currentGameRef.once('child_added', function(snapshot) {
if(snapshot.child('players').numChildren() > 3 ) {
$.mobile.changePage('#gameinprogress');
} else {
//var playersRef = currentGameRef.child(snapshot.name()).child("players");
var playersRef = new Firebase(FIREBASE_URL + "games/" + snapshot.name() + "/players");
playersRef.child(user.id).set({
"image": user.thirdPartyUserData.profile_image_url_https,
"name": user.displayName,
"id": user.id
});
startGuessing();
getSongsAPI();
}
});
loggedInUser = user; //global var to save user obj
console.log("Logged In User: " + user);
// $.mobile.changePage("#prompt");
} else {
// user is logged out
}
});
$(function() {
$("#login").click( function()
{
auth.login('twitter');
}
);
});
</script>
</head>
<body>
<div id="login" data-role="page">
<div data-role="header">
</div>
<div data-role="content" class="page-content">
<h1>Tunes</h1>
<h1>Against</h1>
<h1>Humanity</h1>
<div class="footer">
<img class="logo" src="image/tah-logo-w.png"/>
<img id="twitter-login" src="https://dev.twitter.com/sites/default/files/images_documentation/sign-in-with-twitter-gray.png" alt="Sign in with Twitter"/>
</div>
</div>
</div>
<div id="prompt" data-role="page">
<div data-role="header">
<h1>Tunes Against Humanity</h1>
</div>
<div data-role="content">
<ul id="list-music">
<!-- <li class="list-music-item">
<div class="song-title song-title-text"> Turn Down For What</div>
<div class="song-artist">Lil Jon</div>
<div class="controls btn-plays">
<a href="#" onclick="Bop.playSong('Lil Jon', 'Turn Down For What');" class="ui-btn ui-btn-inline">▶</a>
<a href="#" onclick="Bop.pause();" class="ui-btn ui-btn-inline">‖</a>
</div>
</li>
<li class="list-music-item">
<div class="song-title"> <a href="#guess" class="song-title-text">Turn Down For What </a></div>
<div class="song-artist">Lil Jon</div>
<div class="controls"><a href="#" onclick="Bop.playSong('Lil Jon', 'Turn Down For What');" class="ui-btn ui-btn-inline">▶</a>
<a href="#" onclick="Bop.pause();" class="ui-btn ui-btn-inline">‖</a></div>
</li> -->
</ul>
<!--<button onclick="Bop.playSong('lil jon', 'turn down for what');">Play/Pause</button>-->
<!-- BOP Javascript file. All of the above won't happen unless you include this on your page -->
<script async="true" src="/js/embed.js"></script>
<script>
window._bopPlayerReady = function(data){
Bop.on('songStart', function(data){
//skip 11 seconds
Bop.seekRelative(11);
});
}
</script>
</div>
</div>
<div id="waiting" data-role="page">
<div data-role="header">
</div>
<div data-role="content" class="page-content">
<h1>Tunes</h1>
<h1>Against</h1>
<h1>Humanity</h1>
<div class="footer footer-waiting">
<!-- <img class="logo" src="image/tah-logo.png"/> -->
<h3> Please wait for game to start... </h3>
<!-- <button id="btn-play" style="width:150px;" disabled="false" onclick="getPlayersAPI();">Play!</button> -->
</div>
</div>
</div>
<div id="guess" data-role="page">
<div data-role="header">
<h1>Tunes Against Humanity</h1>
</div>
<div data-role="content">
<div class="card-wrapper" id="list-player">
<!-- <div class="card card-option card-option-vote">
<img src="image/user.jpg" class="user-thumbnail">
<div class="user-name">Sasi2</div>
</div>
<div class="card card-option card-option-vote">
<img src="image/user.jpg" class="user-thumbnail">
<div class="user-name">Sasi</div>
</div> -->
</div>
</div>
</div>
<div id="answer" data-role="page">
<div data-role="header">
<h1>Tunes Against Humanity</h1>
</div>
<div data-role="content" class="page-content">
<div id="result"></div>
<!--
<div class="correct">Correct!</div>
<div class="myanswer">Your answer was...</div>
<div class="card card-answer" id="answer-content">
<img src="image/user.jpg" class="user-thumbnail">
<div class="user-name">Sasi</div> -->
</div>
</div>
</div>
<div id="final" data-role="page">
<div data-role="header">
<h1>TaH</h1>
</div>
<div data-role="content">
<div data-role="content" class="page-content">
<h1>Tunes</h1>
<h1>Against</h1>
<h1>Humanity</h1>
<div class="footer footer-waiting">
<h3>Score: </h3>
</div>
</div>
</div>
</div>
<div id="gameinprogress" data-role="page">
<div data-role="header">
<h1>TaH</h1>
</div>
<div data-role="content">
<div data-role="content" class="page-content">
<h1>You can't join now!</h1>
<button>Try Again</button>
<!--<div class="footer footer-waiting">-->
<!--<!– <img class="logo" src="image/tah-logo.png"/> –>-->
<!--<button>Try Again</button>-->
<!--<!–<script>–>-->
<!--<!–$( document ).on( "pageshow", "#gameinprogress", function ( e, ui ) {–>-->
<!--<!–waitForNextRound();–>-->
<!--<!–});–>-->
<!--<!–</script>–>-->
<!--</div>-->
</div>
</div>
</div>
<div id="hidden" data-role="page">
<div class="bop-player" data-bop-container data-width="100%">
<!--This is the player container. any html in here will be replaced. Style however you like. The element style be set to "display: block;" automatically when the player is loaded, so do not set any inline styles here otherwise they will be overridden.-->
</div>
</div>
</body>
</html>