tickcli-js 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
-## 0.1.0 (unreleased)
+## 0.1.1
+
+A "Leave" button in the top bar of multiplayer games: out of the room at any time (mid-match with others, a second tap within 3 s confirms) into a new private room of your own, and the seat is freed at once. With `Game({ exit: "/" })` or `<meta name="tickcli-exit" content="/">` it reads "Exit" and goes to that URL. Fix: after leaving, a page opened from an invite link (`#room=CODE`) no longer goes back to that room.
+
+## 0.1.0
 
 Games hosted anywhere: `tickcli-js/remote` (`createRemote`, `createRemoteServer`, `originAllowed`). A deployment is a public id with the sites allowed to use it; the page pastes one tag (`/c/<id>.js`: relay, room.js and game.js set up for it), the server checks the page's Origin at the socket upgrade: https sites, http only for localhost when listed (`http://localhost:*`), one kind of deployment. Guests keep a random 128-bit key in the page's storage, sent as the socket's first message (no cookie). Each deployment is its own namespace with optional caps (rooms, players, KB a second) and `revoke(id)`. Hub: `roomsPerScope` option and `scopeStats(scope)`. A refused page shows the server's reason (game.js). e2e `remote.ts` (two browsers on another site).
 

package/client/game.js

@@ -9,6 +9,8 @@
      aspect: 1,                    // board width / height (1 = square)
      dpad: "auto",                 // "auto" (touch screens only) | "always" | "never"
      step: 1 / 60,                 // seconds per update call
+     exit: "/",                    // multiplayer: an "Exit" button in the top bar leaves the room and goes to this URL (also <meta name="tickcli-exit"
+                                   // content="/"> in the page). Without it the button reads "Leave": out of this room into a new private one (lobby)
      scores: false,                // true = at game over, hand the score to window.gameScores (a high-score board the host app provides, if any)
      scoresBetter: "high",         // "low" when a smaller score wins (a time)
      setup(g) { g.score = 0; ... },                // start or restart: reset ALL state here (multiplayer: the host may also set starting g.shared values here)
@@ -98,7 +100,7 @@
     // A box that scrolls or clips starts its own touch-action, so the overlays and the lobby say again that a quick double tap never zooms.
     ".tg-ov,.tg-lob{touch-action:pan-y}.tg button{touch-action:manipulation}.tg-pad button,.tg-acts button{touch-action:none}.tg input{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}" +
     ".tg-bar{flex:none;display:flex;align-items:center;gap:12px;padding:8px 12px;font-size:15px;border-bottom:1px solid rgba(148,163,184,.25)}" +
-    ".tg-bar b{font-size:17px;margin-right:auto}.tg-bar span{opacity:.8;font-variant-numeric:tabular-nums}.tg-bar button{min-height:36px;min-width:36px;border-radius:10px;border:1px solid rgba(148,163,184,.35);background:transparent;color:inherit;font:inherit;cursor:pointer}" +
+    ".tg-bar b{font-size:17px;margin-right:auto}.tg-bar span{opacity:.8;font-variant-numeric:tabular-nums}.tg-bar button.lv{padding:0 12px}.tg-bar button{min-height:36px;min-width:36px;border-radius:10px;border:1px solid rgba(148,163,184,.35);background:transparent;color:inherit;font:inherit;cursor:pointer}" +
     ".tg-area{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px}" +
     ".tg-board{position:relative;display:block;container-type:size}.tg-board canvas{display:block;width:100%;height:100%;border-radius:10px;background:rgba(15,23,42,.35)}" +
     ".tg-ov{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;gap:clamp(4px,2.5cqmin,10px);text-align:center;padding:clamp(6px,4cqmin,16px);border-radius:10px;background:rgba(8,12,24,.78);color:#f1f5f9;overflow:hidden}" +
@@ -305,6 +307,25 @@
       var xBtn = document.createElement("button"); xBtn.className = "x"; xBtn.title = "End game"; xBtn.setAttribute("aria-label", "End game"); xBtn.textContent = "End"; xBtn.hidden = true;
       pBtn.parentNode.insertBefore(xBtn, pBtn);
       var xArm = 0;
+      // Leave / Exit: out of this room at any time. With an exit URL (Game({exit}) or <meta name="tickcli-exit">) it goes there; without one the
+      // player lands in a new private room of their own (the lobby: other open rooms, join with a code, play alone). Mid-match with others, a second
+      // tap within 3 s confirms, so a stray tap does not drop someone out of a running game.
+      var exitMeta = document.querySelector('meta[name="tickcli-exit"]');
+      var EXIT = typeof o.exit === "string" && o.exit ? o.exit : exitMeta && exitMeta.content ? exitMeta.content : "";
+      var lBtn = document.createElement("button"); lBtn.className = "lv"; var lWord = EXIT ? "Exit" : "Leave";
+      lBtn.textContent = lWord; lBtn.title = EXIT ? "Leave this room and exit" : "Leave this room"; lBtn.setAttribute("aria-label", lBtn.title); lBtn.hidden = !R;
+      pBtn.parentNode.insertBefore(lBtn, pBtn);
+      var lArm = 0;
+      lBtn.addEventListener("click", function () {
+        var busy = g.state === "playing" && g.players.length > 1;
+        if (busy && Date.now() - lArm > 3000) { lArm = Date.now(); lBtn.textContent = lWord + "?"; setTimeout(function () { if (Date.now() - lArm >= 3000) lBtn.textContent = lWord; }, 3100); return; }
+        lArm = 0; lBtn.textContent = lWord;
+        if (m.solo && !EXIT) return;
+        if (EXIT) { try { if (S.code) R.leave(); } catch (e) { /* closed already */ } location.href = EXIT; return; }
+        if (S.code) R.leave();   // free the seat at once (switching rooms alone would hold it for seatHoldMs)
+        try { if (/room=/.test(location.hash)) history.replaceState(null, "", location.pathname + location.search); } catch (e) { /* sandboxed */ }
+        join({ priv: true });
+      });
       xBtn.addEventListener("click", function () {
         if (Date.now() - xArm > 3000) { xArm = Date.now(); xBtn.textContent = "End game?"; setTimeout(function () { if (Date.now() - xArm >= 3000) xBtn.textContent = "End"; }, 3100); return; }
         xArm = 0; xBtn.textContent = "End"; if (g.state === "playing" && g.isHost) m.end();

package/client/relay.js

@@ -135,7 +135,7 @@
         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 === "leave") { join = null; code0 = null; closeSocket(); }   // left on purpose: the page's #room= code no longer applies
         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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tickcli-js",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Live rooms for browser games: one player's browser runs the rules, a small Node hub keeps the shared state, membership and order. No game code on the server.",
   "license": "MIT",
   "repository": {