bootloader.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. function isSafari() {
  2. var ua = navigator.userAgent.toLowerCase();
  3. return ua.indexOf('safari') != -1 && ua.indexOf('chrome') == -1;
  4. }
  5. var svgNS = "http://www.w3.org/2000/svg";
  6. var color = ['#DE3F26','#606060','#48AF5E','#FFC800'];
  7. function parseUInt(x) { return x < 0 ?
  8. (x > -128 ? x & 255 >>> 0 : (x > -32768 ? x & 65535 >>> 0 : x >>> 0)) : x; }
  9. function statsRow(start_x,start_y,i,games) {
  10. var name = template_engine(
  11. '<tspan xmlns="http://www.w3.org/2000/svg" x="{this.x}" y="{this.y}">{this.body}</tspan>',{
  12. x: start_x,
  13. y: start_y+25*i,
  14. body: games[i].value[0][0] + " — " + parseUInt(games[i].value[0][1])});
  15. var element1 = svg(name);
  16. document.getElementById('Stat-Right').appendChild(element1);
  17. }
  18. function gameresultRow(start_x,start_y,i,results) {
  19. var name = results[i].value[0][0],
  20. round = results[i].value[0][2],
  21. total = results[i].value[0][3];
  22. round = round > 500000 ? -Math.round(round/1000000) : round;
  23. total = total > 500000 ? -Math.round(total/1000000) : total;
  24. var name = template_engine(
  25. '<tspan xmlns="http://www.w3.org/2000/svg" x="{this.x}" y="{this.y}">{this.body}</tspan>',{
  26. x: start_x,
  27. y: start_y+30*i,
  28. body: results[i].value[0][0] + " — " + round + "/" + total});
  29. var element1 = svg(name);
  30. document.getElementById('Overlay-Results').appendChild(element1);
  31. }
  32. function parseTransformAttribute(aa) {
  33. var a = aa.split(' ').join('');
  34. var b={};
  35. for (var i in a = a.match(/(\w+\((\-?\d+\.?\d*,?)+\))+/g)) { var c = a[i].match(/[\w\.\-]+/g); b[c.shift()] = c; }
  36. return b; }
  37. function svg(html) { return new DOMParser().parseFromString(html, "text/xml").firstChild; }
  38. function removeChilds(e) { var last; while (last = e.lastChild) e.removeChild(last); };
  39. function setPlayerName(e, playerName) {
  40. var dx = 15;
  41. document.getElementById(e+"-Name").setAttribute("y",27);
  42. document.getElementById(e+"-Name").setAttribute("x",dx);
  43. document.getElementById(e+"-Name").textContent = playerName;
  44. document.getElementById(e+"-Pad").setAttribute('width', document.getElementById(e+"-Name").getBBox().width + 25); }
  45. function template_engine(html, data) {
  46. var re = /{([^}]+)?}/g, code = 'var r=[];', cursor = 0;
  47. var add = function(line,js) {
  48. js? (code += 'r.push(' + line + ');') :
  49. (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");' : ''); // "
  50. return add; }
  51. while(match = re.exec(html)) {
  52. add(html.slice(cursor, match.index))(match[1],true);
  53. cursor = match.index + match[0].length; }
  54. add(html.substr(cursor, html.length - cursor));
  55. code += 'return r.join("");';
  56. return new Function(code.replace(/[\r\t\n]/g, '')).apply(data); }
  57. function discarder(name) { return template_engine(localStorage.getItem("svg/Discarder.svg?q=" + $.timestamp), { name: name }); }
  58. function initDiscards() {
  59. [ {name:"Gabrielo-Discard", hand:"Player-Left-Hand"},
  60. {name:"Alina-Discard", hand:"Player-Right-Hand"},
  61. {name:"Mustafa-Discard", hand:"Player-Center-Hand"},
  62. {name:"You-Discard", hand:"Player-Me-Hand"} ].map(function(e) {
  63. document.getElementById(e.name).appendChild(svg(discarder(e.hand)));
  64. });
  65. }
  66. function PatchSVG()
  67. {
  68. // $('Player-Statistics').hide();
  69. var playerInifoOnClick = [
  70. "Point-Table" ];
  71. playerInifoOnClick.map(function(x) {
  72. document.getElementById(x).style.cursor = "pointer";
  73. document.getElementById(x).onclick = showPlayerInfo; });
  74. var onlineListOnClick = [
  75. "Online-Users",
  76. "Online-Users-Pad",
  77. "Online-Logo",
  78. "Users-Online-Message",
  79. "Users-Online-Number" ];
  80. onlineListOnClick.map(function(x) {
  81. document.getElementById(x).style.cursor = "pointer";
  82. document.getElementById(x).onclick = showOnlineList; });
  83. var rulesOnClick = [
  84. "Rules",
  85. "Rules-Text",
  86. "Rules-Rectangle" ];
  87. rulesOnClick.map(function(x) {
  88. document.getElementById(x).style.cursor = "pointer";
  89. document.getElementById(x).onclick = showRules; });
  90. Core(ControllerScope);
  91. Core(DragScope);
  92. Core(DropScope);
  93. Core(TimerScope);
  94. Core(PlayerScope);
  95. Core(OkeyApiProviderScope);
  96. Core(CardScope);
  97. Core(HandScope);
  98. Core(DeckScope);
  99. Core(RosterScope);
  100. initDiscards();
  101. initChat();
  102. initChatSample();
  103. initEditorsSafari();
  104. initPauseOverlay();
  105. if ((hours() < 6 || hours() >= 18)) {
  106. $("#Sky").attr({fill:"#0E4B69"});
  107. $("#City").attr({fill:"#3B5998"});
  108. } else
  109. {
  110. $("#Sky").attr({fill:"#EDF9FF"});
  111. $("#City").attr({fill:"#DFF1F4"});
  112. }
  113. // document.addEventListener('touchmove',function(e) {e.preventDefault();},false);
  114. $svg.attr({preserveAspectRatio:"xMidYMid meet",width:"100%",height:"100%"});
  115. }
  116. function initChatSample() {
  117. chatMessage("Chat","0","Maxim","Kakaranet:\nThis is in-game chat");
  118. barHover();
  119. mouseWheelHandler({'detail':-100000,'wheelDelta':-100000});
  120. barHoverOut();
  121. }
  122. function onPlayerInfo(evt) {
  123. ws.send(enc(tuple(atom('client'),
  124. tuple(atom('stats_action'),bin(document.user),atom('game_okey'))))); }
  125. function onPlayerInfoClose(evt) { document.getElementById('Player-Statistics').style.display = 'none'; }
  126. // Run
  127. function appRun() {
  128. $.load('Kakaranet-Scene.svg', function(x) {
  129. var name = "Refined";
  130. var slot = document.getElementById(name);
  131. if (slot == null) return;
  132. slot.parentNode.replaceChild(svg(x),slot);
  133. $.load("svg/Discarder.svg", function(h) {
  134. PatchSVG();
  135. StartApp();
  136. });
  137. });
  138. }
  139. function showRules()
  140. {
  141. $.load("svg/Okey-Rules.svg", function(h) {
  142. var rules = document.getElementById("Okey-Rules");
  143. if (null == rules) {
  144. var rulesElement = svg(h);
  145. document.getElementById("Kakaranet-12-maxim").appendChild(rulesElement);
  146. rules = document.getElementById("Okey-Rules");
  147. rules.setAttribute('transform', 'translate(210,86)');
  148. rules.setAttribute('onclick', 'onRulesClose(evt)');
  149. }
  150. rules.style.display = 'block';
  151. });
  152. }
  153. function showPlayerInfo()
  154. {
  155. ws.send(enc(tuple(atom('client'),
  156. tuple(atom('stats_action'),bin(document.user),atom('game_okey')))));
  157. $.load("svg/Player-Statistics.svg", function(h) {
  158. var rules = document.getElementById("Player-Statistics");
  159. if (null == rules) {
  160. var rulesElement = svg(h);
  161. document.getElementById("Kakaranet-12-maxim").appendChild(rulesElement);
  162. rules = document.getElementById("Player-Statistics");
  163. rules.setAttribute('transform', 'translate(210,86)');
  164. rules.setAttribute('onclick', 'onPlayerInfoClose(evt)');
  165. }
  166. rules.style.display = 'block';
  167. });
  168. }
  169. function onPlayerInfoClose(evt) {
  170. document.getElementById('Player-Statistics').style.display = 'none';
  171. }
  172. function onRulesClose(evt) {
  173. document.getElementById('Okey-Rules').style.display = 'none';
  174. }
  175. function initEditorsSafari()
  176. {
  177. if (isSafari()) {
  178. $("#edit").css({position:"relative"});
  179. $("#onlineChatEdit").css({position:"relative"});
  180. $(window).on("resize", manualForeignObjectPositioning);
  181. $(window).on("orientationchange", manualForeignObjectPositioning);
  182. manualForeignObjectPositioning();
  183. }
  184. }
  185. function manualForeignObjectPositioning()
  186. {
  187. var svgWidth = $svg[0].viewBox.baseVal.width,
  188. svgHeight = $svg[0].viewBox.baseVal.height;
  189. var sizeX = svgWidth / innerWidth,
  190. sizeY = svgHeight / innerHeight,
  191. size = Math.max(sizeX, sizeY) || 1;
  192. var realX, realY, scale, shiftX, shiftY;
  193. realX = 1/size * svgWidth;
  194. realY = 1/size * svgHeight;
  195. if (sizeX < sizeY) {
  196. // console.log("Left and Right White Spaces. Do stretch the Width ");
  197. shiftY = 0;
  198. shiftX = (innerWidth - realX) / 2;
  199. } else {
  200. // console.log("Top and Bottom White Spaces. Do reorient, or adopt the Height.");
  201. shiftX = 0;
  202. shiftY = (innerHeight - realY) / 2;
  203. }
  204. $("#GameChatEditor").attr({x: 864 * realX / svgWidth + shiftX,
  205. y: 504 * realY / svgHeight + shiftY,
  206. width: 198 * realX / svgWidth,
  207. height: 120 * realY / svgHeight});
  208. $("#OnlineChatEditor").attr({x: 10 * realX / svgWidth + shiftX,
  209. y: 504 * realY / svgHeight + shiftY,
  210. width: 198 * realX / svgWidth,
  211. height: 120 * realY / svgHeight});
  212. }
  213. function hours() { return (new Date()).getHours(); }
  214. function initPauseOverlay() {
  215. var html = '<g xmlns="http://www.w3.org/2000/svg" id="overlay" style="display:none;">'+
  216. '<rect x="216" y="91" stroke-width="0" stroke="red" width="641" height="367" rx="6" fill="skyblue" opacity="0.9"></rect>'+
  217. '<g>'+
  218. '<text id="Overlay-Results" fill="white" font-family="Exo 2" font-size="20pt"></text>'+
  219. '<text id="Overlay-Text" fill="white" font-family="Exo 2" y="280" x="-116" text-anchor="middle" dx="641" font-size="30pt"> Someone paused the game</text></g>'+
  220. '</g>';
  221. var page = document.getElementById("Kakaranet-12-maxim");
  222. var kakush = document.getElementById("Kakush");
  223. page.insertBefore(svg(html),kakush);
  224. $("#overlay").on("click", hideOverlay);
  225. }
  226. function showRoundEnd(e)
  227. {
  228. $overlay.show();
  229. var reason = dec(e.raw).value[0][3][1].value[0][1].value;
  230. var gameres = dec(e.raw).value[0][3][2].value[0][1];
  231. $("#Overlay-Results").empty();
  232. for (var i=0;i<gameres.length;i++) { gameresultRow(400,130,i,gameres); }
  233. if (reason == "tashes_out") {
  234. $("#Overlay-Text").text("Tashes out");
  235. $("#RevealDeckRoot").hide();
  236. }
  237. }
  238. function hideOverlay()
  239. {
  240. $overlay.hide();
  241. $("#Overlay-Results").empty();
  242. if (scope.ended) scope.deck.fill([]);
  243. }
  244. function showRevealHand(o) {
  245. var player = o.value[0][3][0].value[0][1],
  246. discard = o.value[0][3][1].value[0][1].value,
  247. deck = o.value[0][3][2].value[0][1];
  248. $.load("svg/Deck.svg", function(h) {
  249. $reveal_deck = $("#RevealDeck");
  250. if (null == $reveal_deck.$el) {
  251. $overlay.append(svg(h));
  252. $reveal_deck = $("#RevealDeck");
  253. $("#RevealDeckRoot").on("click", hideOverlay);
  254. }
  255. $reveal_deck.each(function(card){ card.$el && card.$el.remove(); });
  256. for (var i=0;i<2;i++)
  257. for (var j=0;j<15;j++) {
  258. var bin = deck[i][j];
  259. if (null != bin.value[0][2]) {
  260. var card = new scope.Card({
  261. color: scope.CARD_COLORS[bin.value[0][1]-1],
  262. value: bin.value[0][2] });
  263. card.$el.attr('transform', 'translate(' + (5+j*42) + ' ' + (10+i*62) + ')');
  264. $reveal_deck.append(card.$el[0]);
  265. }
  266. }
  267. });
  268. $overlay.show();
  269. $("#Overlay-Text").text(player + " revealed ");
  270. }
  271. scope.playersPositions =
  272. [
  273. [ "Me", "Right", "Center", "Left" ],
  274. [ "Left", "Me", "Right", "Center" ],
  275. [ "Center", "Left", "Me", "Right" ],
  276. [ "Right", "Center", "Left", "Me" ]
  277. ];
  278. appRun();