Tizen 2.0 Release
[samples/web/Sweetspot.git] / js / main.js
1 /*
2  * Copyright (c) 2012, Intel Corporation.
3  *
4  * This program is licensed under the terms and conditions of the
5  * Apache License, version 2.0.  The full text of the Apache License is at
6  * http://www.apache.org/licenses/LICENSE-2.0
7  *
8  */
9
10 Game = {};
11
12 (function () {
13     var numtext = ["0", "1", "2", "3", "4", "5"];
14
15     function GameData() {
16         this.array = [[-1, -1, -1, -1, -1, -1],
17                       [-1, -1, -1, -1, -1, -1],
18                       [-1, -1, -1, -1, -1, -1],
19                       [-1, -1, -1, -1, -1, -1],
20                       [-1, -1, -1, -1, -1, -1],
21                       [-1, -1, -1, -1, -1, -1],
22                       [-1, -1, -1, -1, -1, -1]];
23         this.colindex = [0, 0, 0, 0, 0, 0, 0, 0];
24     }
25
26     function no_more_moves() {
27         var array = Game.activegame.array;
28         for(var i = 0; i < 7; i++)
29             for(var j = 0; j < 6; j++)
30                 if(array[i][j] < 0)
31                     return false;
32         return true;
33     }
34
35     function get_random_unfilled_column() {
36         var array = Game.activegame.array;
37         var colindex = Game.activegame.colindex;
38
39         var columns = new Array();
40         for(var i = 0; i < 7; i++)
41             if(colindex[i] < 6)
42                 columns.push(i);
43
44         if(columns.length <= 0)
45             return -1;
46
47         var tgt = (Math.random() * columns.length)|0;
48         return columns[tgt];
49     }
50
51     function winning_move_possible(player) {
52         var array = Game.activegame.array;
53         var colindex = Game.activegame.colindex;
54         var matches = 0;
55         var column = -1;
56         var i, j, k;
57
58         /* vertical check */
59         for(i = 0; i < 7; i++)
60         {
61             matches = 0;
62             for(j = 0; j < colindex[i]; j++)
63                 if(array[i][j] == player)
64                     matches++;
65                 else
66                     matches = 0;
67             if(matches > 2)
68             {
69                 console.log("POSSIBLE WIN: player "+player+" column "+(i+1));
70                 return i;
71             }
72         }
73
74         /* horizontal check */
75         for(j = 0; j < 6; j++)
76         {
77             for(i = 0; i < 4; i++)
78             {
79                 matches = 0;
80                 column = -1;
81                 for(k = 0; k < 4; k++)
82                     if(array[i+k][j] == player)
83                     {
84                         matches++;
85                     }
86                     else if((array[i+k][j] < 0)&&(colindex[i+k] == j)&&(column < 0))
87                     {
88                         matches++;
89                         column = i+k;
90                     }
91                     else
92                     {
93                         column = -1;
94                         matches = 0;
95                     }
96                 if((matches == 4)&&(column >= 0))
97                 {
98                     console.log("POSSIBLE WIN: player "+player+" column "+(column+1));
99                     return column;
100                 }
101             }
102         }
103
104         return -1;
105     }
106
107     function computermove() {
108         var col = -1;
109
110         /* if we can win, do it */
111         col = winning_move_possible(Game.activeplayer)
112         if(col >= 0)
113         {
114             startmove(col, true);
115             return;
116         }
117
118         /* if the opponent is about to win, block him */
119         col = winning_move_possible((Game.activeplayer+1)%2)
120         if(col >= 0)
121         {
122             startmove(col, true);
123             return;
124         }
125
126         /* do a random move */
127         col = get_random_unfilled_column();
128         if(col >= 0)
129         {
130             startmove(col, true);
131             return;
132         }
133     }
134
135     function gamesound(file) {
136         this.file = file;
137         this.soundobj = new Array();
138         this.soundobj.push(new Audio(file));
139         this.soundobj.push(new Audio(file));
140         this.idx = 0;
141         this.play = function play() {
142             /* create two instances of the file to play sequentially if calls */
143             /* come too fast, otherwise the second call will be ignored */
144             this.soundobj[this.idx].play();
145             this.idx = (this.idx + 1)%2;
146         };
147     }
148
149     function settype(type) {
150         var tags = ["#type_onegame", "#type_bestofthree",
151                     "#type_bestoffive"];
152
153         Game.gametype = type;
154         localStorage.setItem("sweetspot_gametype", type);
155
156         for(var i = 0; i < 3; i++)
157         {
158             if(type == i)
159                 $(tags[i]).addClass("selectedtype");
160             else
161                 $(tags[i]).removeClass("selectedtype");
162         }
163
164         test_type_ready();
165     }
166
167     function setcolor(player, tgt) {
168         if(((player == 1)&&(Game.playercolor[1] == tgt))||
169            ((player == 2)&&(Game.playercolor[0] == tgt)))
170         {
171             return;
172         }
173
174         var tags = ["#player_player"+player+"orange",
175                     "#player_player"+player+"red",
176                     "#player_player"+player+"blue",
177                     "#player_player"+player+"green"];
178         var solid = ["orangesolid", "redsolid",
179                      "bluesolid", "greensolid"];
180
181         if(player == 1)
182         {
183             Game.playercolor[0] = tgt;
184             localStorage.setItem("sweetspot_player1_color", tgt);
185         }
186         else
187         {
188             Game.playercolor[1] = tgt;
189             localStorage.setItem("sweetspot_player2_color", tgt);
190         }
191
192         for(var i = 0; i < 4; i++)
193         {
194             if(tgt == i)
195             {
196                 $(tags[i]).addClass(solid[i]);
197             }
198             else
199             {
200                 $(tags[i]).removeClass(solid[i]);
201             }
202         }
203
204         test_player_ready();
205     }
206
207     function test_player_ready() {
208         if((Game.player1name && (Game.player1name != ""))&&
209            (Game.player2name && (Game.player2name != ""))&&
210            ((Game.playercolor[0] >= 0) && (Game.playercolor[0] < 4))&&
211            ((Game.playercolor[1] >= 0) && (Game.playercolor[1] < 4)))
212         {
213             $("#player_nextbutton").removeClass("inactive_button");
214             $("#player_nextbutton").addClass("active_button");
215         }
216         else
217         {
218             $("#player_nextbutton").removeClass("active_button");
219             $("#player_nextbutton").addClass("inactive_button");
220         }
221     }
222
223     function test_type_ready() {
224         if((Game.gametype >= 0) && (Game.gametype < 3))
225         {
226             $("#type_startbutton").removeClass("inactive_button");
227             $("#type_startbutton").addClass("active_button");
228         }
229         else
230         {
231             $("#type_startbutton").removeClass("active_button");
232             $("#type_startbutton").addClass("inactive_button");
233         }
234     }
235
236     function init_game() {
237         if(localStorage.getItem("sweetspot_player1"))
238             Game.player1name = localStorage.getItem("sweetspot_player1");
239         else
240             Game.player1name = "Player1";
241
242         if(localStorage.getItem("sweetspot_player2"))
243             Game.player2name = localStorage.getItem("sweetspot_player2");
244         else
245             Game.player2name = "Player2";
246
247         $('#player1name').val(Game.player1name);
248         $('#player2name').val(Game.player2name);
249
250         if(localStorage.getItem("sweetspot_player1_color"))
251             setcolor(1, parseInt(localStorage.getItem("sweetspot_player1_color")));
252         else
253             setcolor(1, 2);
254
255         if(localStorage.getItem("sweetspot_player2_color"))
256             setcolor(2, parseInt(localStorage.getItem("sweetspot_player2_color")));
257         else
258             setcolor(2, 3);
259
260         if(localStorage.getItem("sweetspot_gametype"))
261             settype(parseInt(localStorage.getItem("sweetspot_gametype")));
262         else
263             settype(0);
264     }
265
266     function ignore_user_input() {
267         Game.ignore_input = true;
268     }
269
270     function enable_user_input() {
271         Game.ignore_input = false;
272     }
273
274     /* this represents a user making a move by clicking a column */
275     function startmove(column, computer) {
276         /* if we're in the middle of an animation, do nothing */
277         if(Game.ignore_input&&(computer!==true))
278             return;
279
280         updateselector(column);
281         navsnd();
282         var row = Game.activegame.colindex[column];
283
284         /* if this column is full, do nothing */
285         if(row >= 6)
286             return;
287
288         /* figure out what color piece we're using */
289         var colorwheel = ["game_piece_orange", "game_piece_red",
290                           "game_piece_blue", "game_piece_green"];
291         var piececolor = colorwheel[Game.playercolor[Game.activeplayer]];
292
293         /* set the move data */
294         Game.activegame.array[column][row] = Game.activeplayer;
295         Game.activegame.colindex[column]++;
296
297         /* trigger a call to test the board after the animation */
298         ignore_user_input();
299         window.setTimeout("Game.movecomplete()", 600);
300
301         /* start the move animation */
302         $("#game_grid").append("<div id=\"game_column"+
303            column+"_row"+row+"\" class=\"game_col"+
304            column+" game_row"+row+" "+
305            piececolor+"\"></div>");
306     }
307
308     function start_new() {
309         $("#game_grid").empty();
310         Game.activegame = new GameData();
311         enable_user_input();
312     }
313
314     function game_over(player) {
315         var color = Game.playercolor[player];
316         var banner = ["win_banner_orange", "win_banner_red",
317                       "win_banner_blue", "win_banner_green"];
318         var name = ["win_playername_orange", "win_playername_red",
319                     "win_playername_blue", "win_playername_green"];
320         var playagain = ["win_playagain_orange", "win_playagain_red",
321                          "win_playagain_blue", "win_playagain_green"];
322         var startover = ["win_startover_orange", "win_startover_red",
323                          "win_startover_blue", "win_startover_green"];
324         if(player == 0)
325             $("#win_playername").text(Game.player1name);
326         else
327             $("#win_playername").text(Game.player2name);
328
329         for(var i = 0; i < 4; i++)
330         {
331             if(i == color)
332             {
333                 $("#win_banner").addClass(banner[i]);
334                 $("#win_playername").addClass(name[i]);
335                 $("#win_playagain").addClass(playagain[i]);
336                 $("#win_startover").addClass(startover[i]);
337             }
338             else
339             {
340                 $("#win_banner").removeClass(banner[i]);
341                 $("#win_playername").removeClass(name[i]);
342                 $("#win_playagain").removeClass(playagain[i]);
343                 $("#win_startover").removeClass(startover[i]);
344             }
345         }
346         $("#game_page").hide();
347         $("#win_page").show();
348     }
349
350     function end_game() {
351         selectsnd();
352         $("#quit_dlg").hide();
353         $("#game_grid").empty();
354         Game.activegame = new GameData();
355         Game.activeplayer = 0;
356         Game.playerwins = [0, 0];
357         $("#game_player1_wins").text(numtext[0]);
358         $("#game_player2_wins").text(numtext[0]);
359         $("#game_player1active").show();
360         $("#game_player2active").hide();
361         updateselector(Game.activecolumn);
362         $("#win_page").hide();
363         $("#game_page").hide();
364         $("#intro_page").show();
365         enable_user_input();
366     }
367
368     function restart_game() {
369         selectsnd();
370         $("#game_grid").empty();
371         Game.activegame = new GameData();
372         Game.activeplayer = 0;
373         Game.playerwins = [0, 0];
374         $("#game_player1_wins").text(numtext[0]);
375         $("#game_player2_wins").text(numtext[0]);
376         $("#game_player1active").show();
377         $("#game_player2active").hide();
378         updateselector(Game.activecolumn);
379         $("#win_page").hide();
380         $("#game_page").show();
381         enable_user_input();
382     }
383
384     function win(player, i1, j1, i2, j2, i3, j3, i4, j4) {
385         Game.playerwins[player]++;
386         winsnd();
387         $("#game_column"+i1+"_row"+j1).addClass("game_piece_win1");
388         $("#game_column"+i2+"_row"+j2).addClass("game_piece_win2");
389         $("#game_column"+i3+"_row"+j3).addClass("game_piece_win3");
390         $("#game_column"+i4+"_row"+j4).addClass("game_piece_win4");
391         $("#game_player"+(player+1)+"_wins").text(numtext[Game.playerwins[player]]);
392         if(Game.playerwins[player] >= Game.gametype+1)
393         {
394             window.setTimeout("Game.game_over("+player+")", 1000);
395         }
396         else
397         {
398             window.setTimeout("Game.start_new()", 1000);
399         }
400     }
401
402     function movecomplete() {
403         var array = Game.activegame.array;
404         var colindex = Game.activegame.colindex;
405         var matches = [0, 0];
406         var i, j, k;
407
408         movesnd();
409         /* vertical check */
410         for(i = 0; i < 7; i++)
411         {
412             matches[0] = 0;
413             matches[1] = 0;
414             for(j = 0; j < 6; j++)
415                 if(array[i][j] >= 0)
416                 {
417                     var tgt = array[i][j];
418                     matches[tgt]++;
419                     matches[(tgt+1)%2] = 0;
420                     if(matches[tgt] >= 4)
421                     {
422                         win(tgt, i, j-3, i, j-2, i, j-1, i, j);
423                         return;
424                     }
425                 }
426                 else
427                 {
428                     matches[0] = 0;
429                     matches[1] = 0;
430                 }
431         }
432
433         /* horizontal check */
434         for(j = 0; j < 6; j++)
435         {
436             matches[0] = 0;
437             matches[1] = 0;
438             for(i = 0; i < 7; i++)
439                 if(array[i][j] >= 0)
440                 {
441                     var tgt = array[i][j];
442                     matches[tgt]++;
443                     matches[(tgt+1)%2] = 0;
444                     if(matches[tgt] >= 4)
445                     {
446                         win(tgt, i-3, j, i-2, j, i-1, j, i, j);
447                         return;
448                     }
449                 }
450                 else
451                 {
452                     matches[0] = 0;
453                     matches[1] = 0;
454                 }
455         }
456
457         /* diagonal right check */
458         var p = [[0, 2], [0, 1], [0, 0], [1, 0], [2, 0], [3, 0]];
459         for(k = 0; k < 6; k++)
460         {
461             matches[0] = 0;
462             matches[1] = 0;
463             for(i = p[k][0], j = p[k][1]; (i < 7)&&(j < 6); i++, j++)
464                 if(array[i][j] >= 0)
465                 {
466                     var tgt = array[i][j];
467                     matches[tgt]++;
468                     matches[(tgt+1)%2] = 0;
469                     if(matches[tgt] >= 4)
470                     {
471                         win(tgt, i-3, j-3, i-2, j-2, i-1, j-1, i, j);
472                         return;
473                     }
474                 }
475                 else
476                 {
477                     matches[0] = 0;
478                     matches[1] = 0;
479                 }
480         }
481
482         /* diagonal left check */
483         p = [[3, 0], [4, 0], [5, 0], [6, 0], [6, 1], [6, 2]];
484         for(k = 0; k < 6; k++)
485         {
486             matches[0] = 0;
487             matches[1] = 0;
488             for(i = p[k][0], j = p[k][1]; (i >= 0)&&(j < 6); i--, j++)
489                 if(array[i][j] >= 0)
490                 {
491                     var tgt = array[i][j];
492                     matches[tgt]++;
493                     matches[(tgt+1)%2] = 0;
494                     if(matches[tgt] >= 4)
495                     {
496                         win(tgt, i+3, j-3, i+2, j-2, i+1, j-1, i, j);
497                         return;
498                     }
499                 }
500                 else
501                 {
502                     matches[0] = 0;
503                     matches[1] = 0;
504                 }
505         }
506
507         /* set the board to indicate it's the next player's move */
508         Game.activeplayer = (Game.activeplayer+1)%2;
509         if(Game.activeplayer == 0)
510         {
511             $("#game_player1active").show();
512             $("#game_player2active").hide();
513         }
514         else
515         {
516             $("#game_player1active").hide();
517             $("#game_player2active").show();
518         }
519
520         /* if there are no more valid moves, it's a stalemate */
521         if(no_more_moves())
522         {
523             start_new();
524         }
525
526         /* is it the computer's move? */
527         if(Game.computer&&(Game.activeplayer==1))
528         {
529             computermove();
530         }
531         else
532         {
533             updateselector(Game.activecolumn);
534             enable_user_input();
535         }
536     }
537
538     function updateselector(column) {
539         Game.activecolumn = column;
540         var colorwheel = ["game_piece_orange", "game_piece_red",
541                           "game_piece_blue", "game_piece_green"];
542         var piececolor = colorwheel[Game.playercolor[Game.activeplayer]];
543
544         $("#game_column_selector").attr("class", "game_selcol"+column);
545         $("#game_column_selector").show();
546         $("#game_column_selector_candy").attr("class", "game_col"+column+" "+piececolor);
547         $("#game_column_selector_candy").show();
548     }
549
550     function movesnd() {
551         Game.move_sound.play();
552     }
553
554     function navsnd() {
555         Game.menunav_sound.play();
556     }
557
558     function selectsnd() {
559         Game.select_sound.play();
560     }
561
562     function winsnd() {
563         Game.win_sound.play();
564     }
565
566     function player1namechange() {
567         Game.player1name = $('#player1name').val();
568         localStorage.setItem("sweetspot_player1", Game.player1name);
569         test_player_ready();
570     }
571
572     function player2namechange() {
573         Game.player2name = $('#player2name').val();
574         localStorage.setItem("sweetspot_player2", Game.player2name);
575         test_player_ready();
576     }
577
578     $(document).ready(function()
579     {
580         /* initialization */
581         license_init("license", "intro_page");
582         help_init("main_help", "help_");
583         Game.player1name = "";
584         Game.player2name = "";
585         Game.computer = false;
586         Game.playercolor = [-1, -1];
587         Game.gametype = -1;
588         Game.activegame = new GameData();
589         Game.activecolumn = 0;
590         Game.activeplayer = 0;
591         Game.playerwins = [0, 0];
592         Game.ignore_input = false;
593         Game.movecomplete = movecomplete;
594         Game.game_over = game_over;
595         Game.start_new = start_new;
596         Game.move_sound = new gamesound("audio/GamePiece.wav");
597         Game.menunav_sound = new gamesound("audio/MenuNavigation.wav");
598         Game.select_sound = new gamesound("audio/Select.wav");
599         Game.win_sound = new gamesound("audio/Winner.wav");
600
601         if (window.chrome&&window.chrome.i18n)
602         {
603             $("#intro_playbutton").text(chrome.i18n.getMessage("play"));
604             $("#player_player1_static").text(chrome.i18n.getMessage("player1"));
605             $("#player_player2_static").text(chrome.i18n.getMessage("player2"));
606             $("#player_text_chooseyour").text(chrome.i18n.getMessage("chooseyour"));
607             $("#player_text_color").text(chrome.i18n.getMessage("color"));
608             $("#player_nextbutton").text(chrome.i18n.getMessage("next"));
609             $("#type_onegame_text").text(chrome.i18n.getMessage("1game"));
610             $("#type_bestofthree_text").text(chrome.i18n.getMessage("2game"));
611             $("#type_bestoffive_text").text(chrome.i18n.getMessage("3game"));
612             $("#type_startbutton").text(chrome.i18n.getMessage("start"));
613             $("#quit_dlg_img").text(chrome.i18n.getMessage("startoverquestion"));
614             $("#quit_dlg_no").text(chrome.i18n.getMessage("no"));
615             $("#quit_dlg_yes").text(chrome.i18n.getMessage("yes"));
616             $("#win_banner").text(chrome.i18n.getMessage("winner"));
617             $("#win_playagain_text").text(chrome.i18n.getMessage("playagain"));
618             $("#win_startover_text").text(chrome.i18n.getMessage("startover"));
619             numtext[0] = chrome.i18n.getMessage("num0");
620             numtext[1] = chrome.i18n.getMessage("num1");
621             numtext[2] = chrome.i18n.getMessage("num2");
622             numtext[3] = chrome.i18n.getMessage("num3");
623             numtext[4] = chrome.i18n.getMessage("num4");
624             numtext[5] = chrome.i18n.getMessage("num5");
625         }
626
627         /* intro page interaction */
628
629         $("#intro_playbutton").click(function() {
630             selectsnd();
631             $("#intro_page").hide();
632             $("#players_page").show();
633         });
634
635         /* player page interaction */
636
637         $('#player_player1orange').mousedown(function() {navsnd();setcolor(1, 0);});
638         $('#player_player1red').mousedown(function() {navsnd();setcolor(1, 1);});
639         $('#player_player1blue').mousedown(function() {navsnd();setcolor(1, 2);});
640         $('#player_player1green').mousedown(function() {navsnd();setcolor(1, 3);});
641         $('#player_player2orange').mousedown(function() {navsnd();setcolor(2, 0);});
642         $('#player_player2red').mousedown(function() {navsnd();setcolor(2, 1);});
643         $('#player_player2blue').mousedown(function() {navsnd();setcolor(2, 2);});
644         $('#player_player2green').mousedown(function() {navsnd();setcolor(2, 3);});
645
646         var p1name = document.getElementById("player1name");
647         var p2name = document.getElementById("player2name");
648         p1name.onkeyup = player1namechange;
649         p2name.onkeyup = player2namechange;
650         p1name.onblur = player1namechange;
651         p2name.onblur = player2namechange;
652         p1name.onchange = player1namechange;
653         p2name.onchange = player2namechange;
654
655         $("#player_nextbutton").click(function() {
656             if($("#player_nextbutton").hasClass("active_button"))
657             {
658                 selectsnd();
659                 $("#players_page").hide();
660                 $("#type_page").show();
661             }
662         });
663
664         /* game type page interaction */
665
666         $("#type_startbutton").click(function() {
667             if($("#type_startbutton").hasClass("active_button"))
668             {
669                 selectsnd();
670                 updateselector(Game.activecolumn);
671                 var color1class = ["game_player1orange", "game_player1red",
672                              "game_player1blue", "game_player1green"];
673                 var color2class = ["game_player2orange", "game_player2red",
674                              "game_player2blue", "game_player2green"];
675
676                 for(var i = 0; i < 4; i++)
677                 {
678                     var c1 = Game.playercolor[0];
679                     var c2 = Game.playercolor[1];
680                     if(i == c1)
681                         $("#game_player1marquee").addClass(color1class[i]);
682                     else
683                         $("#game_player1marquee").removeClass(color1class[i]);
684
685                     if(i == c2)
686                         $("#game_player2marquee").addClass(color2class[i]);
687                     else
688                         $("#game_player2marquee").removeClass(color2class[i]);
689                 }
690
691                 $("#game_player1name").text(Game.player1name);
692                 $("#game_player2name").text(Game.player2name);
693                 $("#type_page").hide();
694                 $("#game_page").show();
695             }
696         });
697
698         $('#type_onegame').mousedown(function() {navsnd();settype(0);});
699         $('#type_bestofthree').mousedown(function() {navsnd();settype(1);});
700         $('#type_bestoffive').mousedown(function() {navsnd();settype(2);});
701
702         /* game page */
703
704         $('#game_column1').mousedown(function() {startmove(0);});
705         $('#game_column2').mousedown(function() {startmove(1);});
706         $('#game_column3').mousedown(function() {startmove(2);});
707         $('#game_column4').mousedown(function() {startmove(3);});
708         $('#game_column5').mousedown(function() {startmove(4);});
709         $('#game_column6').mousedown(function() {startmove(5);});
710         $('#game_column7').mousedown(function() {startmove(6);});
711
712         $('#game_column1').mouseover(function() {updateselector(0);});
713         $('#game_column2').mouseover(function() {updateselector(1);});
714         $('#game_column3').mouseover(function() {updateselector(2);});
715         $('#game_column4').mouseover(function() {updateselector(3);});
716         $('#game_column5').mouseover(function() {updateselector(4);});
717         $('#game_column6').mouseover(function() {updateselector(5);});
718         $('#game_column7').mouseover(function() {updateselector(6);});
719
720         $('#game_quit').click(function() {$("#quit_dlg").show();});
721         $('#quit_dlg_no').click(function() {$("#quit_dlg").hide();});
722         $('#quit_dlg_yes').click(function() {end_game()});
723         $('#win_playagain_text').click(function() {restart_game()});
724         $('#win_startover_text').click(function() {end_game()});
725
726         init_game();
727     });
728 })()