1
0

index.html 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <html lang="en">
  2. <head>
  3. <meta charset="utf-8" />
  4. <link rel="stylesheet" href="css/wordfighters.css" />
  5. <script src="lib/jquery-1.7.1.js" type="application/javascript"></script>
  6. <script src="lib/jquery.i18n.js" type="application/javascript"></script>
  7. <script src="lib/jquery.mockjax.min.js" type="application/javascript"></script>
  8. <script src="lib/gamequery-0.7.1.js" type="application/javascript"></script>
  9. <script src="lib/utf.js" type="application/javascript"></script>
  10. <script src="lib/gunzip.min.js" type="application/javascript"></script>
  11. <script src="js/mock.js" type="application/javascript"></script>
  12. <script src="js/countdown.js" type="application/javascript"></script>
  13. <script src="js/scoreboard.js" type="application/javascript"></script>
  14. <script src="js/wordfighters.js" type="application/javascript"></script>
  15. <script src="js/fighters.js" type="application/javascript"></script>
  16. <script src="js/dictionary.js" type="application/javascript"></script>
  17. <script type="application/javascript">
  18. if( (navigator.language || navigator.userLanguage) == 'fr' ) {
  19. $.i18n.load(dictionary.fr);
  20. } else {
  21. $.i18n.load(dictionary.en);
  22. }
  23. WordFighter.id = 0; // Used for multiplayer mode
  24. WordFighter.mode = "single"; // 'dual' if multiplayer
  25. var opponent = "/";
  26. var game_waiting_ready=$.i18n._('game.waiting.ready');
  27. var game_start=$.i18n._('game.start');
  28. var game_win=$.i18n._('game.win');
  29. var game_loose=$.i18n._('game.loose');
  30. var game_draw=$.i18n._('game.draw');
  31. </script>
  32. </head>
  33. <body>
  34. <div id="waitingGame">
  35. <div>
  36. <div id="level" class="levelChoice"></div>
  37. <div id="E" class="levelChoice">
  38. <div id="easy" class="character E"></div>
  39. <div id="levelE" class="level unfocus"></div>
  40. <div id="levelEHighlight" class="level highlight"></div>
  41. </div>
  42. <div id="M" class="levelChoice">
  43. <div id="medium" class="character M"></div>
  44. <div id="levelM" class="level unfocus"></div>
  45. <div id="levelMHighlight" class="level highlight"></div>
  46. </div>
  47. <div id="H" class="levelChoice">
  48. <div id="hard" class="character H"></div>
  49. <div id="levelH" class="level unfocus"></div>
  50. <div id="levelHHighlight" class="level highlight"></div>
  51. </div>
  52. <div id="X" class="levelChoice">
  53. <div id="extreme" class="character X"></div>
  54. <div id="levelX" class="level unfocus"></div>
  55. <div id="levelXHighlight" class="level highlight"></div>
  56. </div>
  57. </div>
  58. <div>
  59. <div id="fighter1portrait" class="portrait" style="visibility: visible;"></div>
  60. </div>
  61. <div id="label" style="bottom: 0px; position: relative; text-align: center;">
  62. Search words between 3 and 7 letters
  63. </div>
  64. </div>
  65. <div id="gamePanel" style="display: none;">
  66. <div class="span7">
  67. <div style="width: 384px; height: 125px; margin-left: auto; margin-right: auto;">
  68. <div id="playground"></div>
  69. </div>
  70. <div id="letters">
  71. <div id="typed">
  72. <span> <img id="typed1" class="letter" src="images/0_dot.gif" /> </span>
  73. <span> <img id="typed2" class="letter" src="images/0_dot.gif" /> </span>
  74. <span> <img id="typed3" class="letter" src="images/0_dot.gif" /> </span>
  75. <span> <img id="typed4" class="letter" src="images/0_dot.gif" /> </span>
  76. <span> <img id="typed5" class="letter" src="images/0_dot.gif" /> </span>
  77. <span> <img id="typed6" class="letter" src="images/0_dot.gif" /> </span>
  78. <span> <img id="typed7" class="letter" src="images/0_dot.gif" /> </span>
  79. </div>
  80. <div id="suggested">
  81. <span> <img id="letter1" class="letter" src="images/0_dot.gif" /> </span>
  82. <span> <img id="letter2" class="letter" src="images/0_dot.gif" /> </span>
  83. <span> <img id="letter3" class="letter" src="images/0_dot.gif" /> </span>
  84. <span> <img id="letter4" class="letter" src="images/0_dot.gif" /> </span>
  85. <span> <img id="letter5" class="letter" src="images/0_dot.gif" /> </span>
  86. <span> <img id="letter6" class="letter" src="images/0_dot.gif" /> </span>
  87. <span> <img id="letter7" class="letter" src="images/0_dot.gif" /> </span>
  88. </div>
  89. </div>
  90. </div>
  91. <div id="valid">
  92. <div id="valid3column">
  93. <span id="3lettersWords">3 letters</span>
  94. <ul id="valid3"></ul>
  95. </div>
  96. <div id="valid4column">
  97. <span id="4lettersWords">4 letters</span>
  98. <ul id="valid4"></ul>
  99. </div>
  100. <div id="valid5column">
  101. <span id="5lettersWords">5 letters</span>
  102. <ul id="valid5"></ul>
  103. </div>
  104. <div id="valid6column">
  105. <span id="6lettersWords">6 letters</span>
  106. <ul id="valid6"></ul>
  107. </div>
  108. <div id="valid7column">
  109. <span id="7lettersWords">7 letters</span>
  110. <ul id="valid7"></ul>
  111. </div>
  112. </div>
  113. </div>
  114. <span class="button" style="display: none;">
  115. <div id="replay" >
  116. </div>
  117. </span>
  118. <script type="application/javascript">
  119. $(document).ready(function () {
  120. display_text($.i18n._('game.choose.level'), '#level', 1, false);
  121. display_text($.i18n._('game.level.E'), '#levelE', 2);
  122. display_text($.i18n._('game.level.E'), '#levelEHighlight', 1);
  123. display_text($.i18n._('game.level.M'), '#levelM', 2);
  124. display_text($.i18n._('game.level.M'), '#levelMHighlight', 1);
  125. display_text($.i18n._('game.level.H'), '#levelH', 2);
  126. display_text($.i18n._('game.level.H'), '#levelHHighlight', 1);
  127. display_text($.i18n._('game.level.X'), '#levelX', 2);
  128. display_text($.i18n._('game.level.X'), '#levelXHighlight', 1);
  129. display_text($.i18n._('game.replay'), '#replay', 1, false);
  130. $('#3lettersWords').html($.i18n._('wordfighter.letters', 3));
  131. $('#4lettersWords').html($.i18n._('wordfighter.letters', 4));
  132. $('#5lettersWords').html($.i18n._('wordfighter.letters', 5));
  133. $('#6lettersWords').html($.i18n._('wordfighter.letters', 6));
  134. $('#7lettersWords').html($.i18n._('wordfighter.letters', 7));
  135. var currentLevel = null;
  136. var labels = new Array();
  137. labels[ "E" ] = $.i18n._('wordfighter.howto.E');
  138. labels[ "M" ] = $.i18n._('wordfighter.howto.M');
  139. labels[ "H" ] = $.i18n._('wordfighter.howto.H');
  140. labels[ "X" ] = $.i18n._('wordfighter.howto.X');
  141. $("#label").html( labels[ 'E'] );
  142. $( ".levelChoice" ).hover(
  143. function () {
  144. $(this).find("div.character").css({ opacity: 1 });
  145. $(this).find("div.unfocus").toggle();
  146. $(this).find("div.highlight").toggle();
  147. $("#fighter1portrait").addClass(this.id);
  148. $("#label").html( labels[ this.id] );
  149. },
  150. function () {
  151. $(this).find("div.character").css({ opacity: 0.6 });
  152. $(this).find("div.unfocus").toggle();
  153. $(this).find("div.highlight").toggle();
  154. $("#fighter1portrait").removeClass(this.id);
  155. }
  156. );
  157. $('.levelChoice').click(function() {
  158. WordFighter.change_level( this.id );
  159. WordFighter.notify_dual();
  160. });
  161. if( $.browser.webkit ) {
  162. $(document).keydown(WordFighter.prevent_backspace);
  163. }
  164. $(document).keypress(WordFighter.keypressedHandler);
  165. $(".button").bind( "click", function() {
  166. window.location.reload();
  167. } );
  168. });
  169. </script>
  170. </body>
  171. </html>