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,51 @@
|
||||
<script lang="ts">
|
||||
import Screen from '../components/Screen.svelte';
|
||||
import TabBar from '../components/TabBar.svelte';
|
||||
import ChatScreen from './ChatScreen.svelte';
|
||||
import CheckScreen from './CheckScreen.svelte';
|
||||
import { t } from '../lib/i18n/index.svelte';
|
||||
import { getCachedGame } from '../lib/gamecache';
|
||||
|
||||
// The in-game comms hub: a single nav bar + bottom tab bar hosting Chat and the word
|
||||
// Dictionary. Tabs switch in place, so the back control always returns to the game. The
|
||||
// Dictionary tab is offered only while the game is active (mirrors the old "check word").
|
||||
type CommsTab = 'chat' | 'dictionary';
|
||||
let { id, initialTab = 'chat' }: { id: string; initialTab?: CommsTab } = $props();
|
||||
|
||||
// The game is rendered (and cached) before its comms open, so the cache tells us whether
|
||||
// it is still active without another fetch; an unknown game keeps the Dictionary offered.
|
||||
const active = $derived(getCachedGame(id)?.view.game.status !== 'finished');
|
||||
// Seeded once from the entry route's tab and then owned locally; the effect below
|
||||
// corrects a Dictionary deep-link into a finished game back to Chat.
|
||||
// svelte-ignore state_referenced_locally
|
||||
let tab = $state<CommsTab>(initialTab);
|
||||
$effect(() => {
|
||||
if (tab === 'dictionary' && !active) tab = 'chat';
|
||||
});
|
||||
</script>
|
||||
|
||||
<Screen
|
||||
title={t(tab === 'chat' ? 'game.chat' : 'game.checkWord')}
|
||||
back={`/game/${id}`}
|
||||
scroll={tab === 'dictionary'}
|
||||
column={tab === 'chat'}
|
||||
>
|
||||
{#if tab === 'chat'}
|
||||
<ChatScreen {id} />
|
||||
{:else}
|
||||
<CheckScreen {id} />
|
||||
{/if}
|
||||
|
||||
{#snippet tabbar()}
|
||||
<TabBar>
|
||||
<button class="tab" class:active={tab === 'chat'} onclick={() => (tab = 'chat')} aria-label={t('game.chat')}>
|
||||
<span class="sq">💬</span>
|
||||
</button>
|
||||
{#if active}
|
||||
<button class="tab" class:active={tab === 'dictionary'} onclick={() => (tab = 'dictionary')} aria-label={t('game.checkWord')}>
|
||||
<span class="sq">🔎</span>
|
||||
</button>
|
||||
{/if}
|
||||
</TabBar>
|
||||
{/snippet}
|
||||
</Screen>
|
||||
Reference in New Issue
Block a user