-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscreen.html
108 lines (81 loc) · 2.94 KB
/
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!doctype html>
<html>
<head>
<title>Big Screen</title>
</head>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/css/screen.css">
<link rel="stylesheet" type="text/css" href="/css/game.css">
<!-- JS -->
<script src="/socket.io/socket.io.js"></script>
<script src="/js/vendor/TweenMax.min.js"></script>
<script src="/js/vendor/jquery-1.12.4.min.js"></script>
<script src="/js/vendor/phaser-ninja-physics.min.js"></script>
<script src="/js/BrickTileMap.js"></script>
<!-- <script src="/js/PhaserGame.js"></script> -->
<script src="/js/Game.js"></script>
<script>
$(document).ready(function() {
var socket = io.connect('', {path: "/socket.io"});
var game = new Game();
//Let socket.io know this is the shared screen client
socket.emit('register', {'usertype':'client_shared_screen'} );
socket.on('add-player', function(data){
// Shorten names
var newName = data.nickname.substring(0, 15);
data.nickname = newName;
game.addPlayer(data);
});
socket.on('remove-player', function(data){
game.removePlayer(data);
});
socket.on('control-vector', function(data){
game.controlVector(data);
});
socket.on('control-tap', function(data){
game.controlTap(data);
});
//Set game bounds on load/resize
$(window).bind("load resize", function() {
var w = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
var h = (this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height;
game.setBounds(0,0,w,h);
});
game.init($('#stage'));
game.setCallbacks(onForceDisconnect, onWin, onLose, onPoints, onStun);
function onForceDisconnect(data) {
//Emit idle player's socket id
socket.emit('force-disconnect', {'userid':data.userid, 'socketid':data.socketid} );
}
function onWin(socketid) {
//Emit winner's socket id
socket.emit('controller-event', {'type':'win', 'socketid':socketid} );
}
function onLose(socketid) {
//Emit loser's socket id
socket.emit('controller-event', {'type':'lose', 'socketid':socketid} );
}
function onPoints(socketid) {
//Emit point-getter's socket id
socket.emit('controller-event', {'type':'points', 'socketid':socketid} );
}
function onStun(socketid) {
//Emit stunned user's socketid
socket.emit('controller-event', {'type':'stun', 'socketid':socketid} );
};
});
</script>
<body>
<div id="stage"></div>
<h2 id="game-countdown"></h2>
<!-- <h3 id="join-msg">Visit<br/>play.smm.org</h3> -->
<img id="join-msg" src="/img/in-game-attract.png"/>
<div id="new-round">
<img src="/img/new-round-screen.png"/>
<h2 id="round-countdown">XX</h2>
<ul id="player-list">
<li>No players have joined</li>
</ul>
</div>
</body>
</html>