From 32846dfc6fa9396775980b4e0559a02184b6af86 Mon Sep 17 00:00:00 2001 From: sHa Date: Mon, 11 Aug 2025 21:09:41 +0300 Subject: [PATCH] Add WelcomeStats component and integrate session management in FlagQuiz - Created a new WelcomeStats component to display user statistics and session results. - Integrated session management in FlagQuiz, allowing users to track their performance across multiple sessions. - Updated game state handling to include session completion and results display. - Enhanced user experience with improved navigation and session reset functionality. --- public/icons/chart-square.svg | 7 + public/icons/chart.svg | 7 + public/icons/medal-star.svg | 1 - src/components/Header.svelte | 97 +++- src/components/QuizSettings.svelte | 75 ++- src/components/SessionResults.svelte | 414 ++++++++++++++++ src/components/WelcomeStats.svelte | 531 +++++++++++++++++++++ src/pages/FlagQuiz.svelte | 682 +++++++++++++-------------- 8 files changed, 1448 insertions(+), 366 deletions(-) create mode 100644 public/icons/chart-square.svg create mode 100644 public/icons/chart.svg create mode 100644 src/components/SessionResults.svelte create mode 100644 src/components/WelcomeStats.svelte diff --git a/public/icons/chart-square.svg b/public/icons/chart-square.svg new file mode 100644 index 0000000..9196eee --- /dev/null +++ b/public/icons/chart-square.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/icons/chart.svg b/public/icons/chart.svg new file mode 100644 index 0000000..baf66eb --- /dev/null +++ b/public/icons/chart.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/icons/medal-star.svg b/public/icons/medal-star.svg index 5031e2b..3d1b848 100644 --- a/public/icons/medal-star.svg +++ b/public/icons/medal-star.svg @@ -1,4 +1,3 @@ - diff --git a/src/components/Header.svelte b/src/components/Header.svelte index 361bbd7..5205ceb 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -37,17 +37,40 @@ export let collection = "logos"; export let setCollection = () => {}; // Quiz-only data - export let score = null; export let gameStats = null; export let achievementCount = { unlocked: 0, total: 0 }; export let onAchievementClick = () => {}; + export let sessionStats = null; // New prop for session stats + export let isQuizActive = false; // New prop to determine if quiz is active let dropdownOpen = false; + let showAllTimeStats = false; // State to toggle between session and all-time stats + let previousQuizState = false; // Track previous quiz state to detect new quiz start // Check if we're in game mode $: isGameMode = $location && $location.startsWith('/game'); $: isQuizPage = $location && $location.startsWith('/game/flags'); + // Determine default stats view based on quiz state + $: { + // Detect when quiz becomes active (new quiz started) + if (isQuizActive && !previousQuizState) { + // New quiz started - show session stats by default + showAllTimeStats = false; + } else if (!isQuizActive) { + // Quiz not active - show all-time stats + showAllTimeStats = true; + } + // Update previous state + previousQuizState = isQuizActive; + } + + function toggleStatsView() { + if (isQuizActive) { + showAllTimeStats = !showAllTimeStats; + } + } + function handleTitleClick() { dropdownOpen = !dropdownOpen; } @@ -123,13 +146,27 @@
{#if isQuizPage}
-
- Current: - {score ? `${score.correct}/${score.total}` : '0/0'} {score && score.skipped > 0 ? `(` : ''}{#if score && score.skipped > 0} {score.skipped}){/if} -
-
- All Time: - {gameStats?.correct || 0} {gameStats?.wrong || 0} {gameStats?.skipped > 0 ? `` : ''}{#if gameStats?.skipped > 0} {gameStats.skipped}{/if} +
+ {#if isQuizActive && !showAllTimeStats} + + + {sessionStats?.correct || 0} + {sessionStats?.wrong || 0} + {sessionStats?.skipped || 0} + + {:else} + + + {gameStats?.correct || 0} + {gameStats?.wrong || 0} + {gameStats?.skipped || 0} + + {/if} + {#if isQuizActive} + + {/if}
{#if showSettings} -
-