rc-web@63
|
1 /////////////////////////////////////////////////
|
rc-web@63
|
2 // connect to websocket
|
rc-web@63
|
3
|
rc-web@63
|
4 var socket = io.connect();
|
rc-web@63
|
5
|
rc-web@63
|
6 //socket.on("metroPulse", metronomeTick);
|
rc-web@63
|
7 /////////////////////////////////////////////////
|
rc-web@63
|
8 socket.on("metroPulse", pulseInClient);
|
rc-web@63
|
9 function pulseInClient(pulse,groupID,metrobeat){
|
rc-web@63
|
10
|
rc-web@63
|
11 var groupPage=document.getElementById('group').value
|
rc-web@63
|
12 if (groupID == groupPage) {
|
rc-web@63
|
13 metronomeTick(1000, groupID, metrobeat);
|
rc-web@63
|
14 }
|
rc-web@63
|
15 }
|
rc-web@63
|
16 /////////////////////////////////////////////////
|
rc-web@63
|
17 function metroCss(beat, beatcolor,text){
|
rc-web@63
|
18 var color = beatcolor;
|
rc-web@63
|
19 $(".metrocase > div").each(function(){$(this).stop()});
|
rc-web@63
|
20 $(".metrocase > div").each(function(){$(this).css('background-color', beatcolor)});
|
rc-web@63
|
21 $(".metrocase > div").each(function(){$(this).text(" ")});
|
rc-web@63
|
22 // $(".metrocase > div").each(function(){$(this).animate({color: blue},
|
rc-web@63
|
23 // 50,
|
rc-web@63
|
24 // function() { $(this).animate({color:red}); }
|
rc-web@63
|
25 // );
|
rc-web@63
|
26 // })
|
rc-web@63
|
27 }
|
rc-web@63
|
28
|
rc-web@63
|
29 function metronomeTick(pulse, voice,metrobeat) {
|
rc-web@63
|
30 var color = "gray"
|
rc-web@63
|
31 metroCss(0, "red", "4")
|
rc-web@63
|
32 setTimeout(function(){metroCss(0, "black", "4")},150);
|
rc-web@63
|
33 };
|
rc-web@63
|
34
|
rc-web@63
|
35 /////////////////////////////////////////////////
|
rc-web@63
|
36 // update the stopwatch value on the client page in line with server
|
rc-web@63
|
37 socket.on("chronFromServer", function(chron) { $("div#client_chronometer").text(chron); });
|
rc-web@63
|
38
|
rc-web@63
|
39 // server time
|
rc-web@63
|
40 //var groupPage=document.getElementById('group').value
|
rc-web@63
|
41 //if (groupID == groupPage) {
|
rc-web@63
|
42 socket.on("dateTime", function(datetime) {
|
rc-web@63
|
43 $("div#datetime").text("" +datetime);
|
rc-web@63
|
44 });
|
rc-web@63
|
45
|
rc-web@63
|
46 /////////////////////////////////////////////////
|
rc-web@63
|
47 // countdown to change
|
rc-web@63
|
48 socket.on("countinFromServer", countinClient);
|
rc-web@63
|
49 function countinClient(groupID, currentseconds,mm,text,colour,background,unit){
|
rc-web@63
|
50 var groupPage=document.getElementById('group').value
|
rc-web@63
|
51 if (groupID == groupPage) {
|
rc-web@63
|
52 $("#counttitle").css('color','white');
|
rc-web@63
|
53 $("#counttitle").text(text);
|
rc-web@63
|
54 $("#count").text(currentseconds);
|
rc-web@63
|
55 document.getElementById("count").style.color=colour;
|
rc-web@63
|
56 }}
|
rc-web@63
|
57
|
rc-web@63
|
58 /////////////////////////////////////////////////
|
rc-web@63
|
59 // countdown to change
|
rc-web@63
|
60 socket.on("counterText", cText);
|
rc-web@63
|
61 function cText(groupID, currentseconds,text){
|
rc-web@63
|
62 $("#totalcountdown"+groupID).text(text);
|
rc-web@63
|
63 var groupPage=document.getElementById('group').value
|
rc-web@63
|
64 if (groupID == groupPage) {
|
rc-web@63
|
65 //console.log(text)
|
rc-web@63
|
66 $("#totalcountdown").text(text);
|
rc-web@63
|
67 }}
|
rc-web@63
|
68
|
rc-web@63
|
69 ///////////////////////////////////////
|
rc-web@63
|
70 //function pageFlip(unit) { $('#sections').trigger('goto', [parseFloat(unit)]); }
|
rc-web@63
|
71
|
rc-web@63
|
72 /////////////////////////////////////////////////
|
rc-web@63
|
73 // call the fancy jquery functions
|
rc-web@63
|
74 function slideTo (target) { $('#sections').trigger('goto', [target]); }
|
rc-web@63
|
75 function pad2(number) { return (number < 10 ? '0' : '') + number }
|
rc-web@63
|
76
|
rc-web@63
|
77 /////////////////////////////////////////////////
|
rc-web@63
|
78 //var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } );
|
rc-web@63
|
79 socket.on("pageFlipfromserver", pageTurn);
|
rc-web@64
|
80 function pageTurn (group,unit,time,mm,seqcounter,nextunit) {
|
rc-web@63
|
81 var groupPage=document.getElementById('group').value;
|
rc-web@63
|
82 if (group == groupPage) {
|
rc-web@64
|
83 console.log(unit + " ---> " + nextunit)
|
rc-web@63
|
84 var g= pad2(group);
|
rc-web@63
|
85 var p= pad2(unit);
|
rc-web@63
|
86 var units=8;
|
rc-web@63
|
87 var next=(((unit+1)%units)+units)%units
|
rc-web@63
|
88 //$("#live").load("music.html #"+unit +" *");
|
rc-web@63
|
89 $("#live").load("music.html #"+unit);
|
rc-web@63
|
90
|
rc-web@63
|
91 //$("#live").html("<img src='thumbs/"+ (unit) + ".png" + "' width='715'>")
|
rc-web@64
|
92 $("#preview").html("<h3 style='background:transparent; position: relative; font-size:1.5em;top:14px; left:10px;';> n e x t : </h3><img src='thumbs/"+ (nextunit) + ".png" + "' width='305'>")
|
rc-web@63
|
93 }
|
rc-web@63
|
94 else {
|
rc-web@63
|
95 //console.log("not for this group... ignoring... for group:" + group );
|
rc-web@63
|
96 }
|
rc-web@63
|
97 }
|
rc-web@63
|
98
|
rc-web@63
|
99 ////////////////////////////////////////////////
|
rc-web@63
|
100
|
rc-web@63
|
101 /* commented out for now as interferes with chat
|
rc-web@63
|
102 need to introduce metakey...manyana... not so usefull anyway really...
|
rc-web@63
|
103
|
rc-web@63
|
104 keyboard controls
|
rc-web@63
|
105 +++++++++++++++++++++++++
|
rc-web@63
|
106
|
rc-web@63
|
107 SPACE to toggle visibilty of preview
|
rc-web@63
|
108 m to toggle visibilty of metronome
|
rc-web@63
|
109 s to toggle visibilty of stopwatch
|
rc-web@63
|
110 h to hide all above
|
rc-web@63
|
111
|
rc-web@63
|
112
|
rc-web@63
|
113 */
|
rc-web@63
|
114 function toggle_visibility(id) {
|
rc-web@63
|
115 var e = document.getElementById(id);
|
rc-web@63
|
116 if(e.style.display == 'block')
|
rc-web@63
|
117 e.style.display = 'none';
|
rc-web@63
|
118 else
|
rc-web@63
|
119 e.style.display = 'block';
|
rc-web@63
|
120 }
|
rc-web@63
|
121
|
rc-web@63
|
122 $(document).keypress(function(e){
|
rc-web@63
|
123 // "space bar" for next unit preview
|
rc-web@63
|
124 var checkWebkitandIE=(e.which==32 ? 1 : 0);
|
rc-web@63
|
125 var checkMoz=(e.which==32 ? 1 : 0);
|
rc-web@63
|
126 // "m" button for metronome
|
rc-web@63
|
127 var mcheckWebkitandIE=(e.which==109 ? 1 : 0);
|
rc-web@63
|
128 var mcheckMoz=(e.which==109 ? 1 : 0);
|
rc-web@63
|
129 // "s" button for stopwatch/chronometer
|
rc-web@63
|
130 var ccheckWebkitandIE=(e.which==115 ? 1 : 0);
|
rc-web@63
|
131 var ccheckMoz=(e.which==115 ? 1 : 0);
|
rc-web@63
|
132
|
rc-web@63
|
133 // "h" button for hideall
|
rc-web@63
|
134 var hcheckWebkitandIE=(e.which==104 ? 1 : 0);
|
rc-web@63
|
135 var hcheckMoz=(e.which==104 ? 1 : 0);
|
rc-web@63
|
136
|
rc-web@63
|
137 // console.log(e.which);
|
rc-web@63
|
138 // if (checkWebkitandIE || checkMoz) { toggle_visibility('preview') }
|
rc-web@63
|
139 // if (mcheckWebkitandIE || mcheckMoz) { toggle_visibility('comms') }
|
rc-web@63
|
140 // if (ccheckWebkitandIE || ccheckMoz) { toggle_visibility('client_chronometer') }
|
rc-web@63
|
141 if (hcheckWebkitandIE || hcheckMoz) {
|
rc-web@63
|
142 toggle_visibility('info')
|
rc-web@63
|
143 //toggle_visibility('comms')
|
rc-web@63
|
144 //toggle_visibility('preview')
|
rc-web@63
|
145 }
|
rc-web@63
|
146 });
|
rc-web@63
|
147
|
rc-web@63
|
148 //*/
|
rc-web@63
|
149
|
rc-web@63
|
150 ////////////////////////////////////////////////
|
rc-web@63
|
151 // this needs to have a variable to define the websocket
|
rc-web@63
|
152 // otherwise we will pings from all sockets connected
|
rc-web@63
|
153 // no! the server broadcasts the ping and the clients emit the pong!
|
rc-web@63
|
154 // ah but then the time reported back from the server needs to be targeted
|
rc-web@63
|
155 // to specific client..
|
rc-web@63
|
156 //////////////////////////////////////////////
|
rc-web@63
|
157 // Latency "Pong"
|
rc-web@63
|
158 socket.on("timeFromServer", function(n) {
|
rc-web@63
|
159 socket.emit("clientTimeResponse",n); });
|
rc-web@63
|
160
|
rc-web@63
|
161 socket.on("latencyFromServer", function(latency) {
|
rc-web@63
|
162 $("#client_latency").text("Latency: "+latency+"ms.")
|
rc-web@63
|
163
|
rc-web@63
|
164 });
|
rc-web@63
|
165
|
rc-web@63
|
166 function getLatencies(x) { socket.emit("getLatencies", x); }
|
rc-web@63
|
167
|
rc-web@63
|
168 //////////////////////////////////////////////
|
rc-web@63
|
169
|
rc-web@63
|
170
|
rc-web@63
|
171 socket.on('connect', function () {
|
rc-web@63
|
172 $('#chat').addClass('connected');
|
rc-web@63
|
173 });
|
rc-web@63
|
174
|
rc-web@63
|
175 socket.on('announcement', function (msg) {
|
rc-web@63
|
176 $('#lines').append($('<p>').append($('<em>').text(msg)));
|
rc-web@63
|
177 });
|
rc-web@63
|
178
|
rc-web@63
|
179 socket.on('nicknames', function (nicknames) {
|
rc-web@63
|
180 $('#nicknames').empty().append($('<span>Online: </span>'));
|
rc-web@63
|
181 for (var i in nicknames) {
|
rc-web@63
|
182 $('#nicknames').append($('<b>').text(nicknames[i]));
|
rc-web@63
|
183 }
|
rc-web@63
|
184 });
|
rc-web@63
|
185
|
rc-web@63
|
186 socket.on('user message', message);
|
rc-web@63
|
187 socket.on('reconnect', function () {
|
rc-web@63
|
188 $('#lines').remove();
|
rc-web@63
|
189 message('System', 'Reconnected to the server');
|
rc-web@63
|
190 });
|
rc-web@63
|
191
|
rc-web@63
|
192 socket.on('reconnecting', function () {
|
rc-web@63
|
193 message('System', 'Attempting to re-connect to the server');
|
rc-web@63
|
194 });
|
rc-web@63
|
195
|
rc-web@63
|
196 socket.on('error', function (e) {
|
rc-web@63
|
197 message('System', e ? e : 'A unknown error occurred');
|
rc-web@63
|
198 });
|
rc-web@63
|
199
|
rc-web@63
|
200 function message (from, msg) {
|
rc-web@63
|
201 $('#lines').prepend($('<p>').prepend($('<b>').text(from), msg));
|
rc-web@63
|
202 }
|
rc-web@63
|
203
|
rc-web@63
|
204 // dom manipulation
|
rc-web@63
|
205 $(function () {
|
rc-web@63
|
206 $('#set-nickname').submit(function (ev) {
|
rc-web@63
|
207 socket.emit('nickname', $('#nick').val(), function (set) {
|
rc-web@63
|
208 if (!set) {
|
rc-web@63
|
209 clear();
|
rc-web@63
|
210 return $('#chat').addClass('nickname-set');
|
rc-web@63
|
211 }
|
rc-web@63
|
212 $('#nickname-err').css('visibility', 'visible');
|
rc-web@63
|
213 });
|
rc-web@63
|
214 return false;
|
rc-web@63
|
215 });
|
rc-web@63
|
216
|
rc-web@63
|
217 $('#send-message').submit(function () {
|
rc-web@63
|
218 message('me', $('#message').val());
|
rc-web@63
|
219 socket.emit('user message', $('#message').val());
|
rc-web@63
|
220 clear();
|
rc-web@63
|
221 $('#lines').get(0).scrollTop = 10000000;
|
rc-web@63
|
222 return false;
|
rc-web@63
|
223 });
|
rc-web@63
|
224
|
rc-web@63
|
225 function clear () {
|
rc-web@63
|
226 $('#message').val('').focus();
|
rc-web@63
|
227 };
|
rc-web@63
|
228 }); |