diff options
| author | Matthew Michelotti <michelotti.matthew@gmail.com> | 2018-07-17 23:09:04 -0500 |
|---|---|---|
| committer | Matthew Michelotti <michelotti.matthew@gmail.com> | 2018-07-17 23:09:04 -0500 |
| commit | e16089abb9eb64c589df6d19dd91d18394eba08f (patch) | |
| tree | 64f2511cfc4f28d5b5fb3910307ff0bfd22b7109 | |
| parent | 0916203899c3aa89d049bf4af38db3961924ad9a (diff) | |
changed gate.js signature in preparation for future changes
| -rw-r--r-- | gate_build/src/html/gate.js | 30 | ||||
| -rw-r--r-- | gate_build/src/html/index.html | 18 |
2 files changed, 39 insertions, 9 deletions
diff --git a/gate_build/src/html/gate.js b/gate_build/src/html/gate.js index 262debb..47d177d 100644 --- a/gate_build/src/html/gate.js +++ b/gate_build/src/html/gate.js @@ -12,7 +12,22 @@ // See the License for the specific language governing permissions and // limitations under the License. -function gate(canvas, wasmFilePath, onQuit) { +// Initializes a Gate app. Resources are expected to be in the current directory. +// Arguments: +// wrapperDiv: div surrounding the gate canvas, user controls the size +// canvas: canvas that will fill up the wrapperDiv to display the app +// wasmFilePath: path to the WebAssembly file for the app +// onload: invoked when the app has finished loading +// onquit: invoked when a quit event is signalled from the app +// Returns a handle with the following: +// restart: function (with no arguments) that can be called to resume an app +// that was suspended via a quit signal +function gate(args) { + wrapperDiv = args.wrapperDiv; + canvas = args.canvas; + wasmFilePath = args.wasmFilePath; + onload = args.onload; + onquit = args.onQuit; const floatSize = 4; @@ -254,15 +269,18 @@ function gate(canvas, wasmFilePath, onQuit) { if (Module.loadingAudioCount == 0) { Module.currentlyRunning = true; Module.currentMusic = null; + if (onload) { + onload(); + } Module.gateWasmInit(); Module.gateWasmOnResize(canvas.width, canvas.height); setSpriteAttribPointers(); requestAnimationFrame(updateAndDraw); document.addEventListener('keydown', e => handleKeyEvent(e.key, true)); document.addEventListener('keyup', e => handleKeyEvent(e.key, false)); - document.addEventListener('mousemove', e => handleMouseMotion(e)); - document.addEventListener('mousedown', e => handleMouseEvent(e, true)); - document.addEventListener('mouseup', e => handleMouseEvent(e, false)); + canvas.addEventListener('mousemove', e => handleMouseMotion(e)); + canvas.addEventListener('mousedown', e => handleMouseEvent(e, true)); + canvas.addEventListener('mouseup', e => handleMouseEvent(e, false)); } } @@ -308,8 +326,8 @@ function gate(canvas, wasmFilePath, onQuit) { } function resizeCanvas() { - const newWidth = Math.max(window.innerWidth, 100); - const newHeight = Math.max(window.innerHeight, 100); + const newWidth = Math.max(wrapperDiv.clientWidth, 100); + const newHeight = Math.max(wrapperDiv.clientHeight, 100); if (canvas.width != newWidth || canvas.height != newHeight) { canvas.width = newWidth; canvas.height = newHeight; diff --git a/gate_build/src/html/index.html b/gate_build/src/html/index.html index 94b9a0c..96af3f8 100644 --- a/gate_build/src/html/index.html +++ b/gate_build/src/html/index.html @@ -5,18 +5,30 @@ <style> * { margin:0; padding:0; } html, body { width:100%; height:100%; background-color: black; } - canvas { display:block; background-color: black; } + canvas { display: block; background-color: black; } video { display: none; } + #gate-wrapper-div { display: block; width: 100%; height: 100%; background-color: black; overflow: hidden } + h1 { font-family:Arial,Helvetica,sans-serif;font-size:50px;color:white;text-align:center;padding-top:25px; } </style> </head> <body> - <canvas id="gate-canvas"></canvas> + <div id="gate-wrapper-div"> + <h1 id="loading-notice" style="display:block">Loading…</h1> + <canvas id="gate-canvas" style="display:none"></canvas> + </div> </body> <script src="howler.js"></script> <script src="gate.js"></script> <script> - gate(document.getElementById("gate-canvas"), "gate_app.wasm") + var gateDiv = document.getElementById("gate-wrapper-div"); + var gateCanvas = document.getElementById("gate-canvas"); + var loadingNotice = document.getElementById("loading-notice"); + function onload() { + loadingNotice.style.display = "none"; + gateCanvas.style.display = "block"; + } + gate({ wrapperDiv: gateDiv, canvas: gateCanvas, wasmFilePath: "gate_app.wasm", onload: onload }); </script> </html> |