Fusion de la MR !15 : mode paysage

tests/browser/play.mjs

@@ -248,6 +248,20 @@ await waitForPlayer();
 await shot("6-sombre");
 await page.emulateMedia({ colorScheme: "light" });
 
+step("paysage");
+// Téléphone tourné : le plateau et les boutons tiennent dans l'écran.
+for (const [width, height] of [[915, 412], [740, 360]]) {
+    await page.setViewportSize({ width, height });
+    const board = await page.locator("#board").boundingBox();
+    const actions = await page.locator(".actions").boundingBox();
+    check(board.y + board.height <= height && board.x + board.width <= width,
+        `paysage ${width}x${height} : plateau hors de l'écran`);
+    check(actions.y + actions.height <= height, `paysage ${width}x${height} : boutons hors de l'écran`);
+}
+log("paysage : plateau et boutons visibles en entier");
+await shot("6-paysage");
+await page.setViewportSize({ width: 360, height: 740 });
+
 step("mise en cache");
 // Hors ligne : une fois le cache du service worker rempli, la page se
 // recharge sans réseau, et le moteur répond.

web/app.css

@@ -281,3 +281,38 @@ button:disabled {
 .about a {
   color: var(--accent);
 }
+
+/* ------------------------------------------------------- Mode paysage */
+
+/* Téléphone tourné : le plateau prend toute la hauteur disponible, et les
+ * messages et boutons passent dans une colonne à sa droite. */
+@media (orientation: landscape) and (max-height: 40rem) {
+  body {
+    max-width: none;
+  }
+
+  .topbar {
+    padding: 0.25rem 0;
+  }
+
+  #game {
+    display: grid;
+    grid-template-columns: auto minmax(12rem, 1fr);
+    grid-template-rows: auto auto auto 1fr;
+    column-gap: 1rem;
+    align-items: start;
+  }
+
+  .board {
+    grid-row: 1 / 5;
+    width: auto;
+    /* Hauteur de l'écran moins la barre du haut (boutons de 40 px). */
+    height: calc(100vh - 3.5rem);
+    height: calc(100dvh - 3.5rem);
+    max-width: 70vw;
+  }
+
+  .pips {
+    text-align: left;
+  }
+}

web/manifest.webmanifest

@@ -6,7 +6,7 @@
   "start_url": "./",
   "scope": "./",
   "display": "standalone",
-  "orientation": "portrait",
+  "orientation": "any",
   "background_color": "#f7f2e8",
   "theme_color": "#6b4426",
   "icons": [