UI: tab-bar navigation — drop the hamburger
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 39s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 59s
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 39s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 59s
Replace Menu.svelte (hamburger) everywhere with tab-bar navigation: - Settings hub (SettingsHub) from the lobby ⚙️ tab: Settings/Profile/ Friends/About as in-place tabs, back → lobby; the lobby ⚙️ badge counts incoming friend requests (invitations keep their own lobby section). - Comms hub (CommsHub) from the move-history 💬: Chat/Dictionary tabs, back → game; Dictionary only while the game is active. - Game menu items relocate into the open history: 🏁 leave / 📤 export in the header, 🤝 add-friend per opponent card, 💬 comms; unread chat is badged on the score bar + the 💬. - TapConfirm (tap → fading ✅ → tap) replaces the Skip/Hint press-and-hold popovers and drives the add-friend confirm. - Fix the move-history "jump": the slid board is inert and the stage can't scroll, so a swipe up genuinely closes the history. Remove Menu.svelte + HoldConfirm.svelte. Docs: UI_DESIGN, FUNCTIONAL(+ru), PRERELEASE. UI check/unit/build/bundle/e2e (Chromium+WebKit) all green.
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* tapconfirm holds the small state machine behind the "tap to confirm" controls: the
|
||||
* first tap arms a confirmation window of durationMs (during which the view shows a
|
||||
* fading ✅), a second tap within it confirms, and otherwise the window reverts. It is
|
||||
* framework agnostic — a view observes onChange and renders accordingly — so the timing
|
||||
* logic is unit-testable without a DOM. The pending timer is the only side effect.
|
||||
*/
|
||||
export interface TapConfirmOptions {
|
||||
/** Length of the confirmation window in milliseconds. */
|
||||
durationMs: number;
|
||||
/** Invoked once when a confirmation lands inside the window. */
|
||||
onConfirm: () => void;
|
||||
/** Invoked whenever the confirming flag flips, so a view can react. */
|
||||
onChange?: (confirming: boolean) => void;
|
||||
}
|
||||
|
||||
/** TapConfirmController drives a single "tap to confirm" control. */
|
||||
export interface TapConfirmController {
|
||||
/** Whether the confirmation window is currently open. */
|
||||
readonly confirming: boolean;
|
||||
/** Arm the confirmation window; a no-op while it is already open. */
|
||||
arm(): void;
|
||||
/** Confirm within the window: fires onConfirm once and closes the window. A no-op
|
||||
* while the window is closed. */
|
||||
confirm(): void;
|
||||
/** Close the window without confirming (e.g. the control was disabled). */
|
||||
cancel(): void;
|
||||
/** Clear any pending timer; the controller must not be reused afterwards. */
|
||||
dispose(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* createTapConfirm builds a TapConfirmController whose confirmation window lasts
|
||||
* durationMs. onConfirm fires once per confirmed window; onChange (when given)
|
||||
* reports every flip of the confirming flag.
|
||||
*/
|
||||
export function createTapConfirm(opts: TapConfirmOptions): TapConfirmController {
|
||||
let confirming = false;
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function clear(): void {
|
||||
if (timer !== null) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
}
|
||||
function set(next: boolean): void {
|
||||
if (confirming === next) return;
|
||||
confirming = next;
|
||||
opts.onChange?.(next);
|
||||
}
|
||||
return {
|
||||
get confirming() {
|
||||
return confirming;
|
||||
},
|
||||
arm() {
|
||||
if (confirming) return;
|
||||
set(true);
|
||||
timer = setTimeout(() => {
|
||||
timer = null;
|
||||
set(false);
|
||||
}, opts.durationMs);
|
||||
},
|
||||
confirm() {
|
||||
if (!confirming) return;
|
||||
clear();
|
||||
set(false);
|
||||
opts.onConfirm();
|
||||
},
|
||||
cancel() {
|
||||
if (!confirming) return;
|
||||
clear();
|
||||
set(false);
|
||||
},
|
||||
dispose() {
|
||||
clear();
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user