From b5865585e4db451a5f49059ccc4de3d40e1d310e Mon Sep 17 00:00:00 2001 From: Guangcong Luo Date: Thu, 22 May 2025 21:04:07 +0000 Subject: [PATCH] Preact: Refactor mobile support Scrollable width is now set on `` (and is inherited by ``). It's my hope that this fixes some scroll snap bugs on mobile. We're also now looking at pointer events to decide whether to autofocus text boxes. Fixes #2419 --- play.pokemonshowdown.com/src/client-main.ts | 2 +- play.pokemonshowdown.com/src/panel-topbar.tsx | 60 +++++++++++------- play.pokemonshowdown.com/src/panels.tsx | 62 +++++++++++++------ play.pokemonshowdown.com/style/client2.css | 19 +++--- 4 files changed, 94 insertions(+), 49 deletions(-) diff --git a/play.pokemonshowdown.com/src/client-main.ts b/play.pokemonshowdown.com/src/client-main.ts index 2e3820d41..3f15610c0 100644 --- a/play.pokemonshowdown.com/src/client-main.ts +++ b/play.pokemonshowdown.com/src/client-main.ts @@ -2073,7 +2073,7 @@ export const PS = new class extends PSModel { } calculateLeftPanelWidth() { const available = document.body.offsetWidth; - if (available < 800 || this.prefs.onepanel === 'vertical') { + if (document.documentElement.clientWidth < 800 || this.prefs.onepanel === 'vertical') { return null; } // If we don't have both a left room and a right room, obviously diff --git a/play.pokemonshowdown.com/src/panel-topbar.tsx b/play.pokemonshowdown.com/src/panel-topbar.tsx index 04c930279..ab262c684 100644 --- a/play.pokemonshowdown.com/src/panel-topbar.tsx +++ b/play.pokemonshowdown.com/src/panel-topbar.tsx @@ -11,7 +11,7 @@ import preact from "../js/lib/preact"; import { Config, PS, type PSRoom, type RoomID } from "./client-main"; -import { PSView } from "./panels"; +import { NARROW_MODE_HEADER_WIDTH, PSView, VERTICAL_HEADER_WIDTH } from "./panels"; import type { Battle } from "./battle"; import { BattleLog } from "./battle-log"; // optional @@ -36,7 +36,7 @@ window.addEventListener('dragover', e => { e.preventDefault(); }); -export class PSHeader extends preact.Component<{ style: object }> { +export class PSHeader extends preact.Component { static toggleMute = (e: Event) => { PS.prefs.set('mute', !PS.prefs.mute); PS.update(); @@ -168,8 +168,31 @@ export class PSHeader extends preact.Component<{ style: object }> { {closeButton} ; } - handleRoomTabOverflow = () => { - if (PS.leftPanelWidth === null || !this.base) return; + handleResize = () => { + if (!this.base) return; + + if (PS.leftPanelWidth === null) { + const width = document.documentElement.clientWidth; + const oldNarrowMode = PSView.narrowMode; + PSView.narrowMode = width <= 700; + PSView.verticalHeaderWidth = PSView.narrowMode ? NARROW_MODE_HEADER_WIDTH : VERTICAL_HEADER_WIDTH; + document.documentElement.style.width = PSView.narrowMode ? `${width + NARROW_MODE_HEADER_WIDTH}px` : 'auto'; + if (oldNarrowMode !== PSView.narrowMode) { + if (PSView.narrowMode) { + if (!PSView.textboxFocused) { + document.documentElement.classList?.add('scroll-snap-enabled'); + } + } else { + document.documentElement.classList?.remove('scroll-snap-enabled'); + } + PS.update(); + } + return; + } + if (PSView.narrowMode) { + document.documentElement.classList?.remove('scroll-snap-enabled'); + PSView.narrowMode = false; + } const userbarLeft = this.base.querySelector('div.userbar')?.getBoundingClientRect()?.left; const plusTabRight = this.base.querySelector('a.roomtab[aria-label="Join chat"]')?.getBoundingClientRect()?.right; @@ -187,11 +210,11 @@ export class PSHeader extends preact.Component<{ style: object }> { PS.user.subscribe(() => { this.forceUpdate(); }); - window.addEventListener('resize', this.handleRoomTabOverflow); - this.handleRoomTabOverflow(); + window.addEventListener('resize', this.handleResize); + this.handleResize(); } override componentDidUpdate() { - this.handleRoomTabOverflow(); + this.handleResize(); } renderUser() { if (!PS.connected) { @@ -210,7 +233,8 @@ export class PSHeader extends preact.Component<{ style: object }> { } renderVertical() { return + {null /* overflow */}
{this.renderUser()} {}
@@ -247,15 +272,9 @@ export class PSHeader extends preact.Component<{ style: object }> { } override render() { if (PS.leftPanelWidth === null) { - if (!PSView.textboxFocused) { - document.documentElement.classList?.add('scroll-snap-enabled'); - } return this.renderVertical(); - } else { - document.documentElement.classList?.remove('scroll-snap-enabled'); } - - return