-
Notifications
You must be signed in to change notification settings - Fork 1
/
game_screen.html
86 lines (68 loc) · 3.11 KB
/
game_screen.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
<!DOCTYPE html>
<html>
<head>
<title>S3 Word Game!</title>
<link href="css/hello.css" media="screen" rel="stylesheet" type="text/css" />
<!--<script type="text/javascript" src="http://crypto-js.googlecode.com/files/2.0.0-crypto-sha1.js"></script>-->
<script src="js/deps/md5.js" type="text/javascript"></script>
<script src="js/deps/base64.js" type="text/javascript"></script>
<script src="js/deps/strophe.js" type="text/javascript"></script>
<script src="js/deps/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/deps/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="js/deps/jquery.url.js" type="text/javascript"></script>
<script src="js/sail.js/sail.rollcall.js" type="text/javascript"></script>
<script src="js/sail.js/sail.strophe.js" type="text/javascript"></script>
<script src="js/game.js" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
</head>
<body>
<div id="dfn" style="font-size: 72px; font-weight: bold; text-align: center; margin-top: 10%">
</div>
<div id="answers" style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px"></div>
<script type='text/javascript'>
$(document).ready(function(){
Sail.Strophe.onConnectSuccess = function() {
var groupchat = Sail.Strophe.joinGroupchat('[email protected]')
var ansId = 0
groupchat.addHandler(function(msg) {
if (!msg)
return
if (!$(msg))
return
if ($(msg).attr('type') != 'groupchat')
return
data = parseMsg(msg)
if (!data)
return
if(data.type == 'definition') {
$('#dfn').html(data.content)
} else if (data.type == 'answer') {
who = $(msg).attr('from').split('/')[1].split('@')[0]
ansId += 1
$('#answers').append("<div style='position: absolute; font-weight: bold; font-size: 64px' id='ans-"+ansId+"'></div>")
ans = $('#ans-'+ansId)
ans.css('left', Math.random()*1000+'px')
ans.css('top', Math.random()*600+'px')
ans.append('<span style="color: #369; font-size: 50%">'+who+'</span>')
ans.append('<span style="color: #963">'+data.content+'</span>')
setTimeout(function(){ans.hide('puff', {}, 5000, function() {$(this).remove()})}, 1000)
} else if (data.type == 'endgame') {
who = data.winner
$('#answers').append("<div style='position: absolute; font-weight: bold; font-size: 256px; background-color: #afa; text-align: center' id='ans-"+ansId+"'></div>")
ans = $('#ans-'+ansId)
ans.append('<span style="color: #369; font-size: 50%; background-color: #afa">WINNER</span><br />')
ans.append('<span style="color: #369; font-size: 50%; background-color: #afa">'+who+'</span><br />')
ans.append('<span style="color: #963; background-color: #afa">'+data.answer+'</span>')
setTimeout(function(){ans.hide('puff', {}, 5000, function() {$(this).remove()})}, 1000)
}
})
$('#send').click(function() {
text = $('#chatinput')
groupchat.sendText(text.val())
text.val("")
})
}
})
</script>
</body>
</html>