@mideind/netskrafl-react 1.0.2 → 1.2.0

package/dist/esm/index.js

@@ -15,6 +15,8 @@ const saveAuthSettings = (settings) => {
             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)
@@ -83,6 +85,7 @@ const applyPersistedSettings = (state) => {
     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,
@@ -100,6 +103,7 @@ const DEFAULT_STATE = {
     firebaseSenderId: "",
     firebaseAppId: "",
     measurementId: "",
+    account: "",
     userEmail: "",
     userId: "",
     userNick: "",
@@ -23529,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) {
@@ -24190,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.
  *
@@ -25319,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(),
@@ -26735,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.
  */
@@ -27238,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();
+}
 
 /*
 
@@ -27503,50 +27618,61 @@ const ensureAuthenticated = async (state) => {
         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();
-            // Clear any persisted settings since they're no longer valid
-            clearAuthSettings();
-            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);
+        }
+        finally {
+            // Reset the promise so future 401s can trigger a new login
+            authPromise = null;
         }
-        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;
-        // 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);
-    }
-    finally {
-        // Reset the promise so future 401s can trigger a new login
-        authPromise = null;
     }
 };
 // Internal authenticated request function
@@ -29078,7 +29204,7 @@ const BestDisplay = () => {
                 // Make sure blank tiles get a different color
                 for (let i = 0; i < bw.length; i++)
                     if (bw[i] == '?') {
-                        s.push(m("span.blanktile", bw[i + 1]));
+                        s.push(m("span.netskrafl-blanktile", bw[i + 1]));
                         i += 1;
                     }
                     else
@@ -29874,7 +30000,7 @@ const BlankDialog = () => {
                     onclick: (ev) => { game.placeBlank(letter); ev.preventDefault(); },
                     onmouseover: buttonOver,
                     onmouseout: buttonOut
-                }, m(".blank-choice.tile.racktile", letter)));
+                }, m(".blank-choice.netskrafl-tile.netskrafl-racktile", letter)));
                 len--;
             }
             r.push(m("tr", c));
@@ -29969,25 +30095,26 @@ const Bag = () => {
   For further information, see https://github.com/mideind/Netskrafl
 
 */
-function makeButton(cls, disabled, onclick, title, children, id) {
+function makeButton(cls, disabled, onclick, title, children, visible, id) {
     // Create a button element, wrapping the disabling logic
     // and other boilerplate
-    const attr = {
+    const attrs = {
         onmouseout: buttonOut,
         onmouseover: buttonOver,
+        style: { visibility: visible === false ? "hidden" : "visible" },
     };
     if (title)
-        attr.title = title;
+        attrs.title = title;
     if (id)
-        attr.id = id;
+        attrs.id = id;
     if (disabled)
-        attr.onclick = (ev) => ev.preventDefault();
+        attrs.onclick = (ev) => ev.preventDefault();
     else
-        attr.onclick = (ev) => {
+        attrs.onclick = (ev) => {
             onclick && onclick();
             ev.preventDefault();
         };
-    return m("." + cls + (disabled ? ".disabled" : ""), attr, children // children may be omitted
+    return m("." + cls + (disabled ? ".disabled" : ""), attrs, children // children may be omitted
     );
 }
 const Score = {
@@ -30009,20 +30136,20 @@ const Score = {
 const RecallButton = {
     view: (vnode) => {
         // Create a tile recall button
-        const { view, game, disabled } = vnode.attrs;
+        const { view, game, disabled, visible = true } = vnode.attrs;
         if (!game)
             return undefined;
-        return makeButton("recallbtn", !!disabled, () => { game.resetRack(); view.updateScale(); }, ts("Færa stafi aftur í rekka"), glyph("down-arrow"));
+        return makeButton("recallbtn", !!disabled, () => { game.resetRack(); view.updateScale(); }, ts("Færa stafi aftur í rekka"), glyph("down-arrow"), visible);
     }
 };
 const ScrambleButton = {
     view: (vnode) => {
         // Create a tile scramble button
-        const { game, disabled } = vnode.attrs;
+        const { game, disabled, visible = true } = vnode.attrs;
         if (!game)
             return undefined;
         return makeButton("scramblebtn", !!disabled, () => game.rescrambleRack(), // Note: plain game.rescrambleRack doesn't work here
-        ts("Stokka upp rekka"), glyph("random"));
+        ts("Stokka upp rekka"), glyph("random"), visible);
     }
 };
 const ButtonsRecallScramble = {
@@ -30038,9 +30165,9 @@ const ButtonsRecallScramble = {
         if (s.showRecall && !s.showingDialog)
             // Show a 'Recall tiles' button
             return m(RecallButton, { view, game });
-        if (s.showScramble && !s.showingDialog)
-            return m(ScrambleButton, { view, game });
-        return undefined;
+        const visible = s.showScramble && !s.tilesPlaced;
+        const disabled = s.showingDialog;
+        return m(ScrambleButton, { view, game, visible, disabled });
     }
 };
 const Buttons = {
@@ -30117,7 +30244,7 @@ const Buttons = {
                     }
                 };
             }
-            r.push(makeButton(classes.join("."), s.showingDialog, action, text, legend, "move-mobile"));
+            r.push(makeButton(classes.join("."), s.showingDialog, action, text, legend, true, "move-mobile"));
         }
         if (s.showForceResignMobile) {
             // Force resignation button (only shown on mobile,
@@ -30136,7 +30263,7 @@ const Buttons = {
         }
         if (s.showExchange) {
             // Exchange tiles from the rack
-            const disabled = (s.tilesPlaced || s.showingDialog) && !s.exchangeAllowed;
+            const disabled = !s.exchangeAllowed || s.tilesPlaced || s.showingDialog;
             r.push(makeButton("submitexchange", disabled, () => game.submitExchange(), // Note: plain game.submitExchange doesn't work here
             ts("Skipta stöfum"), glyph("refresh")));
         }
@@ -30433,24 +30560,24 @@ const Tile = (initialVnode) => {
             const isRackTile = coord[0] === 'R';
             // A single tile, on the board or in the rack
             const t = game.tiles[coord];
-            let classes = [".tile"];
+            let classes = [".netskrafl-tile"];
             let attrs = {};
             if (t.tile === '?')
-                classes.push("blanktile");
+                classes.push("netskrafl-blanktile");
             if (EXTRA_WIDE_LETTERS.includes(t.letter))
                 // Extra wide letter: handle specially
-                classes.push("extra-wide");
+                classes.push("netskrafl-extra-wide");
             else if (WIDE_LETTERS.includes(t.letter))
                 // Wide letter: handle specially
-                classes.push("wide");
+                classes.push("netskrafl-wide");
             if (isRackTile || t.draggable) {
                 // Rack tile, or at least a draggable one
-                classes.push(opponent ? "freshtile" : "racktile");
+                classes.push(opponent ? "netskrafl-freshtile" : "netskrafl-racktile");
                 if (isRackTile && game.showingDialog === "exchange") {
                     // Rack tile, and we're showing the exchange dialog
                     if (t.xchg)
                         // Chosen as an exchange tile
-                        classes.push("xchgsel");
+                        classes.push("netskrafl-xchgsel");
                     // Exchange dialog is live: add a click handler for the
                     // exchange state
                     attrs.onclick = (ev) => {
@@ -30463,7 +30590,7 @@ const Tile = (initialVnode) => {
             else if (t.freshtile) {
                 // A fresh tile on the board that has
                 // just been played by the opponent
-                classes.push("freshtile");
+                classes.push("netskrafl-freshtile");
             }
             if (t.index) {
                 // Make fresh or highlighted tiles appear sequentally by animation
@@ -32069,11 +32196,11 @@ const vwButtonsReview = (view, moveIndex) => {
     () => {
         // Navigate to previous moveIndex
         model.loadBestMoves(moveIndex ? moveIndex - 1 : 0);
-    }, "Sjá fyrri leik", m("span", { id: "nav-prev-visible" }, [glyph("chevron-left"), " Fyrri"]), "navprev"));
+    }, "Sjá fyrri leik", m("span", { id: "nav-prev-visible" }, [glyph("chevron-left"), " Fyrri"]), true, "navprev"));
     r.push(makeButton("navbtn", (!moveIndex) || (moveIndex >= numMoves), () => {
         // Navigate to next moveIndex
         model.loadBestMoves(moveIndex + 1);
-    }, "Sjá næsta leik", m("span", { id: "nav-next-visible" }, ["Næsti ", glyph("chevron-right")]), "navnext"));
+    }, "Sjá næsta leik", m("span", { id: "nav-next-visible" }, ["Næsti ", glyph("chevron-right")]), true, "navnext"));
     // Show the score difference between an actual moveIndex and
     // a particular moveIndex on the best moveIndex list
     if (model.highlightedMove !== null) {
@@ -32283,39 +32410,68 @@ class View {
         this.boardScale = 1.0;
         const boardParent = document.getElementById("board-parent");
         const board = boardParent === null || boardParent === void 0 ? void 0 : boardParent.children[0];
-        if (board)
-            board.setAttribute("style", "transform: scale(1.0)");
+        if (board) {
+            board.style.transition = 'none';
+            board.style.transformOrigin = 'top left';
+            board.style.transform = `translate(0, 0) scale(1.0)`;
+        }
         if (boardParent)
             boardParent.scrollTo(0, 0);
     }
     updateScale() {
         var _a;
         const model = this.model;
-        const game = model.game;
+        // Use either the regular game or the riddle (Gáta Dagsins)
+        const game = model.game || model.riddle;
         // Update the board scale (zoom)
         function scrollIntoView(sq) {
-            // Scroll a square above and to the left of the placed tile into view
+            // Scroll a square above and to the left of the placed tile into view,
+            // with a smooth concurrent zoom and pan animation,
+            // taking clamping into account to ensure that the board always fills
+            // the viewport.
+            const boardParent = document.getElementById("board-parent");
+            const board = boardParent === null || boardParent === void 0 ? void 0 : boardParent.children[0];
+            if (!board || !boardParent)
+                return;
             const offset = 3;
             const vec = toVector(sq);
             const row = Math.max(0, vec.row - offset);
             const col = Math.max(0, vec.col - offset);
             const c = coord(row, col);
-            const boardParent = document.getElementById("board-parent");
-            const board = boardParent === null || boardParent === void 0 ? void 0 : boardParent.children[0];
-            // The following seems to be needed to ensure that
-            // the transform and hence the size of the board has been 
-            // updated in the browser, before calculating the client rects
-            if (board)
-                board.setAttribute("style", `transform: scale(${ZOOM_FACTOR})`);
+            // Temporarily set scale to calculate target scroll position
+            board.style.transformOrigin = 'top left';
+            board.style.transform = `translate(0, 0) scale(1.0)`;
             const el = document.getElementById("sq_" + c);
             const elRect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
-            const boardRect = boardParent === null || boardParent === void 0 ? void 0 : boardParent.getBoundingClientRect();
-            if (boardParent && elRect && boardRect) {
-                boardParent.scrollTo({
-                    left: elRect.left - boardRect.left,
-                    top: elRect.top - boardRect.top,
-                    behavior: "smooth"
-                });
+            const boardRect = boardParent.getBoundingClientRect();
+            if (elRect && boardRect) {
+                // Get the dimensions of the scrollable area
+                const viewportWidth = boardParent.clientWidth;
+                const viewportHeight = boardParent.clientHeight;
+                // The offsetWidth/Height include borders, so we use those
+                const scaledBoardWidth = board.offsetWidth * ZOOM_FACTOR;
+                const scaledBoardHeight = board.offsetHeight * ZOOM_FACTOR;
+                // Calculate maximum scroll positions (board edges)
+                const maxScrollLeft = scaledBoardWidth - viewportWidth;
+                const maxScrollTop = scaledBoardHeight - viewportHeight;
+                // Calculate desired scroll position to put the target into
+                // the top left corner of the viewport, or as close as possible
+                let targetScrollLeft = Math.min(elRect.left - boardRect.left, maxScrollLeft);
+                let targetScrollTop = Math.min(elRect.top - boardRect.top, maxScrollTop);
+                // Now animate both translate (for pan) and scale (for zoom) concurrently
+                board.style.transition = 'transform 0.3s ease-in-out';
+                // Note: transforms are applied right to left
+                board.style.transform =
+                    `translate(${-targetScrollLeft}px, ${-targetScrollTop}px) scale(${ZOOM_FACTOR})`;
+                // When animation completes, commit to actual scroll position and reset translate
+                board.addEventListener('transitionend', function handler() {
+                    // First reset the transform (remove translate, keep scale)
+                    board.style.transition = 'none';
+                    board.style.transform = `translate(0, 0) scale(${ZOOM_FACTOR})`;
+                    // Now set the actual scroll position (already clamped)
+                    boardParent.scrollTo(targetScrollLeft, targetScrollTop);
+                    board.removeEventListener('transitionend', handler);
+                }, { once: true });
             }
         }
         if (!game || ((_a = model.state) === null || _a === void 0 ? void 0 : _a.uiFullscreen) || game.moveInProgress) {
@@ -32602,14 +32758,14 @@ class View {
         // displayed. We therefore allow them to cover the last_chall
         // dialog. On mobile, both dialogs are displayed simultaneously.
         if (game.last_chall) {
-            r.push(m(".chall-info", { style: { visibility: "visible" } }, [
+            r.push(m(".chall-info", [
                 glyph("info-sign"), nbsp(),
                 // "Your opponent emptied the rack - you can challenge or pass"
                 mt("span.pass-explain", "opponent_emptied_rack")
             ]));
         }
         if (game.showingDialog == "resign") {
-            r.push(m(".resign", { style: { visibility: "visible" } }, [
+            r.push(m(".resign", [
                 glyph("exclamation-sign"), nbsp(), ts("Viltu gefa leikinn?"), nbsp(),
                 m("span.mobile-break", m("br")),
                 m("span.yesnobutton", { onclick: () => game.confirmResign(true) }, [glyph("ok"), ts(" Já")]),
@@ -32619,7 +32775,7 @@ class View {
         }
         if (game.showingDialog == "pass") {
             if (game.last_chall) {
-                r.push(m(".pass-last", { style: { visibility: "visible" } }, [
+                r.push(m(".pass-last", [
                     glyph("forward"), nbsp(), ts("Segja pass?"),
                     mt("span.pass-explain", "Viðureign lýkur þar með"),
                     nbsp(),
@@ -32630,7 +32786,7 @@ class View {
                 ]));
             }
             else {
-                r.push(m(".pass", { style: { visibility: "visible" } }, [
+                r.push(m(".pass", [
                     glyph("forward"), nbsp(), ts("Segja pass?"),
                     mt("span.pass-explain", "2x3 pöss í röð ljúka viðureign"),
                     nbsp(), m("span.mobile-break", m("br")),
@@ -32641,7 +32797,7 @@ class View {
             }
         }
         if (game.showingDialog == "exchange") {
-            r.push(m(".exchange", { style: { visibility: "visible" } }, [
+            r.push(m(".exchange", [
                 glyph("refresh"), nbsp(),
                 ts("Smelltu á flísarnar sem þú vilt skipta"), nbsp(),
                 m("span.mobile-break", m("br")),
@@ -32651,7 +32807,7 @@ class View {
             ]));
         }
         if (game.showingDialog == "chall") {
-            r.push(m(".chall", { style: { visibility: "visible" } }, [
+            r.push(m(".chall", [
                 glyph("ban-circle"), nbsp(), ts("Véfengja lögn?"),
                 mt("span.pass-explain", "Röng véfenging kostar 10 stig"), nbsp(),
                 m("span.mobile-break", m("br")),
@@ -32990,6 +33146,7 @@ class BaseGame {
         this.currentError = null;
         this.currentMessage = null;
         this.localturn = true;
+        this.moveInProgress = false;
         // UI state
         this.showingDialog = null;
         this.selectedSq = null;
@@ -34352,6 +34509,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
@@ -34366,8 +34678,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) {
@@ -34439,6 +34751,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) {
@@ -34459,6 +34787,7 @@ class Riddle extends BaseGame {
                     locale: this.locale,
                     userId: state.userId,
                     groupId: state.userGroupId || null,
+                    userDisplayName: state.userFullname || state.userNick || state.userId,
                     move,
                 }
             });
@@ -34507,13 +34836,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
@@ -34740,6 +35082,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
@@ -35847,6 +36192,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;
@@ -35855,6 +36206,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;
@@ -35872,6 +36227,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 ascending (earlier first)
+            entries.sort((a, b) => {
+                if (b.score !== a.score) {
+                    return b.score - a.score;
+                }
+                return a.timestamp.localeCompare(b.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)
@@ -36062,13 +36449,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
@@ -36102,7 +36490,8 @@ const RiddleScore = {
                 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));
     }
 };
 
@@ -36162,35 +36551,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>
       `)
@@ -36198,6 +36592,112 @@ 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, onStatsClick } = 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
+            // If the player achieved the best possible score, it's in bestMove (not selectedMoves)
+            const playerBestScore = (bestMove && bestMove.word !== "")
+                ? bestMove.score
+                : (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.left", m(RiddleScore, { riddle, mode: "mobile" })),
+                // Interactive card containing player best and leader scores
+                m(".mobile-status-card", {
+                    onclick: onStatsClick,
+                    title: ts("Tölfræði og stigatafla")
+                }, [
+                    // Player's best score
+                    m(".mobile-status-card-item.player-best", [
+                        m(".mobile-status-label", ts("Þín besta:")),
+                        m(".mobile-status-score", playerBestScore.toString())
+                    ]),
+                    // Current leader score
+                    m(".mobile-status-card-item.leader" + (isPlayerLeading ? ".is-player" : ""), [
+                        m(".mobile-status-label", isPlayerLeading ? ts("Þú leiðir!") : ts("Leiðandi:")),
+                        m(".mobile-status-score", leaderScore.toString())
+                    ]),
+                    // Chevron indicator (overlaid at bottom center)
+                    m(".mobile-status-card-icon", glyph("chevron-down"))
+                ]),
+                // Best possible score
+                m(".mobile-status-item.right.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
@@ -36272,12 +36772,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
@@ -36405,6 +36920,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
@@ -36420,9 +37125,9 @@ 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 { view, selectedMoves, bestMove, onStatsClick } = vnode.attrs;
         const { riddle } = view.model;
         const handleMoveClick = (word, coord) => {
             if (riddle && word && coord) {
@@ -36431,11 +37136,19 @@ 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,
+                onStatsClick
+            })),
+            // Desktop-only tabbed view (hidden on mobile, visible on desktop)
+            m(".gatadagsins-thermometer-column", m(RightSideTabs, {
+                view,
+                selectedMoves,
+                bestMove,
                 onMoveClick: handleMoveClick
             })),
         ] : null);
@@ -36459,67 +37172,150 @@ const GataDagsinsRightSide = {
 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!"),
+        return [
+            // Backdrop
+            m(".modal-backdrop-netskrafl", {
+                onclick: (e) => { e.preventDefault(); },
+                onwheel: (e) => { e.preventDefault(); e.stopPropagation(); },
+                ontouchmove: (e) => { e.preventDefault(); e.stopPropagation(); }
+            }),
+            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" }, "×"))
                 ]),
-                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."
+                // 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"))
-        ]));
+                // 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-netskrafl", {
+                    onclick: (e) => { e.preventDefault(); },
+                    onwheel: (e) => { e.preventDefault(); e.stopPropagation(); },
+                    ontouchmove: (e) => { e.preventDefault(); e.stopPropagation(); }
+                }),
+                // Modal dialog
+                m(".modal-dialog.stats-modal", {
+                    onwheel: (e) => { e.stopPropagation(); },
+                    ontouchmove: (e) => { e.stopPropagation(); }
+                }, [
+                    m(".modal-content", [
+                        // Close button in top right
+                        m("button.close", {
+                            onclick: onClose,
+                            "aria-label": "Loka"
+                        }, glyph("remove")),
+                        // 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
+                        ])
+                    ])
+                ])
+            ];
+        }
+    };
+};
+
 /*
 
   GataDagsins.ts
@@ -36535,11 +37331,19 @@ const GataDagsinsHelp = {
 
 */
 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 => ({
@@ -36547,61 +37351,49 @@ 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 = () => {
     // A view of the Gáta Dagsins page
     let showHelp = false;
+    let showStatsModal = false;
     return {
-        oninit: (vnode) => {
+        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
-                actions.fetchRiddle(date, locale);
+                await actions.fetchRiddle(date, locale);
             }
-            // Initialize help dialog state
+            // Initialize dialog states
             showHelp = false;
+            showStatsModal = false;
         },
         view: (vnode) => {
             var _a;
@@ -36615,6 +37407,10 @@ const GataDagsins$1 = () => {
                 showHelp = !showHelp;
                 m.redraw();
             };
+            const toggleStatsModal = () => {
+                showStatsModal = !showStatsModal;
+                m.redraw();
+            };
             return m("div.drop-target", {
                 id: "gatadagsins-background",
             }, [
@@ -36625,7 +37421,7 @@ const GataDagsins$1 = () => {
                         // Board and rack component (left side)
                         m(GataDagsinsBoardAndRack, { view }),
                         // Right-side component with scores and comparisons
-                        m(GataDagsinsRightSide, { view, selectedMoves, bestMove }),
+                        m(GataDagsinsRightSide, { view, selectedMoves, bestMove, onStatsClick: toggleStatsModal }),
                         // Blank dialog
                         riddle.askingForBlank
                             ? m(BlankDialog, { game: riddle })
@@ -36640,10 +37436,9 @@ const GataDagsins$1 = () => {
                 // 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"))),
                 // Help dialog and backdrop
-                showHelp ? [
-                    m(".modal-backdrop", { onclick: (e) => { e.preventDefault(); } }),
-                    m(GataDagsinsHelp, { onClose: toggleHelp })
-                ] : "",
+                showHelp ? m(GataDagsinsHelp, { onClose: toggleHelp }) : "",
+                // Stats modal and backdrop (mobile only)
+                showStatsModal ? m(StatsModal, { view, onClose: toggleStatsModal }) : "",
             ]);
         }
     };
@@ -36682,11 +37477,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) {
@@ -36696,6 +37502,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