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