Mode paysage : plateau visible en entier #15

2026-11-03T00:22:56Z

pierre commented

2026-11-03 00:22:56 +00:00

Pourquoi

En testant le plateau sur son téléphone, Pierre a signalé qu'en mode paysage on ne voit pas tout le plateau. Le plateau prenait toute la largeur de l'écran : en paysage, il devenait plus haut que l'écran, et les boutons (lancer les dés, doubler…) passaient dessous, hors de vue.

Quoi

En paysage, sur un écran de moins de 40 rem de haut (un téléphone tourné), le plateau s'ajuste à la hauteur de l'écran. Les messages et les boutons passent dans une colonne à sa droite.
Le portrait ne change pas.
Le manifeste de la PWA autorise toutes les orientations ("orientation": "any", au lieu de "portrait") : installée, l'application suit désormais la rotation du téléphone.
make test-browser vérifie, dans Chromium et Firefox, qu'en 915×412 et en 740×360 le plateau et les boutons tiennent entièrement dans l'écran. Une capture 6-paysage est ajoutée.

Comment

Une seule règle CSS ajoutée à web/app.css, dans une requête média (orientation: landscape) and (max-height: 40rem). Elle range #game en grille de deux colonnes et donne au plateau la hauteur de l'écran moins la barre du haut (100dvh - 3.5rem, avec 100vh en repli). La largeur découle du rapport d'aspect déjà fixé.

Mesures dans Chromium sans interface :

915×412 : plateau de 438×356 px, boutons à droite, visibles ;
740×360 : plateau de 374×304 px ;
portrait 412×915 : inchangé.

Vérifié : make lint, make test (10/10) et make test-browser. Dans les deux navigateurs, une partie complète se joue, avec « paysage : plateau et boutons visibles en entier » et aucune erreur.

Choix et compromis

Boutons à droite plutôt qu'en surimpression : rien ne recouvre le plateau.
Seuil de 40 rem de haut : les tablettes et les ordinateurs gardent la mise en page verticale, centrée.

Risques et déploiement

Aucun risque pour les données. Après publication, il faudra peut-être recharger la page deux fois sur le téléphone : le service worker sert d'abord l'ancienne version.

Retour arrière : redéployer l'image précédente dans CapRover, ou annuler le commit de fusion.

Comment vérifier

make test-browser

Sur le téléphone : https://ustagammon.sans.pub, tourner l'écran.

Hors périmètre

Montrer plus clairement le coup que l'ordinateur vient de jouer : autre demande de Pierre, traitée à part.

Generated with Claude Code https://claude.com/claude-code

## Pourquoi En testant le plateau sur son téléphone, Pierre a signalé qu'en mode paysage on ne voit pas tout le plateau. Le plateau prenait toute la largeur de l'écran : en paysage, il devenait plus haut que l'écran, et les boutons (lancer les dés, doubler…) passaient dessous, hors de vue. ## Quoi - **En paysage**, sur un écran de moins de 40 rem de haut (un téléphone tourné), le plateau s'ajuste à la hauteur de l'écran. Les messages et les boutons passent dans une colonne à sa droite. - **Le portrait ne change pas.** - **Le manifeste de la PWA** autorise toutes les orientations (`"orientation": "any"`, au lieu de `"portrait"`) : installée, l'application suit désormais la rotation du téléphone. - **`make test-browser`** vérifie, dans Chromium et Firefox, qu'en 915×412 et en 740×360 le plateau et les boutons tiennent entièrement dans l'écran. Une capture `6-paysage` est ajoutée. ## Comment Une seule règle CSS ajoutée à `web/app.css`, dans une requête média `(orientation: landscape) and (max-height: 40rem)`. Elle range `#game` en grille de deux colonnes et donne au plateau la hauteur de l'écran moins la barre du haut (`100dvh - 3.5rem`, avec `100vh` en repli). La largeur découle du rapport d'aspect déjà fixé. Mesures dans Chromium sans interface : - **915×412** : plateau de 438×356 px, boutons à droite, visibles ; - **740×360** : plateau de 374×304 px ; - **portrait 412×915** : inchangé. Vérifié : `make lint`, `make test` (10/10) et `make test-browser`. Dans les deux navigateurs, une partie complète se joue, avec « paysage : plateau et boutons visibles en entier » et aucune erreur. ## Choix et compromis - **Boutons à droite plutôt qu'en surimpression** : rien ne recouvre le plateau. - **Seuil de 40 rem de haut** : les tablettes et les ordinateurs gardent la mise en page verticale, centrée. ## Risques et déploiement Aucun risque pour les données. Après publication, il faudra peut-être recharger la page deux fois sur le téléphone : le service worker sert d'abord l'ancienne version. Retour arrière : redéployer l'image précédente dans CapRover, ou annuler le commit de fusion. ## Comment vérifier ``` make test-browser ``` Sur le téléphone : https://ustagammon.sans.pub, tourner l'écran. ## Hors périmètre - Montrer plus clairement le coup que l'ordinateur vient de jouer : autre demande de Pierre, traitée à part. Generated with Claude Code https://claude.com/claude-code

pierre added 1 commit 2026-11-03 00:22:56 +00:00

Mode paysage : plateau ajusté à la hauteur de l'écran, boutons à droite 359cdcbb38

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

pierre merged commit 7e45fde4e4 into main

2026-11-03 00:22:58 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: pierre/Ustagammon#15