@mideind/netskrafl-react 1.1.0 → 1.3.0

package/dist/cjs/index.js

@@ -29206,7 +29206,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
@@ -30002,7 +30002,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));
@@ -30097,25 +30097,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 = {
@@ -30137,20 +30138,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 = {
@@ -30166,9 +30167,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 = {
@@ -30245,7 +30246,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,
@@ -30264,7 +30265,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")));
         }
@@ -30561,24 +30562,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) => {
@@ -30591,7 +30592,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
@@ -32197,11 +32198,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) {
@@ -32411,39 +32412,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) {
@@ -32730,14 +32760,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á")]),
@@ -32747,7 +32777,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(),
@@ -32758,7 +32788,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")),
@@ -32769,7 +32799,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")),
@@ -32779,7 +32809,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")),
@@ -33118,6 +33148,7 @@ class BaseGame {
         this.currentError = null;
         this.currentMessage = null;
         this.localturn = true;
+        this.moveInProgress = false;
         // UI state
         this.showingDialog = null;
         this.selectedSq = null;
@@ -36210,12 +36241,12 @@ class Actions {
                 score: json[userId].score || 0,
                 timestamp: json[userId].timestamp || ''
             }));
-            // Sort by score descending, then by timestamp descending (newer first)
+            // 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 b.timestamp.localeCompare(a.timestamp);
+                return a.timestamp.localeCompare(b.timestamp);
             });
             this.model.leaderboard = entries;
         }
@@ -36581,13 +36612,16 @@ const SunCorona = {
 const MobileStatus = () => {
     return {
         view: (vnode) => {
-            const { riddle, selectedMoves, bestMove, onMoveClick } = vnode.attrs;
+            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
-            const playerBestScore = selectedMoves.length > 0 ? selectedMoves[0].score : 0;
+            // 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;
@@ -36602,19 +36636,27 @@ const MobileStatus = () => {
             }
             return m(".mobile-status-container", [
                 // Current word score (leftmost) - uses RiddleScore component in mobile mode
-                m(".mobile-status-item", m(RiddleScore, { riddle, mode: "mobile" })),
-                // Player's best score
-                m(".mobile-status-item.player-best", [
-                    m(".mobile-status-label", ts("Þín besta:")),
-                    m(".mobile-status-score", playerBestScore.toString())
-                ]),
-                // Current leader score
-                m(".mobile-status-item.leader" + (isPlayerLeading ? ".is-player" : ""), [
-                    m(".mobile-status-label", isPlayerLeading ? ts("Þú leiðir!") : ts("Leiðandi:")),
-                    m(".mobile-status-score", leaderScore.toString())
+                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.best-possible"
+                m(".mobile-status-item.right.best-possible"
                     + (celebrate ? ".celebrate" : "")
                     + (achieved ? ".achieved" : ""), {
                     onclick: () => celebrate && onMoveClick(bestMove.word, bestMove.coord)
@@ -36651,8 +36693,11 @@ const TabBar = {
             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-icon-wrapper", [
+                tab.iconGlyph ? m("span.tab-icon", glyph(tab.iconGlyph)) :
+                    tab.icon ? m("span.tab-icon", tab.icon) : null,
+                tab.badgeGlyph ? m("span.tab-badge", glyph(tab.badgeGlyph)) : null
+            ]),
             m("span.tab-label", tab.label)
         ])));
     }
@@ -37021,18 +37066,26 @@ const LeaderboardView = {
 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;
+            const { riddle, state, leaderboard } = view.model;
             if (!riddle) {
                 return m(".gatadagsins-right-side-tabs", "");
             }
+            // Check if current user is on the leaderboard
+            const currentUserId = (state === null || state === void 0 ? void 0 : state.userId) || "";
+            const isOnLeaderboard = leaderboard && leaderboard.some(entry => entry.userId === currentUserId);
+            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",
+                    badgeGlyph: isOnLeaderboard ? "star" : undefined
+                }
+            ];
             const handleTabChange = (tabId) => {
                 activeTab = tabId;
             };
@@ -37087,7 +37140,7 @@ const RightSideTabs = () => {
 const GataDagsinsRightSide = {
     // 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) {
@@ -37101,7 +37154,8 @@ const GataDagsinsRightSide = {
                 riddle,
                 selectedMoves,
                 bestMove,
-                onMoveClick: handleMoveClick
+                onMoveClick: handleMoveClick,
+                onStatsClick
             })),
             // Desktop-only tabbed view (hidden on mobile, visible on desktop)
             m(".gatadagsins-thermometer-column", m(RightSideTabs, {
@@ -37131,64 +37185,72 @@ 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"))
+            ])),
+        ];
     }
 };
 
@@ -37209,35 +37271,46 @@ const GataDagsinsHelp = {
 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;
+            const { riddle, state, leaderboard } = view.model;
             if (!riddle) {
                 return null;
             }
+            // Check if current user is on the leaderboard
+            const currentUserId = (state === null || state === void 0 ? void 0 : state.userId) || "";
+            const isOnLeaderboard = leaderboard && leaderboard.some(entry => entry.userId === currentUserId);
+            const tabs = [
+                { id: "stats", label: ts("Tölfræði"), iconGlyph: "stats" },
+                {
+                    id: "leaderboard",
+                    label: ts("Stigatafla"),
+                    iconGlyph: "tower",
+                    badgeGlyph: isOnLeaderboard ? "star" : undefined
+                }
+            ];
             const handleTabChange = (tabId) => {
                 activeTab = tabId;
             };
             return [
                 // Backdrop
-                m(".modal-backdrop", {
-                    onclick: onClose
+                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", [
+                m(".modal-dialog.stats-modal", {
+                    onwheel: (e) => { e.stopPropagation(); },
+                    ontouchmove: (e) => { e.stopPropagation(); }
+                }, [
                     m(".modal-content", [
-                        // Header with close button
-                        m(".modal-header", [
-                            m("h2", ts("Tölfræði")),
-                            m("button.close", {
-                                onclick: onClose
-                            }, "×")
-                        ]),
+                        // Close button in top right
+                        m("button.close", {
+                            onclick: onClose,
+                            "aria-label": "Loka"
+                        }, glyph("remove")),
                         // Tab navigation
                         m(TabBar, {
                             tabs,
@@ -37264,30 +37337,6 @@ const StatsModal = () => {
     };
 };
 
-/*
-
-  MobileStatsButton.ts
-
-  Button to open stats modal on mobile
-
-  Copyright (C) 2025 Miðeind ehf.
-  Author: Vilhjálmur Þorsteinsson
-
-  The Creative Commons Attribution-NonCommercial 4.0
-  International Public License (CC-BY-NC 4.0) applies to this software.
-  For further information, see https://github.com/mideind/Netskrafl
-
-*/
-const MobileStatsButton = {
-    view: (vnode) => {
-        const { onClick } = vnode.attrs;
-        return m(".mobile-stats-button", {
-            onclick: onClick,
-            title: "Tölfræði og stigatafla"
-        }, m(".stats-icon", glyph("stats")));
-    }
-};
-
 /*
 
   GataDagsins.ts
@@ -37393,7 +37442,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 })
@@ -37407,13 +37456,8 @@ const GataDagsins$1 = () => {
                 ((_a = model.state) === null || _a === void 0 ? void 0 : _a.beginner) ? m(Beginner, { view }) : "",
                 // Custom Info button for GataDagsins that shows help dialog
                 m(".info", { title: ts("Upplýsingar og hjálp") }, m("a.iconlink", { href: "#", onclick: (e) => { e.preventDefault(); toggleHelp(); } }, glyph("info-sign"))),
-                // Mobile stats button (hidden on desktop)
-                m(MobileStatsButton, { onClick: toggleStatsModal }),
                 // Help dialog and backdrop
-                showHelp ? [
-                    m(".modal-backdrop", { onclick: (e) => { e.preventDefault(); } }),
-                    m(GataDagsinsHelp, { onClose: toggleHelp })
-                ] : "",
+                showHelp ? m(GataDagsinsHelp, { onClose: toggleHelp }) : "",
                 // Stats modal and backdrop (mobile only)
                 showStatsModal ? m(StatsModal, { view, onClose: toggleStatsModal }) : "",
             ]);