UI remove debug module preload

app/views/base/page.scala

@@ -91,8 +91,7 @@ object page:
           manifests,
           p.withHrefLangs.map(hrefLangs),
           sitePreload(
-            p.modules ++ p.pageModule.so(module => jsPageModule(module.name)) ++
-              Option.when(!netConfig.isProd)(Option(jsPageModule("site.devMode"))),
+            p.modules ++ p.pageModule.so(module => jsPageModule(module.name)),
             isInquiry = ctx.data.inquiry.isDefined
           ),
           lichessFontFaceCss,

ui/bits/package.json

@@ -55,6 +55,7 @@
       "src/bits.contact.ts",
       "src/bits.cropDialog.ts",
       "src/bits.dailyFeed.ts",
+      "src/bits.devMode.ts",
       "src/bits.diagnosticDialog.ts",
       "src/bits.eventCountdown.ts",
       "src/bits.expandText.ts",

ui/bits/src/bits.devMode.ts

@@ -0,0 +1,22 @@
+import { init as initBoard } from 'common/miniBoard';
+
+export function initModule() {
+  $('main.lobby').each(function (this: HTMLElement) {
+    // fake tv for debugging layout, ui/build with -d flag
+    if (this.querySelector('.lobby__tv')) return;
+
+    const ds = document.body.dataset;
+    const tv = $as<HTMLElement>(
+      `
+      <div class="lobby__tv">
+          <a href="/tv" class="mini-game mini-game-abcd1234 standard is2d">
+              <span class="mini-game__player"><span class="mini-game__user"><span class="utitle" title="Candidate Master">CM</span>&nbsp;Tester1<img class="uflair" src="${ds.assetUrl}/assets/______2/flair/img/activity.lichess-horsey.webp"><span class="rating">2649</span></span><span class="mini-game__clock mini-game__clock--black clock--run" data-time="60">0:26</span></span>
+              <span id="fake-tv" data-state="3R1r1k/pp4p1/2n1Q1bp/1Bp5/PqN4P/2b2NP1/1P4P1/2K4R,black,d1d8"></span>
+              <span class="mini-game__player"><span class="mini-game__user"><span class="utitle" title="FIDE Master">FM</span>&nbsp;tester2<img class="uflair" src="${ds.assetUrl}/assets/______2/flair/img/activity.lichess-berserk.webp"><span class="rating">2760</span></span><span class="mini-game__clock mini-game__clock--white" data-time="60">0:19</span></span>
+          </a>
+      </div>`.trim(),
+    );
+    initBoard(tv.querySelector('#fake-tv')!);
+    this.append(tv);
+  });
+}

ui/site/package.json

@@ -19,8 +19,7 @@
       "src/site.ts",
       "src/site.tvEmbed.ts",
       "src/site.puzzleEmbed.ts",
-      "src/site.lpvEmbed.ts",
-      "src/site.devMode.ts"
+      "src/site.lpvEmbed.ts"
     ],
     "sync": {
       "node_modules/dialog-polyfill/dist/dialog-polyfill.esm.js": "public/npm"

ui/site/src/boot.ts

@@ -124,6 +124,7 @@ export function boot() {
 
     if (setBlind && !site.blindMode) setTimeout(() => $('#blind-mode button').trigger('click'), 1500);
 
+    if (site.debug) site.asset.loadEsm('bits.devMode');
     if (showDebug) site.asset.loadEsm('bits.diagnosticDialog');
 
     const pageAnnounce = document.body.getAttribute('data-announce');