arcadible 1.0.9 → 1.0.10

package/package.json

@@ -65,5 +65,5 @@
   "scripts": {
     "test": "node --test \"test/**/*.test.js\""
   },
-  "version": "1.0.9"
+  "version": "1.0.10"
 }

package/src/action/serve/tool.js

@@ -22,6 +22,7 @@ const commands = require("../../util/command");
 const error = require("../../util/error");
 const files = require("../../serve/files");
 const given = require("../../parser/given");
+const media = require("../../parser/media");
 const os = require("../../util/os");
 const phrase = require("../../phrase");
 const reload = require("../../serve/reload");
@@ -36,6 +37,7 @@ const configDir = os.configDir;
 const dirFiles = files.dirFiles;
 const join = path.join;
 const pathExists = fs.pathExists;
+const readFile = fs.promises.readFile;
 const relative = path.relative;
 const remoteFiles = remote.remoteFiles;
 const resolvePath = path.resolve;
@@ -92,6 +94,17 @@ const probe = async function (url) {
 
 // [function]
 
+// the project's store icon, .arcadible/icon.png, or null: found by its exact
+// name, as `arc deploy` finds it, each time it's asked for.
+const storeIcon = function (root) {
+  return async () => {
+    const { game } = await media(root);
+    return game.icon ? readFile(join(root, game.icon)) : null;
+  };
+};
+
+// [function]
+
 // listens, turning a port in use into its code.
 const listen = async function (options) {
   try {
@@ -125,6 +138,7 @@ const main = async function (conf) {
   const project = await given(conf);
   const game = project.game;
   const options = {
+    icon: storeIcon(root),
     info: {
       channel: CHANNEL,
       id: game.id ?? UNNAMED,

package/src/serve/page.js

@@ -3,7 +3,13 @@
 // (site/src/javascripts/arcadible/play/app/page.coffee), with the same
 // sandbox and permissions, and runs the play page's own host for the SDK,
 // so saves are kept by the page, across builds. It reloads the
-// game, and only the game, when told to.
+// game, and only the game, when told to. Its tab shows the game's store
+// icon, as the play page's does, or Arcadible's.
+
+// [import]
+
+const fs = require("node:fs");
+const path = require("node:path");
 
 // [import]
 
@@ -12,6 +18,8 @@ const serveGame = require("./game");
 // [use]
 
 const endWith = serveGame.endWith;
+const join = path.join;
+const readFile = fs.promises.readFile;
 
 // [declare]
 
@@ -23,6 +31,10 @@ const SANDBOX =
 // the page's own paths. Its origin isn't the game's, so they can't collide.
 const HOST = "/_arcadible/host.js";
 const RELOAD = "/_arcadible/reload";
+const ICON = "/_arcadible/icon";
+// the play page's own favicon.ico (app/src/web/arcadible-play/content), for a
+// game without a store icon, and for /favicon.ico, which browsers ask for.
+const FAVICON = join(__dirname, "favicon.ico");
 
 // [declare]
 
@@ -44,6 +56,24 @@ const scriptJson = function (value) {
 
 // [function]
 
+// the play page's favicon.ico, read once.
+let favicon = null;
+const readFavicon = function () {
+  favicon ??= readFile(FAVICON);
+  return favicon;
+};
+
+// [function]
+
+// `png`, the game's store icon, with the corners the play page's icons have
+// (h.border_radius in app/lib/python/offst/util.py: 22% of the size).
+const roundedIcon = function (png) {
+  const href = `data:image/png;base64,${png.toString("base64")}`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><clipPath id="c"><rect width="100" height="100" rx="22"/></clipPath><image href="${href}" width="100" height="100" preserveAspectRatio="xMidYMid slice" clip-path="url(#c)"/></svg>`;
+};
+
+// [function]
+
 const escapeHtml = function (text) {
   return text.replace(
     /[&<>"]/gu,
@@ -70,6 +100,7 @@ const html = function (game) {
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
     <title>${escapeHtml(game.title)}</title>
+    <link href="${ICON}" rel="icon">
     <style>html,body{margin:0;height:100%;overflow:hidden;background:#000}iframe{display:block;width:100%;height:100%;border:0;visibility:hidden}</style>
   </head>
   <body>
@@ -117,9 +148,11 @@ const html = function (game) {
 // [function]
 
 // the request handler for the page's origin. `reloads` keeps the pages
-// listening for a reload; `remote` has the host.
+// listening for a reload; `remote` has the host; `icon()` resolves with the
+// game's store icon, or null.
 const pageHandler = function ({
   game,
+  icon = () => Promise.resolve(null),
   onRemote = () => null,
   reloads,
   remote,
@@ -138,6 +171,26 @@ const pageHandler = function ({
       endWith(req, res, html(game));
       return Promise.resolve();
     }
+    if (pathname === ICON) {
+      // read for each request, so an icon added while serving shows on the
+      // next load.
+      return icon()
+        .catch(() => null)
+        .then(async (png) => {
+          const body = png ? roundedIcon(png) : await readFavicon();
+          res.writeHead(200, {
+            ...HEADERS,
+            "content-type": png ? "image/svg+xml" : "image/x-icon",
+          });
+          endWith(req, res, body);
+        });
+    }
+    if (pathname === "/favicon.ico") {
+      return readFavicon().then((body) => {
+        res.writeHead(200, { ...HEADERS, "content-type": "image/x-icon" });
+        endWith(req, res, body);
+      });
+    }
     if (pathname === RELOAD) {
       reloads.listen(res);
       return Promise.resolve();
@@ -173,4 +226,4 @@ const pageHandler = function ({
 
 // [export]
 
-module.exports = { ALLOW, SANDBOX, html, pageHandler };
+module.exports = { ALLOW, FAVICON, SANDBOX, html, pageHandler };

package/src/serve/server.js

@@ -45,11 +45,20 @@ const listen = function (handler, port, address) {
 // [function]
 
 // starts serving `files` for `info`, `{ id, channel, version, title }`, on
-// `port`, with Arcadible's own files from `remote`. With `src`, another
+// `port`, with Arcadible's own files from `remote`, and the tab's icon from
+// `icon()`, which resolves with a PNG or null. With `src`, another
 // server's page, it frames that instead, and serves no files. Resolves with
 // `{ page, game, reload(), close() }`: the page's origin, the game's URL,
 // and the controls.
-const serve = async function ({ files, info, onRemote, port, remote, src }) {
+const serve = async function ({
+  files,
+  icon,
+  info,
+  onRemote,
+  port,
+  remote,
+  src,
+}) {
   const origins = {
     game: `http://127.0.0.1:${port}`,
     page: `http://localhost:${port}`,
@@ -61,6 +70,7 @@ const serve = async function ({ files, info, onRemote, port, remote, src }) {
     : null;
   const forPage = pageHandler({
     game: { ...info, src: framed },
+    icon,
     onRemote,
     reloads,
     remote,