js/annex.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 function queryObj(obj) {
  11     this.q = obj;
  12     this.isNull = this.q?false:true;
  13     this.self = this;
  14     this.html = function (val) {
  15         this.q.innerHTML = val;
  16         return this;
  17     }
  18
  19     this.hasClass = function (c_name) {
  20         if (this.isNull)
  21             return false;
  22         return this.q.classList.contains(c_name);
  23     }
  24
  25     this.addClass = function (c_name) {
  26         if (this.isNull)
  27             return this;
  28         var list = this.q.classList;
  29         list.add (c_name);
  30         return this;
  31     }
  32
  33     this.removeClass = function (c_name) {
  34         if (this.isNull)
  35             return this;
  36         var list = this.q.classList;
  37         list.remove (c_name);
  38         return this;
  39     }
  40
  41     this.css = function (item, style) {
  42         if (item == 'background-color')
  43             item = 'backgroundColor';
  44         if (this.isNull)
  45             return this;
  46         this.q.style[item] = style;
  47         return this;
  48     }
  49
  50     this.click = function (fun) {
  51         if (this.isNull)
  52             return this;
  53         this.q.onclick = fun;
  54         return this;
  55     }
  56
  57     this.find = function (selector) {
  58         if (this.isNull)
  59             return this;
  60         var obj = this.q.querySelector(selector);
  61         return new queryObj(obj);
  62     }
  63
  64     this.hover = function (onmouseover, onmouseout) {
  65         if (this.isNull)
  66             return this;
  67         this.q.onmouseover = onmouseover;
  68         this.q.onmouseout = onmouseout;
  69         return this;
  70     }
  71
  72     this.attr = function (attr, val) {
  73         if (this.isNull)
  74             return this;
  75         this.q.setAttribute(attr, val);
  76         return this;
  77     }
  78 }
  79
  80 function $(selector) {
  81     var res;
  82     if (typeof selector == "string") {
  83         res = document.querySelector(selector);
  84     } else {
  85         res = selector;
  86     }
  87     return new queryObj(res);
  88 }
  89
  90 $.merge = function (a, b) {
  91     return a.concat(b);
  92 }
  93
  94 var World = (function(){
  95     var w = {
  96         boardTexture:{board: 'images/game_014_board.png', black: 'images/game_002_blackpc.png', white: 'images/game_003_whitepc.png', leftPieces: 'images/game_004_pcleftside.png', rightPieces: 'images/game_005_pcrightside.png', hidePieces: 'images/game_015_pcside.png', p1Image: 'images/game_011_settings1p.png', p2Image: 'images/game_010_settings2p.png',},
  97         board: [[],[],[],[],[],[],[],[],],
  98         bounder: 8,
  99         boardview: 'board',
 100         blackResultView: 'black_result',
 101         whiteResultView: 'white_result',
 102         leftPiecesView: 'left_pieces',
 103         rightPiecesView: 'right_pieces',
 104         messageview: 'message',
 105         result: 'result',
 106         isEnd: false,
 107         endMessage: '',
 108         isUserTurn: true,
 109         isDrawing: false,
 110         isLock: false,
 111         isInit: false,
 112         isConfigure: false,
 113         isResult: false,
 114         level: 3,
 115         hasHelp: false,
 116         hasInit: false,
 117         hasLicense: false,
 118         playerNum: 1,
 119         currentColor: 'black',
 120         step: 4,
 121         point: [],
 122         directs: [[1,0],[1,1],[1,-1],[0,1],[0,-1],[-1,0],[-1,1],[-1,-1]],
 123         heap: {'nextLevel':{}},
 124         soundSource: {
 125             'snd_hint':{'src':'sounds/Hint.ogg'},
 126             'snd_navclick':{'src':'sounds/NavClick.ogg'},
 127             'snd_navmove':{ 'src':'sounds/NavMove.ogg'},
 128             'snd_settingsclick':{ 'src':'sounds/SettingsClick.ogg'},
 129             'snd_theme':{ 'src':'sounds/Theme.ogg'},
 130             'snd_tileflip':{ 'src':'sounds/TileFlip.ogg'},
 131             'snd_tileplace':{ 'src':'sounds/TilePlace.ogg'},
 132             'snd_victoryhorns':{ 'src':'sounds/VictoryHorns.ogg'},
 133         },
 134         showWorld: function() {
 135             if (!this.hasInit) {
 136                 $('#view').html('<div class="play1_lable"></div><div class="play1_score" id="black_result" align="center">0</div> <div class="play1_pieces_lable"></div> <div class="play2_lable"></div> <div class="play2_score" id="white_result" align="center">0</div> <div class="play2_pieces_lable"></div> <div class="stone_selected"><img id="message" /><span id="turn"></span></div> <div class="left_pieces" id="left_pieces"></div> <div class="right_pieces" id="right_pieces"></div> <a onClick="javascript:World.configure();" class="configure"><img src="images/game_006_settingsbtn.png" /></a> <div class="configure_panel display_none"> <div class="configure_panel_func"> <div class="configure_panel_startover"> <div class="configure_panel_text"></div> </div> <div class="configure_panel_newgame"> <div class="configure_panel_text"></div> </div> <div class="configure_panel_help"> <div class="configure_panel_text"></div> </div> <div class="configure_panel_exit"> <div class="configure_panel_text"></div> </div> </div> <img class="configure_panel_arrow" src="images/game_013_settingsarrow.png" /> </div> <div id="board"></div> <div id="result" class="result result_wood display_none"> <div class="result_win_text" align="center"></div> <img class="result_new_p1_rollover display_none" src="images/winner_004_rollover.png" /> <img class="result_new_p2_rollover display_none" src="images/winner_004_rollover.png" /> <img class="result_exit_rollover display_none" src="images/winner_005_exitrollover.png" /> <a onClick="javascript:World.playSound('+"'snd_navclick');World.init(1);"+'" onMouseOver="$('+"'img.result_new_p1_rollover').removeClass('display_none');World.playSound('snd_navmove');"+'" onMouseOut="$('+"'img.result_new_p1_rollover').addClass('display_none')"+'" class="result_new_p1"></a> <a onClick="javascript:World.playSound('+"'snd_navclick');World.init(2);"+'" onMouseOver="$('+"'img.result_new_p2_rollover').removeClass('display_none');World.playSound('snd_navmove');"+'" onMouseOut="$('+"'img.result_new_p2_rollover').addClass('display_none')"+'" class="result_new_p2"></a> <a onClick="javascript:window.close();" onMouseOver="$('+"'img.result_exit_rollover').removeClass('display_none');World.playSound('snd_navmove');"+'" onMouseOut="$('+"'img.result_exit_rollover').addClass('display_none')"+'" class="result_exit"></a> <div class="result_quit" onClick="javascript:World.closeResult();"></div> </div>');
 137                 $('.play1_pieces_lable').html(getMessage('pieces', 'pieces'));
 138                 $('.play2_pieces_lable').html(getMessage('pieces', 'pieces'));
 139                 $('#turn').html(getMessage('turn', "'s Turn"));
 140                 $('.result_new_p1').html(getMessage('newOneGame', 'New 1P Game'));
 141                 $('.result_new_p2').html(getMessage('newTwoGame', 'New 2P Game'));
 142                 $('.result_exit').html(getMessage('exit', 'Exit'));
 143                 //$('#license').html(getMessage('license', 'License'));
 144                 //$('#readme').html(getMessage('readme', 'Readme'));
 145                 $('.configure_panel_startover').click(function(){
 146                     World.startOver();
 147                 }).hover(function(){
 148                     $(this).css('background-color','#222222');
 149                     World.playSound('snd_navmove');
 150                 },function(){
 151                     $(this).css('background-color','#000000');
 152                 }).find('.configure_panel_text').html(getMessage('startover','Start over'));
 153
 154                 $('.configure_panel_newgame').hover(function(evt){
 155                     $(this).css('background-color','#222222');
 156                     World.playSound('snd_navmove');
 157                 },function(evt){
 158                     $(this).css('background-color','#000000');
 159                 }).click(function(){
 160                     var n = 1;
 161                     if ($(this).hasClass('configure_panel_new2game')){
 162                         n = 2;
 163                     }
 164                     World.playSound('snd_navclick');
 165                     World.init(n);
 166                 });
 167
 168                 $('.configure_panel_help').click(function(){
 169                     World.showHelp();
 170                 }).hover(function(){
 171                     $(this).css('background-color','#222222');
 172                     World.playSound('snd_navmove');
 173                 },function(){
 174                     $(this).css('background-color','#000000');
 175                 }).find('.configure_panel_text').html(getMessage('rules','Rules'));
 176
 177                 $('.configure_panel_exit').click(function(){
 178                     window.close();
 179                 }).hover(function(){
 180                     $(this).css('background-color','#222222');
 181                     World.playSound('snd_navmove');
 182                 },function(){
 183                     $(this).css('background-color','#000000');
 184                 }).find('.configure_panel_text').html(getMessage('exit','Exit'));
 185                 this.hasInit = true;
 186             }
 187         },
 188         init: function(play){
 189             this.showWorld();
 190             this.playerNum = play || 1;
 191             for (var i in this.board){
 192                 for (var j=0; j<this.bounder; j++){
 193                     this.board[i][j] =  'board';
 194                 }
 195             }
 196             this.board[3][3] = 'black';
 197             this.board[4][4] = 'black';
 198             this.board[3][4] = 'white';
 199             this.board[4][3] = 'white';
 200
 201             this.isUserTurn = true;
 202             this.isLock = false;
 203             this.isConfigure = false;
 204             this.isResult = false;
 205             this.currentColor = 'white';
 206             this.step = 4;
 207             this.level = 3;
 208             this.poing = [];
 209             this.heap = {'nextLevel':{}};
 210             var strLeft = '';
 211             var strRight = '';
 212             for (var i=0; i<32; i++) {
 213                 strLeft += '<img src="'+this.boardTexture['leftPieces']+'" class="pieces" id="pc0'+i+'" />';
 214                 strRight += '<img src="'+this.boardTexture['rightPieces']+'" class="pieces" id="pc1'+i+'" />';
 215             }
 216             $('#'+this.leftPiecesView).html(strLeft);
 217             $('#'+this.rightPiecesView).html(strRight);
 218             $('#pc00').attr('src', this.boardTexture['hidePieces']);
 219             $('#pc01').attr('src', this.boardTexture['hidePieces']);
 220             $('#pc10').attr('src', this.boardTexture['hidePieces']);
 221             $('#pc11').attr('src', this.boardTexture['hidePieces']);
 222             $('#'+this.result).addClass('display_none');
 223             $('div.configure_panel').addClass('display_none');
 224             var n = (this.playerNum == 1)?2:1;
 225             $('.configure_panel_newgame').removeClass('configure_panel_new'+this.playerNum+'game')
 226                 .addClass('configure_panel_new'+n+'game').find('.configure_panel_text')
 227                 .html(getMessage(n+'PlayerGame',n+' Player Game'));
 228
 229             $('.play1_lable').html(getMessage('player', 'player')+'<span style="font-size:48pt;">1</span>');
 230             if (this.playerNum == 2) {
 231                 $('.play2_lable').html(getMessage('player', 'player')+'<span style="font-size:48pt;">2</span>');
 232             } else {
 233                 $('.play2_lable').html(getMessage('computer', 'comp.'));
 234             }
 235             this.isInit = true;
 236
 237             document.getElementById('open').style.display="none";
 238             document.getElementById('view').style.display="block";
 239
 240             this.endConfigure();
 241             this.drawBoard();
 242         },
 243         configure: function(){
 244             if (!this.isLock || (this.isEnd && this.isLock && !this.isResult)) {
 245                 this.playSound('snd_settingsclick');
 246                 if (!this.isConfigure) {
 247                     this.isConfigure = true;
 248                     $('a.configure img').attr('src', 'images/game_007_settingsbtnrollover.png');
 249                     $('div.configure_panel').removeClass('display_none');
 250                 } else {
 251                     this.endConfigure();
 252                 }
 253             }
 254         },
 255         endConfigure: function(){
 256             this.isConfigure = false;
 257             $('div.configure_panel').addClass('display_none');
 258             $('a.configure img').attr('src', 'images/game_006_settingsbtn.png');
 259         },
 260         startOver: function(){
 261             this.playSound('snd_navclick');
 262             this.init(this.playerNum);
 263             this.endConfigure();
 264         },
 265         showHelp: function(){
 266             this.playSound('snd_navclick');
 267             this.endConfigure();
 268             if (!this.hasHelp) {
 269                 this.hasHelp = true;
 270                 $('#help').html('<div class="help_text"  align="center"> <div class="help_title"></div> <div class="help_contain"></div> </div> <img class="help_exit_img display_none" src="images/rules_002_rollover.png" /> <a onClick="javascript:World.exitHelp();" onMouseOver="$('+"'img.help_exit_img').removeClass('display_none');World.playSound('snd_navmove');"+'" onMouseOut="$('+"'img.help_exit_img').addClass('display_none')"+'" class="help_exit"></a>');
 271                 $('.help_title').html(getMessage('howtoPlay', 'How to Play'));
 272                 $('.help_contain').html(getMessage('help', "Play a piece on the board so that one or more of your opponent’s pieces are between two of your pieces. All of the opponent’s pieces between your own turn over and become your color.<br>The player with the most pieces on the board at the end of the game wins!"));
 273                 $('.help_exit').html(getMessage('goBack', 'Go Back'));
 274             }
 275             $('#help').removeClass('display_none');
 276         },
 277         exitHelp: function(){
 278             this.playSound('snd_navclick');
 279             $('#help').addClass('display_none');
 280         },
 281         getSoundSource: function(snd){
 282             var ret;
 283             if (typeof this.soundSource[snd] != 'undefined' && typeof this.soundSource[snd]['audio'] != 'undefined') {
 284                 var source = this.soundSource[snd];
 285                 ret = source['audio'];
 286             } else {
 287                 var src = this.soundSource[snd]['src'];
 288                 ret = new Audio(src);
 289                 this.soundSource[snd]['audio'] = ret;
 290             }
 291             return ret;
 292         },
 293         playSound: function(snd){
 294             var audio = this.getSoundSource(snd);
 295             if (audio.paused == false) {
 296                 audio.pause();
 297                 //audio.currentTime = 0;
 298             }
 299             audio.play();
 300         },
 301         actionAtPoint: function(place, color){
 302             var path = [];
 303             this.heap = this.heap['nextLevel'][String(place[0])+String(place[1])] || {};
 304             if (typeof this.heap['value'] != 'undefined' && this.heap['color'] == color){
 305                 path = this.heap['path'];
 306             } else {
 307                 var act = this.getRevertPath(place, color);
 308                 path = act['path'];
 309                 this.heap = {'color':color, 'path':path, 'place':place, 'nextLevel':{}};
 310             }
 311             this.clearTips();
 312             $('#pc'+this.step%2+Math.floor(this.step/2)).attr('src', this.boardTexture['hidePieces']);
 313             this.step += 1;
 314             if (this.step >= 50)
 315                 this.level += 1;
 316             else if (this.setp >= 53)
 317                 this.level += 1;
 318             else if (this.step >= 55)
 319                 this.level += 2;
 320             this.playSound('snd_tileplace');
 321             this.setPoint(place, color);
 322             this.setBorder(place);
 323             this.drawPath(path, color);
 324         },
 325         setPoint: function(place, color){
 326             this.board[place[0]][place[1]] = color;
 327             this.drawPoint(place, color);
 328         },
 329         drawPoint: function(place, color){
 330             $('img#a'+place[0]+place[1]).attr('src', this.boardTexture[color]).removeClass('tip');
 331             $('a#l'+place[0]+place[1]).attr('onMouseOver','').attr('onMouseOut','');
 332         },
 333         drawPath: function(path, color){
 334             this.isDrawing = true;
 335             for (var n=0; n < path.length; n++){
 336                 this.board[path[n][0]][path[n][1]] = color;
 337                 var str = 'World.drawPoint(['+path[n][0]+','+path[n][1]+'],\''+color+'\')';
 338                 setTimeout(str, 100*(n+1));
 339             }
 340             setTimeout('World.drawMessage()', 100*(path.length+1));
 341         },
 342         setBorder: function(place){
 343             if (this.point.length > 0){
 344                 $('img#a'+this.point[0]+this.point[1]).removeClass('img_board_select');
 345                 $('img#a'+this.point[0]+this.point[1]).addClass('img_board');
 346             }
 347             $('img#a'+place[0]+place[1]).removeClass('img_board');
 348             $('img#a'+place[0]+place[1]).addClass('img_board_select');
 349             this.point = place;
 350         },
 351         drawMessage: function(){
 352             var bc = 0;
 353             var wc = 0;
 354             if (typeof this.heap['value'] != 'undefined'){
 355                 bc = parseInt(this.heap['black']);
 356                 wc = parseInt(this.heap['white']);
 357             } else {
 358                 var count = {black:0, white:0};
 359                 for (var i=0; i<this.bounder; i++){
 360                     for (var j=0; j<this.bounder; j++){
 361                         count[this.board[i][j]] += parseInt(1);
 362                     }
 363                 }
 364                 bc = count['black'];
 365                 wc = count['white'];
 366             }
 367             $('#'+this.blackResultView).html(bc);
 368             $('#'+this.whiteResultView).html(wc);
 369
 370             var bpossible;
 371             var wpossible;
 372
 373             if (typeof this.heap['value'] != 'undefined' && this.heap['color'] == this.currentColor){
 374                 if (this.heap['color'] == 'white') {
 375                     bpossible = this.heap['upossible'];
 376                     wpossible = this.heap['cpossible'];
 377                 } else {
 378                     wpossible = this.heap['upossible'];
 379                     bpossible = this.heap['cpossible'];
 380                 }
 381             } else {
 382                 wpossible = this.possiblePlace('white');
 383                 bpossible = this.possiblePlace('black');
 384             }
 385             this.isEnd = ((bpossible.length == 0 && wpossible.length == 0) || (this.step == 64));
 386             if (!this.isEnd) {
 387                 var tpossible = bpossible;
 388                 if (this.currentColor == 'black') {
 389                     if (wpossible.length > 0) {
 390                         this.currentColor = 'white';
 391                         tpossible = wpossible;
 392                     }
 393                 } else {
 394                     if (bpossible.length > 0) {
 395                         this.currentColor = 'black';
 396                     } else {
 397                         tpossilbe = wpossible;
 398                     }
 399                 }
 400                 $('#'+this.messageview).attr('src', this.boardTexture[this.currentColor]);
 401                 this.possible = tpossible;
 402                 this.setTips(this.currentColor);
 403                 if (this.playerNum == 1 && this.currentColor == 'white') {
 404                     this.isUserTurn = false;
 405                     this.computerTurn();
 406                 } else {
 407                     this.isUserTurn = true;
 408                 }
 409             } else {
 410                 var p = getMessage('player', 'player');
 411                 var w = getMessage('win', 'Wins');
 412                 if (bc > wc) {
 413                     $('.result_win_text').html(p+' 1 '+w+'!');
 414                 } else if (bc == wc) {
 415                     $('.result_win_text').html(getMessage('winDraw', 'Draw!'));
 416                 } else {
 417                     if (this.playerNum == 2) {
 418                         $('.result_win_text').html(p+' 2 '+w+'!');
 419                     } else {
 420                         $('.result_win_text').html(getMessage('winComputer', 'Computer Wins!'));
 421                     }
 422                 }
 423                 this.playSound('snd_victoryhorns');
 424                 $('#'+this.result).removeClass('display_none');
 425                 this.isLock = true;
 426                 this.isResult = true;
 427             }
 428             this.isDrawing = false;
 429         },
 430         closeResult: function() {
 431             $('#'+this.result).addClass('display_none');
 432             this.isResult = false;
 433         },
 434         setTips: function(color) {
 435             var stone = this.boardTexture[color];
 436             var spare = this.boardTexture['board'];
 437             for (var n in this.possible) {
 438                 var p = this.possible[n];
 439                 if (this.board[p[0]][p[1]] == 'board') {
 440                     var id = 'l'+p[0]+p[1];
 441                     $('#'+id).attr('onMouseOver',"$('#"+id+" img').attr('src','"+stone+"').addClass('tip');")
 442                         .attr('onMouseOut',"$('#"+id+" img').attr('src','"+spare+"').removeClass('tip');");
 443                 }
 444             }
 445         },
 446         clearTips: function() {
 447             var possible = this.possible;
 448             for (var n in possible) {
 449                 var p = possible[n];
 450                 var spare = this.boardTexture[this.board[p[0]][p[1]]];
 451                 var id = 'l'+p[0]+p[1];
 452                 $('#'+id).attr('onMouseOver','').attr('onMouseOut','').find('img').attr('src', spare).removeClass('tip');
 453             }
 454         },
 455         drawBoard: function(){
 456
 457             var str = '';
 458             for (var i=0; i<this.bounder; i++){
 459                 str += '<div>';
 460                 for (var j=0; j<this.bounder; j++){
 461                     str += '<span><a onClick="javascript:World.click('+i+','+j+');" id="l'+i+j+'" class="img_style" onMouseOver="" onMouseOut="" ><img src="'+this.boardTexture[this.board[i][j]]+'" id="a'+i+j+'" class="img_board" /></a></span>';
 462                 }
 463                 str += '</div>';
 464             }
 465             $('#'+this.boardview).html(str);
 466             this.drawMessage();
 467         },
 468
 469         click: function(i, j){
 470             if (this.board[i][j] === 'board' && !this.isEnd && this.isUserTurn && !this.isDrawing && !this.isLock && !this.isConfigure) {
 471                 if (this.canRevert([i, j], this.currentColor)){
 472                     this.actionAtPoint([i,j], this.currentColor);
 473                     if (this.playerNum == 1) this.isUserTurn = false;
 474                 } else {
 475                     this.playSound('snd_hint');
 476                 }
 477             } else if ((this.isConfigure && !this.isEnd && !this.isDrawing && !this.isLock)
 478                        || (this.isConfigure && this.isEnd && !this.isDrawing && this.isLock && !this.isResult)) {
 479                 this.endConfigure();
 480             }
 481         },
 482         computerTurn: function(){
 483             if (this.isDrawing) {
 484                 setTimeout('World.computerTurn()', 500);
 485                 return;
 486             }
 487             var possible;
 488
 489             if (typeof this.heap['value'] != 'undefined'){
 490                 if (this.heap['color'] == 'white') {
 491                     possible = this.heap['cpossible'];
 492                 } else {
 493                     possible = this.heap['upossible'];
 494                 }
 495             } else {
 496                 possible = this.possiblePlace('white');
 497             }
 498             var place = this.bestPlace(possible);
 499             if (possible.length > 0 && place.length > 0) {
 500                 this.actionAtPoint(place, 'white');
 501             }
 502         },
 503
 504         isContain: function(place, _array) {
 505             var heat = _array || [];
 506             for (var i in heat){
 507                 if (heat[i][0] == place[0] && heat[i][1] == place[1]) {
 508                     return true;
 509                 }
 510             }
 511             return false;
 512
 513         },
 514         possiblePlace: function(color, _board){
 515             var ret = [];
 516             var tmp = {};
 517             var revColor = ((color == 'white')?'black':'white');
 518             var board = _board || this.board;
 519             for (var i=0; i<this.bounder; i++){
 520                 for (var j=0; j<this.bounder; j++){
 521                     if (board[i][j] === revColor) {
 522                         for (var n in this.directs) {
 523                             var ni = i+parseInt(this.directs[n][0]);
 524                             var nj = j+parseInt(this.directs[n][1]);
 525                             if (ni >= 0 && ni < this.bounder && nj >= 0 && nj < this.bounder && board[ni][nj] === 'board'){
 526                                 if (this.canRevert([ni, nj], color, board) && !this.isContain([ni, nj], ret)){
 527                                     ret.push([parseInt(ni), parseInt(nj)]);
 528                                 }
 529                             }
 530                         }
 531                     }
 532                 }
 533             }
 534
 535             return ret;
 536         },
 537         canRevert: function(place, color, _board){
 538             var i = parseInt(place[0]);
 539             var j = parseInt(place[1]);
 540             var revColor = ((color == 'white')?'black':'white');
 541             var board = _board || this.board;
 542             for (var n in this.directs) {
 543                 var di = parseInt(this.directs[n][0]);
 544                 var dj = parseInt(this.directs[n][1]);
 545                 var ni = i+di;
 546                 var nj = j+dj;
 547                 while (ni >= 0 && ni < this.bounder && nj >= 0 && nj < this.bounder && board[ni][nj] === revColor){
 548                     ni += di;
 549                     nj += dj;
 550                     if (ni >= 0 && ni < this.bounder && nj >= 0 && nj < this.bounder && board[ni][nj] === color) {
 551                         return true;
 552                     }
 553                 }
 554             }
 555             return false;
 556         },
 557         getClone: function(obj){
 558             var ret = [[],[],[],[],[],[],[],[]];
 559
 560             for(var i = 0; i < this.bounder; i++) {
 561                 for(var j = 0; j < this.bounder; j++) {
 562                     ret[i][j] = obj[i][j];
 563                 }
 564             }
 565             return ret;
 566         },
 567
 568         getRevertPath: function(place, color, _board){
 569             var i = parseInt(place[0]);
 570             var j = parseInt(place[1]);
 571             var revColor = ((color == 'white')?'black':'white');
 572             var board = _board || this.board;
 573             var path = [];
 574             for (var n in this.directs) {
 575                 var ni = i+parseInt(this.directs[n][0]);
 576                 var nj = j+parseInt(this.directs[n][1]);
 577                 var tpath = [];
 578                 while (ni >= 0 && ni < this.bounder && nj >= 0 && nj < this.bounder && board[ni][nj] === revColor){
 579                     tpath.push([ni, nj]);
 580                     ni += parseInt(this.directs[n][0]);
 581                     nj += parseInt(this.directs[n][1]);
 582                     if (ni >= 0 && ni < this.bounder && nj >= 0 && nj < this.bounder && board[ni][nj] === color) {
 583                         path = $.merge(path, tpath);
 584                     }
 585                 }
 586             }
 587             return {place: place, path: path, color: color,};
 588         },
 589
 590         doRevert: function(action, _board){
 591             var color = action['color'];
 592             var board = _board || this.board;
 593             var path = action['path'];
 594             for (var p in path){
 595                 board[path[p][0]][path[p][1]] = color;
 596             }
 597             return board;
 598         },
 599         getValue: function(place, _board){
 600             var ret = 0;
 601             var board = _board || this.board;
 602             var i = parseInt(place[0]);
 603             var j = parseInt(place[1]);
 604             var mtable = {
 605             0:{ 0:100, 1:-50, 2:40, 3:30, 4:30, 5:40, 6:-50, 7:100,},
 606             1:{ 0:-50, 1:-30, 2:5,  3:1,  4:1,  5:5,  6:-30, 7:-50,},
 607             2:{ 0:40,  1:5,   2:20, 3:10, 4:10, 5:20, 6:5,   7:40,},
 608             3:{ 0:30,  1:1,   2:10, 3:0,  4:0,  5:10, 6:1,   7:30,},
 609             4:{ 0:30,  1:1,   2:10, 3:0,  4:0,  5:10, 6:1,   7:30,},
 610             5:{ 0:40,  1:5,   2:20, 3:10, 4:10, 5:20, 6:5,   7:40,},
 611             6:{ 0:-50, 1:-30, 2:5,  3:1,  4:1,  5:5,  6:-30, 7:-50,},
 612             7:{ 0:100, 1:-50, 2:40, 3:30, 4:30, 5:40, 6:-50, 7:100,},
 613             };
 614             return parseInt(mtable[i][j]);
 615         },
 616         evaluate: function(place, _color, _board, _level, _heap){
 617             var ret = -100000;
 618             var level = _level || this.level;
 619             var heap = _heap || this.heap;
 620             if (typeof heap['nextLevel'][String(place[0])+String(place[1])] == 'undefined'){
 621                 heap['nextLevel'][String(place[0])+String(place[1])] = {};
 622             }
 623             heap = heap['nextLevel'][String(place[0])+String(place[1])];
 624             level = parseInt(level);
 625             var toEndLevel = 64-parseInt(this.step);
 626             level = (level>toEndLevel?toEndLevel:level);
 627             var nextValue = 0;
 628 /*
 629             var i = parseInt(place[0]);
 630             var j = parseInt(place[1]);*/
 631
 632             var color = _color || 'white';
 633             var board = _board || this.board;
 634             board = this.getClone(board);
 635             var revColor = ((color == 'white')?'black':'white');
 636             var sym = ((color == 'white')?1:-1);
 637
 638             board[place[0]][place[1]] = color;
 639
 640             var path;
 641             var cp;
 642             var up;
 643             if (typeof heap['value'] != 'undefined'){
 644             path = heap['path'];
 645             ret = heap['value'];
 646             cp = heap['cpossible'];
 647             up = heap['upossible'];
 648             board = this.doRevert(heap, board);
 649             } else {
 650             var act = this.getRevertPath(place, color, board);
 651                 heap['path'] = act['path'];
 652                 heap['color'] = color;
 653                 heap['place'] = place;
 654             board = this.doRevert(heap, board);
 655                 cp = this.possiblePlace(color, board);
 656                 up = this.possiblePlace(revColor, board);
 657
 658                 var cv = 0;
 659                 var uv = 0;
 660                 var cc = 0;
 661                 var uc = 0;
 662
 663                 for (var i=0; i<this.bounder; i++){
 664                     for (var j=0; j<this.bounder; j++){
 665                         if (board[i][j] === color) {
 666                             cv += this.getValue([i, j], board);
 667                             cc++;
 668                         } else if (board[i][j] === revColor){
 669                             uv += this.getValue([i, j], board);
 670                             uc++;
 671                         }
 672                     }
 673                 }
 674
 675                 ret = (cp.length-up.length)*10;
 676                 ret += (cv-uv)*2;
 677                 if (up.length == 0 && cp.length > 0) ret = 100000;
 678                 heap['value'] = ret;
 679                 heap['nextLevel'] = {};
 680                 heap['cpossible'] = cp;
 681                 heap['upossible'] = up;
 682                 heap[color] = cc;
 683                 heap[revColor] = uc;
 684             }
 685
 686             if (level > 1 && (up.length > 0 || cp.length > 0)){
 687             if (up.length == 0){
 688                 up = cp;
 689                 revColor = color;
 690             }
 691             up = this.getBestPlaceSet(up);
 692             for (var p in up) {
 693                 nextValue += this.evaluate(up[p], revColor, board, level-1, heap);
 694             }
 695             if (up.length > 0){
 696                 nextValue = nextValue/up.length;
 697                 ret = Math.round(ret*0.5+nextValue*0.5);
 698             }
 699             }
 700
 701             return ret*sym;
 702         },
 703         getBestPlaceSet: function(possible){
 704             var best = [];
 705             var middle = [];
 706             var ret = [];
 707             for (var i in possible){
 708                 var t = this.getValue(possible[i]);
 709                 if (t == 100) {
 710                     best.push(possible[i]);
 711                 } else if (t >= 0) {
 712                     middle.push(possible[i]);
 713                 }
 714             }
 715
 716             if (best.length > 0){
 717                 ret = best;
 718             } else if (middle.length > 0){
 719                 ret = middle;
 720             } else {
 721                 ret = possible;
 722             }
 723             return ret;
 724         },
 725         bestPlace: function(possible){
 726             if (possible.length == 0)
 727                 console.log('Error: No possible places?!!!');
 728             possible = this.getBestPlaceSet(possible);
 729
 730             var ret = [];
 731             if (possible.length > 0) {
 732                 ret = possible[0];
 733                 var value = this.evaluate(ret);
 734                 for (var p=1; p<possible.length; p++) {
 735                     var v = this.evaluate(possible[p]);
 736                     if (v > value){
 737                         value = v;
 738                         ret = possible[p];
 739                     }
 740                 }
 741             } else {
 742                 console.log('Error: No Setting place for Computer');
 743             }
 744             return ret;
 745         },
 746         showLicense: function(id, hpageid) {
 747             var lbtn = document.getElementById(id+"btnl");
 748
 749             var lpage = document.getElementById(id+"page");
 750             var hpage = document.getElementById(hpageid);
 751             var ltext;
 752             var lscroll;
 753             var timer;
 754
 755             if (!this.hasLicense) {
 756                 $('#licensepage').html('<div id="licensetext"><div id="licensescroll"></div></div> <div id="licensebtnq" class="licensebtn">Back</div>');
 757                 lscroll = document.getElementById(id+"scroll");
 758                 var request = new XMLHttpRequest();
 759                 request.open("GET", "README.txt", false);
 760                 request.onload = function(e) {
 761                     var text = this.responseText;
 762                     text = text.replace("<","&lt;");
 763                     text = text.replace(">","&gt;");
 764                     var lines = text.split("\n");
 765                     lines[0] = "<br><br>"+lines[0];
 766                     for(var i in lines)
 767                     {
 768                         if(lines[i].match(/--------------------/))
 769                         {
 770                             lines[i] = "";
 771                         }
 772                         else
 773                         {
 774                             lines[i] += "<br>";
 775                         }
 776                     }
 777                     lscroll.innerHTML = lines.join("\n");
 778                 }
 779                 request.send();
 780                 this.hasLicense = true;
 781             }
 782
 783             var btnq = document.getElementById(id+"btnq");
 784             lscroll = document.getElementById(id+"scroll");
 785             ltext = document.getElementById(id+"text");
 786             /* initialize scroll rate */
 787             var dY = 2;
 788             var t0 = 0;
 789             var delay = 1000;
 790
 791             /* set the scroller to the top position */
 792             lscroll.style.top = "0px";
 793
 794             /* display the license page, hide its parent */
 795             hpage.style.display="none";
 796             lpage.style.display="block";
 797
 798             /* calculate the scroll length when the window is shown */
 799             var maxY = lscroll.clientHeight - ltext.clientHeight;
 800
 801             /* start the autoscroll interval */
 802             timer = setInterval(function() {
 803                 /* get the actual interval, in case performance slows us down */
 804                 var t1 = (new Date()).getTime();
 805                 var dT = (t0 == 0)?20:(t1-t0);
 806                 t0 = t1;
 807
 808                 /* delay specific number of milliseconds */
 809                 delay -= dT;
 810                 if(delay > 0)
 811                     return;
 812
 813                 /* calculate the new top position using dY and dT */
 814                 var newY = Math.abs(parseInt(lscroll.style.top)) + ((dT/40)*dY);
 815                 if(newY > 0)
 816                     lscroll.style.top = (-1 * newY) + "px";
 817                 else
 818                     lscroll.style.top = "0px";
 819
 820                 /* if the lscroll has hit the limit, delay and swing */
 821                 /* the other way */
 822                 if(newY >= maxY)
 823                 {
 824                     delay = 5000;
 825                     dY = -20;
 826                 }
 827                 else if(newY <= 0)
 828                 {
 829                     delay = 5000;
 830                     dY = 2;
 831                 }
 832             }, 40);
 833
 834         btnq.onclick = function() {
 835             hpage.style.display="block";
 836             lpage.style.display="none";
 837             clearInterval(timer);
 838         }
 839       },
 840     };
 841     return w;
 842 })();
 843
 844
 845 function getMessage(key, alter) {
 846     var ret = alter || '';
 847     if (window.chrome && window.chrome.i18n && window.chrome.i18n.getMessage) {
 848         ret = chrome.i18n.getMessage(key);
 849     } else {
 850         if (typeof this.messages == 'undefined') {
 851             try {
 852                 var request = new XMLHttpRequest();
 853                 request.open("GET", "_locales/en/messages.json", false);
 854                 request.send();
 855                 var res = request.responseText;
 856                 this.messages = window.eval(res);
 857             } catch (err) {
 858                 return ret;
 859             }
 860         }
 861         if (this.messages && (this.messages.hasOwnProperty(key)) && (this.messages[key].hasOwnProperty('message'))) {
 862             ret = this.messages[key].message;
 863         }
 864     }
 865     return ret;
 866 }
 867
 868 window.onload = function(){
 869     var locale = getMessage('locale', 'en');
 870     if (locale != 'en') {
 871         var head  = $('head').q;
 872         var link  = document.createElement('link');
 873         link.rel  = 'stylesheet';
 874         link.type = 'text/css';
 875         link.href = 'css/i18n.css';
 876         head.appendChild(link);
 877     }
 878     $('title').html(getMessage('name', 'Annex'));
 879     $('#open1').html(getMessage('1PlayerGame', '1 Player Game'));
 880     $('#open2').html(getMessage('2PlayerGame', '2 Player Game'))
 881     $('#open_help').html(getMessage('howtoPlay', 'How to Play'));
 882     $('#open_exit').html(getMessage('exit', 'Exit'));
 883     $('#licensebtnl').click(function(){
 884         World.showLicense("license", "open");
 885     });
 886
 887     World.playSound('snd_theme');
 888 }