@mideind/netskrafl-react 1.0.1 → 1.1.0

package/dist/esm/index.js

@@ -1,6 +1,101 @@
 import { jsx } from 'react/jsx-runtime';
 import React, { useEffect } from 'react';
 
+// Key for storing auth settings in sessionStorage
+const AUTH_SETTINGS_KEY = "netskrafl_auth_settings";
+// Save authentication settings to sessionStorage
+const saveAuthSettings = (settings) => {
+    if (!settings) {
+        clearAuthSettings();
+        return;
+    }
+    try {
+        // Filter to only include properties defined in PersistedAuthSettings interface
+        const filteredSettings = {
+            userEmail: settings.userEmail, // Required field
+        };
+        // Only add optional fields if they are defined
+        if (settings.account !== undefined)
+            filteredSettings.account = settings.account;
+        if (settings.userId !== undefined)
+            filteredSettings.userId = settings.userId;
+        if (settings.userNick !== undefined)
+            filteredSettings.userNick = settings.userNick;
+        if (settings.firebaseAPIKey !== undefined)
+            filteredSettings.firebaseAPIKey = settings.firebaseAPIKey;
+        if (settings.beginner !== undefined)
+            filteredSettings.beginner = settings.beginner;
+        if (settings.fairPlay !== undefined)
+            filteredSettings.fairPlay = settings.fairPlay;
+        if (settings.ready !== undefined)
+            filteredSettings.ready = settings.ready;
+        if (settings.readyTimed !== undefined)
+            filteredSettings.readyTimed = settings.readyTimed;
+        // Only save if we have actual settings to persist
+        if (Object.keys(filteredSettings).length > 1) {
+            sessionStorage.setItem(AUTH_SETTINGS_KEY, JSON.stringify(filteredSettings));
+        }
+        else {
+            clearAuthSettings();
+        }
+    }
+    catch (error) {
+        // SessionStorage might be unavailable or full
+        console.warn("Could not save auth settings to sessionStorage:", error);
+    }
+};
+// Retrieve authentication settings from sessionStorage
+const loadAuthSettings = () => {
+    try {
+        const stored = sessionStorage.getItem(AUTH_SETTINGS_KEY);
+        if (stored) {
+            return JSON.parse(stored);
+        }
+    }
+    catch (error) {
+        // SessionStorage might be unavailable or data might be corrupted
+        console.warn("Could not load auth settings from sessionStorage:", error);
+    }
+    return null;
+};
+// Clear authentication settings from sessionStorage
+const clearAuthSettings = () => {
+    try {
+        sessionStorage.removeItem(AUTH_SETTINGS_KEY);
+    }
+    catch (error) {
+        console.warn("Could not clear auth settings from sessionStorage:", error);
+    }
+};
+// Apply persisted settings to a GlobalState object
+const applyPersistedSettings = (state) => {
+    var _a, _b, _c, _d;
+    const persisted = loadAuthSettings();
+    if (!persisted) {
+        return state;
+    }
+    // CRITICAL SECURITY CHECK: Only apply persisted settings if they belong to the current user
+    // This prevents data leakage between different users in the same browser session
+    if (persisted.userEmail !== state.userEmail) {
+        // Different user detected - clear the old user's settings
+        clearAuthSettings();
+        return state;
+    }
+    // Apply persisted settings, but don't override values explicitly passed in props
+    return {
+        ...state,
+        // Only apply persisted values if current values are defaults
+        account: state.account || persisted.account || state.userId, // Use userId as fallback
+        userId: state.userId || persisted.userId || state.userId,
+        userNick: state.userNick || persisted.userNick || state.userNick,
+        firebaseAPIKey: state.firebaseAPIKey || persisted.firebaseAPIKey || state.firebaseAPIKey,
+        beginner: (_a = persisted.beginner) !== null && _a !== void 0 ? _a : state.beginner,
+        fairPlay: (_b = persisted.fairPlay) !== null && _b !== void 0 ? _b : state.fairPlay,
+        ready: (_c = persisted.ready) !== null && _c !== void 0 ? _c : state.ready,
+        readyTimed: (_d = persisted.readyTimed) !== null && _d !== void 0 ? _d : state.readyTimed,
+    };
+};
+
 const DEFAULT_STATE = {
     projectId: "netskrafl",
     firebaseAPIKey: "",
@@ -8,6 +103,7 @@ const DEFAULT_STATE = {
     firebaseSenderId: "",
     firebaseAppId: "",
     measurementId: "",
+    account: "",
     userEmail: "",
     userId: "",
     userNick: "",
@@ -21,12 +117,12 @@ const DEFAULT_STATE = {
     loginUrl: "",
     loginMethod: "",
     newUser: false,
-    beginner: false,
-    fairPlay: true,
+    beginner: true,
+    fairPlay: false,
     plan: "", // Not a friend
     hasPaid: false,
-    ready: false,
-    readyTimed: false,
+    ready: true,
+    readyTimed: true,
     uiFullscreen: true,
     uiLandscape: false,
     runningLocal: false,
@@ -50,7 +146,9 @@ const makeGlobalState = (overrides) => {
         ...DEFAULT_STATE,
         ...overrides,
     };
-    return { ...state, ...makeServerUrls(state.serverUrl, state.movesUrl) };
+    const stateWithUrls = { ...state, ...makeServerUrls(state.serverUrl, state.movesUrl) };
+    // Apply any persisted authentication settings from sessionStorage
+    return applyPersistedSettings(stateWithUrls);
 };
 
 function getDefaultExportFromCjs (x) {
@@ -23435,6 +23533,9 @@ let View$1 = class View {
 function viewGetServerCache(view) {
     return view.viewCache_.serverCache.getNode();
 }
+function viewGetCompleteNode(view) {
+    return viewCacheGetCompleteEventSnap(view.viewCache_);
+}
 function viewGetCompleteServerCache(view, path) {
     const cache = viewCacheGetCompleteServerSnap(view.viewCache_);
     if (cache) {
@@ -24096,6 +24197,33 @@ function syncTreeCalcCompleteEventCache(syncTree, path, writeIdsToExclude) {
     });
     return writeTreeCalcCompleteEventCache(writeTree, path, serverCache, writeIdsToExclude, includeHiddenSets);
 }
+function syncTreeGetServerValue(syncTree, query) {
+    const path = query._path;
+    let serverCache = null;
+    // Any covering writes will necessarily be at the root, so really all we need to find is the server cache.
+    // Consider optimizing this once there's a better understanding of what actual behavior will be.
+    syncTree.syncPointTree_.foreachOnPath(path, (pathToSyncPoint, sp) => {
+        const relativePath = newRelativePath(pathToSyncPoint, path);
+        serverCache =
+            serverCache || syncPointGetCompleteServerCache(sp, relativePath);
+    });
+    let syncPoint = syncTree.syncPointTree_.get(path);
+    if (!syncPoint) {
+        syncPoint = new SyncPoint();
+        syncTree.syncPointTree_ = syncTree.syncPointTree_.set(path, syncPoint);
+    }
+    else {
+        serverCache =
+            serverCache || syncPointGetCompleteServerCache(syncPoint, newEmptyPath());
+    }
+    const serverCacheComplete = serverCache != null;
+    const serverCacheNode = serverCacheComplete
+        ? new CacheNode(serverCache, true, false)
+        : null;
+    const writesCache = writeTreeChildWrites(syncTree.pendingWriteTree_, query._path);
+    const view = syncPointGetView(syncPoint, query, writesCache, serverCacheComplete ? serverCacheNode.getNode() : ChildrenNode.EMPTY_NODE, serverCacheComplete);
+    return viewGetCompleteNode(view);
+}
 /**
  * A helper method that visits all descendant and ancestor SyncPoints, applying the operation.
  *
@@ -25225,6 +25353,63 @@ function repoUpdateInfo(repo, pathString, value) {
 function repoGetNextWriteId(repo) {
     return repo.nextWriteId_++;
 }
+/**
+ * The purpose of `getValue` is to return the latest known value
+ * satisfying `query`.
+ *
+ * This method will first check for in-memory cached values
+ * belonging to active listeners. If they are found, such values
+ * are considered to be the most up-to-date.
+ *
+ * If the client is not connected, this method will wait until the
+ *  repo has established a connection and then request the value for `query`.
+ * If the client is not able to retrieve the query result for another reason,
+ * it reports an error.
+ *
+ * @param query - The query to surface a value for.
+ */
+function repoGetValue(repo, query, eventRegistration) {
+    // Only active queries are cached. There is no persisted cache.
+    const cached = syncTreeGetServerValue(repo.serverSyncTree_, query);
+    if (cached != null) {
+        return Promise.resolve(cached);
+    }
+    return repo.server_.get(query).then(payload => {
+        const node = nodeFromJSON(payload).withIndex(query._queryParams.getIndex());
+        /**
+         * Below we simulate the actions of an `onlyOnce` `onValue()` event where:
+         * Add an event registration,
+         * Update data at the path,
+         * Raise any events,
+         * Cleanup the SyncTree
+         */
+        syncTreeAddEventRegistration(repo.serverSyncTree_, query, eventRegistration, true);
+        let events;
+        if (query._queryParams.loadsAllData()) {
+            events = syncTreeApplyServerOverwrite(repo.serverSyncTree_, query._path, node);
+        }
+        else {
+            const tag = syncTreeTagForQuery(repo.serverSyncTree_, query);
+            events = syncTreeApplyTaggedQueryOverwrite(repo.serverSyncTree_, query._path, node, tag);
+        }
+        /*
+         * We need to raise events in the scenario where `get()` is called at a parent path, and
+         * while the `get()` is pending, `onValue` is called at a child location. While get() is waiting
+         * for the data, `onValue` will register a new event. Then, get() will come back, and update the syncTree
+         * and its corresponding serverCache, including the child location where `onValue` is called. Then,
+         * `onValue` will receive the event from the server, but look at the syncTree and see that the data received
+         * from the server is already at the SyncPoint, and so the `onValue` callback will never get fired.
+         * Calling `eventQueueRaiseEventsForChangedPath()` is the correct way to propagate the events and
+         * ensure the corresponding child events will get fired.
+         */
+        eventQueueRaiseEventsForChangedPath(repo.eventQueue_, query._path, events);
+        syncTreeRemoveEventRegistration(repo.serverSyncTree_, query, eventRegistration, null, true);
+        return node;
+    }, err => {
+        repoLog(repo, 'get for query ' + stringify(query) + ' failed: ' + err);
+        return Promise.reject(new Error(err));
+    });
+}
 function repoSetWithPriority(repo, path, newVal, newPriority, onComplete) {
     repoLog(repo, 'set', {
         path: path.toString(),
@@ -26641,6 +26826,22 @@ function set(ref, value) {
     /*priority=*/ null, deferred.wrapCallback(() => { }));
     return deferred.promise;
 }
+/**
+ * Gets the most up-to-date result for this query.
+ *
+ * @param query - The query to run.
+ * @returns A `Promise` which resolves to the resulting DataSnapshot if a value is
+ * available, or rejects if the client is unable to return a value (e.g., if the
+ * server is unreachable and there is nothing cached).
+ */
+function get(query) {
+    query = getModularInstance(query);
+    const callbackContext = new CallbackContext(() => { });
+    const container = new ValueEventRegistration(callbackContext);
+    return repoGetValue(query._repo, query, container).then(node => {
+        return new DataSnapshot(node, new ReferenceImpl(query._repo, query._path), query._queryParams.getIndex());
+    });
+}
 /**
  * Represents registration for 'value' events.
  */
@@ -27144,6 +27345,14 @@ function logEvent(ev, params) {
         return;
     logEvent$2(analytics, ev, params);
 }
+async function getFirebaseData(path) {
+    // Get data from a Firebase path
+    if (!database)
+        return null;
+    const pathRef = ref(database, path);
+    const snapshot = await get(pathRef);
+    return snapshot.val();
+}
 
 /*
 
@@ -27403,29 +27612,67 @@ class AuthenticationError extends Error {
 }
 // Internal function to ensure authentication
 const ensureAuthenticated = async (state) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     // If login is already in progress, wait for it to complete
     if (authPromise) {
         await authPromise;
         return;
     }
-    // Start new login attempt (either forced by 401 or needed for Firebase)
-    authPromise = loginUserByEmail(state);
-    try {
-        const result = await authPromise;
-        if (result.status === "expired") {
-            // Token has expired, notify the React component if callback is set
-            state.tokenExpired && state.tokenExpired();
-            throw new Error("Token expired");
+    let continueTrying = true;
+    while (continueTrying) {
+        continueTrying = false;
+        // Start new login attempt (either forced by 401 or needed for Firebase)
+        authPromise = loginUserByEmail(state);
+        try {
+            const result = await authPromise;
+            if (result.status === "expired") {
+                // Token has expired, notify the React component if callback is set
+                if (state.tokenExpired) {
+                    // We have a callback to renew the token: do it and try again
+                    state.tokenExpired();
+                    continueTrying = true; // Try logging in again
+                    clearAuthSettings();
+                    continue;
+                }
+                // Clear any persisted settings since they're no longer valid
+                clearAuthSettings();
+                throw new Error("Authentication token has expired");
+            }
+            else if (result.status !== "success") {
+                // Clear any persisted settings on auth failure
+                clearAuthSettings();
+                throw new Error(`Authentication failed: ${result.message || result.status}`);
+            }
+            // Update the user's ID to the internal one used by the backend and Firebase
+            state.userId = result.user_id || state.userId;
+            state.account = result.account || state.userId;
+            // Update the user's nickname
+            state.userNick = result.nickname || state.userNick;
+            // Use the server's Firebase API key, if provided
+            state.firebaseAPIKey = result.firebase_api_key || state.firebaseAPIKey;
+            // Load state flags and preferences
+            state.beginner = (_b = (_a = result.prefs) === null || _a === void 0 ? void 0 : _a.beginner) !== null && _b !== void 0 ? _b : true;
+            state.fairPlay = (_d = (_c = result.prefs) === null || _c === void 0 ? void 0 : _c.fairplay) !== null && _d !== void 0 ? _d : false;
+            state.ready = (_f = (_e = result.prefs) === null || _e === void 0 ? void 0 : _e.ready) !== null && _f !== void 0 ? _f : true;
+            state.readyTimed = (_h = (_g = result.prefs) === null || _g === void 0 ? void 0 : _g.ready_timed) !== null && _h !== void 0 ? _h : true;
+            // Save the authentication settings to sessionStorage for persistence
+            saveAuthSettings({
+                userEmail: state.userEmail, // CRITICAL: Include email to validate ownership
+                userId: state.userId,
+                userNick: state.userNick,
+                firebaseAPIKey: state.firebaseAPIKey,
+                beginner: state.beginner,
+                fairPlay: state.fairPlay,
+                ready: state.ready,
+                readyTimed: state.readyTimed,
+            });
+            // Success: Log in to Firebase with the token passed from the server
+            await loginFirebase(state, result.firebase_token);
         }
-        else if (result.status !== "success") {
-            throw new Error(`Authentication failed: ${result.message || result.status}`);
+        finally {
+            // Reset the promise so future 401s can trigger a new login
+            authPromise = null;
         }
-        // Success: Log in to Firebase with the token passed from the server
-        await loginFirebase(state, result.firebase_token);
-    }
-    finally {
-        // Reset the promise so future 401s can trigger a new login
-        authPromise = null;
     }
 };
 // Internal authenticated request function
@@ -34231,6 +34478,161 @@ class Game extends BaseGame {
     ;
 } // class Game
 
+/*
+
+  riddlePersistence.ts
+
+  Local persistence for Gáta Dagsins using localStorage
+
+  Copyright (C) 2025 Miðeind ehf.
+
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
+
+*/
+class RiddlePersistence {
+    // Generate storage key for a specific user and date
+    static getStorageKey(userId, date) {
+        return `${this.STORAGE_KEY_PREFIX}${date}_${userId}`;
+    }
+    // Save complete move list to localStorage
+    static saveLocalMoves(userId, date, moves) {
+        if (!userId || !date) {
+            return;
+        }
+        const data = {
+            date,
+            moves,
+            timestamp: new Date().toISOString(),
+            userId,
+        };
+        try {
+            const key = this.getStorageKey(userId, date);
+            localStorage.setItem(key, JSON.stringify(data));
+            // Clean up old entries while we're here
+            this.cleanupOldEntries();
+        }
+        catch (e) {
+            // Handle localStorage quota errors silently
+            console.error('Failed to save moves to localStorage:', e);
+        }
+    }
+    // Load move history from localStorage
+    static loadLocalMoves(userId, date) {
+        if (!userId || !date) {
+            return [];
+        }
+        try {
+            const key = this.getStorageKey(userId, date);
+            const stored = localStorage.getItem(key);
+            if (!stored) {
+                return [];
+            }
+            const data = JSON.parse(stored);
+            // Verify that this data belongs to the correct (current) user
+            if (!data.userId || data.userId !== userId) {
+                return [];
+            }
+            return data.moves || [];
+        }
+        catch (e) {
+            console.error('Failed to load moves from localStorage:', e);
+            return [];
+        }
+    }
+    // Check if user has achieved top score (local check)
+    static hasAchievedTopScore(userId, date, topScore) {
+        const moves = this.loadLocalMoves(userId, date);
+        return moves.some(move => move.score >= topScore);
+    }
+    // Get the best move from localStorage
+    static getBestLocalMove(userId, date) {
+        const moves = this.loadLocalMoves(userId, date);
+        if (moves.length === 0) {
+            return null;
+        }
+        // Find the move with the highest score
+        return moves.reduce((best, current) => current.score > best.score ? current : best);
+    }
+    // Clean up entries older than MAX_AGE_DAYS
+    static cleanupOldEntries() {
+        try {
+            const now = new Date();
+            const cutoffDate = new Date(now);
+            cutoffDate.setDate(cutoffDate.getDate() - this.MAX_AGE_DAYS);
+            const keysToRemove = [];
+            // Iterate through localStorage keys
+            for (let i = 0; i < localStorage.length; i++) {
+                const key = localStorage.key(i);
+                if (key && key.startsWith(this.STORAGE_KEY_PREFIX)) {
+                    // Extract date from key: "gata_YYYY-MM-DD_userId"
+                    const parts = key.split('_');
+                    if (parts.length >= 2) {
+                        const dateStr = parts[1];
+                        const entryDate = new Date(dateStr);
+                        if (!isNaN(entryDate.getTime()) && entryDate < cutoffDate) {
+                            keysToRemove.push(key);
+                        }
+                    }
+                }
+            }
+            // Remove old entries
+            keysToRemove.forEach(key => localStorage.removeItem(key));
+        }
+        catch (e) {
+            console.error('Failed to cleanup old entries:', e);
+        }
+    }
+    // Clear all persistence for a specific user
+    static clearUserData(userId) {
+        const keysToRemove = [];
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key && key.startsWith(this.STORAGE_KEY_PREFIX) && key.endsWith(`_${userId}`)) {
+                keysToRemove.push(key);
+            }
+        }
+        keysToRemove.forEach(key => localStorage.removeItem(key));
+    }
+    // === Firebase Read Methods ===
+    // Note: All Firebase write operations (achievements, stats, global best, leaderboard)
+    // are now handled by the backend server in the /gatadagsins/submit endpoint.
+    // The client only handles localStorage persistence and Firebase reads for display.
+    // Get leaderboard for a specific date
+    static async getLeaderboard(date, locale, limit = 10) {
+        try {
+            const leadersPath = `gatadagsins/${date}/${locale}/leaders`;
+            const leaders = await getFirebaseData(leadersPath);
+            if (!leaders) {
+                return [];
+            }
+            // Convert object to array and sort by score
+            const entries = Object.values(leaders);
+            entries.sort((a, b) => b.score - a.score);
+            return entries.slice(0, limit);
+        }
+        catch (error) {
+            console.error('Failed to get leaderboard:', error);
+            return [];
+        }
+    }
+    // Get user's streak statistics
+    static async getUserStats(userId, locale) {
+        try {
+            const statsPath = `gatadagsins/users/${locale}/${userId}/stats`;
+            const stats = await getFirebaseData(statsPath);
+            return stats;
+        }
+        catch (error) {
+            console.error('Failed to get user stats:', error);
+            return null;
+        }
+    }
+}
+RiddlePersistence.STORAGE_KEY_PREFIX = 'gata_';
+RiddlePersistence.MAX_AGE_DAYS = 30;
+
 /*
 
   Riddle.ts
@@ -34245,8 +34647,8 @@ class Game extends BaseGame {
   For further information, see https://github.com/mideind/Netskrafl
 
 */
-const HOT_WARM_BOUNDARY_RATIO = 0.6;
-const WARM_COLD_BOUNDARY_RATIO = 0.3;
+const HOT_WARM_BOUNDARY_RATIO = 0.5;
+const WARM_COLD_BOUNDARY_RATIO = 0.25;
 class Riddle extends BaseGame {
     constructor(uuid, date, model) {
         if (!model.state) {
@@ -34318,6 +34720,22 @@ class Riddle extends BaseGame {
                 this.hotBoundary = this.bestPossibleScore * HOT_WARM_BOUNDARY_RATIO;
                 // Initialize word checker
                 wordChecker.ingestTwoLetterWords(this.locale, this.two_letter_words[0]);
+                // Load persisted player moves from localStorage
+                if (state.userId) {
+                    const persistedMoves = RiddlePersistence.loadLocalMoves(state.userId, date);
+                    if (persistedMoves.length > 0) {
+                        // Convert from IPlayerMove to RiddleWord format, preserving timestamps
+                        this.playerMoves = persistedMoves.map(move => ({
+                            word: move.word,
+                            score: move.score,
+                            coord: move.coord,
+                            timestamp: move.timestamp || new Date().toISOString() // Use stored timestamp or fallback
+                        }));
+                        // Update personal best score from persisted moves
+                        const bestMove = persistedMoves.reduce((best, current) => current.score > best.score ? current : best);
+                        this.personalBestScore = bestMove.score;
+                    }
+                }
             }
         }
         catch (error) {
@@ -34338,6 +34756,7 @@ class Riddle extends BaseGame {
                     locale: this.locale,
                     userId: state.userId,
                     groupId: state.userGroupId || null,
+                    userDisplayName: state.userFullname || state.userNick || state.userId,
                     move,
                 }
             });
@@ -34386,13 +34805,26 @@ class Riddle extends BaseGame {
         // If the move is not valid or was already played, return
         if (!move)
             return;
-        if (move.score > this.personalBestScore) {
-            // This is the best score we've seen yet
-            this.personalBestScore = move.score;
-            // This might affect the global state,
-            // so notify the server
-            this.submitRiddleWord(move);
-        }
+        const { state } = this;
+        if (!state || !state.userId)
+            return;
+        // Save all moves to localStorage (local backup/cache)
+        // Convert RiddleWord[] to IPlayerMove[] for persistence
+        const movesToSave = this.playerMoves.map(m => ({
+            score: m.score,
+            word: m.word,
+            coord: m.coord,
+            timestamp: m.timestamp
+        }));
+        RiddlePersistence.saveLocalMoves(state.userId, this.date, movesToSave);
+        // If the move does not improve the personal best, we're done
+        if (move.score <= this.personalBestScore)
+            return;
+        // This is the best score we've seen yet
+        this.personalBestScore = move.score;
+        // Submit to server; the server handles all Firebase updates
+        // (achievements, stats, global best, leaderboard)
+        this.submitRiddleWord(move);
     }
     updateGlobalBestScore(best) {
         // Update the global best score, typically as a result
@@ -34619,6 +35051,9 @@ class Model {
         this.game = null;
         // The current Gáta Dagsins riddle, if any
         this.riddle = null;
+        // Gáta Dagsins-specific properties
+        this.userStats = null;
+        this.leaderboard = [];
         // The current Netskrafl game list
         this.gameList = null;
         // Number of games where it's the player's turn, plus count of zombie games
@@ -35124,6 +35559,7 @@ class Model {
                     state.userNick = user.nickname;
                     state.beginner = user.beginner;
                     state.fairPlay = user.fairplay;
+                    saveAuthSettings(state);
                 }
                 // Note that state.plan is updated via a Firebase notification
                 // Give the game instance a chance to update its state
@@ -35158,41 +35594,22 @@ class Model {
         return false;
     }
     handleUserMessage(json, firstAttach) {
-        var _a;
         // Handle an incoming Firebase user message, i.e. a message
         // on the /user/[userid] path
-        if (firstAttach || !this.state)
+        if (firstAttach || !this.state || !json)
             return;
         let redraw = false;
-        if (json.friend !== undefined) {
-            // Potential change of user friendship status
-            const newFriend = json.friend ? true : false;
-            if (this.user && this.user.friend != newFriend) {
-                this.user.friend = newFriend;
-                redraw = true;
-            }
-        }
-        if (json.plan !== undefined) {
+        if (typeof json.plan === "string") {
             // Potential change of user subscription plan
-            if (this.state.plan != json.plan) {
+            if (this.state.plan !== json.plan) {
                 this.state.plan = json.plan;
                 redraw = true;
             }
-            if (this.user && !this.user.friend && this.state.plan == "friend") {
-                // plan == "friend" implies that user.friend should be true
-                this.user.friend = true;
-                redraw = true;
-            }
-            if (this.state.plan == "" && ((_a = this.user) === null || _a === void 0 ? void 0 : _a.friend)) {
-                // Conversely, an empty plan string means that the user is not a friend
-                this.user.friend = false;
-                redraw = true;
-            }
         }
         if (json.hasPaid !== undefined) {
             // Potential change of payment status
-            const newHasPaid = (this.state.plan != "" && json.hasPaid) ? true : false;
-            if (this.state.hasPaid != newHasPaid) {
+            const newHasPaid = (this.state.plan !== "" && json.hasPaid) ? true : false;
+            if (this.state.hasPaid !== newHasPaid) {
                 this.state.hasPaid = newHasPaid;
                 redraw = true;
             }
@@ -35696,6 +36113,8 @@ class Actions {
                 url: "/setuserpref",
                 body: pref
             }); // No result required or expected
+            // Update the persisted settings in sessionStorage
+            saveAuthSettings(this.model.state);
         }
         catch (e) {
             // A future TODO might be to signal an error in the UI
@@ -35742,6 +36161,12 @@ class Actions {
         if (state === null || state === void 0 ? void 0 : state.userGroupId) {
             attachFirebaseListener(basePath + `group/${state.userGroupId}/best`, (json, firstAttach) => this.onRiddleGroupScoreUpdate(json, firstAttach));
         }
+        // Listen to global leaderboard
+        attachFirebaseListener(basePath + "leaders", (json, firstAttach) => this.onLeaderboardUpdate(json, firstAttach));
+        // Listen to user stats (if user is logged in)
+        if (state === null || state === void 0 ? void 0 : state.userId) {
+            attachFirebaseListener(`gatadagsins/users/${locale}/${state.userId}/stats`, (json, firstAttach) => this.onUserStatsUpdate(json, firstAttach));
+        }
     }
     detachListenerFromRiddle(date, locale) {
         const { state } = this.model;
@@ -35750,6 +36175,10 @@ class Actions {
         if (state === null || state === void 0 ? void 0 : state.userGroupId) {
             detachFirebaseListener(basePath + `group/${state.userGroupId}/best`);
         }
+        detachFirebaseListener(basePath + "leaders");
+        if (state === null || state === void 0 ? void 0 : state.userId) {
+            detachFirebaseListener(`gatadagsins/users/${locale}/${state.userId}/stats`);
+        }
     }
     onRiddleGlobalScoreUpdate(json, firstAttach) {
         const { riddle } = this.model;
@@ -35767,6 +36196,38 @@ class Actions {
         riddle.updateGroupBestScore(json);
         m.redraw();
     }
+    onLeaderboardUpdate(json, firstAttach) {
+        if (!json || typeof json !== 'object') {
+            this.model.leaderboard = [];
+        }
+        else {
+            // Convert dictionary to array and sort by score (desc), then timestamp (desc)
+            const entries = Object.keys(json).map(userId => ({
+                userId: json[userId].userId || userId,
+                displayName: json[userId].displayName || '',
+                score: json[userId].score || 0,
+                timestamp: json[userId].timestamp || ''
+            }));
+            // Sort by score descending, then by timestamp descending (newer first)
+            entries.sort((a, b) => {
+                if (b.score !== a.score) {
+                    return b.score - a.score;
+                }
+                return b.timestamp.localeCompare(a.timestamp);
+            });
+            this.model.leaderboard = entries;
+        }
+        m.redraw();
+    }
+    onUserStatsUpdate(json, firstAttach) {
+        if (!json) {
+            this.model.userStats = null;
+        }
+        else {
+            this.model.userStats = json;
+        }
+        m.redraw();
+    }
     async fetchRiddle(date, locale) {
         // Create the game via model
         if (!this.model)
@@ -35957,13 +36418,14 @@ const Netskrafl = React.memo(NetskraflImpl);
 */
 const RiddleScore = {
     view: (vnode) => {
-        const { riddle } = vnode.attrs;
+        const { riddle, mode = "desktop" } = vnode.attrs;
         if (!riddle)
             return m("div");
         const score = riddle.currentScore;
         const hasValidMove = score !== undefined;
         const hasTiles = riddle.tilesPlaced().length > 0;
-        let classes = [".gata-dagsins-score"];
+        const baseClass = (mode === "mobile" ? ".mobile-score" : ".gata-dagsins-score");
+        let classes = [baseClass];
         let displayText = "0";
         if (!hasTiles) {
             // State 1: No tiles on board - grayed/disabled, showing zero
@@ -35992,8 +36454,13 @@ const RiddleScore = {
             else {
                 classes.push(".hot");
             }
+            // Add celebration class if the player achieved the best possible score
+            if (score >= riddle.bestPossibleScore) {
+                classes.push(".celebrate");
+            }
         }
-        return m("div" + classes.join(""), m("span.gata-dagsins-legend", displayText));
+        const legendClass = mode === "mobile" ? ".mobile-score-legend" : ".gata-dagsins-legend";
+        return m("div" + classes.join(""), m("span" + legendClass, displayText));
     }
 };
 
@@ -36053,35 +36520,40 @@ const GataDagsinsBoardAndRack = {
 */
 const SunCorona = {
     view: (vnode) => {
-        const { animate = false } = vnode.attrs;
+        const { animate = false, size = 80 } = vnode.attrs;
+        // Calculate ray positions based on size
+        // For 80px: rays from -40 to -20 (inner radius 20px, outer radius 40px)
+        // For 90px: rays from -45 to -30 (inner radius 30px, outer radius 45px) to fit 60px circle
+        const outerRadius = size / 2;
+        const innerRadius = size / 3;
         return m("div.sun-corona" + (animate ? ".rotating" : ""), [
             m.trust(`
-        <svg width="80" height="80" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <svg width="${size}" height="${size}" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
           <g transform="translate(50,50)">
             <!-- Ray at 0° (12 o'clock) -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f1c40f" opacity="0.8" transform="rotate(0)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f1c40f" opacity="0.8" transform="rotate(0)"/>
             <!-- Ray at 30° -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f39c12" opacity="0.7" transform="rotate(30)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f39c12" opacity="0.7" transform="rotate(30)"/>
             <!-- Ray at 60° -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f1c40f" opacity="0.8" transform="rotate(60)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f1c40f" opacity="0.8" transform="rotate(60)"/>
             <!-- Ray at 90° (3 o'clock) -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f39c12" opacity="0.7" transform="rotate(90)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f39c12" opacity="0.7" transform="rotate(90)"/>
             <!-- Ray at 120° -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f1c40f" opacity="0.8" transform="rotate(120)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f1c40f" opacity="0.8" transform="rotate(120)"/>
             <!-- Ray at 150° -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f39c12" opacity="0.7" transform="rotate(150)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f39c12" opacity="0.7" transform="rotate(150)"/>
             <!-- Ray at 180° (6 o'clock) -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f1c40f" opacity="0.8" transform="rotate(180)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f1c40f" opacity="0.8" transform="rotate(180)"/>
             <!-- Ray at 210° -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f39c12" opacity="0.7" transform="rotate(210)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f39c12" opacity="0.7" transform="rotate(210)"/>
             <!-- Ray at 240° -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f1c40f" opacity="0.8" transform="rotate(240)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f1c40f" opacity="0.8" transform="rotate(240)"/>
             <!-- Ray at 270° (9 o'clock) -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f39c12" opacity="0.7" transform="rotate(270)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f39c12" opacity="0.7" transform="rotate(270)"/>
             <!-- Ray at 300° -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f1c40f" opacity="0.8" transform="rotate(300)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f1c40f" opacity="0.8" transform="rotate(300)"/>
             <!-- Ray at 330° -->
-            <polygon points="0,-40 -3,-20 3,-20" fill="#f39c12" opacity="0.7" transform="rotate(330)"/>
+            <polygon points="0,-${outerRadius} -3,-${innerRadius} 3,-${innerRadius}" fill="#f39c12" opacity="0.7" transform="rotate(330)"/>
           </g>
         </svg>
       `)
@@ -36089,6 +36561,101 @@ const SunCorona = {
     }
 };
 
+/*
+
+  Mobile-Status.ts
+
+  Mobile-only horizontal status component for Gáta Dagsins
+
+  Copyright (C) 2025 Miðeind ehf.
+  Author: Vilhjálmur Þorsteinsson
+
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
+
+*/
+// Mobile-only horizontal status display
+const MobileStatus = () => {
+    return {
+        view: (vnode) => {
+            const { riddle, selectedMoves, bestMove, onMoveClick } = vnode.attrs;
+            const { bestPossibleScore, globalBestScore } = riddle;
+            // Determine if player achieved best possible score
+            const achieved = bestMove !== undefined;
+            const celebrate = bestMove && bestMove.word !== "";
+            // Get player's current best score
+            const playerBestScore = selectedMoves.length > 0 ? selectedMoves[0].score : 0;
+            // Determine current leader score (may be this player or another)
+            let leaderScore = 0;
+            let isPlayerLeading = false;
+            if (globalBestScore && globalBestScore.score > 0) {
+                leaderScore = globalBestScore.score;
+                // Check if player is leading
+                isPlayerLeading = playerBestScore >= globalBestScore.score;
+            }
+            else {
+                leaderScore = playerBestScore;
+                isPlayerLeading = playerBestScore > 0;
+            }
+            return m(".mobile-status-container", [
+                // Current word score (leftmost) - uses RiddleScore component in mobile mode
+                m(".mobile-status-item", m(RiddleScore, { riddle, mode: "mobile" })),
+                // Player's best score
+                m(".mobile-status-item.player-best", [
+                    m(".mobile-status-label", ts("Þín besta:")),
+                    m(".mobile-status-score", playerBestScore.toString())
+                ]),
+                // Current leader score
+                m(".mobile-status-item.leader" + (isPlayerLeading ? ".is-player" : ""), [
+                    m(".mobile-status-label", isPlayerLeading ? ts("Þú leiðir!") : ts("Leiðandi:")),
+                    m(".mobile-status-score", leaderScore.toString())
+                ]),
+                // Best possible score
+                m(".mobile-status-item.best-possible"
+                    + (celebrate ? ".celebrate" : "")
+                    + (achieved ? ".achieved" : ""), {
+                    onclick: () => celebrate && onMoveClick(bestMove.word, bestMove.coord)
+                }, [
+                    // Wrapper for score and corona to position them together
+                    m(".mobile-best-score-wrapper", [
+                        celebrate ? m(SunCorona, { animate: true, size: 100 }) : null,
+                        m(".mobile-status-score", bestPossibleScore.toString())
+                    ])
+                ])
+            ]);
+        }
+    };
+};
+
+/*
+
+  TabBar.ts
+
+  Reusable tab navigation component
+
+  Copyright (C) 2025 Miðeind ehf.
+  Author: Vilhjálmur Þorsteinsson
+
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
+
+*/
+const TabBar = {
+    view: (vnode) => {
+        const { tabs, activeTab, onTabChange } = vnode.attrs;
+        return m(".tab-bar", tabs.map(tab => m(".tab-item" + (activeTab === tab.id ? ".active" : ""), {
+            key: tab.id,
+            onclick: () => onTabChange(tab.id)
+        }, [
+            tab.iconGlyph ? m("span.tab-icon", glyph(tab.iconGlyph)) :
+                tab.icon ? m("span.tab-icon", tab.icon) : null,
+            m("span.tab-label", tab.label)
+        ])));
+    }
+};
+
 /*
 
   Thermometer.ts
@@ -36163,12 +36730,27 @@ const BestPossibleScore = () => {
     return {
         view: (vnode) => {
             const { score, bestMove, onMoveClick } = vnode.attrs;
-            const topLabel = bestMove
-                ? removeBlankMarkers(bestMove.word)
-                : ts("Besta mögulega lögn");
+            // Determine the label based on achievement status
+            let topLabel;
+            if (bestMove !== undefined) {
+                if (bestMove.word) {
+                    // Current player achieved it - show their word
+                    topLabel = removeBlankMarkers(bestMove.word);
+                }
+                else {
+                    // Someone else achieved it - indicate this
+                    topLabel = ts("Bestu lögn náð!");
+                }
+            }
+            else {
+                // Not achieved yet - show default label
+                topLabel = ts("Besta mögulega lögn");
+            }
+            const achieved = bestMove !== undefined;
             const celebrate = bestMove && bestMove.word !== "";
             return m(".thermometer-best-score"
-                + (celebrate ? ".celebrate" : ""), m(".thermometer-best-score-container", {
+                + (celebrate ? ".celebrate" : "")
+                + (achieved ? ".achieved" : ""), m(".thermometer-best-score-container", {
                 onclick: () => celebrate && onMoveClick(bestMove.word, bestMove.coord)
             }, [
                 // Sun corona behind the circle when celebrating
@@ -36296,6 +36878,196 @@ const Thermometer = () => {
     };
 };
 
+/*
+
+  StatsView.ts
+
+  User statistics display component for Gáta Dagsins
+
+  Copyright (C) 2025 Miðeind ehf.
+  Author: Vilhjálmur Þorsteinsson
+
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
+
+*/
+const StatsView = {
+    view: (vnode) => {
+        const { stats, loading = false } = vnode.attrs;
+        if (loading) {
+            return m(".stats-view.loading", m(".loading-message", ts("Sæki tölfræði...")));
+        }
+        if (!stats) {
+            return m(".stats-view.empty", m(".empty-message", ts("Engin tölfræði til að sýna")));
+        }
+        const statItems = [
+            {
+                iconGlyph: "fire",
+                label: ts("Núverandi striklota"),
+                value: stats.currentStreak,
+                highlight: stats.currentStreak > 0
+            },
+            {
+                iconGlyph: "star",
+                label: ts("Lengsta striklota"),
+                value: stats.longestStreak
+            },
+            {
+                iconGlyph: "tower",
+                label: ts("Hæsta skori náð"),
+                value: stats.totalTopScores
+            },
+            {
+                iconGlyph: "certificate",
+                label: ts("Striklota hæsta skors"),
+                value: stats.topScoreStreak,
+                highlight: stats.topScoreStreak > 0
+            },
+            {
+                iconGlyph: "calendar",
+                label: ts("Heildarfjöldi daga"),
+                value: stats.totalDaysPlayed
+            },
+        ];
+        return m(".stats-view", m(".stats-grid", statItems.map((item, index) => m(".stat-item" + (item.highlight ? ".highlight" : ""), { key: index }, [
+            m(".stat-icon", glyph(item.iconGlyph)),
+            m(".stat-info", [
+                m(".stat-label", item.label),
+                m(".stat-value", item.value.toString())
+            ])
+        ]))));
+    }
+};
+
+/*
+
+  LeaderboardView.ts
+
+  Daily leaderboard display component for Gáta Dagsins
+
+  Copyright (C) 2025 Miðeind ehf.
+  Author: Vilhjálmur Þorsteinsson
+
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
+
+*/
+function getMedalIcon(rank) {
+    switch (rank) {
+        case 1: return "🥇";
+        case 2: return "🥈";
+        case 3: return "🥉";
+        default: return null;
+    }
+}
+function formatDate(dateStr) {
+    // Format YYYY-MM-DD to Icelandic date (e.g., "2. okt.")
+    const date = new Date(dateStr + "T00:00:00");
+    const day = date.getDate();
+    const months = [
+        "janúar", "febrúar", "mars", "apríl", "maí", "júní",
+        "júlí", "ágúst", "september", "október", "nóvember", "desember",
+    ];
+    const month = months[date.getMonth()];
+    return `${day}. ${month}`;
+}
+const LeaderboardView = {
+    view: (vnode) => {
+        const { leaderboard, currentUserId, date, loading = false } = vnode.attrs;
+        if (loading) {
+            return m(".leaderboard-view.loading", m(".loading-message", ts("Hleð stigatöflu...")));
+        }
+        if (!leaderboard || leaderboard.length === 0) {
+            return m(".leaderboard-view.empty", m(".empty-message", ts("Engin stig skráð enn")));
+        }
+        return m(".leaderboard-view", [
+            m(".leaderboard-header", [
+                m(".leaderboard-title", formatDate(date)),
+            ]),
+            m(".leaderboard-list", leaderboard.map((entry, index) => {
+                const rank = index + 1;
+                const isCurrentUser = entry.userId === currentUserId;
+                const medal = getMedalIcon(rank);
+                return m(".leaderboard-entry" + (isCurrentUser ? ".current-user" : ""), { key: entry.userId }, [
+                    m(".entry-rank", [
+                        medal ? m("span.medal", medal) : m("span.rank-number", rank.toString())
+                    ]),
+                    m(".entry-name", isCurrentUser ? ts("Þú") : entry.displayName),
+                    m(".entry-score", entry.score.toString())
+                ]);
+            }))
+        ]);
+    }
+};
+
+/*
+
+  RightSideTabs.ts
+
+  Desktop tabbed container for Performance/Stats/Leaderboard in Gáta Dagsins
+
+  Copyright (C) 2025 Miðeind ehf.
+  Author: Vilhjálmur Þorsteinsson
+
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
+
+*/
+const RightSideTabs = () => {
+    // Component-local state for active tab (defaults to performance)
+    let activeTab = "performance";
+    const tabs = [
+        { id: "performance", label: ts("Frammistaða"), iconGlyph: "dashboard" },
+        { id: "stats", label: ts("Tölfræði"), iconGlyph: "stats" },
+        { id: "leaderboard", label: ts("Stigatafla"), iconGlyph: "tower" }
+    ];
+    return {
+        view: (vnode) => {
+            const { view, selectedMoves, bestMove, onMoveClick } = vnode.attrs;
+            const { riddle, state } = view.model;
+            if (!riddle) {
+                return m(".gatadagsins-right-side-tabs", "");
+            }
+            const handleTabChange = (tabId) => {
+                activeTab = tabId;
+            };
+            return m(".gatadagsins-right-side-tabs", [
+                // Tab navigation
+                m(TabBar, {
+                    tabs,
+                    activeTab,
+                    onTabChange: handleTabChange
+                }),
+                // Tab content
+                m(".tab-content", [
+                    // Performance tab (thermometer)
+                    activeTab === "performance" ? m(Thermometer, {
+                        riddle,
+                        selectedMoves,
+                        bestMove,
+                        onMoveClick
+                    }) : null,
+                    // Stats tab
+                    activeTab === "stats" ? m(StatsView, {
+                        stats: view.model.userStats || null,
+                        loading: false
+                    }) : null,
+                    // Leaderboard tab
+                    activeTab === "leaderboard" ? m(LeaderboardView, {
+                        leaderboard: view.model.leaderboard || [],
+                        currentUserId: (state === null || state === void 0 ? void 0 : state.userId) || "",
+                        date: riddle.date,
+                        loading: false
+                    }) : null
+                ])
+            ]);
+        }
+    };
+};
+
 /*
 
   GataDagsins-Right-Side.ts
@@ -36311,7 +37083,7 @@ const Thermometer = () => {
 
 */
 const GataDagsinsRightSide = {
-    // Component containing a single vertical thermometer-style performance display
+    // Component containing both mobile status bar and desktop tabbed view
     view: (vnode) => {
         const { view, selectedMoves, bestMove } = vnode.attrs;
         const { riddle } = view.model;
@@ -36322,17 +37094,198 @@ const GataDagsinsRightSide = {
             }
         };
         return m(".gatadagsins-right-side-wrapper", riddle ? [
-            // Single thermometer column containing all performance levels
-            m(".gatadagsins-thermometer-column", m(Thermometer, {
+            // Mobile-only status bar (visible on mobile, hidden on desktop)
+            m(".gatadagsins-mobile-status", m(MobileStatus, {
                 riddle,
                 selectedMoves,
                 bestMove,
                 onMoveClick: handleMoveClick
             })),
+            // Desktop-only tabbed view (hidden on mobile, visible on desktop)
+            m(".gatadagsins-thermometer-column", m(RightSideTabs, {
+                view,
+                selectedMoves,
+                bestMove,
+                onMoveClick: handleMoveClick
+            })),
         ] : null);
     }
 };
 
+/*
+
+  gatadagsins-help.ts
+
+  Help dialog for Gáta Dagsins
+
+  Copyright (C) 2025 Miðeind ehf.
+  Author: Vilhjálmur Þorsteinsson
+
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
+
+*/
+const GataDagsinsHelp = {
+    view: (vnode) => {
+        const closeHelp = vnode.attrs.onClose;
+        return m(".modal-dialog.gatadagsins-help", m(".modal-content", [
+            // Header with close button
+            m(".modal-header", [
+                m("h2", "Um Gátu dagsins"),
+                m("button.close", {
+                    onclick: closeHelp,
+                    "aria-label": "Loka"
+                }, m("span", { "aria-hidden": "true" }, "×"))
+            ]),
+            // Body with help content
+            m(".modal-body", [
+                m("p", "Gáta dagsins er dagleg krossgátuþraut, svipuð skrafli, þar sem þú reynir að finna " +
+                    "stigahæsta orðið sem hægt er að mynda með gefnum stöfum."),
+                m("h3", "Hvernig á að spila"),
+                m("ul", [
+                    m("li", "Þú færð borð með allmörgum stöfum sem þegar hafa verið lagðir."),
+                    m("li", "Neðst á skjánum eru stafaflísar sem þú getur notað til að mynda orð."),
+                    m("li", "Dragðu flísar á borðið til að mynda orð, annaðhvort lárétt eða lóðrétt."),
+                    m("li", "Orðin verða að tengjast við stafi sem fyrir eru á borðinu."),
+                    m("li", "Þú sérð jafnóðum hvort lögnin á borðinu er gild og hversu mörg stig hún gefur."),
+                    m("li", "Þú getur prófað eins mörg orð og þú vilt - besta skorið þitt er vistað."),
+                ]),
+                m("h3", "Stigagjöf"),
+                m("p", "Þú færð stig fyrir hvern staf í orðinu, auk bónusstiga fyrir lengri orð:"),
+                m("ul", [
+                    m("li", "Hver stafur gefur 1-10 stig eftir gildi hans"),
+                    m("li", "Orð sem nota allar 7 stafaflísarnar gefa 50 stiga bónus"),
+                    m("li", "Sumir reitir á borðinu tvöfalda eða þrefalda stafagildið"),
+                    m("li", "Sumir reitir tvöfalda eða þrefalda heildarorðagildið"),
+                ]),
+                m("h3", "Hitamælir"),
+                m("p", "Hitamælirinn hægra megin (eða efst á farsímum) sýnir:"),
+                m("ul", [
+                    m("li", m("strong", "Besta mögulega skor:"), " Hæstu stig sem hægt er að ná á þessu borði."),
+                    m("li", m("strong", "Besta skor dagsins:"), " Hæstu stig sem einhver leikmaður hefur náð í dag."),
+                    m("li", m("strong", "Þín bestu orð:"), " Orðin sem þú hefur lagt og stigin fyrir þau."),
+                    m("li", "Þú getur smellt á orð á hitamælinum til að fá þá lögn aftur á borðið."),
+                ]),
+                m("h3", "Ábendingar"),
+                m("ul", [
+                    m("li", "Reyndu að nota dýra stafi (eins og X, Ý, Þ) á tvöföldunar- eða þreföldunarreitum."),
+                    m("li", "Lengri orð gefa mun fleiri stig vegna bónussins."),
+                    m("li", "Þú getur dregið allar flísar til baka með bláa endurkalls-hnappnum."),
+                    m("li", "Ný gáta birtist á hverjum nýjum degi - klukkan 00:00!"),
+                ]),
+                m("h3", "Um leikinn"),
+                m("p", [
+                    "Gáta dagsins er systkini ",
+                    m("a", { href: "https://netskrafl.is", target: "_blank" }, "Netskrafls"),
+                    ", hins sívinsæla íslenska krossgátuleiks á netinu. ",
+                    "Leikurinn er þróaður af Miðeind ehf."
+                ]),
+            ]),
+            // Footer with close button
+            m(".modal-footer", m("button.btn.btn-primary", {
+                onclick: closeHelp
+            }, "Loka"))
+        ]));
+    }
+};
+
+/*
+
+  StatsModal.ts
+
+  Mobile modal for stats and leaderboard
+
+  Copyright (C) 2025 Miðeind ehf.
+  Author: Vilhjálmur Þorsteinsson
+
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
+
+*/
+const StatsModal = () => {
+    // Component-local state for active tab (defaults to stats)
+    let activeTab = "stats";
+    const tabs = [
+        { id: "stats", label: ts("Tölfræði"), iconGlyph: "stats" },
+        { id: "leaderboard", label: ts("Stigatafla"), iconGlyph: "tower" }
+    ];
+    return {
+        view: (vnode) => {
+            const { view, onClose } = vnode.attrs;
+            const { riddle, state } = view.model;
+            if (!riddle) {
+                return null;
+            }
+            const handleTabChange = (tabId) => {
+                activeTab = tabId;
+            };
+            return [
+                // Backdrop
+                m(".modal-backdrop", {
+                    onclick: onClose
+                }),
+                // Modal dialog
+                m(".modal-dialog.stats-modal", [
+                    m(".modal-content", [
+                        // Header with close button
+                        m(".modal-header", [
+                            m("h2", ts("Tölfræði")),
+                            m("button.close", {
+                                onclick: onClose
+                            }, "×")
+                        ]),
+                        // Tab navigation
+                        m(TabBar, {
+                            tabs,
+                            activeTab,
+                            onTabChange: handleTabChange
+                        }),
+                        // Modal body with tab content
+                        m(".modal-body", [
+                            activeTab === "stats" ? m(StatsView, {
+                                stats: view.model.userStats || null,
+                                loading: false
+                            }) : null,
+                            activeTab === "leaderboard" ? m(LeaderboardView, {
+                                leaderboard: view.model.leaderboard || [],
+                                currentUserId: (state === null || state === void 0 ? void 0 : state.userId) || "",
+                                date: riddle.date,
+                                loading: false
+                            }) : null
+                        ])
+                    ])
+                ])
+            ];
+        }
+    };
+};
+
+/*
+
+  MobileStatsButton.ts
+
+  Button to open stats modal on mobile
+
+  Copyright (C) 2025 Miðeind ehf.
+  Author: Vilhjálmur Þorsteinsson
+
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
+
+*/
+const MobileStatsButton = {
+    view: (vnode) => {
+        const { onClick } = vnode.attrs;
+        return m(".mobile-stats-button", {
+            onclick: onClick,
+            title: "Tölfræði og stigatafla"
+        }, m(".stats-icon", glyph("stats")));
+    }
+};
+
 /*
 
   GataDagsins.ts
@@ -36348,11 +37301,19 @@ const GataDagsinsRightSide = {
 
 */
 const MAX_MOVES_TO_DISPLAY = 10;
-const selectTopMoves = (thisPlayer, moves, globalBestScore, groupBestScore) => {
-    var _a;
+const currentMoveState = (riddle) => {
+    var _a, _b, _c;
+    const thisPlayer = ((_a = riddle.model.state) === null || _a === void 0 ? void 0 : _a.userId) || "";
+    const { bestPossibleScore, // The highest score achievable for this riddle
+    globalBestScore, // The best score achieved by any player
+    groupBestScore, // The best score achieved within the player's group
+    playerMoves, } = riddle;
+    // If the player has equaled the best possible score,
+    // the winning word is stored here and displayed at the top
+    let bestMove = undefined;
     // Sort moves by score in descending order and
     // cut the tail off the list to only include the top moves
-    const movesToDisplay = moves
+    const selectedMoves = playerMoves
         .sort((a, b) => b.score - a.score)
         .slice(0, MAX_MOVES_TO_DISPLAY)
         .map(move => ({
@@ -36360,88 +37321,102 @@ const selectTopMoves = (thisPlayer, moves, globalBestScore, groupBestScore) => {
         word: move.word,
         coord: move.coord,
     }));
-    // If there is a global best score, and it is different from
-    // the player's own top score, we include it as the first move
+    // Check whether we need to add or annotate the global best score
     if (globalBestScore && globalBestScore.score > 0) {
         const { score, word, coord } = globalBestScore;
-        if (((_a = movesToDisplay[0]) === null || _a === void 0 ? void 0 : _a.score) >= score) {
+        if (((_c = (_b = selectedMoves[0]) === null || _b === void 0 ? void 0 : _b.score) !== null && _c !== void 0 ? _c : 0) >= score) {
             // This player has made a move that scores the same
             // or better as the top score: mark the move
-            movesToDisplay[0].isGlobalBestScore = true;
+            selectedMoves[0].isGlobalBestScore = true;
         }
         else if (globalBestScore.player === thisPlayer) {
             // This player holds the global best score, probably
-            // from a previous session: add it as a move
-            movesToDisplay.unshift({ score, isGlobalBestScore: true, word, coord });
+            // from a previous session, so it's not already
+            // in the selectedMoves list: add it as a move
+            selectedMoves.unshift({ score, isGlobalBestScore: true, word, coord });
         }
         else {
-            // This is a global best score from another player: add it as a special move
-            movesToDisplay.unshift({ score, isGlobalBestScore: true, word: "", coord: "" });
+            // This is a global best score from another player
+            selectedMoves.unshift({ score, isGlobalBestScore: true, word: "", coord: "" });
         }
     }
-    // TODO: Add handling for group best score
-    return movesToDisplay;
-};
-const currentMoveState = (riddle) => {
-    var _a;
-    const thisPlayer = ((_a = riddle.model.state) === null || _a === void 0 ? void 0 : _a.userId) || "";
-    const { bestPossibleScore, globalBestScore, groupBestScore, playerMoves, } = riddle;
-    // If the player has equaled the best possible score,
-    // the winning word is stored here and displayed at the top
-    let bestMove = undefined;
-    // Apply the move selection and allocation algorithm
-    const selectedMoves = selectTopMoves(thisPlayer, playerMoves, globalBestScore);
-    // If the top-scoring move has the bestPossibleScore,
-    // extract it from the move list
+    // Check if the best possible score has been achieved, by this player
+    // or another player. If so, we remove it from the move list, since we
+    // only display it at the top of the thermometer.
     if (selectedMoves.length > 0 && selectedMoves[0].score === bestPossibleScore) {
-        if (selectedMoves[0].word) {
-            // The word was played by this player
-            bestMove = selectedMoves.shift();
-        }
+        bestMove = selectedMoves.shift();
     }
     return { selectedMoves, bestMove };
 };
-const GataDagsins$1 = {
+const GataDagsins$1 = () => {
     // A view of the Gáta Dagsins page
-    oninit: (vnode) => {
-        const { model, actions } = vnode.attrs.view;
-        const { riddle } = model;
-        if (!riddle) {
-            const { date, locale } = vnode.attrs;
-            // Initialize a fresh riddle object if it doesn't exist
-            actions.fetchRiddle(date, locale);
+    let showHelp = false;
+    let showStatsModal = false;
+    return {
+        oninit: async (vnode) => {
+            const { model, actions } = vnode.attrs.view;
+            const { riddle } = model;
+            if (!riddle) {
+                const { date, locale } = vnode.attrs;
+                // Initialize a fresh riddle object if it doesn't exist
+                await actions.fetchRiddle(date, locale);
+            }
+            // Initialize dialog states
+            showHelp = false;
+            showStatsModal = false;
+        },
+        view: (vnode) => {
+            var _a;
+            const { view } = vnode.attrs;
+            const { model } = view;
+            const { riddle } = model;
+            const { selectedMoves, bestMove } = (riddle
+                ? currentMoveState(riddle)
+                : { selectedMoves: [], bestMove: undefined });
+            const toggleHelp = () => {
+                showHelp = !showHelp;
+                m.redraw();
+            };
+            const toggleStatsModal = () => {
+                showStatsModal = !showStatsModal;
+                m.redraw();
+            };
+            return m("div.drop-target", {
+                id: "gatadagsins-background",
+            }, [
+                // The main content area
+                riddle ? m(".gatadagsins-container", [
+                    // Main display area with flex layout
+                    m(".gatadagsins-main", [
+                        // Board and rack component (left side)
+                        m(GataDagsinsBoardAndRack, { view }),
+                        // Right-side component with scores and comparisons
+                        m(GataDagsinsRightSide, { view, selectedMoves, bestMove }),
+                        // Blank dialog
+                        riddle.askingForBlank
+                            ? m(BlankDialog, { game: riddle })
+                            : "",
+                    ])
+                ]) : "",
+                // The left margin elements: back button and info/help button
+                // These elements appear after the main container for proper z-order
+                // m(LeftLogo), // Currently no need for the logo for Gáta Dagsins
+                // Show the Beginner component if the user is a beginner
+                ((_a = model.state) === null || _a === void 0 ? void 0 : _a.beginner) ? m(Beginner, { view }) : "",
+                // Custom Info button for GataDagsins that shows help dialog
+                m(".info", { title: ts("Upplýsingar og hjálp") }, m("a.iconlink", { href: "#", onclick: (e) => { e.preventDefault(); toggleHelp(); } }, glyph("info-sign"))),
+                // Mobile stats button (hidden on desktop)
+                m(MobileStatsButton, { onClick: toggleStatsModal }),
+                // Help dialog and backdrop
+                showHelp ? [
+                    m(".modal-backdrop", { onclick: (e) => { e.preventDefault(); } }),
+                    m(GataDagsinsHelp, { onClose: toggleHelp })
+                ] : "",
+                // Stats modal and backdrop (mobile only)
+                showStatsModal ? m(StatsModal, { view, onClose: toggleStatsModal }) : "",
+            ]);
         }
-    },
-    view: (vnode) => {
-        const { view } = vnode.attrs;
-        const { model } = view;
-        const { riddle } = model;
-        const { selectedMoves, bestMove } = (riddle
-            ? currentMoveState(riddle)
-            : { selectedMoves: [], bestMove: undefined });
-        return m("div.drop-target", {
-            id: "gatadagsins-background",
-        }, [
-            // The main content area
-            riddle ? m(".gatadagsins-container", [
-                // Main display area with flex layout
-                m(".gatadagsins-main", [
-                    // Board and rack component (left side)
-                    m(GataDagsinsBoardAndRack, { view }),
-                    // Right-side component with scores and comparisons
-                    m(GataDagsinsRightSide, { view, selectedMoves, bestMove }),
-                    // Blank dialog
-                    riddle.askingForBlank
-                        ? m(BlankDialog, { game: riddle })
-                        : "",
-                ])
-            ]) : "",
-            // The left margin elements: back button and info/help button
-            // These elements appear after the main container for proper z-order
-            m(LeftLogo),
-            m(Info),
-        ]);
-    }
+    };
 };
 
 /*
@@ -36477,11 +37452,22 @@ async function main(state, container) {
         const model = new Model(settings, state);
         const actions = new Actions(model);
         const view = new View(actions);
+        // Get date from URL parameter, fallback to today
+        const urlParams = new URLSearchParams(window.location.search);
+        const dateParam = urlParams.get('date');
         const today = new Date().toISOString().split("T")[0];
+        const riddleDate = dateParam || today;
+        // Validate date format (YYYY-MM-DD)
+        const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+        const validDate = dateRegex.test(riddleDate) ? riddleDate : today;
         const locale = state.locale || "is_IS";
+        // Log the date being used (helpful for debugging)
+        if (dateParam) {
+            console.log(`Loading Gáta Dagsins for date: ${validDate} (from URL parameter)`);
+        }
         // Mount the Gáta Dagsins UI using an anonymous closure component
         m.mount(container, {
-            view: () => m(GataDagsins$1, { view, date: today, locale }),
+            view: () => m(GataDagsins$1, { view, date: validDate, locale }),
         });
     }
     catch (e) {
@@ -36491,6 +37477,8 @@ async function main(state, container) {
     return "success";
 }
 
+// Note: To load a specific date for debugging, use URL parameter: ?date=YYYY-MM-DD
+// Example: http://localhost:6006/?date=2025-01-25
 const mountForUser = async (state) => {
     // Return a DOM tree containing a mounted Gáta Dagsins UI
     // for the user specified in the state object