@mideind/netskrafl-react 1.2.0 → 1.4.0

package/dist/esm/css/netskrafl.css

@@ -1001,14 +1001,14 @@ div.netskrafl-tile {
   cursor: default;
 }
 
-div.netskrafl-tile.wide,
-div.netskrafl-tile.extra-wide {
+div.netskrafl-tile.netskrafl-wide,
+div.netskrafl-tile.netskrafl-extra-wide {
   /* Wide tile in the rack */
   text-indent: -6px;
 }
 
-div.board div.netskrafl-tile.wide,
-div.board div.netskrafl-tile.extra-wide {
+div.board div.netskrafl-tile.netskrafl-wide,
+div.board div.netskrafl-tile.netskrafl-extra-wide {
   /* Wide letter tile on the board */
   text-indent: -2px;
 }
@@ -1127,8 +1127,8 @@ div.letterscore {
   vertical-align: bottom;
 }
 
-div.netskrafl-tile.wide div.letterscore,
-div.netskrafl-tile.extra-wide div.letterscore {
+div.netskrafl-tile.netskrafl-wide div.letterscore,
+div.netskrafl-tile.netskrafl-extra-wide div.letterscore {
   /* Adjust letter score tracking for wide tiles */
   letter-spacing: -0.5px;
 }
@@ -6408,8 +6408,8 @@ div.netskrafl-container input[type="checkbox"] {
     padding-top: 2px;
     margin-left: 0;
   }
-  div.netskrafl-tile.wide,
-  div.netskrafl-tile.extra-wide {
+  div.netskrafl-tile.netskrafl-wide,
+  div.netskrafl-tile.netskrafl-extra-wide {
     /* Wide character tile */
     text-indent: -6px;
     margin-left: 0;
@@ -6419,8 +6419,8 @@ div.netskrafl-container input[type="checkbox"] {
     /* Extra wide character tile: Q */
     text-indent: -8px;
   }
-  div.board div.netskrafl-tile.wide,
-  div.board div.netskrafl-tile.extra-wide {
+  div.board div.netskrafl-tile.netskrafl-wide,
+  div.board div.netskrafl-tile.netskrafl-extra-wide {
     /* Wide letter tile on the board */
     text-indent: -3.5px;
   }
@@ -6444,14 +6444,14 @@ div.netskrafl-container input[type="checkbox"] {
     right: 0px;
     bottom: 1px;
   }
-  div.netskrafl-tile.wide div.letterscore,
-  div.netskrafl-tile.extra-wide div.letterscore {
+  div.netskrafl-tile.netskrafl-wide div.letterscore,
+  div.netskrafl-tile.netskrafl-extra-wide div.letterscore {
     /* Adjust letter score position for wide tiles */
     right: 1px;
     left: auto;
   }
-  .rack div.netskrafl-tile.wide div.letterscore,
-  .rack div.netskrafl-tile.extra-wide div.letterscore {
+  .rack div.netskrafl-tile.netskrafl-wide div.letterscore,
+  .rack div.netskrafl-tile.netskrafl-extra-wide div.letterscore {
     /* Adjust letter score position for wide tiles */
     right: 1px;
     left: auto;
@@ -8574,6 +8574,14 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
   background-color: #f8f8f8;
 }
 
+.netskrafl-container .tab-icon-wrapper {
+  position: relative;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .netskrafl-container .tab-icon {
   line-height: 1;
   display: flex;
@@ -8585,6 +8593,20 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
   font-size: 22px;
 }
 
+.netskrafl-container .tab-badge {
+  position: absolute;
+  top: -4px;
+  right: -12px;
+  font-size: 13px;
+  color: var(--malfridur-secondary);
+  line-height: 1;
+  pointer-events: none;
+}
+
+.netskrafl-container .tab-badge .glyphicon {
+  font-size: 13px;
+}
+
 .netskrafl-container .tab-label {
   margin-top: 2px;
   font-size: 12px;
@@ -8967,6 +8989,14 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
     font-size: 24px;
   }
 
+  .netskrafl-container .tab-badge {
+    font-size: 14px;
+  }
+
+  .netskrafl-container .tab-badge .glyphicon {
+    font-size: 14px;
+  }
+
   .netskrafl-container .tab-label {
     margin-top: 2px;
     font-size: 12px;

package/dist/esm/index.js

@@ -21,8 +21,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)
@@ -88,7 +88,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,
@@ -98,8 +98,8 @@ const applyPersistedSettings = (state) => {
 
 const DEFAULT_STATE = {
     projectId: "netskrafl",
-    firebaseAPIKey: "",
-    databaseURL: "",
+    firebaseApiKey: "",
+    databaseUrl: "",
     firebaseSenderId: "",
     firebaseAppId: "",
     measurementId: "",
@@ -27213,12 +27213,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,
@@ -27649,7 +27649,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;
@@ -27660,7 +27660,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,
@@ -30890,14 +30890,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())));
         }
     };
@@ -31666,12 +31668,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
@@ -31681,7 +31683,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ð")]),
@@ -31737,7 +31739,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),
         ]);
     }
@@ -32264,6 +32266,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
@@ -32407,13 +32411,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);
@@ -32424,7 +32432,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
@@ -32438,9 +32446,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();
@@ -32458,22 +32464,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
@@ -36610,27 +36626,25 @@ 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
@@ -36642,12 +36656,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)
@@ -36691,8 +36705,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)
         ])));
     }
@@ -36781,7 +36798,7 @@ const BestPossibleScore = () => {
                 }
                 else {
                     // Someone else achieved it - indicate this
-                    topLabel = ts("Bestu lögn náð!");
+                    topLabel = ts("Besta mögulega lögn\n(er þegar fundin)");
                 }
             }
             else {
@@ -36831,7 +36848,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 })];
                     }
@@ -37061,18 +37078,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;
             };
@@ -37138,7 +37163,7 @@ 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,
@@ -37258,31 +37283,39 @@ 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-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
@@ -37415,9 +37448,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
@@ -37426,17 +37459,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 }) : "",
             ]);