tickcli-js 0.0.0-stage → 0.1.0

package/client/game3d.js

@@ -0,0 +1,109 @@
+/* tickcli three.js - three.js scenes in tickcli games. MIT. Load three.js first (it sets window.THREE; nothing of it is bundled here), then
+   room.js, game.js and this file, and call Game({context: "webgl", ...}). Everything here is optional glue; the game owns its scene.
+
+   var R3 = TickcliThree, renderer, scene, camera, others;
+   Game({
+     context: "webgl",
+     multiplayer: {max: 8, player: {x: [-20, 20], y: [0, 5], z: [-20, 20], qx: [-1, 1], qy: [-1, 1], qz: [-1, 1], qw: [-1, 1]}},
+     setup(g) {
+       renderer = renderer || R3.renderer(g);                       // a WebGLRenderer on the shell's canvas (once: setup runs every match)
+       scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(60, 1, 0.1, 200);
+       others = R3.pool(scene, function (p) { return new THREE.Mesh(box, mat); });
+     },
+     update(g, dt) { ... move my object ...; g.me.set(R3.pose(myObj)); },   // x, y, z and the quaternion, rounded (12 sends a second at most)
+     draw(g) {
+       R3.resize(renderer, camera, g);                              // drawing size, pixel ratio (the quality ladder) and camera aspect
+       others.sync(g.players.filter(function (p) { return !p.me; }));   // one object per player, placed where they are (eased), gone when they leave
+       renderer.render(scene, camera);
+     }
+   });
+
+   R3.renderer(g, opts)           new THREE.WebGLRenderer({canvas: g.canvas, antialias: true, alpha: true, ...opts})
+   R3.resize(renderer, camera, g) when g.w, g.h or g.dpr changed: setPixelRatio, setSize (the CSS size is left to the shell), camera aspect.
+                                  True when it changed something. Call it at the top of draw.
+   R3.place(obj, s)               obj.position from s.x, y, z; obj.quaternion from s.qx, qy, qz, qw (or obj.rotation.y from s.angle). Fields missing
+                                  in s are left alone.
+   R3.pose(obj, decimals)         {x, y, z, qx, qy, qz, qw} of obj (position to 2 decimals, quaternion to 3): pass it to g.me.set or into g.shared.
+   R3.pool(parent, make, drop)    objects kept in step with a list: pool.sync(list, pick) where list is g.players (an array, by id) or an object
+                                  keyed by id (g.shared.mobs). New ids get make(item, id) added to parent, every object is placed from pick(item)
+                                  (default: item.state for players, else the item itself), ids gone from the list are removed (drop(obj, id) to
+                                  free geometry). pool.get(id), pool.map (a Map), pool.clear().
+   Others are already eased by room.js (positions and the quaternion as one turn, the short way round); place() only copies. */
+(function () {
+  "use strict";
+  function three() {
+    var T = window.THREE;
+    if (!T || !T.WebGLRenderer) throw new Error("TickcliThree: load three.js first (window.THREE)");
+    return T;
+  }
+  var num = function (v) { return typeof v === "number" && v === v; };
+  var round = function (v, n) { var k = Math.pow(10, n); return Math.round(v * k) / k; };
+
+  function renderer(g, opts) {
+    var o = { canvas: g.canvas, antialias: true, alpha: true };
+    if (opts) for (var k in opts) o[k] = opts[k];
+    var r = new (three().WebGLRenderer)(o);
+    r.__cw = { w: 0, h: 0, d: 0 };
+    return r;
+  }
+
+  function resize(r, camera, g) {
+    var s = r.__cw || (r.__cw = { w: 0, h: 0, d: 0 }), w = Math.max(1, g.w || 1), h = Math.max(1, g.h || 1), d = g.dpr || 1;
+    if (s.w === w && s.h === h && s.d === d) return false;
+    s.w = w; s.h = h; s.d = d;
+    r.setPixelRatio(d);
+    r.setSize(w, h, false);   // false: the shell sizes the canvas on the page; this sets only its drawing buffer
+    if (camera && camera.isPerspectiveCamera) { camera.aspect = w / h; camera.updateProjectionMatrix(); }
+    return true;
+  }
+
+  function place(obj, s) {
+    if (!obj || !s) return obj;
+    var p = obj.position;
+    if (num(s.x)) p.x = s.x;
+    if (num(s.y)) p.y = s.y;
+    if (num(s.z)) p.z = s.z;
+    if (num(s.qx) && num(s.qy) && num(s.qz) && num(s.qw)) obj.quaternion.set(s.qx, s.qy, s.qz, s.qw);
+    else if (num(s.angle)) obj.rotation.y = s.angle;
+    return obj;
+  }
+
+  function pose(obj, decimals) {
+    var n = decimals == null ? 2 : decimals, p = obj.position, q = obj.quaternion;
+    return { x: round(p.x, n), y: round(p.y, n), z: round(p.z, n), qx: round(q.x, 3), qy: round(q.y, 3), qz: round(q.z, 3), qw: round(q.w, 3) };
+  }
+
+  function pool(parent, make, drop) {
+    var map = new Map();
+    function remove(id) {
+      var obj = map.get(id);
+      map.delete(id);
+      if (obj && obj.parent) obj.parent.remove(obj);
+      if (obj && drop) try { drop(obj, id); } catch (e) { console.error(e); }
+    }
+    return {
+      map: map,
+      get: function (id) { return map.get(id); },
+      sync: function (list, pick) {
+        var seen = {}, arr = Array.isArray(list), keys = arr ? null : Object.keys(list || {}), n = arr ? list.length : keys.length;
+        for (var i = 0; i < n; i++) {
+          var item = arr ? list[i] : list[keys[i]], id = arr ? item && item.id : keys[i];
+          if (id == null || !item || typeof item !== "object") continue;
+          id = String(id); seen[id] = 1;
+          var obj = map.get(id);
+          if (!obj) {
+            try { obj = make(item, id); } catch (e) { console.error(e); obj = null; }
+            if (!obj) continue;
+            parent.add(obj); map.set(id, obj);
+          }
+          place(obj, pick ? pick(item) : arr && item.state ? item.state : item);
+        }
+        map.forEach(function (_, id) { if (!seen[id]) remove(id); });
+        return map;
+      },
+      clear: function () { map.forEach(function (_, id) { remove(id); }); },
+    };
+  }
+
+  window.TickcliThree = { renderer: renderer, resize: resize, place: place, pose: pose, pool: pool };
+})();

package/client/relay.js

@@ -0,0 +1,196 @@
+/* tickcli relay.js. MIT. Runs in the TRUSTED page around a game frame (your app, or a wrapper page), never inside the game. For a game that is
+   itself the top page, run it in the same window with frame: () => ({ contentWindow: window }).
+   The game (room.js, maybe sandboxed with no network) says hello; this answers with a private MessageChannel port and from then on relays room messages between
+   that port and one WebSocket. The game never sees the socket address, a ticket, a pass or a user id: the connect() callback below makes those.
+
+   tickcliRelay({
+     frame: () => iframeElement,              // the game's frame (only its own window may say hello)
+     connect: async () => ({ url, first }),   // a fresh socket address, and an optional first message (the member ticket). Reject with an
+                                               // error that has final: true (and a reason) when trying again cannot help (signed out, the
+                                               // game deleted, rooms turned off): the game then shows the reason instead of retrying
+     guest: false,                             // public link visitor (may rename in the lobby)
+     name: () => "", onName: (n) => {},        // guests: the name to start with, and where to keep a new one
+     profile: { load: () => obj|null, save: (obj) => {} },   // optional: keep the player's saved profile here (a public link's visitor: in their own
+                                               // browser) instead of on the server; the game's profile and save messages never leave the page
+   }) -> { stop() }
+
+   Reconnects by itself (random, growing delay; at once when the tab comes back or the network returns), tells the server when the tab is hidden, and
+   checks the line: a ping every 5 s, no answer for 20 s = reconnect. Close codes 4001-4003 and 4005-4007 are final (the game shows why), so is a
+   final connect() error, and so is 10 minutes of failed tries in a row. A message over 16,000 bytes is not sent: the game gets error too_big. */
+(function (root) {
+  "use strict";
+  var FINAL = { 4001: 1, 4002: 1, 4003: 1, 4005: 1, 4006: 1, 4007: 1, 4010: 1 };
+  var FROM_GAME = { me: 1, shared: 1, act: 1, result: 1, fx: 1, alive: 1, name: 1, start: 1, end: 1, kick: 1, leave: 1, profile: 1, save: 1, world: 1, sync: 1, rooms: 1, rate: 1, stay: 1 };
+  var MAX_BYTES = 16000, GIVE_UP_MS = 600000;
+  var enc = typeof TextEncoder === "function" ? new TextEncoder() : null;
+  var bytes = function (t) { return enc ? enc.encode(t).length : unescape(encodeURIComponent(t)).length; };
+  var isObj = function (v) { return !!v && typeof v === "object" && !Array.isArray(v); };
+  function merge(into, patch) { for (var k in patch) { var v = patch[k]; if (v === null) delete into[k]; else if (isObj(v)) { if (!isObj(into[k])) into[k] = {}; merge(into[k], v); } else into[k] = v; } return into; }
+
+  function relay(o) {
+    var port = null, ws = null, join = null, stopped = false, attempt = 0, retryT = 0, pingT = 0, lastRx = 0, hiddenAt = 0, open = false, failSince = 0;
+    var rtts = [];   // the last 4 clock-ping round trips (ms): the best goes along with the next ping (the room list shows a host's link)
+    var portN = null;
+    var code0 = null, firstVer = "";
+    try { var mm = /(?:^|[#&])room=([A-Za-z0-9]{4,6})\b/.exec(location.hash || ""); if (mm) code0 = mm[1].toUpperCase(); } catch (e) { /* no hash */ }
+
+    function toGame(m) { if (port) try { port.postMessage(m); } catch (e) { /* port closed */ } }
+    function status(s, extra) { var m = { k: "status", s: s }; for (var k in extra || {}) m[k] = extra[k]; toGame(m); }
+    function sendRaw(obj) { if (ws && ws.readyState === 1) try { ws.send(JSON.stringify(obj)); return true; } catch (e) { /* closing */ } return false; }
+
+    function closeSocket() {
+      clearInterval(pingT); pingT = 0; open = false;
+      if (ws) { var w = ws; ws = null; w.onopen = w.onmessage = w.onclose = w.onerror = null; try { w.close(1000, "bye"); } catch (e) { /* gone */ } }
+    }
+    function giveUp(reason) { clearTimeout(retryT); closeSocket(); status("closed", { code: 0, reason: reason }); join = null; failSince = 0; }
+    function retry(code) {
+      if (stopped || !join) return;
+      clearTimeout(retryT);
+      if (!failSince) failSince = Date.now();
+      else if (Date.now() - failSince > GIVE_UP_MS) return giveUp("Could not reach the server for 10 minutes.");
+      // full jitter: anywhere between 0 and an exponentially growing cap (15 s), so many players do not come back at the same moment
+      // a restart (1012) or a busy server (1013): everyone is coming back at once, so the first try is spread over 0.3 to 3 s
+      var cap = Math.min(15000, 500 * Math.pow(2, attempt));
+      var wait = (code === 1012 || code === 1013) && attempt === 0 ? 300 + Math.random() * 2700 : Math.max(code === 1012 || code === 1013 ? 300 : code === 4004 ? 3000 : 0, Math.random() * cap);
+      attempt++;
+      status("retry", { code: code || 0, wait: Math.round(wait) });
+      retryT = setTimeout(connect, wait);
+    }
+    function connect() {
+      if (stopped || !join) return;
+      clearTimeout(retryT); closeSocket();
+      status("connecting");
+      Promise.resolve().then(o.connect).then(function (c) {
+        if (stopped) return;
+        var w;
+        try { w = new WebSocket(new URL(c.url, location.href).href.replace(/^http/, "ws")); } catch (e) { return retry(0); }
+        ws = w;
+        w.onopen = function () {
+          open = true; lastRx = Date.now();
+          if (c.first) sendRaw(c.first);
+          var j = { v: 1, t: "join", spec: join.spec, hidden: document.hidden === true };
+          if (join.code) j.code = join.code; else if (join.priv) j.private = true;
+          if (join.alone) j.alone = true;   // Play alone: a room of one with the player's own saved game
+          if (join.name) j.name = join.name;
+          if (join.f && join.f.length) j.f = join.f;   // what the page understands (effects in the frame, ...); old pages send none
+          sendRaw(j);
+          // 4 clock pings 250 ms apart (a good shared clock within a second of joining), then one every 5 s
+          var ping = function () { var r = rtts.length ? Math.min.apply(null, rtts) : 0; sendRaw(r ? { v: 1, t: "time", c: Date.now(), r: r } : { v: 1, t: "time", c: Date.now() }); };
+          ping();
+          for (var pi = 1; pi < 4; pi++) setTimeout(function () { if (ws === w && open) ping(); }, pi * 250);
+          clearInterval(pingT);
+          pingT = setInterval(function () {
+            if (Date.now() - lastRx > 20000) { closeSocket(); return retry(0); }   // a dead line (a phone that slept): start over
+            ping();
+          }, 5000);
+        };
+        w.onmessage = function (e) {
+          lastRx = Date.now();
+          var m; try { m = JSON.parse(e.data); } catch (x) { return; }
+          if (!m || typeof m !== "object") return;
+          if (m.t === "time" && typeof m.c === "number") { var rt = Date.now() - m.c; if (rt >= 0 && rt < 30000) { rtts.push(rt); if (rtts.length > 4) rtts.shift(); } }
+          if (m.t === "welcome") {
+            attempt = 0; failSince = 0; if (m.code) join.code = m.code; status("open", { code: m.code });
+            // the game was edited: after a restart (the page reloads, this relay stays) go back to this code, where the new version plays now
+            if (m.ver && firstVer && m.ver !== firstVer && m.code) code0 = m.code;
+            if (m.ver && !firstVer) firstVer = m.ver;
+          }
+          if (m.t === "newer" && join && join.code) code0 = join.code;
+          toGame({ k: "msg", m: m });
+        };
+        w.onclose = function (e) {
+          if (ws !== w) return;
+          ws = null; open = false; clearInterval(pingT);
+          if (FINAL[e.code]) { status("closed", { code: e.code, reason: String(e.reason || "") }); join = null; return; }
+          retry(e.code);
+        };
+        w.onerror = function () { /* onclose follows */ };
+      }).catch(function (err) {
+        if (stopped) return;
+        if (err && err.final) return giveUp(typeof err.reason === "string" && err.reason ? err.reason.slice(0, 200) : "Open this game again from the app.");
+        retry(0);
+      });
+    }
+
+    function onPort(e) {
+      var d = e.data;
+      if (!d || typeof d !== "object") return;
+      if (d.k === "open" && d.join && typeof d.join === "object") {
+        var feats = Array.isArray(d.join.f) ? d.join.f.filter(function (x) { return typeof x === "string" && x.length <= 8; }).slice(0, 16) : null;
+        join = { f: feats, spec: d.join.spec, code: typeof d.join.code === "string" ? d.join.code : code0, priv: d.join.priv === true, alone: d.join.alone === true, name: !o.guest ? "" : typeof d.join.name === "string" && d.join.name ? d.join.name.slice(0, 40) : o.name ? String(o.name() || "").slice(0, 40) : "" };
+        attempt = 0; failSince = 0; connect();
+      } else if (d.k === "send" && d.m && typeof d.m === "object" && FROM_GAME[d.m.t] === 1) {
+        if (o.profile && d.m.t === "profile") {
+          var cur = null; try { cur = o.profile.load(); } catch (x) { /* storage blocked */ }
+          toGame({ k: "msg", m: { t: "profile", p: isObj(cur) ? cur : {} } });
+          return;
+        }
+        if (o.profile && d.m.t === "save") {
+          try {
+            var base = o.profile.load(), merged = merge(isObj(base) ? base : {}, JSON.parse(JSON.stringify(d.m.p || {})));
+            if (JSON.stringify(merged).length <= 16000) o.profile.save(merged);
+          } catch (x) { /* storage blocked or full */ }
+          return;
+        }
+        var text; try { text = JSON.stringify(Object.assign({}, d.m, { v: 1 })); } catch (x) { return; }
+        if (bytes(text) > MAX_BYTES) toGame({ k: "msg", m: { t: "error", code: "too_big" } });   // the server would refuse it: say so, do not drop it silently
+        else if (ws && ws.readyState === 1) ws.send(text);
+        if (d.m.t === "leave") { join = null; closeSocket(); }
+        if (d.m.t === "name" && o.onName && typeof d.m.name === "string") try { o.onName(d.m.name); } catch (x) { /* storage blocked */ }
+      } else if (d.k === "invite-anyone" && typeof o.inviteAnyone === "function") {
+        try { o.inviteAnyone(); } catch (x) { /* the host app's own problem */ }   // the app shows its own way to let anyone in (a public link)
+      } else if (d.k === "invite" && typeof d.code === "string" && /^[A-Za-z0-9]{4,6}$/.test(d.code)) {
+        var link = location.origin + location.pathname + location.search + "#room=" + d.code;
+        var done = function (ok) { toGame({ k: "invite", ok: ok }); };
+        try { navigator.clipboard.writeText(link).then(function () { done(true); }, function () { done(false); }); } catch (x) { done(false); }
+      }
+    }
+
+    function onHello(e) {
+      var f = o.frame();
+      if (!f || e.source !== f.contentWindow || !e.data || e.data.tickcli !== "hello") return;
+      if (port && e.data.n === portN) return;   // the same game saying hello again before our answer arrived
+      // A (re)loaded game: drop the old line and give it a fresh private port.
+      if (port) { try { port.close(); } catch (x) { /* closed */ } }
+      join = null; closeSocket(); clearTimeout(retryT);
+      var ch = new MessageChannel();
+      port = ch.port1;
+      portN = e.data.n;
+      port.onmessage = onPort;
+      f.contentWindow.postMessage({ tickcli: "port", n: e.data.n }, "*", [ch.port2]);
+      toGame({ k: "info", code: code0, guest: !!o.guest, anyone: typeof o.inviteAnyone === "function" });
+    }
+    function onVis() {
+      if (document.hidden) { hiddenAt = Date.now(); sendRaw({ v: 1, t: "vis", hidden: true }); return; }
+      var away = hiddenAt ? Date.now() - hiddenAt : 0;
+      hiddenAt = 0;
+      if (!join) return;
+      if (!open) { attempt = 0; return connect(); }
+      sendRaw({ v: 1, t: "vis", hidden: false });
+      if (away > 5000) {
+        // after a while away the socket may be dead without knowing it: ask, and start over if no answer comes
+        var t0 = lastRx;
+        sendRaw({ v: 1, t: "time", c: Date.now() });
+        setTimeout(function () { if (join && lastRx === t0) { closeSocket(); attempt = 0; connect(); } }, 3000);
+      }
+    }
+    function onOnline() { if (join && !open) { attempt = 0; connect(); } }
+    function onShow(e) { if (e.persisted && join) { attempt = 0; connect(); } }
+
+    root.addEventListener("message", onHello);
+    document.addEventListener("visibilitychange", onVis);
+    root.addEventListener("online", onOnline);
+    root.addEventListener("pageshow", onShow);
+    return {
+      stop: function () {
+        stopped = true; join = null; clearTimeout(retryT); closeSocket();
+        if (port) try { port.close(); } catch (x) { /* closed */ }
+        root.removeEventListener("message", onHello);
+        document.removeEventListener("visibilitychange", onVis);
+        root.removeEventListener("online", onOnline);
+        root.removeEventListener("pageshow", onShow);
+      },
+    };
+  }
+  root.tickcliRelay = relay;
+})(typeof window !== "undefined" ? window : globalThis);