Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <!DOCTYPE html>
  2. <html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
  3. <head>
  4. <meta charset='utf-8' />
  5. <meta name='viewport' content='width=device-width, user-scalable=no' />
  6. <link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
  7. <title>OMJ (OGS Mahjong Remake)</title>
  8. <style type='text/css'>
  9. body {
  10. touch-action: none;
  11. margin: 0;
  12. border: 0 none;
  13. padding: 0;
  14. text-align: center;
  15. background-color: black;
  16. }
  17. #canvas {
  18. display: block;
  19. margin: 0;
  20. color: white;
  21. }
  22. #canvas:focus {
  23. outline: none;
  24. }
  25. .godot {
  26. font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
  27. color: #e0e0e0;
  28. background-color: #3b3943;
  29. background-image: linear-gradient(to bottom, #403e48, #35333c);
  30. border: 1px solid #45434e;
  31. box-shadow: 0 0 1px 1px #2f2d35;
  32. }
  33. /* Status display
  34. * ============== */
  35. #status {
  36. position: absolute;
  37. left: 0;
  38. top: 0;
  39. right: 0;
  40. bottom: 0;
  41. display: flex;
  42. justify-content: center;
  43. align-items: center;
  44. /* don't consume click events - make children visible explicitly */
  45. visibility: hidden;
  46. }
  47. #status-progress {
  48. width: 366px;
  49. height: 7px;
  50. background-color: #38363A;
  51. border: 1px solid #444246;
  52. padding: 1px;
  53. box-shadow: 0 0 2px 1px #1B1C22;
  54. border-radius: 2px;
  55. visibility: visible;
  56. }
  57. @media only screen and (orientation:portrait) {
  58. #status-progress {
  59. width: 61.8%;
  60. }
  61. }
  62. #status-progress-inner {
  63. height: 100%;
  64. width: 0;
  65. box-sizing: border-box;
  66. transition: width 0.5s linear;
  67. background-color: #202020;
  68. border: 1px solid #222223;
  69. box-shadow: 0 0 1px 1px #27282E;
  70. border-radius: 3px;
  71. }
  72. #status-indeterminate {
  73. visibility: visible;
  74. position: relative;
  75. }
  76. #status-indeterminate > div {
  77. width: 4.5px;
  78. height: 0;
  79. border-style: solid;
  80. border-width: 9px 3px 0 3px;
  81. border-color: #2b2b2b transparent transparent transparent;
  82. transform-origin: center 21px;
  83. position: absolute;
  84. }
  85. #status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
  86. #status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
  87. #status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
  88. #status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
  89. #status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
  90. #status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
  91. #status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
  92. #status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
  93. #status-notice {
  94. margin: 0 100px;
  95. line-height: 1.3;
  96. visibility: visible;
  97. padding: 4px 6px;
  98. visibility: visible;
  99. }
  100. </style>
  101. <link rel="stylesheet" href="screen.css">
  102. </head>
  103. <body>
  104. <canvas id='canvas'>
  105. HTML5 canvas appears to be unsupported in the current browser.<br />
  106. Please try updating or use a different browser.
  107. </canvas>
  108. <div id='status'>
  109. <div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
  110. <div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
  111. <div></div>
  112. <div></div>
  113. <div></div>
  114. <div></div>
  115. <div></div>
  116. <div></div>
  117. <div></div>
  118. <div></div>
  119. </div>
  120. <div id='status-notice' class='godot' style='display: none;'></div>
  121. </div>
  122. <script type='text/javascript' src='index.js'></script>
  123. <script type='text/javascript'>//<![CDATA[
  124. var engine = new Engine;
  125. var setStatusMode;
  126. var setStatusNotice;
  127. (function() {
  128. const EXECUTABLE_NAME = 'index';
  129. const MAIN_PACK = 'index.pck';
  130. const INDETERMINATE_STATUS_STEP_MS = 100;
  131. var canvas = document.getElementById('canvas');
  132. var statusProgress = document.getElementById('status-progress');
  133. var statusProgressInner = document.getElementById('status-progress-inner');
  134. var statusIndeterminate = document.getElementById('status-indeterminate');
  135. var statusNotice = document.getElementById('status-notice');
  136. var initializing = true;
  137. var statusMode = 'hidden';
  138. var animationCallbacks = [];
  139. function animate(time) {
  140. animationCallbacks.forEach(callback => callback(time));
  141. requestAnimationFrame(animate);
  142. }
  143. requestAnimationFrame(animate);
  144. function adjustCanvasDimensions() {
  145. var scale = window.devicePixelRatio || 1;
  146. var width = window.innerWidth;
  147. var height = window.innerHeight;
  148. canvas.width = width * scale;
  149. canvas.height = height * scale;
  150. canvas.style.width = width + "px";
  151. canvas.style.height = height + "px";
  152. }
  153. animationCallbacks.push(adjustCanvasDimensions);
  154. adjustCanvasDimensions();
  155. setStatusMode = function setStatusMode(mode) {
  156. if (statusMode === mode || !initializing)
  157. return;
  158. [statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
  159. elem.style.display = 'none';
  160. });
  161. animationCallbacks = animationCallbacks.filter(function(value) {
  162. return (value != animateStatusIndeterminate);
  163. });
  164. switch (mode) {
  165. case 'progress':
  166. statusProgress.style.display = 'block';
  167. break;
  168. case 'indeterminate':
  169. statusIndeterminate.style.display = 'block';
  170. animationCallbacks.push(animateStatusIndeterminate);
  171. break;
  172. case 'notice':
  173. statusNotice.style.display = 'block';
  174. break;
  175. case 'hidden':
  176. break;
  177. default:
  178. throw new Error('Invalid status mode');
  179. }
  180. statusMode = mode;
  181. }
  182. function animateStatusIndeterminate(ms) {
  183. var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
  184. if (statusIndeterminate.children[i].style.borderTopColor == '') {
  185. Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
  186. child.style.borderTopColor = '';
  187. });
  188. statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
  189. }
  190. }
  191. setStatusNotice = function setStatusNotice(text) {
  192. while (statusNotice.lastChild) {
  193. statusNotice.removeChild(statusNotice.lastChild);
  194. }
  195. var lines = text.split('\n');
  196. lines.forEach((line) => {
  197. statusNotice.appendChild(document.createTextNode(line));
  198. statusNotice.appendChild(document.createElement('br'));
  199. });
  200. };
  201. engine.setProgressFunc((current, total) => {
  202. if (total > 0) {
  203. statusProgressInner.style.width = current/total * 100 + '%';
  204. setStatusMode('progress');
  205. if (current === total) {
  206. // wait for progress bar animation
  207. setTimeout(() => {
  208. setStatusMode('indeterminate');
  209. }, 500);
  210. }
  211. } else {
  212. setStatusMode('indeterminate');
  213. }
  214. });
  215. function displayFailureNotice(err) {
  216. var msg = err.message || err;
  217. console.error(msg);
  218. setStatusNotice(msg);
  219. setStatusMode('notice');
  220. initializing = false;
  221. };
  222. if (!Engine.isWebGLAvailable()) {
  223. displayFailureNotice('WebGL not available');
  224. } else {
  225. setStatusMode('indeterminate');
  226. engine.setCanvas(canvas);
  227. engine.startGame(EXECUTABLE_NAME, MAIN_PACK).then(() => {
  228. setStatusMode('hidden');
  229. initializing = false;
  230. }, displayFailureNotice);
  231. }
  232. })();
  233. //]]></script>
  234. </body>
  235. </html>