Update hosting-webclient.md

misc/hosting-webclient.md

@@ -16,6 +16,71 @@ For simplicitly,
 
 The play.html page is the trickiest part, because how to implement it is website-specific. (depends on how your website is structured, what webserver you use, etc)
 
-### Example play.html
+#### Embedding the game in play.html
 
-TODO
+You are required to have this HTML code somewhere in the page:
+```HTML
+<style>
+/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+#GameCanvas { display:block; border:0; padding:0; background-color: black; }
+</style>
+<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+<span id="logmsg"></span>
+
+<script type='text/javascript'>
+  // need to load IndexedDB before running the game
+  function preloadIndexedDB() {
+    addRunDependency('load-idb');
+    FS.mkdir('/classicube');
+    FS.mount(IDBFS, {}, '/classicube');
+    FS.syncfs(true, function(err) {
+        if (err) window.cc_idbErr = err;
+        removeRunDependency('load-idb');
+    })
+  }
+  
+  var Module = {
+    preRun: [ preloadIndexedDB ],
+    postRun: [],
+    arguments: [ {username}, {mppass}, {server ip}, {server port} ],
+    print: function(text) {
+      if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+      console.log(text);
+    },
+    printErr: function(text) {
+      if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+      console.error(text);
+    },
+    canvas: (function() { return document.getElementById('GameCanvas'); })(),
+    setStatus: function(text) {
+      console.log(text);
+      document.getElementById('logmsg').innerHTML = text;
+    },
+    totalDependencies: 0,
+    monitorRunDependencies: function(left) {
+      this.totalDependencies = Math.max(this.totalDependencies, left);
+      Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+    }
+  };
+  Module.setStatus('Downloading...');
+  window.onerror = function(event) {
+    // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+    Module.setStatus('Exception thrown, see JavaScript console');
+    Module.setStatus = function(text) {
+      if (text) Module.printErr('[post-exception status] ' + text);
+    };
+  };
+</script>
+<script async type="text/javascript" src="/static/classisphere.js"></script>
+```
+**To start in singleplayer instead, change `arguments` to just `arguments: [ {username} ],`**
+
+##### Variables
+* {username} - the player's username
+* {mppass} - if server verifies names, [mppass](https://wiki.vg/Classic_Protocol#User_Authentication). Otherwise leave as `''`.
+* {server ip} - the IP address of the server to connect to
+* {server port} - the port on the server to connect on (usually `'25565'`)
+
+### Full example in flask
+
+TODO [other page here]