vimp-engine 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vimp-engine",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "VIMP — движок-приложение (мастер, P2P-транспорт, Worker-хост, мета, MVC-каркас клиента)",
   "license": "MIT",
   "repository": {

package/src/client/components/view/Lobby.js

@@ -1,5 +1,6 @@
 import Publisher from '../../../lib/Publisher.js';
-import { ENGINE_VERSION } from '../../lib/engineVersion.js';
+import { ENGINE_PACKAGE, ENGINE_VERSION } from '../../lib/engineVersion.js';
+import { renderPackageLink } from '../../lib/footerLink.js';
 
 // Singleton LobbyView
 
@@ -35,14 +36,16 @@ export default class LobbyView {
     this._leaderboardTotal = document.getElementById(elems.leaderboardTotalId);
     this._myPlacement = document.getElementById(elems.myPlacementId);
 
-    // футер лобби: строка статична на всё время жизни вкладки, поэтому
+    // футер лобби: содержимое статично на всё время жизни вкладки, поэтому
     // пишется здесь, а не через модель и publisher
     const version = document.getElementById(elems.versionId);
 
     if (version) {
-      version.textContent = `vimp-engine ${ENGINE_VERSION}`;
+      version.textContent = ENGINE_VERSION;
     }
 
+    renderPackageLink(document.getElementById(elems.linkId), ENGINE_PACKAGE);
+
     // заголовок игры для "<TITLE> TOP-N" (SVG-ориентир) — задаётся controller'ом
     // при выборе игры (сама модель не хранит title манифеста)
     this._gameTitle = '';

package/src/client/lib/engineVersion.js

@@ -7,5 +7,13 @@
 // бандлу (в npm-тарболле vimp-engine package.json есть всегда, поэтому
 // standalone SDK собирается у игры тем же импортом).
 import pkg from '../../../package.json' with { type: 'json' };
+import { homepageOf } from '../../lib/packageLink.js';
 
 export const ENGINE_VERSION = pkg.version;
+
+// метаданные для ссылки в футере лобби — та же форма, что мастер отдаёт про
+// пакет игры (GameCatalog), чтобы оба футера строил один resolvePackageLink
+export const ENGINE_PACKAGE = {
+  name: pkg.name,
+  homepage: homepageOf(pkg),
+};

package/src/client/lib/footerLink.js

@@ -0,0 +1,29 @@
+import { resolvePackageLink } from '../../lib/packageLink.js';
+
+// Ссылка в футере лобби и формы входа. Один рендер на оба экрана: лобби
+// подставляет пакет движка, форма входа — пакет игры из манифеста.
+//
+// Данных нет (standalone-манифест без метаданных пакета) — якорь гасится, а не
+// прячется: ячейка футера остаётся пустой, и раскладка space-between не едет.
+
+/**
+ * @param {HTMLAnchorElement|null} anchor - якорь футера
+ * @param {{name?: string, homepage?: string}|null} pkg - метаданные пакета
+ */
+export function renderPackageLink(anchor, pkg) {
+  if (!anchor) {
+    return;
+  }
+
+  const link = resolvePackageLink(pkg);
+
+  if (!link) {
+    anchor.textContent = '';
+    anchor.removeAttribute('href');
+
+    return;
+  }
+
+  anchor.textContent = link.label;
+  anchor.href = link.url;
+}

package/src/client/main.js

@@ -28,6 +28,7 @@ import VoteView from './components/view/Vote.js';
 import VoteCtrl from './components/controller/Vote.js';
 import { buildForm, mergeRoomDefaults, bindLiveErrors } from './lib/formBuilder.js';
 import { normalizeAuthParams } from './lib/authParams.js';
+import { renderPackageLink } from './lib/footerLink.js';
 import { createGameActivator } from './lib/gameActivator.js';
 import createAutostart from './lib/autostart.js';
 import { getBootConfig, resolveBootConfig } from './boot.js';
@@ -422,18 +423,22 @@ socketMethods[PS_AUTH_DATA] = data => {
 
   document.getElementById('logo').textContent = texts?.title || 'VIMP';
 
-  // версия пакета игры в футере формы входа. Здесь, а не в AuthView: его
-  // elems приходят из authSchema.elems игрового плагина, и футер каркаса —
-  // не его забота. Игра, собранная до появления packageVersion, оставляет
-  // строку пустой (#auth-link держит раскладку через space-between)
+  // футер формы входа: версия и ссылка пакета ИГРЫ. Здесь, а не в AuthView:
+  // его elems приходят из authSchema.elems игрового плагина, и футер каркаса
+  // — не его забота. Метаданные кладёт в манифест мастер (GameCatalog читает
+  // package.json пакета); в standalone-манифесте их может не быть — тогда
+  // ячейки пустые, раскладку space-between это не ломает
   const authVersion = document.getElementById('auth-version');
 
   if (authVersion) {
-    const packageVersion = activeGameManifest?.packageVersion;
-
-    authVersion.textContent = packageVersion ? `v${packageVersion}` : '';
+    authVersion.textContent = activeGameManifest?.packageVersion ?? '';
   }
 
+  renderPackageLink(document.getElementById('auth-package-link'), {
+    name: activeGameManifest?.packageName,
+    homepage: activeGameManifest?.packageHomepage,
+  });
+
   // память клиента (localStorage) + принудительное значение поля с
   // единственным вариантом. Здесь, а не в AuthView: solo-путь ниже отвечает
   // хосту вообще без формы и обязан прийти к тем же значениям

package/src/client/style.css

@@ -473,7 +473,12 @@ body.hide-cursor {
   margin: 4px auto;
 }
 
-#auth-link {
+/* футеры лобби и формы входа: одна и та же полоса из трёх ячеек —
+   ссылка на пакет, его версия, копирайт. Оба заполняет JS, поэтому вид
+   держится в одном месте (#lobby-footer лежит в секции lobby ниже только
+   разметкой) */
+#auth-link,
+#lobby-footer {
   font-size: 9px;
   height: 15px;
   margin: 0;
@@ -483,26 +488,31 @@ body.hide-cursor {
   justify-content: space-between;
 }
 
-#auth-link p {
+#auth-link p,
+#lobby-footer p {
   margin: 0;
 }
 
-#auth-link p a {
+#auth-link p a,
+#lobby-footer p a {
   color: #ff0;
 }
 
-/* три колонки: GitHub — версия игры — копирайт. Позициями заведует
-   space-between, а не nth-child: средний элемент бывает пустым (игра
-   собрана без packageVersion), и порядковые правила тогда съезжали бы */
-#auth-link p:first-child {
+/* позициями заведует space-between, а не nth-child: любая из ячеек бывает
+   пустой (у пакета игры может не быть метаданных), и порядковые правила
+   тогда съезжали бы */
+#auth-link p:first-child,
+#lobby-footer p:first-child {
   text-align: left;
 }
 
-#auth-version {
+#auth-version,
+#lobby-version {
   text-align: center;
 }
 
-#auth-link p:last-child {
+#auth-link p:last-child,
+#lobby-footer p:last-child {
   text-align: right;
 }
 
@@ -783,18 +793,10 @@ body.hide-cursor {
   flex-shrink: 0;
 }
 
-/* версия пакета движка под панелями — тем же мелким кеглем, что и футер
-   формы входа (#auth-link) */
+/* полосу футера рисуют общие с #auth-link правила в секции auth; здесь —
+   только отступ от панелей */
 #lobby-footer {
-  font-size: 9px;
-  padding: 0 5px;
   margin: 6px 0 10px;
-  text-align: center;
-  text-shadow: none;
-}
-
-#lobby-footer p {
-  margin: 0;
 }
 
 @media (max-width: 800px) {

package/src/client/views/gameShell.js

@@ -55,18 +55,9 @@ const SHELL = [
             tag: 'div',
             id: 'auth-link',
             children: [
-              {
-                tag: 'p',
-                children: [
-                  {
-                    tag: 'a',
-                    attrs: { href: 'https://github.com/lgick/vimp' },
-                    text: 'GitHub',
-                  },
-                ],
-              },
-              // версия пакета игры (manifest.packageVersion) — текст пишет
-              // main.js по AUTH_DATA
+              // ссылка и версия пакета ИГРЫ — заполняет main.js по AUTH_DATA
+              // из метаданных пакета в манифесте
+              { tag: 'p', children: [{ tag: 'a', id: 'auth-package-link' }] },
               { tag: 'p', id: 'auth-version' },
               { tag: 'p', text: `© ${new Date().getFullYear()} VIMP` },
             ],

package/src/client/views/includes/auth.pug

@@ -15,9 +15,10 @@ div#auth
     div#auth-informs
 
     div#auth-link
+      //- ссылка и версия пакета ИГРЫ (мастер кладёт их в манифест, читая
+      //- package.json пакета) — проставляет main.js по AUTH_DATA; без данных
+      //- ячейки остаются пустыми
       p
-        a(href='https://github.com/lgick/vimp') GitHub
-      //- версия пакета игры (manifest.packageVersion): проставляет main.js,
-      //- у игры, собранной до появления поля, строка остаётся пустой
+        a#auth-package-link
       p#auth-version
       p © #{new Date().getFullYear()} VIMP

package/src/client/views/includes/lobby.pug

@@ -55,6 +55,10 @@ div#lobby(style='display:none')
               span#leaderboard-total
             ol#lobby-leaderboard-list
             p#lobby-my-placement
-    //- футер: версию пакета движка проставляет LobbyView (engineVersion.js)
+    //- футер: ссылку и версию пакета движка проставляет LobbyView
+    //- (engineVersion.js + lib/packageLink.js)
     div#lobby-footer
+      p
+        a#lobby-link
       p#lobby-version
+      p © #{new Date().getFullYear()} VIMP

package/src/config/lobby.js

@@ -98,8 +98,9 @@ export default {
     myPlacementId: 'lobby-my-placement',
 
     // футер: версия npm-пакета движка, запечённая в бандл при сборке
-    // (client/lib/engineVersion.js)
+    // (client/lib/engineVersion.js), и ссылка на его страницу
     versionId: 'lobby-version',
+    linkId: 'lobby-link',
   },
 
   // создание комнаты (хост в этой же вкладке); лимит игроков/время

package/src/lib/packageLink.js

@@ -0,0 +1,126 @@
+// Ссылка на пакет для футеров лобби и формы входа: движок показывает рядом
+// npm-версию, и клик по соседней ячейке должен вести на страницу этого пакета.
+//
+// Источник — `homepage`/`repository` его package.json, но объявлены они не у
+// всех (у @vimp-games/snakes нет ни того, ни другого), а footer без ссылки
+// выглядит поломкой. Поэтому фолбэк — страница пакета на npm: она выводится из
+// одного лишь имени, то есть существует всегда, и сама ведёт на репозиторий,
+// если он объявлен.
+//
+// Модуль изоморфный: мастер зовёт homepageOf для пакета игры (GameCatalog),
+// клиент — для собственного package.json движка (client/lib/engineVersion.js).
+
+const NPM_PACKAGE_BASE = 'https://www.npmjs.com/package/';
+
+/**
+ * Сырой адрес проекта из package.json: homepage, иначе repository.
+ * @param {Object} pkg - разобранный package.json
+ * @returns {string|null} адрес как объявлен (нормализует resolvePackageLink)
+ */
+export function homepageOf(pkg) {
+  if (!pkg || typeof pkg !== 'object') {
+    return null;
+  }
+
+  const { homepage, repository } = pkg;
+
+  if (typeof homepage === 'string' && homepage.trim()) {
+    return homepage;
+  }
+
+  // repository бывает и строкой ("github:user/repo"), и объектом {type, url}
+  if (typeof repository === 'string') {
+    return repository;
+  }
+
+  if (repository && typeof repository.url === 'string') {
+    return repository.url;
+  }
+
+  return null;
+}
+
+/**
+ * Ссылка футера по метаданным пакета.
+ * @param {{name?: string, homepage?: string}} [pkg] - имя пакета и сырой homepage
+ * @returns {{url: string, label: string}|null} null, если нет даже имени
+ */
+export function resolvePackageLink(pkg) {
+  const { name, homepage } = pkg ?? {};
+  const declared = normalize(homepage);
+
+  if (declared) {
+    return { url: declared, label: labelFor(declared) };
+  }
+
+  if (typeof name === 'string' && name.trim()) {
+    return { url: `${NPM_PACKAGE_BASE}${name.trim()}`, label: 'npm' };
+  }
+
+  return null;
+}
+
+// приводит объявленный адрес к https-виду; всё, что после нормализации не
+// http(s) (git@ без известной формы, file:, мусор), — не ссылка, а фолбэк
+function normalize(raw) {
+  if (typeof raw !== 'string') {
+    return null;
+  }
+
+  let url = raw.trim();
+
+  if (!url) {
+    return null;
+  }
+
+  // npm-шорткаты: "github:user/repo", "gitlab:...", "bitbucket:..."
+  const shorthand = /^(github|gitlab|bitbucket):([\w.-]+\/[\w.-]+)$/.exec(url);
+
+  if (shorthand) {
+    const hosts = {
+      github: 'github.com',
+      gitlab: 'gitlab.com',
+      bitbucket: 'bitbucket.org',
+    };
+
+    return `https://${hosts[shorthand[1]]}/${shorthand[2]}`;
+  }
+
+  url = url.replace(/^git\+/, '');
+
+  // scp-форма git@host:user/repo — двоеточие здесь разделитель, не порт
+  const scp = /^git@([^:/]+):(.+)$/.exec(url);
+
+  if (scp) {
+    url = `https://${scp[1]}/${scp[2]}`;
+  }
+
+  url = url
+    .replace(/^ssh:\/\/git@/, 'https://')
+    .replace(/^ssh:\/\//, 'https://')
+    .replace(/^git:\/\//, 'https://');
+
+  if (!/^https?:\/\//.test(url)) {
+    return null;
+  }
+
+  return (
+    url
+      .replace(/\.git(?=$|[#?])/, '')
+      // npm сам дописывает "#readme" в homepage при генерации package.json
+      .replace(/#readme$/, '')
+      .replace(/\/+$/, '')
+  );
+}
+
+function labelFor(url) {
+  if (/^https?:\/\/(www\.)?github\.com\//.test(url)) {
+    return 'GitHub';
+  }
+
+  if (url.startsWith(NPM_PACKAGE_BASE)) {
+    return 'npm';
+  }
+
+  return 'Website';
+}