dewdrop-sdk 0.3.2 → 0.4.1

package/README.md

@@ -1,7 +1,7 @@
 # dewdrop-sdk
 
 The package that builds a three.js game for Dewdrop and runs it locally: the
-Vite plugin, model calls and multiplayer.
+Vite plugin, model calls, multiplayer and saves.
 
 ## Set up
 
@@ -19,11 +19,49 @@ export default { plugins: [dew()] };
 ```
 
 `npx dewctl init` sets up a new game this way, with the Dewdrop CLI beside it.
+To update a project, run `npm install -D dewdrop-sdk@latest`; saves need 0.4.0
+or later.
+
+## Saves locally
+
+On Dewdrop, `localStorage` and IndexedDB aren't local: nothing your game
+writes to them is stored in the player's browser or on their device, and they
+start empty each time a player opens your game. `saves.save()` keeps what they
+hold in Dewdrop's storage for that player, and `saves.load()` puts it back,
+in later uploads of your game too. A game with a `backend.js` keeps no saves:
+its state is its rooms', and both calls refuse with `NotSupportedError`.
+`npm run dev` does the same in your browser: every page load starts with
+`localStorage` and IndexedDB empty, and saves are kept in the browser, in a
+database named `dewdrop-saves` your game doesn't see, for the game
+`dewdrop.json` names and the player `?player=` names, across your edits. Tabs
+of one dev server share the browser's storage, so loading one empties the
+others'.
+
+## Rooms locally
+
+`npm run dev` runs your `backend.js` for each room the tabs join: `?room=`
+names the room, `?player=` the player, and `?players=` how many players a
+room the tab opens seats, 100 unless it says 1 to 100, as Dewdrop's rooms
+do; `?players=1` is singleplayer. A player is counted once however many tabs
+they play from, and a tab past a full room is refused, with the reason in
+the console. In the backend, `clients.capacity` is the room's size.
+
+## Sessions that end
+
+On Dewdrop a session can end ahead of time: for maintenance, or a newer
+version of your game published. Its player sees a countdown and reconnects
+on their own, and your game hears of it first, up to fifteen minutes
+before: `session.ending` from `dewdrop-sdk` is `{at, reason}`, `at` in
+milliseconds as `Date.now()` counts and `reason` `'restart'` or `'update'`,
+and an `ending` event fires each time it changes, its withdrawal to `null`
+included. Call `saves.save()` then to keep what the player has done. `npm
+run dev` ends no session ahead of time, so `session.ending` stays `null`
+there.
 
 ## Docs
 
-How to build your game, from the look to model calls, multiplayer and what
-works on Dewdrop, is in the docs: https://alpha.dewdrop.world/docs
+How to build your game, from the look to model calls, multiplayer, saves and
+what works on Dewdrop, is in the docs: https://alpha.dewdrop.world/docs
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dewdrop-sdk",
-  "version": "0.3.2",
-  "description": "Build a three.js game for Dewdrop: the Vite plugin, model calls and multiplayer.",
+  "version": "0.4.1",
+  "description": "Build a three.js game for Dewdrop: the Vite plugin, model calls, multiplayer and saves.",
   "license": "MIT",
   "type": "module",
   "exports": {

package/src/backend-host.js

@@ -11,7 +11,7 @@ import { pathToFileURL } from 'node:url';
 import { attachClients } from './clients.js';
 
 process.env.DEW_DEV_ORIGIN = workerData.origin;
-const start = attachClients(parentPort);
+const start = attachClients(parentPort, { capacity: workerData.capacity });
 await import(pathToFileURL(workerData.entry).href);
 process.on('uncaughtException', (error) => console.error(`uncaught ${error?.stack ?? error}`));
 start();

package/src/backend.js

@@ -7,7 +7,7 @@
 // past its cap. The page's URL says which room the tab joins and under
 // what name; on Dewdrop the game's page says which room, and the name is
 // the player's username.
-import { MAX_NET_CLIENT_FRAME_BYTES, createInbox, createOutbox, defineHandlers, label, side, unpack } from './net.js';
+import { MAX_NET_CLIENTS, MAX_NET_CLIENT_FRAME_BYTES, createInbox, createOutbox, defineHandlers, label, side, unpack } from './net.js';
 import { NO_CHANNEL } from './route.js';
 
 let channel = null;
@@ -58,20 +58,35 @@ function name(text) {
   return label(text.replace(/\p{Cc}/gu, '').trim());
 }
 
-// Where a page's URL joins its tab: the room `?room=` names and the name
-// `?player=` names, each held to Dewdrop's rule — the empty room without
+// The players a room seats as `?players=` names them: a whole number from
+// 1 to MAX_NET_CLIENTS, or the most without one or with any other.
+function players(text) {
+  return /^[0-9]{1,3}$/.test(text) && Number(text) >= 1 && Number(text) <= MAX_NET_CLIENTS ? Number(text) : MAX_NET_CLIENTS;
+}
+
+// Where a page's URL joins its tab: the room `?room=` names, the name
+// `?player=` names, and the players `?players=` says the room seats should
+// the tab make it, each held to Dewdrop's rule — the empty room without
 // one, or with one that names no room; unnamed without a name, or with one
 // that is nothing but space and control characters.
 export function joining(search) {
   const params = new URLSearchParams(search);
-  return { room: room(params.get('room') ?? ''), player: name(params.get('player') ?? '') };
+  return { room: room(params.get('room') ?? ''), player: name(params.get('player') ?? ''), players: players(params.get('players') ?? '') };
+}
+
+// Whether the page's game has a backend, as the plugin said; false until
+// it has.
+export function gameHasBackend() {
+  return hasBackend;
 }
 
 // Joins the backend of `room` under `player`'s name over `hot`, the page's
-// hot context, once the plugin has said whether the game has one:
-// `present` is that, `schedule` runs a function at the next animation
-// frame. Without a plugin there is no channel, and `send` says so.
-export function attachBackend(hot, { channel: routed, hasBackend: present, frame: schedule, room = '', player = '' }) {
+// hot context, once the plugin has said whether the game has one, a room
+// it makes seating `players`: `present` is that, `schedule` runs a
+// function at the next animation frame. Without a plugin there is no
+// channel, and `send` says so. A room that seats no more says so in the
+// console, as Dewdrop refuses the connect, and the tab's sends reach no one.
+export function attachBackend(hot, { channel: routed, hasBackend: present, frame: schedule, room = '', player = '', players = MAX_NET_CLIENTS }) {
   if (!routed) return;
   channel = hot;
   hasBackend = present;
@@ -83,5 +98,6 @@ export function attachBackend(hot, { channel: routed, hasBackend: present, frame
     draining = true;
     frame(deliver);
   });
-  hot.send('dew:join', { room, player });
+  hot.on('dew:full', ({ capacity }) => console.error(`[dewdrop] this room is full: it seats ${capacity === 1 ? '1 player' : `${capacity} players`}`));
+  hot.send('dew:join', { room, player, players });
 }

package/src/clients.js

@@ -1,15 +1,16 @@
 // `clients` on a developer's machine: the backend's side of the messages a
-// game exchanges with its clients, run by the plugin in a thread of the
-// dev server with a port to the plugin, which carries each message over
-// the socket to the tab it names. The thread ticks sixty times a second:
+// game exchanges with its clients, and the most players its room seats,
+// run by the plugin in a thread of the dev server with a port to the
+// plugin, which carries each message over the socket to the tab it names. The thread ticks sixty times a second:
 // each tick delivers what the clients sent as `join`, `leave`, `message`,
 // and `gap` events — a join naming the player's label — runs the
 // animation-frame callbacks, and sends the frame's messages.
-import { MAX_NET_BACKEND_FRAME_BYTES, NET_TICK_MS, ClientEvent, createInbox, createOutbox, defineHandlers, side, unpack } from './net.js';
+import { MAX_NET_BACKEND_FRAME_BYTES, MAX_NET_CLIENTS, NET_TICK_MS, ClientEvent, createInbox, createOutbox, defineHandlers, side, unpack } from './net.js';
 
 const outbox = createOutbox(MAX_NET_BACKEND_FRAME_BYTES);
 const inbox = createInbox();
 let port = null;
+let seats = 0;
 
 // A client number as the backend was told it: a whole number from one.
 function number(op, value) {
@@ -28,6 +29,12 @@ class Clients extends EventTarget {
     if (port === null) throw new DOMException('clients is unavailable in a client', 'NotSupportedError');
     outbox.push('clients.broadcast', 0, data);
   }
+  // The most players the room seats, as it was made: 1 for a room of one,
+  // a player counted once however many clients they play from.
+  get capacity() {
+    if (port === null) throw new DOMException('clients is unavailable in a client', 'NotSupportedError');
+    return seats;
+  }
 }
 defineHandlers(Clients.prototype, ['join', 'leave', 'message', 'gap']);
 
@@ -76,9 +83,11 @@ function frame() {
 // held until the returned function starts the ticks, which the host calls
 // once the backend has evaluated, so the first tick delivers what arrived
 // meanwhile, the first join included, to the handlers the module
-// registered. `tick` runs the frame once per tick from then on.
-export function attachClients(channel, { tick = (fn) => setInterval(fn, NET_TICK_MS) } = {}) {
+// registered. `tick` runs the frame once per tick from then on, and
+// `capacity` is the most players the room seats.
+export function attachClients(channel, { tick = (fn) => setInterval(fn, NET_TICK_MS), capacity = MAX_NET_CLIENTS } = {}) {
   port = channel;
+  seats = capacity;
   side.backend = true;
   if (typeof globalThis.requestAnimationFrame !== 'function') {
     globalThis.requestAnimationFrame = requestAnimationFrame;

package/src/fresh.js

@@ -0,0 +1,103 @@
+// A page the dev server serves starts with its storage empty, as a game
+// does on Dewdrop. The plugin puts `freshScript` in the page's head, where
+// it runs before any of the game's code: it empties `localStorage` there
+// and then, and deletes every IndexedDB database but the one the dev
+// server keeps saves in. Listing the databases takes a moment, so until
+// their deletes are asked for, the first open of each name asks for the
+// name's delete first, and the browser, which serves a name's opens and
+// deletes in the order they are asked for, hands the game an empty
+// database all the same. The script is `freshStorage`'s own text, so the
+// function imports nothing and is written without a `<`: the script
+// escapes every `<` it carries, since a `</script>` would end it early.
+
+// The database the dev server keeps saves in, out of the game's sight, and
+// the name of the global symbol the page's script leaves what `saves`
+// needs under.
+export const SAVES_DATABASE = 'dewdrop-saves';
+export const SAVES_STATE = 'dewdrop.saves';
+
+// Empties the storage of `scope`, the page's window, but `database`, and
+// leaves under `Symbol.for(state)`: `game`, `database`, `ready`, which
+// resolves once every other database is gone and rejects when one cannot
+// go, and `connected`, whether the page holds a database open or is
+// opening one.
+export function freshStorage(scope, { game, database, state }) {
+  scope.localStorage.clear();
+  const factory = scope.indexedDB;
+  const open = factory.open;
+  const list = factory.databases;
+  // The page's connections and the opens not yet answered.
+  const held = new Set();
+  // The names that are empty, or will be once the opens asked for so far
+  // are answered: the saves' own, which is never emptied, and each name
+  // whose delete has been asked for.
+  const cleared = new Set([database]);
+  const deletes = [];
+  let listed = false;
+  let refuse;
+  const refused = new Promise((resolve, reject) => { refuse = reject; });
+
+  function clear(name) {
+    cleared.add(name);
+    const request = factory.deleteDatabase(name);
+    deletes.push(new Promise((resolve, reject) => {
+      request.addEventListener('success', () => resolve());
+      request.addEventListener('error', () => reject(request.error));
+      // Another tab of the dev server holds the database: the browser
+      // deletes it once that tab lets go, and until then this page is not
+      // empty and its saves are refused.
+      request.addEventListener('blocked', () => {
+        const what = `another tab holds the IndexedDB database ${JSON.stringify(name)} open, so this page did not start empty`;
+        scope.console.warn(`[dewdrop] ${what}: close that tab, then reload this one`);
+        refuse(new DOMException(`${what}: close that tab, then reload this one`, 'InvalidStateError'));
+      });
+    }));
+  }
+
+  factory.open = function (name) {
+    if (!listed && !cleared.has(String(name))) clear(String(name));
+    const request = Reflect.apply(open, this, arguments);
+    held.add(request);
+    request.addEventListener('error', () => held.delete(request));
+    request.addEventListener('success', () => {
+      held.delete(request);
+      const db = request.result;
+      held.add(db);
+      db.addEventListener('close', () => held.delete(db));
+      const close = db.close;
+      db.close = function () {
+        held.delete(db);
+        return Reflect.apply(close, this, arguments);
+      };
+    });
+    return request;
+  };
+
+  const reset = Promise.resolve()
+    .then(() => Reflect.apply(list, factory, []))
+    .then((found) => {
+      for (const { name } of found) if (!cleared.has(name)) clear(name);
+      listed = true;
+      return Promise.allSettled(deletes);
+    });
+  const ready = Promise.race([refused, reset.then(() => Promise.all(deletes)).then(() => undefined)]);
+  ready.catch(() => {});
+
+  // The game lists its databases as they are once the deletes are done,
+  // without the saves' own.
+  factory.databases = function () {
+    return reset
+      .then(() => Reflect.apply(list, this, arguments))
+      .then((found) => found.filter((each) => each.name !== database));
+  };
+
+  Object.defineProperty(scope, Symbol.for(state), {
+    value: Object.freeze({ game, database, ready, connected: () => held.size !== 0 }),
+  });
+}
+
+// The script the plugin puts in a page the dev server serves, for `game`.
+export function freshScript(game) {
+  const options = { game, database: SAVES_DATABASE, state: SAVES_STATE };
+  return `(${freshStorage})(window, ${JSON.stringify(options)});`.replace(/</g, '\\u003c');
+}

package/src/index.js

@@ -2,11 +2,18 @@
 // `dewdrop-sdk` itself, so a game written against this runs unchanged there;
 // here each export carries its call through the Vite dev server: `llm`
 // over its route, `backend` over its socket to the backend the plugin
-// runs, and `clients`, in that backend, over its port back.
+// runs, `clients`, in that backend, over its port back, and `saves` into
+// the browser's own storage, which the plugin's script empties as each
+// page loads; `session` says when a session ends ahead of time, which here
+// none does.
 export { llm } from './llm.js';
 export { backend } from './backend.js';
 export { clients } from './clients.js';
+export { session } from './session.js';
 import { attachBackend, joining } from './backend.js';
+import { load, save } from './saves.js';
+
+export const saves = Object.freeze({ load, save });
 
 // Where the page's URL joins this tab: `player` is the label it names —
 // on Dewdrop, the player's username — the empty string when it names none
@@ -25,5 +32,6 @@ if (typeof document !== 'undefined' && import.meta.hot) {
     frame: (fn) => requestAnimationFrame(fn),
     room: joined.room,
     player: joined.player,
+    players: joined.players,
   });
 }

package/src/net.js

@@ -15,6 +15,9 @@ export const NET_RECORD_HEADER_BYTES = 16;
 // The most bytes a player's label takes: the name the player joined
 // under, which the backend hears on the join.
 export const MAX_NET_PLAYER_BYTES = 64;
+// The most players a room seats, and the most clients it holds: a room's
+// size is 1 to this.
+export const MAX_NET_CLIENTS = 100;
 // How often the local backend ticks: sixty times a second.
 export const NET_TICK_MS = 1000 / 60;
 

package/src/route.js

@@ -1,6 +1,7 @@
 // The contract between the package's two halves: the dev server route
 // `llm` calls, how its answers are told apart from a page served without
-// it, and where a backend finds the dev server from its thread.
+// it, where a backend finds the dev server from its thread, and what a
+// page served without the plugin says when it calls `backend` or `saves`.
 
 // The dev server route the local `llm.fetch` posts to, and the header
 // every answer from it carries, so a page served without the route — a
@@ -28,3 +29,8 @@ export function routeUrl() {
 // The message a client sends without a channel to its backend: a page
 // served without the plugin, or a build served by a static host.
 export const NO_CHANNEL = 'no backend channel: add the dew() plugin to vite.config.js, or run the game on Dewdrop';
+
+// The message `saves` gives in a page without the plugin's script, which
+// starts the page's storage empty: a page served without the plugin, or a
+// build served by a static host.
+export const NO_SAVES = 'no saves here: add the dew() plugin to vite.config.js, or run the game on Dewdrop';

package/src/saves.js

@@ -0,0 +1,254 @@
+// `saves` on a developer's machine: the browser stands in for Dewdrop's
+// storage. The plugin's script empties `localStorage` and IndexedDB as
+// each page the dev server serves loads, as Dewdrop does each time a
+// player opens a game; `save` keeps what they hold in a database of the
+// browser's own that the game does not see, under the game dewdrop.json
+// names and the player the page's URL names, and `load` puts it back.
+// Calls run in the order they are made, and the checks and their messages
+// are Dewdrop's, so a call that fails here fails there the same way.
+import { gameHasBackend, joining } from './backend.js';
+import { SAVES_STATE } from './fresh.js';
+import { side } from './net.js';
+import { NO_SAVES } from './route.js';
+
+// The store of the saves' database, which holds one snapshot per game and
+// player.
+const SNAPSHOTS = 'snapshots';
+
+// The player the page's URL names, as the page joins its backend under.
+const player = joining(typeof location === 'undefined' ? '' : location.search).player;
+
+// The end of the calls made so far, which the next call runs after, and
+// the loads among them not yet done.
+let last = Promise.resolve();
+let loads = 0;
+
+// Runs `run` once every call made before has settled and the page's
+// storage has started empty; refused at once in a game with a backend —
+// its backend and its tabs alike, as on Dewdrop, where such a game keeps
+// no saves — and in a page without the plugin's script.
+function inOrder(op, run) {
+  if (side.backend || gameHasBackend()) return Promise.reject(new DOMException('saves is unavailable in a game with a backend', 'NotSupportedError'));
+  const state = globalThis[Symbol.for(SAVES_STATE)];
+  if (state === undefined) return Promise.reject(new TypeError(`${op}: ${NO_SAVES}`));
+  const call = last.then(() => state.ready).then(() => run(state));
+  last = call.catch(() => {});
+  return call;
+}
+
+// What `localStorage` holds, as a save keeps it.
+function readLocal() {
+  const local = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    local.push([key, localStorage.getItem(key)]);
+  }
+  return local;
+}
+
+// Keeps what `localStorage` holds and what IndexedDB has committed for
+// this game and player, and resolves once it is stored. `localStorage` is
+// read at the call, as Dewdrop snapshots it, unless a load is under way,
+// whose result it then keeps.
+export function save() {
+  const early = loads === 0 && globalThis.localStorage !== undefined ? readLocal() : null;
+  return inOrder('saves.save', async ({ game, database }) => {
+    const local = early ?? readLocal();
+    const kept = await Promise.all((await indexedDB.databases()).map(({ name }) => read(name)));
+    const snapshot = { localStorage: local, databases: kept.filter((each) => each !== null) };
+    const db = await openSaves(database);
+    try {
+      await new Promise((resolve, reject) => {
+        const transaction = db.transaction(SNAPSHOTS, 'readwrite', { durability: 'strict' });
+        transaction.addEventListener('complete', () => resolve());
+        transaction.addEventListener('abort', () => reject(transaction.error ?? new DOMException('saves.save: the save was not stored', 'AbortError')));
+        transaction.objectStore(SNAPSHOTS).put(snapshot, [game, player]);
+      });
+    } finally {
+      db.close();
+    }
+  });
+}
+
+// Replaces `localStorage` and every IndexedDB database with what was saved
+// for this game and player and resolves true, or empties them and resolves
+// false when nothing was.
+export function load() {
+  loads += 1;
+  const done = () => { loads -= 1; };
+  return inOrder('saves.load', async ({ game, database, connected }) => {
+    const db = await openSaves(database);
+    let snapshot;
+    try {
+      snapshot = await answer(db.transaction(SNAPSHOTS, 'readonly').objectStore(SNAPSHOTS).get([game, player]));
+    } finally {
+      db.close();
+    }
+    const names = (await indexedDB.databases()).map(({ name }) => name);
+    // The check and the deletes in one go, so no open of the page's comes
+    // between them.
+    if (connected()) {
+      throw new DOMException('saves.load: an IndexedDB database is open: call saves.load() before opening IndexedDB', 'InvalidStateError');
+    }
+    await Promise.all(names.map((name) => remove(name)));
+    const saved = snapshot ?? { localStorage: [], databases: [] };
+    await Promise.all(saved.databases.map((each) => recreate(each)));
+    localStorage.clear();
+    for (const [key, value] of saved.localStorage) localStorage.setItem(key, value);
+    return snapshot !== undefined;
+  }).finally(done);
+}
+
+// What a request answers, once it does.
+function answer(request) {
+  return new Promise((resolve, reject) => {
+    request.addEventListener('success', () => resolve(request.result));
+    request.addEventListener('error', () => reject(request.error));
+  });
+}
+
+// The saves' database, made on its first open.
+function openSaves(database) {
+  const request = indexedDB.open(database, 1);
+  request.addEventListener('upgradeneeded', () => request.result.createObjectStore(SNAPSHOTS));
+  return answer(request).then((db) => {
+    db.addEventListener('versionchange', () => db.close());
+    return db;
+  });
+}
+
+// One database as it is committed: its version, each store's key path,
+// key generator and indexes, and its records, read in one transaction; or
+// null when it was deleted since it was listed. A delete or an upgrade
+// asked for meanwhile waits only for the read.
+function read(name) {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(name);
+    let gone = false;
+    request.addEventListener('upgradeneeded', () => {
+      gone = true;
+      request.transaction.abort();
+    });
+    request.addEventListener('error', () => (gone ? resolve(null) : reject(request.error)));
+    request.addEventListener('success', () => {
+      const db = request.result;
+      db.addEventListener('versionchange', () => db.close());
+      const kept = { name, version: db.version, stores: [] };
+      const names = [...db.objectStoreNames];
+      if (names.length === 0) {
+        db.close();
+        resolve(kept);
+        return;
+      }
+      const transaction = db.transaction(names, 'readonly');
+      for (const storeName of names) {
+        const store = transaction.objectStore(storeName);
+        const indexes = [...store.indexNames].map((indexName) => {
+          const index = store.index(indexName);
+          return { name: indexName, keyPath: index.keyPath, unique: index.unique, multiEntry: index.multiEntry };
+        });
+        const entry = { name: storeName, keyPath: store.keyPath, autoIncrement: store.autoIncrement, indexes, keys: [], values: [] };
+        kept.stores.push(entry);
+        answer(store.getAllKeys()).then((keys) => { entry.keys = keys; }, () => {});
+        answer(store.getAll()).then((values) => { entry.values = values; }, () => {});
+      }
+      transaction.addEventListener('complete', () => {
+        // Each key generator's next key, which no read shows, kept beside
+        // the records, as Dewdrop keeps it.
+        const generators = kept.stores.filter((entry) => entry.autoIncrement);
+        Promise.all(generators.map(async (entry) => { entry.next = await nextKey(db, entry.name); }))
+          .then(() => {
+            db.close();
+            resolve(kept);
+          }, (error) => {
+            db.close();
+            reject(error);
+          });
+      });
+      transaction.addEventListener('abort', () => {
+        db.close();
+        reject(transaction.error);
+      });
+    });
+  });
+}
+
+// The next key the key generator of `storeName` hands out. A browser shows
+// it to no read, so a record is added and the transaction aborted, which
+// takes back the record and the generator's step; null when the add fails.
+// The record is an empty object, which no index can take a key from but
+// one on the generator's own key path.
+function nextKey(db, storeName) {
+  return new Promise((resolve) => {
+    const transaction = db.transaction(storeName, 'readwrite');
+    let next = null;
+    const added = transaction.objectStore(storeName).add({});
+    added.addEventListener('success', () => {
+      next = added.result;
+      transaction.abort();
+    });
+    added.addEventListener('error', (event) => event.preventDefault());
+    transaction.addEventListener('abort', () => resolve(typeof next === 'number' ? next : null));
+    transaction.addEventListener('complete', () => resolve(null));
+  });
+}
+
+// A value holding `key` where `keyPath`, a key generator's, reads it, and
+// nothing an index could take another key from.
+function placeholder(keyPath, key) {
+  const value = {};
+  const names = keyPath.split('.');
+  let at = value;
+  for (const name of names.slice(0, -1)) at = at[name] = {};
+  at[names[names.length - 1]] = key;
+  return value;
+}
+
+// Deletes a database, refused while another tab of the dev server holds it
+// open: the browser deletes it once that tab lets go.
+function remove(name) {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.deleteDatabase(name);
+    request.addEventListener('success', () => resolve());
+    request.addEventListener('error', () => reject(request.error));
+    request.addEventListener('blocked', () => reject(heldElsewhere(name)));
+  });
+}
+
+// Makes a saved database again, at its version, with its stores, indexes
+// and records.
+function recreate({ name, version, stores }) {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(name, version);
+    request.addEventListener('upgradeneeded', () => {
+      const db = request.result;
+      for (const { name: storeName, keyPath, autoIncrement, indexes, keys, values, next } of stores) {
+        const store = db.createObjectStore(storeName, { keyPath, autoIncrement });
+        for (const index of indexes) {
+          store.createIndex(index.name, index.keyPath, { unique: index.unique, multiEntry: index.multiEntry });
+        }
+        for (let i = 0; i < keys.length; i++) {
+          if (keyPath === null) store.put(values[i], keys[i]);
+          else store.put(values[i]);
+        }
+        // The generator back where it was, past keys deleted since they
+        // were handed out: a key just below its next, put and deleted,
+        // moves it there.
+        if (typeof next === 'number' && next > 1 && !keys.includes(next - 1)) {
+          const put = keyPath === null ? store.put({}, next - 1) : store.put(placeholder(keyPath, next - 1));
+          put.addEventListener('error', (event) => event.preventDefault());
+          store.delete(next - 1);
+        }
+      }
+    });
+    request.addEventListener('blocked', () => reject(heldElsewhere(name)));
+    answer(request).then((db) => {
+      db.close();
+      resolve();
+    }, reject);
+  });
+}
+
+function heldElsewhere(name) {
+  return new DOMException(`saves.load: another tab holds the IndexedDB database ${JSON.stringify(name)} open`, 'InvalidStateError');
+}

package/src/serve.js

@@ -1,7 +1,10 @@
 // The dev server's backend host, its stand-in for Dewdrop. A thread runs
 // the project's backend.js for each room the tabs join, from the room's
 // first tab's join until five minutes after its last tab's leave, as on
-// Dewdrop, so a tab that comes back in that time rejoins it; the tabs are
+// Dewdrop, so a tab that comes back in that time rejoins it; a room seats
+// the players its first tab's page said, a player counted once however
+// many tabs they play from and an unnamed tab as one each, and refuses a
+// tab past them as Dewdrop refuses its connect; the tabs are
 // numbered from one per room, never twice while its thread runs; each
 // tab's frame of sends reaches its room's thread over the port
 // with the tab's number, and each of the thread's sends reaches the tab it
@@ -14,7 +17,7 @@
 import { existsSync, readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { Worker } from 'node:worker_threads';
-import { label } from './net.js';
+import { MAX_NET_CLIENTS, label } from './net.js';
 
 // How long a room's backend runs on after its last tab's leave, as on
 // Dewdrop.
@@ -47,12 +50,14 @@ export function createBackendHost({ entry, ws, watcher, origin = () => '', log =
   const rooms = new Map();
   const tabs = new Map();
 
-  // One room's backend: its thread from the room's first tab's join until
-  // EMPTY_ROOM_MS after its last tab's leave with none joining since, its
-  // tabs by number from one.
-  function createRoom(key) {
+  // One room's backend, seating `capacity` players: its thread from the
+  // room's first tab's join until EMPTY_ROOM_MS after its last tab's leave
+  // with none joining since, its tabs by number from one with their
+  // players' names.
+  function createRoom(key, capacity) {
     const name = key === '' ? 'the backend' : `the backend of room ${JSON.stringify(key)}`;
     const members = new Map();
+    const names = new Map();
     let worker = null;
     let next = 1;
     let broken = false;
@@ -68,7 +73,7 @@ export function createBackendHost({ entry, ws, watcher, origin = () => '', log =
 
     function start() {
       files = backendFiles(entry);
-      worker = new Worker(new URL('./backend-host.js', import.meta.url), { workerData: { entry, origin: origin() } });
+      worker = new Worker(new URL('./backend-host.js', import.meta.url), { workerData: { entry, origin: origin(), capacity } });
       const started = worker;
       started.on('message', (message) => {
         if (message.kind === 'send' && worker === started) deliver(message.sends);
@@ -89,6 +94,7 @@ export function createBackendHost({ entry, ws, watcher, origin = () => '', log =
       idle = null;
       for (const client of members.keys()) tabs.delete(client);
       members.clear();
+      names.clear();
       next = 1;
       if (ended !== null) ended.terminate();
     }
@@ -101,13 +107,26 @@ export function createBackendHost({ entry, ws, watcher, origin = () => '', log =
       broken = true;
     }
 
+    // The room's players, each once: its tabs' names, and each unnamed tab.
+    function seated() {
+      const players = [...names.values()];
+      return players.filter((player, at) => player === '' || players.indexOf(player) === at).length;
+    }
+
     const room = {
       join(client, player) {
         if (broken) return;
+        const returning = player !== '' && [...names.values()].includes(player);
+        if (members.size >= MAX_NET_CLIENTS || (!returning && seated() >= capacity)) {
+          log.error(`[dewdrop] a tab is refused ${name}: it seats ${capacity === 1 ? '1 player' : `${capacity} players`}`);
+          client.send('dew:full', { capacity });
+          return;
+        }
         clearTimeout(idle);
         idle = null;
         const number = next++;
         members.set(client, number);
+        names.set(client, player);
         tabs.set(client, room);
         if (worker === null) start();
         worker.postMessage([{ kind: 'join', client: number, player }]);
@@ -117,6 +136,7 @@ export function createBackendHost({ entry, ws, watcher, origin = () => '', log =
         const number = members.get(client);
         if (number === undefined) return;
         members.delete(client);
+        names.delete(client);
         tabs.delete(client);
         worker.postMessage([{ kind: 'leave', client: number }]);
         if (members.size === 0) {
@@ -151,14 +171,17 @@ export function createBackendHost({ entry, ws, watcher, origin = () => '', log =
   }
 
   const host = {
-    // A tab joins the room its page named under the name it gave; a page
-    // that named neither joins the empty room unnamed.
-    join(client, { room = '', player = '' } = {}) {
+    // A tab joins the room its page named under the name it gave, a room
+    // it makes seating the players its page said; a page that named
+    // neither joins the empty room unnamed, and one that named no size a
+    // room seating the most.
+    join(client, { room = '', player = '', players = MAX_NET_CLIENTS } = {}) {
       if (tabs.has(client)) return;
       const key = typeof room === 'string' ? room : '';
       let it = rooms.get(key);
       if (it === undefined) {
-        it = createRoom(key);
+        const capacity = Number.isInteger(players) && players >= 1 && players <= MAX_NET_CLIENTS ? players : MAX_NET_CLIENTS;
+        it = createRoom(key, capacity);
         rooms.set(key, it);
       }
       it.join(client, label(player));
@@ -171,7 +194,7 @@ export function createBackendHost({ entry, ws, watcher, origin = () => '', log =
     },
     close,
   };
-  ws.on('dew:join', (data, client) => host.join(client, { room: data?.room, player: data?.player }));
+  ws.on('dew:join', (data, client) => host.join(client, { room: data?.room, player: data?.player, players: data?.players }));
   ws.on('dew:send', (data, client) => host.receive(client, data.items ?? []));
   watcher.on('change', (file) => {
     if (files.has(resolve(file))) restart(`${file} changed`);

package/src/session.js

@@ -0,0 +1,17 @@
+// `session` on a developer's machine. On Dewdrop a session can end ahead of
+// time — for maintenance, or a newer version of its game published — and
+// hears of it first, up to fifteen minutes before: `session.ending` is
+// `{at, reason}`, `at` in milliseconds since the epoch as `Date.now()` counts
+// and `reason` `'restart'` or `'update'`, and an `ending` event fires each
+// time it changes, its withdrawal to null included, so a game can save and
+// say so. `npm run dev` ends no session ahead of time, so here `ending`
+// stays null and the event never fires; a game tries its handler by calling
+// it.
+import { defineHandlers } from './net.js';
+
+class Session extends EventTarget {
+  get ending() { return null; }
+}
+defineHandlers(Session.prototype, ['ending']);
+
+export const session = new Session();

package/src/vite.js

@@ -5,15 +5,17 @@
 // `ui/`, and the built page opened in the document by the entry; a game
 // with a backend gets a second chunk beside it, `backend.js`. In dev: the
 // route that carries a model call to its provider with the key from the
-// developer's environment, and the host that runs the game's backend for
-// the tabs that join it. Every other build is untouched. The plugin
+// developer's environment, the host that runs the game's backend for the
+// tabs that join it, and the script that starts each page's storage empty
+// for the game's saves. Every other build is untouched. The plugin
 // imports nothing from Vite itself, so it works linked from a checkout as
 // well as installed, on Vite 3 through 8.
-import { existsSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { ASSETS_DIR, BACKEND_FILE, ENTRY_FILE, PAGE_FILE, detectViteMajor, openPage, outputOptions } from './build.js';
 import { createLlmMiddleware } from './dev.js';
 import { loadKeys } from './env.js';
+import { freshScript } from './fresh.js';
 import { DEV_ROUTE } from './route.js';
 import { createBackendHost } from './serve.js';
 
@@ -36,10 +38,38 @@ export function backendEntry(root) {
   return null;
 }
 
+// `html` with `script` run before anything of the page's own: first in
+// the page, right after its prologue, which comes before every element
+// and runs nothing, so never in a template, a comment or a script of the
+// page's. A prologue is read as a browser reads it: a byte order mark,
+// whitespace, comments — ended by `-->` or `--!>`, or at once as `<!-->`
+// or `<!--->` — and the doctype and any other `<!` or `<?`, ended by the
+// first `>`. A `<meta charset>` of UTF-8, the encoding Vite serves every
+// page in, leads the script: a browser looks for one in a page's first
+// bytes, which the script fills.
+const PROLOGUE = /^\uFEFF?(?:[\t\n\f\r ]+|<!--(?:-?>|[\s\S]*?(?:--!?>|$))|<[!?][^>]*(?:>|$))*/;
+export function withFirstScript(html, script) {
+  const at = PROLOGUE.exec(html)[0].length;
+  return `${html.slice(0, at)}<meta charset="utf-8"><script>${script}</script>${html.slice(at)}`;
+}
+
+// The game a project's dewdrop.json names, which the dev server keeps its
+// saves under: a name as Dewdrop takes one, else none.
+const GAME_NAME = /^[a-z][a-z0-9-]{0,47}$/;
+export function projectGame(root) {
+  try {
+    const { game } = JSON.parse(readFileSync(resolve(root, 'dewdrop.json'), 'utf8'));
+    return typeof game === 'string' && GAME_NAME.test(game) ? game : '';
+  } catch {
+    return '';
+  }
+}
+
 export default function dew() {
   let dewBuild = false;
   let serving = false;
   let entry = null;
+  let game = '';
   // The dev server's backend host, from the server's start to its close.
   let host = null;
   return {
@@ -49,6 +79,7 @@ export default function dew() {
       entry = backendEntry(root);
       dewBuild = env.mode === DEW_MODE;
       serving = env.command === 'serve';
+      game = serving ? projectGame(root) : '';
       if (!dewBuild) {
         // Served as source, so the hot context the client's `backend`
         // joins over is injected as in the game's own modules.
@@ -109,11 +140,16 @@ export default function dew() {
       },
     },
     // The page the dev server serves is told whether the game has a
-    // backend, which the client's `backend` reads before it joins; a
-    // build's page, which no dev server serves, is left alone.
-    transformIndexHtml() {
+    // backend, which the client's `backend` reads before it joins, and
+    // starts with its storage empty, as on Dewdrop, from a script first
+    // in the page, before anything of its own.
+    // A build's page, which no dev server serves, is left alone.
+    transformIndexHtml(html) {
       if (!serving) return undefined;
-      return [{ tag: 'meta', attrs: { name: 'dew-backend', content: entry === null ? 'no' : 'yes' }, injectTo: 'head' }];
+      return {
+        html: withFirstScript(html, freshScript(game)),
+        tags: [{ tag: 'meta', attrs: { name: 'dew-backend', content: entry === null ? 'no' : 'yes' }, injectTo: 'head' }],
+      };
     },
     configureServer(server) {
       // The keys come from the project's own .env files and the