').text(x).html();
120 | }
121 |
122 | const dire = [{ x: -1, y: 0 }, { x: 1, y: 0 }, { x: 0, y: -1 }, { x: 0, y: 1 }];
123 | const dire_char = ['↑', '↓', '←', '→'];
124 | const dire_class = ['arrow_u', 'arrow_d', 'arrow_l', 'arrow_r'];
125 |
126 | const scale_sizes = [0, 20, 25, 32, 40, 50, 60];
127 |
128 | var n, m, turn, player, scale, selx, sely, selt, in_game = false;
129 | var grid_type, army_cnt, have_route = Array(4);
130 | var route;
131 |
132 | var room_id = '', client_id, ready_state = 0, lost;
133 | var max_teams = 16;
134 |
135 | var chat_focus = false, is_team = false, starting_audio;
136 |
137 | var is_replay = false, replay_id = false, replay_data = [], rcnt = 0, cur_turn = 0, is_autoplaying = false, autoplay_speed = 1;
138 |
139 | if (location.pathname.substr(0, 8) == '/replays') {
140 | is_replay = true;
141 | replay_id = location.pathname.substr(9);
142 | $.get('/api/getreplay/' + replay_id, function (data) {
143 | replay_data = data;
144 | replayStart();
145 | });
146 | }
147 |
148 | function replayStart() {
149 | rcnt++;
150 | if (rcnt == 2) {
151 | init_map(replay_data.n, replay_data.m);
152 | in_game = true;
153 | update(replay_data.history[0]);
154 | }
155 | }
156 |
157 | function init_map(_n, _m, general) {
158 | chat_focus = false;
159 | $('#chatroom-input').blur();
160 | n = _n, m = _m;
161 | grid_type = Array(n);
162 | for (var i = 0; i < n; i++) {
163 | grid_type[i] = Array(m);
164 | }
165 | army_cnt = Array(n);
166 | for (var i = 0; i < n; i++) {
167 | army_cnt[i] = Array(m);
168 | }
169 | for (var d = 0; d < 4; d++) {
170 | have_route[d] = Array(n);
171 | for (var i = 0; i < n; i++) {
172 | have_route[d][i] = Array(m);
173 | }
174 | }
175 | route = Array();
176 | selx = -1, sely = -1;
177 |
178 | var ts = "";
179 | for (var i = 0; i < n; i++) {
180 | ts += '
';
181 | for (var j = 0; j < m; j++) {
182 | ts += ' | ';
183 | }
184 | ts += '
';
185 | }
186 | $('#map').html('
');
187 |
188 | if (!general || general[0] == -1) {
189 | general = [n / 2 - 0.5, m / 2 - 0.5];
190 | }
191 | $('#map').css('left', $(document).width() / 2 + (m / 2 - general[1] - 0.5) * scale_sizes[scale] + 'px');
192 | $('#map').css('top', $(document).height() / 2 + (n / 2 - general[0] - 0.5) * scale_sizes[scale] + 'px');
193 | for (var i = 0; i < n; i++) {
194 | for (var j = 0; j < m; j++) {
195 | $('#t' + i + '_' + j).on('click', Function("click(" + i + "," + j + ")"));
196 | }
197 | }
198 | }
199 |
200 | function click(x, y, q) {
201 | if (typeof (q) == "undefined") q = true;
202 | if (x < 0 || y < 0 || x >= n || y >= m) return;
203 | if (x == selx && y == sely) {
204 | if (selt == 1) {
205 | selt = 2;
206 | } else {
207 | selx = sely = -1;
208 | }
209 | } else if (Math.abs(x - selx) + Math.abs(y - sely) == 1 && grid_type[x][y] != 201) {
210 | var d = 0;
211 | for (; selx + dire[d].x != x || sely + dire[d].y != y; d++);
212 | addroute(selx, sely, d, selt);
213 | selx = x, sely = y, selt = 1;
214 | } else if (grid_type[x][y] < 200 && grid_type[x][y] % 50 == player) {
215 | selx = x, sely = y, selt = 1;
216 | } else if (q) {
217 | selx = -1, sely = -1;
218 | }
219 | render();
220 | }
221 |
222 | function keypress(key) {
223 | if (in_game && is_replay) {
224 | if (key == 'a' || key == 37) {
225 | backTurn();
226 | } else if (key == 'd' || key == 39) {
227 | nextTurn();
228 | } else if (key == ' ') {
229 | switchAutoplay();
230 | }
231 | }
232 | else if (in_game) {
233 | if (key == 'z') {
234 | selt = 3 - selt;
235 | render();
236 | } else if (key == 'w' || key == 38) {
237 | click(selx - 1, sely, false);
238 | } else if (key == 's' || key == 40) {
239 | click(selx + 1, sely, false);
240 | } else if (key == 'a' || key == 37) {
241 | click(selx, sely - 1, false);
242 | } else if (key == 'd' || key == 39) {
243 | click(selx, sely + 1, false);
244 | } else if (key == 'q') {
245 | clear_queue();
246 | } else if (key == 'e') {
247 | pop_queue();
248 | } else if (key == 't') {
249 | if (!chat_focus) {
250 | is_team = true;
251 | setTimeout(function () {
252 | $('#chatroom-input').focus();
253 | checkChat();
254 | }, 0);
255 | }
256 | } else if (key == 13) {
257 | if (!chat_focus) {
258 | is_team = false;
259 | setTimeout(function () {
260 | $('#chatroom-input').focus();
261 | checkChat();
262 | }, 0);
263 | }
264 | } else if (key == ' ') {
265 | selx = -1, sely = -1;
266 | render();
267 | }
268 | }
269 | }
270 |
271 | $(document).ready(function () {
272 | $('body').on('keypress', function (e) {
273 | keypress(e.key.toLowerCase());
274 | });
275 | $('body').on('keydown', function (e) {
276 | keypress(e.keyCode);
277 | });
278 | $('#map_back').on('click', function (e) {
279 | selx = -1, sely = -1;
280 | render();
281 | });
282 | $('body').bind('mousewheel', function (e) {
283 | if (in_game) {
284 | if (e.originalEvent.deltaY > 0) {
285 | scale = Math.max(scale - 1, 1);
286 | } else {
287 | scale = Math.min(scale + 1, 6);
288 | }
289 | if (typeof (localStorage) != "undefined") {
290 | localStorage.scale = scale.toString();
291 | }
292 | render();
293 | }
294 | })
295 | if (typeof (localStorage) != "undefined") {
296 | if (typeof (localStorage.scale) == "undefined") {
297 | localStorage.scale = '3';
298 | }
299 | scale = parseInt(localStorage.scale);
300 | }
301 | });
302 |
303 | function render() {
304 | $('#menu').css('display', 'none');
305 | $('#game-starting').css('display', 'none');
306 | $('#game').css('display', '');
307 | for (var d = 0; d < 4; d++) {
308 | for (var i = 0; i < n; i++) {
309 | for (var j = 0; j < m; j++) {
310 | have_route[d][i][j] = false;
311 | }
312 | }
313 | }
314 | for (var i = 0; i < route.length; i++) {
315 | have_route[route[i].d][route[i].x][route[i].y] = true;
316 | }
317 | for (var i = 0; i < n; i++) {
318 | for (var j = 0; j < m; j++) {
319 | var cls = 's' + scale, txt = '';
320 | if (grid_type[i][j] < 200) {
321 | if (grid_type[i][j] < 50) {
322 | cls += ' c' + grid_type[i][j];
323 | } else if (grid_type[i][j] < 100) {
324 | cls += ' c' + (grid_type[i][j] - 50) + ' city';
325 | } else if (grid_type[i][j] < 150) {
326 | cls += ' c' + (grid_type[i][j] - 100) + ' general';
327 | } else if (grid_type[i][j] < 200) {
328 | cls += ' c' + (grid_type[i][j] - 150) + ' swamp';
329 | }
330 | if (grid_type[i][j] % 50 == player) {
331 | cls += ' selectable';
332 | }
333 | if (army_cnt[i][j] || grid_type[i][j] == 50) txt = army_cnt[i][j];
334 | } else if (grid_type[i][j] == 200) {
335 | cls += ' empty';
336 | } else if (grid_type[i][j] == 201) {
337 | cls += ' mountain empty';
338 | } else if (grid_type[i][j] == 202) {
339 | cls += ' fog';
340 | } else if (grid_type[i][j] == 203) {
341 | cls += ' obstacle fog';
342 | } else if (grid_type[i][j] == 204) {
343 | cls += ' swamp';
344 | } else if (grid_type[i][j] == 205) {
345 | cls += ' swamp fog';
346 | }
347 | if (i == selx && j == sely) {
348 | if (selt == 1) {
349 | cls += ' selected';
350 | } else {
351 | cls += ' selected selected50';
352 | txt = '50%';
353 | }
354 | } else if (Math.abs(i - selx) + Math.abs(j - sely) == 1 && grid_type[i][j] != 201) {
355 | cls += ' attackable';
356 | }
357 | if (txt != '' && scale == 1) txt = '
' + txt + '
';
358 | for (var d = 0; d < 4; d++)if (have_route[d][i][j]) {
359 | if (scale > 1) txt += '
' + dire_char[d] + '
';
360 | else txt += '
';
361 | }
362 | if ($('#t' + i + '_' + j).attr('class') != cls) {
363 | $('#t' + i + '_' + j).attr('class', cls);
364 | }
365 | if ($('#t' + i + '_' + j).html() != txt) {
366 | $('#t' + i + '_' + j).html(txt);
367 | }
368 | }
369 | }
370 | }
371 |
372 | if (!is_replay) {
373 | var socket = io.connect(location.origin, { transports: ['websocket', 'polling'] });
374 | } else {
375 | function socket() { }
376 | socket.on = function () { }
377 | }
378 |
379 | function update(data) {
380 | if (typeof (data.replay) != "undefined") replay_id = data.replay;
381 | if (data.is_diff) {
382 | for (var i = 0; i * 2 < data.grid_type.length; i++) {
383 | var t = data.grid_type[i * 2];
384 | grid_type[parseInt(t / m)][t % m] = data.grid_type[i * 2 + 1];
385 | }
386 | for (var i = 0; i * 2 < data.army_cnt.length; i++) {
387 | var t = data.army_cnt[i * 2];
388 | army_cnt[parseInt(t / m)][t % m] = data.army_cnt[i * 2 + 1];
389 | }
390 | } else {
391 | for (var i = 0, t = 0; i < n; i++) {
392 | for (var j = 0; j < m; j++) {
393 | grid_type[i][j] = data.grid_type[t++];
394 | }
395 | }
396 | for (var i = 0, t = 0; i < n; i++) {
397 | for (var j = 0; j < m; j++) {
398 | army_cnt[i][j] = data.army_cnt[t++];
399 | }
400 | }
401 | }
402 | if (route.length) {
403 | if (data.lst_move.x != -1) {
404 | while (route.length) {
405 | var t1 = data.lst_move, t2 = { x: route[0].x, y: route[0].y, dx: route[0].x + dire[route[0].d].x, dy: route[0].y + dire[route[0].d].y, half: route[0].type == 2 };
406 | route = route.splice(1);
407 | if (t1.x == t2.x && t1.y == t2.y && t1.dx == t2.dx && t1.dy == t2.dy && t1.half == t2.half) break;
408 | }
409 | } else {
410 | while (route.length) {
411 | var x = route[0].x, y = route[0].y, dx = route[0].x + dire[route[0].d].x, dy = route[0].y + dire[route[0].d].y;
412 | if (grid_type[x][y] < 200 && grid_type[x][y] % 50 == player && army_cnt[x][y] > 1 && grid_type[dx][dy] != 201) break;
413 | route = route.splice(1);
414 | }
415 | }
416 | }
417 | render();
418 | lb = data.leaderboard.sort(function (a, b) {
419 | if (a.army != b.army) return a.army > b.army ? -1 : 1;
420 | if (a.land != b.land) return a.land > b.land ? -1 : 1;
421 | if (a.class_ == 'dead') return a.dead > b.dead ? -1 : 1;
422 | return 0;
423 | })
424 | var th = '
| Team | Player | Army | Land |
';
425 | for (var i = 0; i < lb.length; i++) {
426 | th += '
| ' + lb[i].team + ' | ' + htmlescape(lb[i].uid) + ' | ' + lb[i].army + ' | ' + lb[i].land + ' |
';
427 | }
428 | $('#game-leaderboard').html(th);
429 | $('#game-leaderboard').css('display', '');
430 | $('#turn-counter').html('Turn ' + Math.floor(data.turn / 2) + (data.turn % 2 == 1 ? '.' : ''));
431 | $('#turn-counter').css('display', '');
432 | if (is_replay) return;
433 | if (typeof (data.kills[client_id]) != 'undefined') {
434 | $($('#status-alert').children()[0].children[0]).html('Game Over');
435 | $($('#status-alert').children()[0].children[1]).html('
You were defeated by ' + htmlescape(data.kills[client_id]) + '.');
436 | $($('#status-alert').children()[0].children[1]).css('display', '');
437 | $($('#status-alert').children()[0].children[2]).css('display', '');
438 | $('#status-alert').css('display', '');
439 | lost = true;
440 | }
441 | if (data.game_end) {
442 | if ($('#status-alert').css('display') == 'none') {
443 | if (lost) {
444 | $($('#status-alert').children()[0].children[0]).html('Game Ended');
445 | } else {
446 | $($('#status-alert').children()[0].children[0]).html('You Win');
447 | }
448 | $($('#status-alert').children()[0].children[1]).css('display', 'none');
449 | }
450 | $('#status-alert').css('display', '');
451 | $($('#status-alert').children()[0].children[2]).css('display', 'none');
452 | if (replay_id) $($('#status-alert').children()[0].children[6]).css('display', '');
453 | }
454 | }
455 |
456 | socket.on('update', update);
457 |
458 | socket.on('starting', function () {
459 | $('#menu').css('display', 'none');
460 | $('#game-starting').css('display', '');
461 | starting_audio.play();
462 | });
463 |
464 | function addroute(x, y, d, type) {
465 | route.push({ x: x, y: y, d: d, type: type });
466 | socket.emit('attack', { x: x, y: y, dx: x + dire[d].x, dy: y + dire[d].y, half: type == 2 });
467 | render();
468 | }
469 |
470 | function clear_queue() {
471 | route = Array()
472 | socket.emit('clear_queue');
473 | render();
474 | }
475 |
476 | function pop_queue() {
477 | if (route.length) {
478 | var tmp = route.pop();
479 | socket.emit('pop_queue');
480 | if (tmp.x + dire[tmp.d].x == selx && tmp.y + dire[tmp.d].y == sely) {
481 | selx = tmp.x, sely = tmp.y;
482 | }
483 | render();
484 | }
485 | }
486 |
487 | socket.on('set_id', function (data) {
488 | client_id = data;
489 | });
490 |
491 | socket.on('init_map', function (data) {
492 | init_map(data.n, data.m, data.general);
493 | in_game = true;
494 | lost = false;
495 | console.log(data);
496 | for (var i = 0; i < data.player_ids.length; i++) {
497 | if (data.player_ids[i] == client_id) {
498 | player = i + 1;
499 | }
500 | }
501 | });
502 |
503 | function backTurn() {
504 | if (is_autoplaying) switchAutoplay();
505 | cur_turn = Math.max(0, cur_turn - 20);
506 | update(replay_data.history[cur_turn]);
507 | }
508 |
509 | function nextTurn(ignore = false) {
510 | if (is_autoplaying && !ignore) return;
511 | cur_turn = Math.min(replay_data.history.length - 1, cur_turn + 1);
512 | update(replay_data.history[cur_turn]);
513 | }
514 |
515 | function jumpToTurn() {
516 | if (is_autoplaying) switchAutoplay();
517 | var uturn = $('#replay-turn-jump-input').val(), turn = 0;
518 | if (uturn[uturn.length - 1] == '.') turn = parseInt(uturn.substr(0, uturn.length - 1)) * 2 + 1;
519 | else turn = parseInt(uturn) * 2;
520 | for (var i = 0; i < replay_data.history.length; i++) {
521 | if (replay_data.history[i].turn == turn) {
522 | cur_turn = i;
523 | update(replay_data.history[cur_turn]);
524 | break;
525 | }
526 | }
527 | }
528 |
529 | function switchAutoplay() {
530 | is_autoplaying = !is_autoplaying;
531 | if (!is_autoplaying) {
532 | $($('#replay-top-left')[0].children[1]).attr('class', 'small');
533 | $('#tabs-replay-autoplay').css('display', 'none');
534 | return;
535 | }
536 | $($('#replay-top-left')[0].children[1]).attr('class', 'small inverted');
537 | $('#tabs-replay-autoplay').css('display', 'inline-block');
538 | setTimeout(autoplay, 500 / autoplay_speed);
539 | }
540 |
541 | function autoplay() {
542 | if (!is_autoplaying) return;
543 | nextTurn(true);
544 | setTimeout(autoplay, 500 / autoplay_speed);
545 | }
546 |
547 | function setAutoplayRate() {
548 | var tmp = $($('#tabs-replay-autoplay')[0].children[0]).val();
549 | autoplay_speed = parseFloat(tmp.substr(0, tmp.length - 1));
550 | }
551 |
552 | function _exit() {
553 | location.href = '/';
554 | }
555 |
556 | $(document).ready(function () {
557 | if (is_replay) {
558 | $('#replay-top-left').css('display', '');
559 | $('#replay-bottom').css('display', '');
560 | $('#replay-turn-jump-input').on('keypress', function (e) {
561 | if (e.charCode == 10 || e.charCode == 13) jumpToTurn();
562 | });
563 | $('#replay-turn-jump-button').on('click', jumpToTurn);
564 | $($('#replay-bottom-bar')[0].children[0]).on('click', backTurn);
565 | $($('#replay-bottom-bar')[0].children[1]).on('click', switchAutoplay);
566 | $($('#replay-bottom-bar')[0].children[2]).on('click', nextTurn);
567 | $($('#replay-top-left')[0].children[1]).on('click', switchAutoplay);
568 | $($('#replay-top-left')[0].children[2]).on('click', _exit);
569 | $('#tabs-replay-autoplay').each(function () {
570 | for (var i = 1; i < this.children.length; i++) {
571 | initTab(this, this.children[i], setAutoplayRate);
572 | }
573 | });
574 | replayStart();
575 | return;
576 | }
577 | $('#chat').css('display', '');
578 | $('#menu').css('display', '');
579 | if (typeof (localStorage) != "undefined") {
580 | if (typeof (localStorage.username) == "undefined") {
581 | localStorage.username = 'Anonymous';
582 | }
583 | nickname = localStorage.username;
584 | } else {
585 | nickname = 'Anonymous';
586 | }
587 | var tmp = location.pathname;
588 | room_id = tmp.substr(tmp.indexOf('games/') + 6);
589 | starting_audio = new Audio('/gong.mp3');
590 | socket.emit('join_game_room', { 'room': room_id, 'nickname': nickname });
591 | });
592 |
593 | socket.on('connect', function () {
594 | if (room_id != '') {
595 | socket.emit('join_game_room', { 'room': room_id, 'nickname': nickname });
596 | }
597 | });
598 |
599 | socket.on('room_update', function (data) {
600 | setRangeVal('map-height', data.height_ratio);
601 | setRangeVal('map-width', data.width_ratio);
602 | setRangeVal('city-density', data.city_ratio);
603 | setRangeVal('mountain-density', data.mountain_ratio);
604 | setRangeVal('swamp-density', data.swamp_ratio);
605 | setTabVal('game-speed', data.speed + 'x');
606 | $('#custom-map').val(data.custom_map);
607 | var tmp = Array(max_teams + 1);
608 | for (var i = 0; i <= max_teams; i++) {
609 | tmp[i] = '';
610 | }
611 | var isHost = data.players[0].sid == client_id;
612 | setRangeDisable('map-height', !isHost);
613 | setRangeDisable('map-width', !isHost);
614 | setRangeDisable('city-density', !isHost);
615 | setRangeDisable('mountain-density', !isHost);
616 | setRangeDisable('swamp-density', !isHost);
617 | if (isHost) $('#custom-map').removeAttr('disabled');
618 | else $('#custom-map').attr('disabled', '');
619 | $('#host-' + (isHost).toString()).css('display', '');
620 | $('#host-' + (!isHost).toString()).css('display', 'none');
621 | for (var i = 0; i < data.players.length; i++) {
622 | if (data.players[i].sid == client_id) {
623 | setTabVal('custom-team', data.players[i].team ? data.players[i].team.toString() : 'Spectator');
624 | if (data.players[i].team) {
625 | $('#you-are').css('display', '');
626 | $('#you-are-2').css('display', '');
627 | $($('#you-are')[0].children[1]).attr('class', 'inline-color-block c' + (i + 1));
628 | $($('#you-are-2')[0].children[1]).attr('class', 'inline-color-block c' + (i + 1));
629 | } else {
630 | $('#you-are').css('display', 'none');
631 | $('#you-are-2').css('display', 'none');
632 | }
633 | if (data.players[i].uid == 'Anonymous') {
634 | $('#username-input').val('');
635 | } else {
636 | $('#username-input').val(data.players[i].uid);
637 | }
638 | }
639 | tmp[data.players[i].team] += '
';
640 | if (data.players[i].team) {
641 | if (i == 0) {
642 | tmp[data.players[i].team] += '
' + crown_html + '';
643 | } else {
644 | tmp[data.players[i].team] += '
';
645 | }
646 | }
647 | tmp[data.players[i].team] += '
';
648 | if (data.players[i].ready) tmp[data.players[i].team] += '';
649 | if (i == 0) tmp[data.players[i].team] += '';
650 | tmp[data.players[i].team] += htmlescape(data.players[i].uid);
651 | if (i == 0) tmp[data.players[i].team] += '';
652 | if (data.players[i].ready) tmp[data.players[i].team] += '';
653 | tmp[data.players[i].team] += '
';
654 | tmp[data.players[i].team] += '
';
655 | }
656 | for (var i = 0; i <= max_teams; i++) {
657 | if (tmp[i] != '') {
658 | tmp[i] = '
' + (i ? 'Team ' + i : 'Spectators') + '
' + tmp[i] + '';
659 | }
660 | }
661 | var res_html = '';
662 | for (var i = 1; i <= max_teams; i++) {
663 | res_html += tmp[i];
664 | }
665 | res_html += tmp[0];
666 | $('#teams').html(res_html);
667 | if (data.need > 1) {
668 | $('#force-start').css('display', 'block');
669 | $('#force-start').html('Force Start ' + data.ready + ' / ' + data.need);
670 | } else {
671 | $('#force-start').css('display', 'none');
672 | }
673 | if (ready_state) {
674 | $('#force-start').attr('class', 'inverted');
675 | } else {
676 | $('#force-start').attr('class', '');
677 | }
678 | });
679 |
680 | function getConf() {
681 | var data = {};
682 | data.height_ratio = getRangeVal('map-height');
683 | data.width_ratio = getRangeVal('map-width');
684 | data.city_ratio = getRangeVal('city-density');
685 | data.mountain_ratio = getRangeVal('mountain-density');
686 | data.swamp_ratio = getRangeVal('swamp-density');
687 | data.speed = parseFloat(getTabVal('game-speed'));
688 | data.custom_map = $('#custom-map').val();
689 | return data;
690 | }
691 |
692 | function updateConf() {
693 | socket.emit('change_game_conf', getConf());
694 | }
695 |
696 | const delayUpdateConf = _.debounce(updateConf, 300);
697 |
698 | function updateTeam() {
699 | var team = getTabVal('custom-team');
700 | if (team == 'Spectator') team = 0;
701 | socket.emit('change_team', { team: team });
702 | }
703 |
704 | function getRangeVal(x) {
705 | return $($('#' + x)[0].children[0]).val();
706 | }
707 |
708 | function setRangeVal(x, y) {
709 | $($('#' + x)[0].children[0]).val(y);
710 | $($('#' + x)[0].children[1]).html($($('#' + x)[0].children[0]).val());
711 | }
712 |
713 | function setRangeDisable(x, y) {
714 | if (y) $($('#' + x)[0].children[0]).attr('disabled', '');
715 | else $($('#' + x)[0].children[0]).removeAttr('disabled');
716 | }
717 |
718 | function initRange(x) {
719 | $(x.children[0]).on('change', function () {
720 | $(x.children[1]).html($(x.children[0]).val())
721 | delayUpdateConf();
722 | });
723 | $(x.children[0]).on('input', function () {
724 | $(x.children[1]).html($(x.children[0]).val());
725 | delayUpdateConf();
726 | });
727 | }
728 |
729 | function getTabVal(x) {
730 | return $($('#tabs-' + x)[0].children[0]).val();
731 | }
732 |
733 | function setTabVal(x, y) {
734 | var tmp = getTabVal(x), tabs = $('#tabs-' + x)[0].children;
735 | for (var i = 1; i < tabs.length; i++) {
736 | if ($(tabs[i]).html() == tmp) {
737 | $(tabs[i]).attr('class', 'inline-button');
738 | }
739 | if ($(tabs[i]).html() == y) {
740 | $(tabs[i]).attr('class', 'inline-button inverted');
741 | }
742 | }
743 | $($('#tabs-' + x)[0].children[0]).val(y);
744 | }
745 |
746 | function initTab(x, y, callback) {
747 | $(y).on('click', function () {
748 | setTabVal($(x).attr('id').substr(5), $(y).html());
749 | callback();
750 | });
751 | }
752 |
753 | $(document).ready(function () {
754 | $('.slider-container').each(function () { initRange(this) });
755 | $('#tabs-game-speed').each(function () {
756 | for (var i = 1; i < this.children.length; i++) {
757 | initTab(this, this.children[i], updateConf);
758 | }
759 | });
760 | $('#tabs-custom-team').each(function () {
761 | for (var i = 1; i < this.children.length; i++) {
762 | initTab(this, this.children[i], updateTeam);
763 | }
764 | });
765 | $('#force-start').on('click', function () {
766 | ready_state ^= 1;
767 | socket.emit('change_ready', { ready: ready_state });
768 | });
769 | function changeUsername() {
770 | var tmp = $('#username-input').val();
771 | if (tmp == '') tmp = 'Anonymous';
772 | socket.emit('change_nickname', { nickname: tmp });
773 | if (typeof (localStorage) != "undefined") {
774 | localStorage.username = tmp;
775 | }
776 | }
777 | $('#username-input').on('change', _.debounce(changeUsername, 300));
778 | $('#username-input').on('input', _.debounce(changeUsername, 300));
779 | $('#custom-map').on('change', delayUpdateConf);
780 | $('#custom-map').on('input', delayUpdateConf);
781 | });
782 |
783 | var chatStr = '';
784 |
785 | function checkChat() {
786 | var tmp = $('#chatroom-input').val(), res;
787 | if (is_team) {
788 | if (tmp.substr(0, 7) == '[team] ') {
789 | res = tmp.substr(7);
790 | } else {
791 | res = chatStr;
792 | }
793 | } else {
794 | if (tmp.substr(0, 7) == '[team] ') {
795 | res = tmp.substr(7);
796 | } else {
797 | res = tmp;
798 | }
799 | }
800 | chatStr = res;
801 | $('#chatroom-input').val((is_team ? '[team] ' : '') + res);
802 | }
803 |
804 | socket.on('left', function () {
805 | var data = getConf();
806 | if (typeof (localStorage) != "undefined") {
807 | if (typeof (localStorage.username) == "undefined") {
808 | localStorage.username = 'Anonymous';
809 | }
810 | nickname = localStorage.username;
811 | } else {
812 | nickname = 'Anonymous';
813 | }
814 | socket.emit('join_game_room', { 'room': room_id, 'nickname': nickname });
815 | socket.emit('change_game_conf', data);
816 | $('#menu').css('display', '');
817 | $('#game').css('display', 'none');
818 | $('#game-leaderboard').css('display', 'none');
819 | $('#turn-counter').css('display', 'none');
820 | $('#chat-messages-container').html('');
821 | $('#status-alert').css('display', 'none');
822 | ready_state = 0;
823 | in_game = false;
824 | replay_id = false;
825 | });
826 |
827 | $(document).ready(function () {
828 | var shown = true;
829 | $('#chat-messages-container').on('click', function () {
830 | $('#chat-messages-container').attr('class', shown ? 'minimized' : '');
831 | $('#chatroom-input').attr('class', shown ? 'minimized' : '');
832 | shown = !shown;
833 | });
834 | socket.on('chat_message', function (data) {
835 | var th = '';
836 | if (data.color) {
837 | th = '
' + htmlescape(data.sender) + ': ' + htmlescape(data.text) + '';
838 | if (data.team) {
839 | th = '
[team] ' + th;
840 | }
841 | th = '
' + th;
842 | } else {
843 | th = '
' + htmlescape(data.text) + '
'
844 | }
845 | $('#chat-messages-container')[0].innerHTML += th;
846 | $('#chat-messages-container').scrollTop(233333);
847 | });
848 | $('#chatroom-input').on('keypress', function (data) {
849 | if (data.keyCode == 13) {
850 | console.log('b');
851 | socket.emit('send_message', { text: chatStr, team: is_team });
852 | chatStr = '', is_team = false;
853 | $('#chatroom-input').val('');
854 | }
855 | });
856 | $('#chatroom-input').focus(function () {
857 | chat_focus = true;
858 | });
859 | $('#chatroom-input').blur(function () {
860 | chat_focus = false;
861 | is_team = false;
862 | checkChat();
863 | });
864 | $('#chatroom-input').on('change', checkChat);
865 | $('#chatroom-input').on('input', checkChat);
866 | $($('#status-alert').children()[0].children[2]).on('click', function (e) {
867 | $('#status-alert').css('display', 'none');
868 | });
869 | $($('#status-alert').children()[0].children[4]).on('click', function (e) {
870 | socket.emit('leave');
871 | });
872 | $($('#status-alert').children()[0].children[6]).on('click', function (e) {
873 | window.open('/replays/' + replay_id, '_blank');
874 | });
875 | $($('#status-alert').children()[0].children[8]).on('click', _exit);
876 | });
877 |
--------------------------------------------------------------------------------