vimp-engine 0.14.4 → 0.16.0

package/src/client/style.css

@@ -453,15 +453,19 @@ body.hide-cursor {
   z-index: 8;
 }
 
-#auth-error {
+/* общий стиль ошибок формы — #lobby-error и #auth-error (formBuilder.js
+   renderFormErrors рендерит в них один и тот же список <div>) */
+.form-error {
   color: #e00;
   font-size: 12px;
   line-height: 15px;
   margin: 0 5px;
 }
 
-#auth-error:empty {
-  margin: 0;
+/* пустой блок ошибок не должен занимать место: #lobby-error — флекс-элемент
+   #lobby-create с gap:8px, и одного обнуления margin там мало */
+.form-error:empty {
+  display: none;
 }
 
 #auth-enter {
@@ -487,11 +491,18 @@ body.hide-cursor {
   color: #ff0;
 }
 
-#auth-link p:nth-child(1) {
+/* три колонки: GitHub — версия игры — копирайт. Позициями заведует
+   space-between, а не nth-child: средний элемент бывает пустым (игра
+   собрана без packageVersion), и порядковые правила тогда съезжали бы */
+#auth-link p:first-child {
   text-align: left;
 }
 
-#auth-link p:nth-child(2) {
+#auth-version {
+  text-align: center;
+}
+
+#auth-link p:last-child {
   text-align: right;
 }
 
@@ -621,14 +632,6 @@ body.hide-cursor {
   margin: 16px auto 0;
 }
 
-#lobby-error {
-  margin: 8px 0 0;
-  color: #d98282;
-  font-size: 12px;
-  line-height: 16px;
-  text-align: center;
-}
-
 #lobby-search {
   display: block;
   width: 100%;
@@ -716,6 +719,14 @@ body.hide-cursor {
   color: #aaa;
 }
 
+/* колоночная обёртка панелей и футера: #lobby центрирует содержимое как
+   флекс-строка, поэтому футер обязан лежать в одном столбце с .lobby-grid,
+   а не быть её соседом */
+.lobby-column {
+  display: flex;
+  flex-direction: column;
+}
+
 /* два столбца лобби (lobby-page-plan): настройки/создание слева, вкладки
    Active Servers / Leaderboard справа; собственная ширина панелей
    переопределяет фиксированный .card { width:256px } (id сильнее класса);
@@ -772,6 +783,20 @@ body.hide-cursor {
   flex-shrink: 0;
 }
 
+/* версия пакета движка под панелями — тем же мелким кеглем, что и футер
+   формы входа (#auth-link) */
+#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) {
   .lobby-grid {
     flex-direction: column;
@@ -779,6 +804,12 @@ body.hide-cursor {
     gap: unset;
   }
 
+  /* в столбик обёртка тянется на всю ширину: иначе она сжалась бы по
+     содержимому и увела бы панели из центра */
+  .lobby-column {
+    width: 100%;
+  }
+
   /* в столбик высоту строкой никто не задаёт — возвращаем слой в поток,
      иначе absolute-слой схлопнулся бы в 0 */
   .lobby-browser-inner {

package/src/client/views/gameShell.js

@@ -43,7 +43,7 @@ const SHELL = [
         children: [
           // заголовок и help-секции заполняет AuthView из authSchema.texts
           { tag: 'h2', id: 'auth-title' },
-          { tag: 'div', id: 'auth-error' },
+          { tag: 'div', id: 'auth-error', attrs: { class: 'form-error' } },
           { tag: 'div', id: 'auth-fields' },
           {
             tag: 'input',
@@ -65,6 +65,9 @@ const SHELL = [
                   },
                 ],
               },
+              // версия пакета игры (manifest.packageVersion) — текст пишет
+              // main.js по AUTH_DATA
+              { tag: 'p', id: 'auth-version' },
               { tag: 'p', text: `© ${new Date().getFullYear()} VIMP` },
             ],
           },

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

@@ -6,7 +6,7 @@ div#auth
 
     h2#auth-title
 
-    div#auth-error
+    div#auth-error.form-error
 
     div#auth-fields
 
@@ -17,4 +17,7 @@ div#auth
     div#auth-link
       p
         a(href='https://github.com/lgick/vimp') GitHub
+      //- версия пакета игры (manifest.packageVersion): проставляет main.js,
+      //- у игры, собранной до появления поля, строка остаётся пустой
+      p#auth-version
       p © #{new Date().getFullYear()} VIMP

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

@@ -1,53 +1,60 @@
 //- скрыт по умолчанию: открывается из main.js только после успешного логина
 //- в #lobby-auth (Этап B2, LobbyAuthCtrl 'authenticated')
 div#lobby(style='display:none')
-  div.lobby-grid
-    //- левая панель: профиль + форма создания комнаты (lobby-page-plan)
-    div#lobby-setup-panel.card
-      h2= 'VIMP'
-      //- бейдж входа (Этап B2): управляется LobbyAuthView, показывается
-      //- вместе с #lobby после успешной авторизации
-      div#lobby-user
-        div
-          span= 'Signed in as '
-          b#lobby-user-nick
-        input#lobby-user-logout(type='button', value='Sign out')
-      hr.lobby-divider
-      h3.lobby-section-title= 'HOST A GAME'
-      div#lobby-create
-        //- селектор игры (lobby-page-plan): рабочий с первой же игрой в
-        //- каталоге мастера, а не только когда их несколько
-        div.form-row
-          label.form-label(for='lobby-game')= 'Select Game'
-          select#lobby-game.field-select
-        div.form-row
-          label.form-label(for='lobby-name')= 'Server name'
-          input#lobby-name.field-text(type='text', maxlength='30')
-        //- поля настроек комнаты генерируются по явной схеме roomForm
-        //- манифеста активной игры (docs/en/plugin-api.md "Form schema")
-        div#lobby-fields
-        input#lobby-host(type='button', value='Create server')
-        //- отказ загрузки плагина выбранной игры: восстановим (другая игра,
-        //- повторный клик), поэтому строкой в форме, а не #tech-informer —
-        //- тот кроет вкладку непрозрачным слоем и рассчитан на терминальные
-        //- причины
-        p#lobby-error(style='display:none')
-    //- правая панель: вкладки Active Servers / Leaderboard (lobby-page-plan)
-    div#lobby-browser-panel.card
-      //- абсолютный слой: высоту .card задаёт форма слева (stretch), а
-      //- список внутри скроллится, не раздувая карточку (lobby-page-plan)
-      div.lobby-browser-inner
-        div.lobby-tabs-header
-          input#btn-show-servers.lobby-tab-btn.active(type='button', value='Active Servers')
-          input#btn-show-leaderboard.lobby-tab-btn(type='button', value='Leaderboard')
-        div#lobby-servers-content
-          input#lobby-search.field-text(type='text', placeholder='Search servers…')
-          ul#lobby-list
-          p#lobby-empty= 'No servers available'
-          input#lobby-more(type='button', value='Load more')
-        div#lobby-leaderboard-content(style='display:none')
-          div.lobby-leaderboard-header
-            span#leaderboard-title
-            span#leaderboard-total
-          ol#lobby-leaderboard-list
-          p#lobby-my-placement
+  //- колоночная обёртка: сам #lobby — флекс-строка, центрирующая содержимое,
+  //- и футер под панелями иначе встал бы третьей колонкой рядом с ними
+  div.lobby-column
+    div.lobby-grid
+      //- левая панель: профиль + форма создания комнаты (lobby-page-plan)
+      div#lobby-setup-panel.card
+        h2= 'VIMP'
+        //- бейдж входа (Этап B2): управляется LobbyAuthView, показывается
+        //- вместе с #lobby после успешной авторизации
+        div#lobby-user
+          div
+            span= 'Signed in as '
+            b#lobby-user-nick
+          input#lobby-user-logout(type='button', value='Sign out')
+        hr.lobby-divider
+        h3.lobby-section-title= 'HOST A GAME'
+        div#lobby-create
+          //- селектор игры (lobby-page-plan): рабочий с первой же игрой в
+          //- каталоге мастера, а не только когда их несколько
+          div.form-row
+            label.form-label(for='lobby-game')= 'Select Game'
+            select#lobby-game.field-select
+          div.form-row
+            label.form-label(for='lobby-name')= 'Server name'
+            input#lobby-name.field-text(type='text', maxlength='30')
+          //- поля настроек комнаты генерируются по явной схеме roomForm
+          //- манифеста активной игры (docs/en/plugin-api.md "Form schema")
+          div#lobby-fields
+          //- ошибки формы (formBuilder.renderFormErrors) и отказ загрузки
+          //- плагина выбранной игры — строкой в форме, а не в #tech-informer:
+          //- тот кроет вкладку непрозрачным слоем и рассчитан на терминальные
+          //- причины, а эти восстановимы (поправить поле, другая игра,
+          //- повторный клик). Над кнопкой — рядом с полями, к которым относятся
+          div#lobby-error.form-error
+          input#lobby-host(type='button', value='Create server')
+      //- правая панель: вкладки Active Servers / Leaderboard (lobby-page-plan)
+      div#lobby-browser-panel.card
+        //- абсолютный слой: высоту .card задаёт форма слева (stretch), а
+        //- список внутри скроллится, не раздувая карточку (lobby-page-plan)
+        div.lobby-browser-inner
+          div.lobby-tabs-header
+            input#btn-show-servers.lobby-tab-btn.active(type='button', value='Active Servers')
+            input#btn-show-leaderboard.lobby-tab-btn(type='button', value='Leaderboard')
+          div#lobby-servers-content
+            input#lobby-search.field-text(type='text', placeholder='Search servers…')
+            ul#lobby-list
+            p#lobby-empty= 'No servers available'
+            input#lobby-more(type='button', value='Load more')
+          div#lobby-leaderboard-content(style='display:none')
+            div.lobby-leaderboard-header
+              span#leaderboard-title
+              span#leaderboard-total
+            ol#lobby-leaderboard-list
+            p#lobby-my-placement
+    //- футер: версию пакета движка проставляет LobbyView (engineVersion.js)
+    div#lobby-footer
+      p#lobby-version

package/src/config/lobby.js

@@ -96,6 +96,10 @@ export default {
     leaderboardTitleId: 'leaderboard-title',
     leaderboardTotalId: 'leaderboard-total',
     myPlacementId: 'lobby-my-placement',
+
+    // футер: версия npm-пакета движка, запечённая в бандл при сборке
+    // (client/lib/engineVersion.js)
+    versionId: 'lobby-version',
   },
 
   // создание комнаты (хост в этой же вкладке); лимит игроков/время

package/src/devtools/contract/index.js

@@ -1,6 +1,6 @@
 import { loadContext } from './loadContext.js';
 import { rules } from './rules/index.js';
-import { ERROR, FAIL, summarize } from './result.js';
+import { ERROR, FAIL, WARN, summarize } from './result.js';
 
 // Статическая проверка контракта «движок ↔ игра»: то же намерение, что у
 // headless-раннера (молчаливое нарушение обязано становиться строкой),
@@ -35,20 +35,43 @@ export async function checkContract(gameDir) {
   };
 }
 
+// Вердикт может нести собственный уровень (см. verdict) — но только один из
+// двух известных: неизвестное значение молча перестало бы блокировать прогон
+// (hasBlockingFailure сравнивает с ERROR), то есть опечатка в правиле
+// отключала бы его без единой строки. Поэтому она громкая, а уровень берётся
+// объявленный правилом.
+function resolveLevel(level, rule) {
+  if (level === undefined) {
+    return rule.level;
+  }
+
+  if (level !== ERROR && level !== WARN) {
+    console.error(
+      `contract: rule ${rule.id} returned unknown level "${level}" — ` +
+        `falling back to "${rule.level}"`,
+    );
+
+    return rule.level;
+  }
+
+  return level;
+}
+
 /**
  * Прогон правил по готовому контексту (тесты собирают его вручную).
  * @param {Object} ctx
+ * @param {Array<Object>} [ruleList] - Набор правил; по умолчанию все.
  * @returns {Array<Object>} Результаты правил.
  */
-export function runRules(ctx) {
-  return rules.map(rule => {
-    const { status, violations, note } = rule.check(ctx);
+export function runRules(ctx, ruleList = rules) {
+  return ruleList.map(rule => {
+    const { status, violations, note, level } = rule.check(ctx);
 
     return {
       id: rule.id,
       name: rule.name,
       title: rule.title,
-      level: rule.level,
+      level: resolveLevel(level, rule),
       status,
       violations,
       note,

package/src/devtools/contract/result.js

@@ -24,15 +24,21 @@ export function skip(note) {
 
 /**
  * Вердикт по списку нарушений: пустой список — pass.
+ * `level` перекрывает уровень правила на этом прогоне: у правила он один на
+ * все случаи, а бывает, что нарушение доказуемо только частично (C4 не может
+ * перечислить игровые сервисы, не запустив игровой код) — такое обязано
+ * попасть в отчёт, но не обязано валить прогон.
  * @param {Array<string>} violations
  * @param {string} [note]
- * @returns {Object} { status, violations, note }.
+ * @param {string} [level] - ERROR или WARN; по умолчанию — уровень правила.
+ * @returns {Object} { status, violations, note, level }.
  */
-export function verdict(violations, note) {
+export function verdict(violations, note, level) {
   return {
     status: violations.length ? FAIL : PASS,
     violations,
     note,
+    level,
   };
 }
 

package/src/devtools/contract/rules/b5-room-form.js

@@ -1,9 +1,11 @@
 import { ERROR, skip, verdict } from '../result.js';
+import { anchorPattern } from '../../../lib/formPattern.js';
 
 // roomForm. Поле вне белого списка форма показывает, лобби отправляет, а
 // хост молча выбрасывает — правило игры, построенное на своей настройке
 // комнаты, не работает и ничего об этом не сообщает. Контролов в v3 ровно
-// четыре: неизвестный пропускается с console.error.
+// четыре: неизвестный пропускается с console.error. `regExp` едет в манифесте
+// строкой и компилируется уже у игрока — некомпилируемая ловится здесь.
 const HONOURED = ['maps', 'maxPlayers', 'map', 'roundTime', 'mapTime', 'friendlyFire'];
 const CONTROLS = ['text', 'select', 'checkbox', 'radio'];
 
@@ -36,6 +38,20 @@ export default {
             `not exist (${CONTROLS.join(', ')})`,
         );
       }
+
+      if (field.regExp !== undefined) {
+        try {
+          // ровно та форма, что компилирует клиент (общий anchorPattern):
+          // иначе «компилируется» у чекера и у игрока разъедется молча
+          anchorPattern(field.regExp);
+        } catch (e) {
+          violations.push(
+            `roomForm field "${field.name}": regExp "${field.regExp}" does ` +
+              `not compile (${e.message}) — the client drops the check with ` +
+              'a console.error, so the field ends up with no pattern at all',
+          );
+        }
+      }
     }
 
     return verdict(violations);

package/src/devtools/contract/rules/c10-auth-schema.js

@@ -1,17 +1,21 @@
 import { ERROR, skip, verdict } from '../result.js';
+import { resolveValidator } from '../../../lib/validators.js';
 
-// authSchema. Три ошибки, каждая из которых уже случалась:
+// authSchema. Четыре ошибки, каждая из которых уже случалась:
 // formId вместо fieldsId (контейнер резолвится в null и экран авторизации
 // умирает TypeError на первом рендере), поле ника (личность приходит из
 // JWT лобби) и поле выбора модели под своим именем — движок читает
-// params.model, всё остальное до Participant не доезжает.
+// params.model, всё остальное до Participant не доезжает, и имя валидатора,
+// которого нет в authSchema.validators (поле не проверяется никем).
 const NICKNAME = /^(name|nick|nickname|player|playername|login|username)$/i;
 
 export default {
   id: 'C10',
   name: 'authSchema',
   level: ERROR,
-  title: 'authSchema: fieldsId, no nickname field, the model field',
+  title:
+    'authSchema: fieldsId, no nickname field, the model field, resolvable ' +
+    'validators',
 
   check(ctx) {
     if (!ctx.authSchema) {
@@ -34,6 +38,8 @@ export default {
       );
     }
 
+    const validators = ctx.authSchema.validators;
+
     for (const field of params) {
       if (NICKNAME.test(field.name)) {
         violations.push(
@@ -41,6 +47,23 @@ export default {
             'identity comes from the lobby JWT',
         );
       }
+
+      const validatorName = field.options?.validator;
+
+      // опечатка в имени (как и не-функция под верным именем) = поле не
+      // проверяется никем: validateAuth пропускает нерезолвнутый валидатор
+      // молча. Резолвер — тот же, которым зовёт хост (lib/validators.js),
+      // чтобы правило не обещало того, чего не проверяет
+      if (
+        validatorName !== undefined &&
+        !resolveValidator(validatorName, validators)
+      ) {
+        violations.push(
+          `authSchema param "${field.name}" names validator ` +
+            `"${validatorName}", which authSchema.validators does not ` +
+            'provide as a function — the host skips the check silently',
+        );
+      }
     }
 
     if (!params.some(field => field.name === 'model')) {

package/src/devtools/contract/rules/c4-component-dependencies.js

@@ -1,8 +1,12 @@
-import { ERROR, skip, verdict } from '../result.js';
+import { ERROR, WARN, skip, verdict } from '../result.js';
 
-// Пул сервисов клиента ровно из четырёх имён (client/main.js). Незнакомое имя
-// не ошибка для движка: part получает undefined и рисует пустоту — карта
-// без assetsBase выглядит как чистый холст без единой строки в консоли.
+// Движковых сервисов ровно четыре (client/main.js), но пул ими не
+// исчерпывается: игра доливает туда свои через ClientPlugin.hooks.services(core)
+// — например геометрию предсказанной динамики карты
+// (docs/en/plugin-api.md «hooks.services»). Незнакомое имя не ошибка для
+// движка: part получает undefined и рисует пустоту — карта без assetsBase
+// выглядит как чистый холст без единой строки в консоли, ради этого правило
+// и существует.
 const SERVICES = ['renderer', 'soundManager', 'assetsBase', 'localPlayer'];
 
 export default {
@@ -19,15 +23,42 @@ export default {
     }
 
     // раскладка «сервис → парты, которым он нужен» (client.js игры)
-    const violations = Object.keys(deps)
-      .filter(service => !SERVICES.includes(service))
-      .map(
+    const unknown = Object.keys(deps).filter(
+      service => !SERVICES.includes(service),
+    );
+
+    if (unknown.length === 0) {
+      return verdict([]);
+    }
+
+    const pool = SERVICES.join(', ');
+    // hooks.services(core) требует живой инстанс ядра, а игровой код чекер не
+    // запускает — статически перечислить игровые сервисы нечем. Поэтому при
+    // объявленном хуке имя вне движкового пула остаётся строкой отчёта, но
+    // прогон не валит: иначе правило краснеет на штатном механизме движка
+    if (typeof ctx.clientPlugin?.hooks?.services === 'function') {
+      return verdict(
+        unknown.map(
+          service =>
+            `componentDependencies declares service "${service}" — not one of ` +
+            `the engine's (${pool}), so ClientPlugin.hooks.services() has to ` +
+            'return it; verifying that needs a live core, which this check ' +
+            'has no way to build (a service nothing provides is silently ' +
+            'undefined in the part)',
+        ),
+        'the plugin declares hooks.services(), so the pool is not statically known',
+        WARN,
+      );
+    }
+
+    return verdict(
+      unknown.map(
         service =>
           `componentDependencies declares service "${service}" — the engine ` +
-          `provides only ${SERVICES.join(', ')} (an unknown one is silently ` +
+          `provides only ${pool}, and this plugin declares no ` +
+          'hooks.services() to add its own (an unknown one is silently ' +
           'undefined in the part)',
-      );
-
-    return verdict(violations);
+      ),
+    );
   },
 };

package/src/devtools/contract/rules/c6-stat-columns.js

@@ -1,13 +1,77 @@
 import { WARN, skip, verdict } from '../result.js';
 
-// Движок пишет ровно пять имён (name, status, score, deaths, latency), и
-// его CSS свёрстана под пять колонок. Другое число — не отказ: игра вправе
-// привезти свои стили в ClientPlugin.styles. Поэтому warn, а не error.
+// Сколько в статистике колонок — решение игры: их объявляет её схема, а
+// движковые записи в необъявленную колонку просто игнорируются
+// (host/meta/modules/Stat.js, Д7). Своя у движка только вёрстка — style.css
+// раздаёт ширины пяти колонкам (#stat …:nth-child(1)…(5)), и шестая без
+// собственных стилей схлопывается в ноль. Поэтому правило проверяет не число
+// колонок, а покрыта ли раскладка: игра со своими ClientPlugin.styles вправе
+// объявить сколько угодно. Ширина — соглашение, а не отказ, отсюда warn.
+const ENGINE_COLUMNS = 5;
+
+// Правило разбирает CSS плагина эвристикой, а не парсером: «колонку кроет
+// объявление ширины на селекторе с #stat и ячейкой».
+// Пара «селектор + тело»: [^{}] не перешагивает вложенную скобку, поэтому
+// matchAll ловит именно внутреннее правило, в том числе завёрнутое в
+// @media/@supports (разбор по split('}') видел там обёртку и терял селектор).
+const RULE = /([^{}]+)\{([^{}]*)\}/g;
+// ячейка колонки: движковая раскладка адресует их как `#stat … td|span`
+const CELL = /(?:^|[\s.#>+~])(?:td|th|span)(?=[\s.:#>+~,[]|$)/;
+// правило про раскладку, а не про цвет: колонку кроет только объявление
+// ширины или её флекс-эквивалент
+const WIDTH =
+  /(?:^|[\s;])(?:width|min-width|max-width|flex|flex-basis|flex-grow)\s*:/;
+// трек-лист грида задаёт ширины всем колонкам разом и стоит на контейнере
+// (`#stat table`, `#stat .stat-head`), который CELL по определению не
+// проходит, — поэтому отдельной веткой, а не пунктом в WIDTH
+const GRID = /(?:^|[\s;])grid-template-columns\s*:/;
+
+// Индексы колонок, которым стили плагина задают ширину. Селектор ячеек без
+// nth-child ('#stat table td') правит всю таблицу разом.
+function styledColumns(styles, total) {
+  const covered = new Set();
+
+  for (const [, selector, body] of String(styles || '').matchAll(RULE)) {
+    if (!selector.includes('#stat')) {
+      continue;
+    }
+
+    // грид на контейнере перечисляет все треки сразу — колонки покрыты все
+    if (GRID.test(body)) {
+      for (let index = 1; index <= total; index += 1) {
+        covered.add(index);
+      }
+
+      continue;
+    }
+
+    if (!CELL.test(selector) || !WIDTH.test(body)) {
+      continue;
+    }
+
+    const indexes = [...selector.matchAll(/nth-child\((\d+)\)/g)];
+
+    if (indexes.length === 0) {
+      for (let index = 1; index <= total; index += 1) {
+        covered.add(index);
+      }
+
+      continue;
+    }
+
+    for (const [, index] of indexes) {
+      covered.add(Number(index));
+    }
+  }
+
+  return covered;
+}
+
 export default {
   id: 'C6',
   name: 'statColumns',
   level: WARN,
-  title: 'stat declares five columns (the engine CSS assumes five)',
+  title: 'stat columns past the engine layout are styled by the plugin',
 
   check(ctx) {
     const columns = ctx.clientConfig?.modules?.stat?.params?.columns;
@@ -16,21 +80,32 @@ export default {
       return skip('no client stat columns');
     }
 
-    if (columns.length === 5) {
+    // меньше пяти — движковых ширин просто хватает с запасом
+    if (columns.length <= ENGINE_COLUMNS) {
       return verdict([]);
     }
 
-    const note = ctx.clientPlugin?.styles
-      ? 'the plugin ships its own styles'
-      : undefined;
+    const covered = styledColumns(ctx.clientPlugin?.styles, columns.length);
+    const missing = [];
+
+    for (let index = ENGINE_COLUMNS + 1; index <= columns.length; index += 1) {
+      if (!covered.has(index)) {
+        missing.push(index);
+      }
+    }
+
+    if (missing.length === 0) {
+      return verdict(
+        [],
+        `${columns.length} columns, laid out by the plugin's own styles`,
+      );
+    }
 
-    return verdict(
-      [
-        `stat declares ${columns.length} column(s): the engine populates ` +
-          'exactly name, status, score, deaths, latency and its CSS is laid ' +
-          'out for five',
-      ],
-      note,
-    );
+    return verdict([
+      `stat declares ${columns.length} columns, but ClientPlugin.styles ` +
+        `gives no width to column(s) ${missing.join(', ')}: the engine CSS ` +
+        `lays out ${ENGINE_COLUMNS} (#stat …:nth-child(1)…(${ENGINE_COLUMNS})), ` +
+        'so the rest are rendered with no width of their own',
+    ]);
   },
 };