@mideind/netskrafl-react 1.3.0 → 1.5.0

package/dist/cjs/index.js

@@ -23,8 +23,8 @@ const saveAuthSettings = (settings) => {
             filteredSettings.userId = settings.userId;
         if (settings.userNick !== undefined)
             filteredSettings.userNick = settings.userNick;
-        if (settings.firebaseAPIKey !== undefined)
-            filteredSettings.firebaseAPIKey = settings.firebaseAPIKey;
+        if (settings.firebaseApiKey !== undefined)
+            filteredSettings.firebaseApiKey = settings.firebaseApiKey;
         if (settings.beginner !== undefined)
             filteredSettings.beginner = settings.beginner;
         if (settings.fairPlay !== undefined)
@@ -90,7 +90,7 @@ const applyPersistedSettings = (state) => {
         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,
+        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,
@@ -100,8 +100,8 @@ const applyPersistedSettings = (state) => {
 
 const DEFAULT_STATE = {
     projectId: "netskrafl",
-    firebaseAPIKey: "",
-    databaseURL: "",
+    firebaseApiKey: "",
+    databaseUrl: "",
     firebaseSenderId: "",
     firebaseAppId: "",
     measurementId: "",
@@ -27215,12 +27215,12 @@ let database;
 let analytics;
 function initFirebase(state) {
     try {
-        const { projectId, firebaseAPIKey, databaseURL, firebaseSenderId, firebaseAppId, measurementId } = state;
+        const { projectId, firebaseApiKey, databaseUrl, firebaseSenderId, firebaseAppId, measurementId } = state;
         const firebaseOptions = {
             projectId,
-            apiKey: firebaseAPIKey,
+            apiKey: firebaseApiKey,
             authDomain: `${projectId}.firebaseapp.com`,
-            databaseURL,
+            databaseURL: databaseUrl,
             storageBucket: `${projectId}.firebasestorage.app`,
             messagingSenderId: firebaseSenderId,
             appId: firebaseAppId,
@@ -27651,7 +27651,7 @@ const ensureAuthenticated = async (state) => {
             // 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;
+            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;
@@ -27662,7 +27662,7 @@ const ensureAuthenticated = async (state) => {
                 userEmail: state.userEmail, // CRITICAL: Include email to validate ownership
                 userId: state.userId,
                 userNick: state.userNick,
-                firebaseAPIKey: state.firebaseAPIKey,
+                firebaseApiKey: state.firebaseApiKey,
                 beginner: state.beginner,
                 fairPlay: state.fairPlay,
                 ready: state.ready,
@@ -30892,14 +30892,16 @@ const Board = (initialVnode) => {
     }
     return {
         view: (vnode) => {
-            const scale = view.boardScale || 1.0;
+            // const scale = view.boardScale || 1.0;
             let attrs = {};
             // Add handlers for pinch zoom functionality
             // Note: resist the temptation to pass zoomIn/zoomOut directly,
             // as that would not bind the 'this' pointer correctly
             addPinchZoom(attrs, () => view.zoomIn(), () => view.zoomOut());
+            /*
             if (scale !== 1.0)
-                attrs.style = `transform: scale(${scale})`;
+              attrs.style = `transform: scale(${scale})`;
+            */
             return m(".board", { id: "board-parent" }, m("table.board", attrs, m("tbody", allrows())));
         }
     };
@@ -31450,7 +31452,6 @@ const Movelist = (initialVnode) => {
                 view,
                 move,
                 info: {
-                    key: i.toString(),
                     leftTotal: leftTotal, rightTotal: rightTotal,
                     player: player, co: co, tiles: tiles, score: score
                 }
@@ -31668,12 +31669,12 @@ const RightColumn = (initialVnode) => {
 */
 const Beginner = (initialVnode) => {
     // Show the board color guide
-    const { view } = initialVnode.attrs;
+    const { view, showClose } = initialVnode.attrs;
     const { model, actions } = view;
     const state = model.state;
     return {
         view: () => m(".board-help", { title: ts("Hvernig reitirnir margfalda stigin") }, [
-            m(".board-help-close", {
+            showClose ? m(".board-help-close", {
                 title: ts("Loka þessari hjálp"),
                 onclick: (ev) => {
                     // Close the guide and set a preference not to see it again
@@ -31683,7 +31684,7 @@ const Beginner = (initialVnode) => {
                     }
                     ev.preventDefault();
                 }
-            }, glyph("remove")),
+            }, glyph("remove")) : null,
             m(".board-colors", [
                 m(".board-color[id='triple-word']", ["3 x", m("br"), t("orð")]),
                 m(".board-color[id='double-word']", ["2 x", m("br"), t("orð")]),
@@ -31739,7 +31740,7 @@ const GameView = {
             // These elements appear after the game container, since we want
             // them to be above it in the z-order
             m(LeftLogo),
-            (state === null || state === void 0 ? void 0 : state.beginner) ? m(Beginner, { view }) : "",
+            (state === null || state === void 0 ? void 0 : state.beginner) ? m(Beginner, { view, showClose: true }) : "",
             m(Info),
         ]);
     }
@@ -31759,79 +31760,6 @@ const GameView = {
   For further information, see https://github.com/mideind/Netskrafl
 
 */
-const vwReview = (view) => {
-    // A review of a finished game
-    var _a;
-    const model = view.model;
-    if (!model.game)
-        return undefined;
-    const game = model.game;
-    let moveIndex = (_a = model.reviewMove) !== null && _a !== void 0 ? _a : 0;
-    let bestMoves = model.bestMoves || [];
-    function vwRightColumn() {
-        // A container for the right-side header and area components
-        function vwRightHeading() {
-            // The right-side heading on the game screen
-            const fairplay = game.fairplay;
-            const player = game.player;
-            let sc0 = "";
-            let sc1 = "";
-            if (moveIndex) {
-                let s0 = 0;
-                let s1 = 0;
-                for (let i = 0; i < moveIndex; i++) {
-                    // Add up the scores until and including this move
-                    let m = game.moves[i];
-                    if (i % 2 === 0)
-                        s0 += m[1][2];
-                    else
-                        s1 += m[1][2];
-                }
-                sc0 = s0.toString();
-                sc1 = s1.toString();
-            }
-            return m(".heading", [
-                m(".logowrapper", m(".header-logo", m(m.route.Link, {
-                    href: "/page",
-                    class: "backlink"
-                }, m(NetskraflLogoOnly)))),
-                m(".playerwrapper", [
-                    m(".leftplayer" + (player === 1 ? ".autoplayercolor" : ".humancolor"), [
-                        m(".player", m(PlayerName, { view, side: "left" })),
-                        m(".scorewrapper", m(".scoreleft", sc0)),
-                    ]),
-                    m(".rightplayer" + (player === 1 ? ".humancolor" : ".autoplayercolor"), [
-                        m(".player", m(PlayerName, { view, side: "right" })),
-                        m(".scorewrapper", m(".scoreright", sc1)),
-                    ]),
-                    m(".fairplay", { style: { visibility: fairplay ? "visible" : "hidden" } }, m("span.fairplay-btn.large", { title: ts("Skraflað án hjálpartækja") }))
-                ])
-            ]);
-        }
-        function vwRightArea() {
-            // A container for the list of best possible moves
-            return m(".right-area", vwBestMoves(view, moveIndex, bestMoves));
-        }
-        return m(".rightcol", [vwRightHeading(), vwRightArea()]);
-    }
-    let r = [];
-    if (game) {
-        // Create a list of major elements that we're showing
-        r.push(vwRightColumn());
-        r.push(m(BoardReview, { view, moveIndex }));
-        if (model.reviewMove !== null && moveIndex === 0) {
-            // Only show the stats overlay if moveIndex is 0
-            const n = vwStatsReview(view);
-            n && r.push(n);
-        }
-    }
-    return m("div", // Removing this div messes up Mithril
-    [
-        m(".game-container", r),
-        m(LeftLogo), // Button to go back to main screen
-        m(Info) // Help button
-    ]);
-};
 const vwBestMoves = (view, moveIndex, bestMoves) => {
     // List of best moves, in a game review
     const model = view.model;
@@ -31886,7 +31814,7 @@ const vwBestMoves = (view, moveIndex, bestMoves) => {
                 // and thus cannot be confused with the above abbreviations)
                 wrdclass = "othermove";
                 if (tiles == "--")
-                    dispText = ts("Stafaleif: (engin)");
+                    dispText = ts("Stafaleif: engin");
                 else
                     dispText = [ts("Stafaleif: "), m("i.upper", tiles)];
             }
@@ -31903,8 +31831,8 @@ const vwBestMoves = (view, moveIndex, bestMoves) => {
         if (!game || !moveIndex || moveIndex > game.moves.length)
             return r;
         // Prepend a header that describes the move being reviewed
-        const m = game.moves[moveIndex - 1];
-        const [co, tiles, score] = m[1];
+        const move = game.moves[moveIndex - 1];
+        const [co, tiles, score] = move[1];
         r.push(bestHeader(co, tiles, score));
         const mlist = bestMoves;
         for (let i = 0; i < mlist.length; i++) {
@@ -31916,7 +31844,7 @@ const vwBestMoves = (view, moveIndex, bestMoves) => {
         }
         return r;
     }
-    return m(".movelist-container", [m(".movelist.bestmoves", bestMoveList())]);
+    return m(".movelist-container", m(".movelist.bestmoves", bestMoveList()));
 };
 const vwBestMove = (view, moveIndex, bestMoveIndex, move, info) => {
     // Displays a move in a list of best available moves
@@ -32215,6 +32143,81 @@ const vwButtonsReview = (view, moveIndex) => {
         r.push(n);
     return r;
 };
+const Review = (initialVnode) => {
+    // A review of a finished game
+    const { view } = initialVnode.attrs;
+    function vwRightColumn(game, moveIndex, bestMoves) {
+        // A container for the right-side header and area components
+        function vwRightHeading() {
+            // The right-side heading on the game screen
+            const fairplay = game.fairplay;
+            const player = game.player;
+            let sc0 = "";
+            let sc1 = "";
+            if (moveIndex) {
+                let s0 = 0;
+                let s1 = 0;
+                for (let i = 0; i < moveIndex; i++) {
+                    // Add up the scores until and including this move
+                    let m = game.moves[i];
+                    if (i % 2 === 0)
+                        s0 += m[1][2];
+                    else
+                        s1 += m[1][2];
+                }
+                sc0 = s0.toString();
+                sc1 = s1.toString();
+            }
+            return m(".heading", [
+                m(".logowrapper", m(".header-logo", m(m.route.Link, {
+                    href: "/page",
+                    class: "backlink"
+                }, m(NetskraflLogoOnly)))),
+                m(".playerwrapper", [
+                    m(".leftplayer" + (player === 1 ? ".autoplayercolor" : ".humancolor"), [
+                        m(".player", m(PlayerName, { view, side: "left" })),
+                        m(".scorewrapper", m(".scoreleft", sc0)),
+                    ]),
+                    m(".rightplayer" + (player === 1 ? ".humancolor" : ".autoplayercolor"), [
+                        m(".player", m(PlayerName, { view, side: "right" })),
+                        m(".scorewrapper", m(".scoreright", sc1)),
+                    ]),
+                    m(".fairplay", { style: { visibility: fairplay ? "visible" : "hidden" } }, m("span.fairplay-btn.large", { title: ts("Skraflað án hjálpartækja") }))
+                ])
+            ]);
+        }
+        function vwRightArea() {
+            // A container for the list of best possible moves
+            return m(".right-area", vwBestMoves(view, moveIndex, bestMoves));
+        }
+        return m(".rightcol", [vwRightHeading(), vwRightArea()]);
+    }
+    return {
+        view: () => {
+            var _a;
+            let r = [];
+            const { model } = view;
+            const { game } = model;
+            if (game) {
+                // Create a list of major elements that we're showing
+                const moveIndex = (_a = model.reviewMove) !== null && _a !== void 0 ? _a : 0;
+                const bestMoves = model.bestMoves || [];
+                r.push(vwRightColumn(game, moveIndex, bestMoves));
+                r.push(m(BoardReview, { view, moveIndex }));
+                if (model.reviewMove !== null && moveIndex === 0) {
+                    // Only show the stats overlay if moveIndex is 0
+                    const n = vwStatsReview(view);
+                    n && r.push(n);
+                }
+            }
+            return m("div", [
+                m(".game-container", r),
+                m(LeftLogo), // Button to go back to main screen
+                m(Info) // Help button
+            ]);
+        }
+    };
+};
 const BoardReview = {
     // The board area within a game review screen
     view: (vnode) => {
@@ -32266,6 +32269,8 @@ class View {
         this.dialogStack = [];
         // The current scaling of the board
         this.boardScale = 1.0;
+        // Pending zoom animation timeout (for cancellation across rapid zoom operations)
+        this.zoomAnimationTimeout = null;
         this.selectedTab = "movelist";
         this.actions = actions;
         // Initialize media listeners now that we have the view reference
@@ -32292,8 +32297,7 @@ class View {
                 views.push(m(GameView, { key: "game", view: this }));
                 break;
             case "review":
-                const n = vwReview(this);
-                n && views.push(n);
+                views.push(m(Review, { key: "review", view: this }));
                 break;
             case "thanks":
                 // Display a thank-you dialog on top of the normal main screen
@@ -32409,13 +32413,17 @@ class View {
     }
     resetScale() {
         // Reset the board scale (zoom) to 100% and the scroll origin to (0, 0)
+        // Cancel any pending zoom animation
+        if (this.zoomAnimationTimeout !== null) {
+            clearTimeout(this.zoomAnimationTimeout);
+            this.zoomAnimationTimeout = null;
+        }
         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.style.transition = 'none';
-            board.style.transformOrigin = 'top left';
-            board.style.transform = `translate(0, 0) scale(1.0)`;
+            board.style.transform = `translate(0px, 0px) scale(1)`;
         }
         if (boardParent)
             boardParent.scrollTo(0, 0);
@@ -32426,7 +32434,7 @@ class View {
         // 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) {
+        const scrollIntoView = (sq) => {
             // 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
@@ -32440,9 +32448,7 @@ class View {
             const row = Math.max(0, vec.row - offset);
             const col = Math.max(0, vec.col - offset);
             const c = coord(row, col);
-            // Temporarily set scale to calculate target scroll position
-            board.style.transformOrigin = 'top left';
-            board.style.transform = `translate(0, 0) scale(1.0)`;
+            // 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.getBoundingClientRect();
@@ -32460,22 +32466,32 @@ class View {
                 // 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);
+                // Cancel any pending zoom animation
+                if (this.zoomAnimationTimeout !== null) {
+                    clearTimeout(this.zoomAnimationTimeout);
+                    this.zoomAnimationTimeout = null;
+                }
                 // 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 = 'transform 0.3s ease-in-out';
+                const translateValue = `${-targetScrollLeft}px, ${-targetScrollTop}px`;
+                const scaleValue = `${ZOOM_FACTOR}`;
+                board.style.transform = `translate(${translateValue}) scale(${scaleValue})`;
+                // Use setTimeout as primary mechanism (transitionend is unreliable in Firefox/Safari)
+                // 350ms = 300ms animation + 50ms buffer
+                this.zoomAnimationTimeout = setTimeout(() => {
+                    this.zoomAnimationTimeout = null;
+                    // 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 });
+                    board.style.transform = `translate(0px, 0px) scale(${ZOOM_FACTOR})`;
+                    // Wait for the browser to process the style changes before setting scroll position
+                    // This is needed for Firefox and Safari to properly update the scroll position
+                    requestAnimationFrame(() => {
+                        boardParent.scrollTo(targetScrollLeft, targetScrollTop);
+                    });
+                }, 350);
             }
-        }
+        };
         if (!game || ((_a = model.state) === null || _a === void 0 ? void 0 : _a.uiFullscreen) || game.moveInProgress) {
             // No game or we're in full screen mode: always 100% scale
             // Also, as soon as a move is being processed by the server, we zoom out
@@ -35859,6 +35875,8 @@ class Actions {
         if (state && !state.uiFullscreen) {
             state.uiFullscreen = true;
             if (view) {
+                // Reset zoom when switching to fullscreen (desktop always uses scale 1)
+                view.resetScale();
                 view.notifyMediaChange();
             }
             m.redraw();
@@ -36199,6 +36217,8 @@ class Actions {
         // 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));
+            // Listen to personal best move (entire achievement object)
+            attachFirebaseListener(basePath + `achievements/${state.userId}`, (json, firstAttach) => this.onPersonalBestScoreUpdate(json, firstAttach));
         }
     }
     detachListenerFromRiddle(date, locale) {
@@ -36211,6 +36231,7 @@ class Actions {
         detachFirebaseListener(basePath + "leaders");
         if (state === null || state === void 0 ? void 0 : state.userId) {
             detachFirebaseListener(`gatadagsins/users/${locale}/${state.userId}/stats`);
+            detachFirebaseListener(basePath + `achievements/${state.userId}`);
         }
     }
     onRiddleGlobalScoreUpdate(json, firstAttach) {
@@ -36261,6 +36282,35 @@ class Actions {
         }
         m.redraw();
     }
+    onPersonalBestScoreUpdate(json, firstAttach) {
+        const { riddle } = this.model;
+        if (!riddle || !json)
+            return;
+        // Extract the full move from Firebase
+        const score = json.score || 0;
+        const word = json.word || "";
+        const coord = json.coord || "";
+        const timestamp = json.timestamp || new Date().toISOString();
+        // Only proceed if we didn't already have this score or better
+        if (score <= riddle.personalBestScore || !word || !coord)
+            return;
+        riddle.personalBestScore = score;
+        // Check if this move is already in playerMoves
+        // (this is a safety precaution; normally the
+        // move should not be there already)
+        const moveExists = riddle.playerMoves.some(m => m.word === word && m.coord === coord && m.score === score);
+        // If not already present, add it to playerMoves
+        // This enables clicking on it to see it on the board
+        if (!moveExists) {
+            riddle.playerMoves.push({
+                word,
+                score,
+                coord,
+                timestamp
+            });
+        }
+        m.redraw();
+    }
     async fetchRiddle(date, locale) {
         // Create the game via model
         if (!this.model)
@@ -36612,27 +36662,24 @@ const SunCorona = {
 const MobileStatus = () => {
     return {
         view: (vnode) => {
-            const { riddle, selectedMoves, bestMove, onMoveClick, onStatsClick } = vnode.attrs;
-            const { bestPossibleScore, globalBestScore } = riddle;
+            const { view, selectedMoves, bestMove, onMoveClick, onStatsClick } = vnode.attrs;
+            const { riddle } = view.model;
+            if (!riddle)
+                return null;
+            const { bestPossibleScore, globalBestScore, personalBestScore } = 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;
+                isPlayerLeading = personalBestScore >= globalBestScore.score;
             }
             else {
-                leaderScore = playerBestScore;
-                isPlayerLeading = playerBestScore > 0;
+                leaderScore = personalBestScore;
+                isPlayerLeading = personalBestScore > 0;
             }
             return m(".mobile-status-container", [
                 // Current word score (leftmost) - uses RiddleScore component in mobile mode
@@ -36644,12 +36691,12 @@ const MobileStatus = () => {
                 }, [
                     // Player's best score
                     m(".mobile-status-card-item.player-best", [
-                        m(".mobile-status-label", ts("Þín besta:")),
-                        m(".mobile-status-score", playerBestScore.toString())
+                        m(".mobile-status-label", ts("Þín besta")),
+                        m(".mobile-status-score", personalBestScore.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-label", isPlayerLeading ? ts("Þú leiðir!") : ts("Best til þessa")),
                         m(".mobile-status-score", leaderScore.toString())
                     ]),
                     // Chevron indicator (overlaid at bottom center)
@@ -36657,8 +36704,7 @@ const MobileStatus = () => {
                 ]),
                 // Best possible score
                 m(".mobile-status-item.right.best-possible"
-                    + (celebrate ? ".celebrate" : "")
-                    + (achieved ? ".achieved" : ""), {
+                    + (celebrate ? ".celebrate" : ""), {
                     onclick: () => celebrate && onMoveClick(bestMove.word, bestMove.coord)
                 }, [
                     // Wrapper for score and corona to position them together
@@ -36779,25 +36825,17 @@ const BestPossibleScore = () => {
             const { score, bestMove, onMoveClick } = vnode.attrs;
             // 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áð!");
-                }
+            if (bestMove !== undefined && bestMove.word) {
+                // Current player achieved it - show their word
+                topLabel = removeBlankMarkers(bestMove.word);
             }
             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" : "")
-                + (achieved ? ".achieved" : ""), m(".thermometer-best-score-container", {
+                + (celebrate ? ".celebrate" : ""), m(".thermometer-best-score-container", {
                 onclick: () => celebrate && onMoveClick(bestMove.word, bestMove.coord)
             }, [
                 // Sun corona behind the circle when celebrating
@@ -36836,7 +36874,7 @@ const PlayerMovesOverlay = () => {
             const allMoveElements = [];
             function scoreDetails(move) {
                 if (move.isGlobalBestScore) {
-                    if (move.word === "" && move.coord === "") {
+                    if (move.word === "") {
                         // Another player holds the top score
                         return [m(GlobalBestScore, { thisPlayer: false, score: move.score })];
                     }
@@ -37033,7 +37071,10 @@ const LeaderboardView = {
             m(".leaderboard-header", [
                 m(".leaderboard-title", formatDate(date)),
             ]),
-            m(".leaderboard-list", leaderboard.map((entry, index) => {
+            m(".leaderboard-list", {
+                // Allow touch scrolling but prevent events from bubbling to backdrop
+                ontouchmove: (e) => { e.stopPropagation(); }
+            }, leaderboard.map((entry, index) => {
                 const rank = index + 1;
                 const isCurrentUser = entry.userId === currentUserId;
                 const medal = getMedalIcon(rank);
@@ -37041,7 +37082,9 @@ const LeaderboardView = {
                     m(".entry-rank", [
                         medal ? m("span.medal", medal) : m("span.rank-number", rank.toString())
                     ]),
-                    m(".entry-name", isCurrentUser ? ts("Þú") : entry.displayName),
+                    m(".entry-name", isCurrentUser
+                        ? [m("span.entry-star", glyph("star")), ts("Þú")]
+                        : entry.displayName),
                     m(".entry-score", entry.score.toString())
                 ]);
             }))
@@ -37142,7 +37185,7 @@ const GataDagsinsRightSide = {
     view: (vnode) => {
         const { view, selectedMoves, bestMove, onStatsClick } = vnode.attrs;
         const { riddle } = view.model;
-        const handleMoveClick = (word, coord) => {
+        const onMoveClick = (word, coord) => {
             if (riddle && word && coord) {
                 // Recreate the word on the board
                 riddle.recreateWordOnBoard(word, coord);
@@ -37151,18 +37194,18 @@ const GataDagsinsRightSide = {
         return m(".gatadagsins-right-side-wrapper", riddle ? [
             // Mobile-only status bar (visible on mobile, hidden on desktop)
             m(".gatadagsins-mobile-status", m(MobileStatus, {
-                riddle,
+                view,
                 selectedMoves,
                 bestMove,
-                onMoveClick: handleMoveClick,
-                onStatsClick
+                onMoveClick,
+                onStatsClick,
             })),
             // Desktop-only tabbed view (hidden on mobile, visible on desktop)
             m(".gatadagsins-thermometer-column", m(RightSideTabs, {
                 view,
                 selectedMoves,
                 bestMove,
-                onMoveClick: handleMoveClick
+                onMoveClick,
             })),
         ] : null);
     }
@@ -37193,14 +37236,13 @@ const GataDagsinsHelp = {
                 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" }, "×"))
-                ]),
+                // Close button (positioned absolutely in top-right corner)
+                m("button.close", {
+                    onclick: closeHelp,
+                    "aria-label": "Loka"
+                }, glyph("remove")),
+                // Header
+                m(".modal-header", m("h2", "Um Gátu dagsins")),
                 // Body with help content
                 m(".modal-body", [
                     m("p", "Gáta dagsins er dagleg krossgátuþraut, svipuð skrafli, þar sem þú reynir að finna " +
@@ -37219,8 +37261,20 @@ const GataDagsinsHelp = {
                     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("li", [
+                            "Sumir reitir á borðinu ",
+                            m("span.help-bonus-square.double-letter"),
+                            "tvöfalda eða ",
+                            m("span.help-bonus-square.triple-letter"),
+                            "þrefalda stafagildið"
+                        ]),
+                        m("li", [
+                            "Sumir reitir ",
+                            m("span.help-bonus-square.double-word"),
+                            "tvöfalda eða ",
+                            m("span.help-bonus-square.triple-word"),
+                            "þrefalda heildarorðagildið"
+                        ]),
                     ]),
                     m("h3", "Hitamælir"),
                     m("p", "Hitamælirinn hægra megin (eða efst á farsímum) sýnir:"),
@@ -37296,14 +37350,14 @@ const StatsModal = () => {
             return [
                 // Backdrop
                 m(".modal-backdrop-netskrafl", {
-                    onclick: (e) => { e.preventDefault(); },
-                    onwheel: (e) => { e.preventDefault(); e.stopPropagation(); },
-                    ontouchmove: (e) => { e.preventDefault(); e.stopPropagation(); }
+                    onclick: (e) => { e.preventDefault(); return false; },
+                    onwheel: (e) => { e.preventDefault(); e.stopPropagation(); return false; },
+                    ontouchmove: (e) => { e.preventDefault(); e.stopPropagation(); return false; }
                 }),
                 // Modal dialog
                 m(".modal-dialog.stats-modal", {
-                    onwheel: (e) => { e.stopPropagation(); },
-                    ontouchmove: (e) => { e.stopPropagation(); }
+                    onwheel: (e) => { e.stopPropagation(); return false; },
+                    ontouchmove: (e) => { e.stopPropagation(); return false; }
                 }, [
                     m(".modal-content", [
                         // Close button in top right
@@ -37436,9 +37490,9 @@ const GataDagsins$1 = () => {
                 id: "gatadagsins-background",
             }, [
                 // The main content area
-                riddle ? m(".gatadagsins-container", [
+                m(".gatadagsins-container", [
                     // Main display area with flex layout
-                    m(".gatadagsins-main", [
+                    riddle ? m(".gatadagsins-main", [
                         // Board and rack component (left side)
                         m(GataDagsinsBoardAndRack, { view }),
                         // Right-side component with scores and comparisons
@@ -37447,17 +37501,17 @@ const GataDagsins$1 = () => {
                         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"))),
-                // Help dialog and backdrop
-                showHelp ? m(GataDagsinsHelp, { onClose: toggleHelp }) : "",
+                    ]) : "",
+                    // 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, showClose: false }) : "",
+                    // 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(GataDagsinsHelp, { onClose: toggleHelp }) : "",
+                ]),
                 // Stats modal and backdrop (mobile only)
                 showStatsModal ? m(StatsModal, { view, onClose: toggleStatsModal }) : "",
             ]);