You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

269 lines
7.0KB

  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>Oh Mah Jong (0.7.4)</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. </head>
  102. <body>
  103. <canvas id='canvas'>
  104. HTML5 canvas appears to be unsupported in the current browser.<br />
  105. Please try updating or use a different browser.
  106. </canvas>
  107. <div id='status'>
  108. <div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
  109. <div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
  110. <div></div>
  111. <div></div>
  112. <div></div>
  113. <div></div>
  114. <div></div>
  115. <div></div>
  116. <div></div>
  117. <div></div>
  118. </div>
  119. <div id='status-notice' class='godot' style='display: none;'></div>
  120. </div>
  121. <script type='text/javascript' src='index.js'></script>
  122. <script type='text/javascript'>//<![CDATA[
  123. var engine = new Engine;
  124. var setStatusMode;
  125. var setStatusNotice;
  126. (function() {
  127. const EXECUTABLE_NAME = 'index';
  128. const MAIN_PACK = 'index.pck';
  129. const INDETERMINATE_STATUS_STEP_MS = 100;
  130. var canvas = document.getElementById('canvas');
  131. var statusProgress = document.getElementById('status-progress');
  132. var statusProgressInner = document.getElementById('status-progress-inner');
  133. var statusIndeterminate = document.getElementById('status-indeterminate');
  134. var statusNotice = document.getElementById('status-notice');
  135. var initializing = true;
  136. var statusMode = 'hidden';
  137. var animationCallbacks = [];
  138. function animate(time) {
  139. animationCallbacks.forEach(callback => callback(time));
  140. requestAnimationFrame(animate);
  141. }
  142. requestAnimationFrame(animate);
  143. function adjustCanvasDimensions() {
  144. var scale = window.devicePixelRatio || 1;
  145. var width = window.innerWidth;
  146. var height = window.innerHeight;
  147. canvas.width = width * scale;
  148. canvas.height = height * scale;
  149. canvas.style.width = width + "px";
  150. canvas.style.height = height + "px";
  151. }
  152. animationCallbacks.push(adjustCanvasDimensions);
  153. adjustCanvasDimensions();
  154. setStatusMode = function setStatusMode(mode) {
  155. if (statusMode === mode || !initializing)
  156. return;
  157. [statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
  158. elem.style.display = 'none';
  159. });
  160. animationCallbacks = animationCallbacks.filter(function(value) {
  161. return (value != animateStatusIndeterminate);
  162. });
  163. switch (mode) {
  164. case 'progress':
  165. statusProgress.style.display = 'block';
  166. break;
  167. case 'indeterminate':
  168. statusIndeterminate.style.display = 'block';
  169. animationCallbacks.push(animateStatusIndeterminate);
  170. break;
  171. case 'notice':
  172. statusNotice.style.display = 'block';
  173. break;
  174. case 'hidden':
  175. break;
  176. default:
  177. throw new Error('Invalid status mode');
  178. }
  179. statusMode = mode;
  180. }
  181. function animateStatusIndeterminate(ms) {
  182. var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
  183. if (statusIndeterminate.children[i].style.borderTopColor == '') {
  184. Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
  185. child.style.borderTopColor = '';
  186. });
  187. statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
  188. }
  189. }
  190. setStatusNotice = function setStatusNotice(text) {
  191. while (statusNotice.lastChild) {
  192. statusNotice.removeChild(statusNotice.lastChild);
  193. }
  194. var lines = text.split('\n');
  195. lines.forEach((line) => {
  196. statusNotice.appendChild(document.createTextNode(line));
  197. statusNotice.appendChild(document.createElement('br'));
  198. });
  199. };
  200. engine.setProgressFunc((current, total) => {
  201. if (total > 0) {
  202. statusProgressInner.style.width = current/total * 100 + '%';
  203. setStatusMode('progress');
  204. if (current === total) {
  205. // wait for progress bar animation
  206. setTimeout(() => {
  207. setStatusMode('indeterminate');
  208. }, 500);
  209. }
  210. } else {
  211. setStatusMode('indeterminate');
  212. }
  213. });
  214. function displayFailureNotice(err) {
  215. var msg = err.message || err;
  216. console.error(msg);
  217. setStatusNotice(msg);
  218. setStatusMode('notice');
  219. initializing = false;
  220. };
  221. if (!Engine.isWebGLAvailable()) {
  222. displayFailureNotice('WebGL not available');
  223. } else {
  224. setStatusMode('indeterminate');
  225. engine.setCanvas(canvas);
  226. engine.startGame(EXECUTABLE_NAME, MAIN_PACK).then(() => {
  227. setStatusMode('hidden');
  228. initializing = false;
  229. }, displayFailureNotice);
  230. }
  231. })();
  232. //]]></script>
  233. </body>
  234. </html>