@mideind/netskrafl-react 1.4.0 → 1.5.0

package/dist/esm/css/netskrafl.css

@@ -929,14 +929,11 @@ div.netskrafl-container * {
 }
 
 .netskrafl-container div.board table.board {
-  transform: scale(1);
-  transform-origin: 0 0;
+  transform: translate(0px, 0px) scale(1);
+  transition: none;
+  transform-origin: top left;
   transform-box: view-box;
   touch-action: pan-x pan-y;
-  /*
-   !!! Scrolling into view doesn't seem to work with this transition enabled
-   transition: transform .2s ease-in-out;
-   */
 }
 
 .netskrafl-container table.board tr {
@@ -6281,7 +6278,7 @@ div.netskrafl-container input[type="checkbox"] {
   .netskrafl-container div.info {
     display: block;
     position: absolute;
-    bottom: 148px;
+    bottom: 152px;
     top: auto;
     left: 28px;
     width: 50px;
@@ -6363,6 +6360,7 @@ div.netskrafl-container input[type="checkbox"] {
     width: auto;
     height: auto;
     margin: 0;
+    overflow: visible; /* No scrollbars in fullscreen mode */
   }
   .netskrafl-container .board td {
     min-height: 30px;
@@ -7585,7 +7583,7 @@ div.netskrafl-container input[type="checkbox"] {
 .netskrafl-container .modal-dialog.gatadagsins-help {
   visibility: visible;
   position: fixed;
-  top: 50%;
+  top: 52%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10000;
@@ -7608,7 +7606,7 @@ div.netskrafl-container input[type="checkbox"] {
   padding: 15px;
   border-bottom: 1px solid #e0e0e0;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
 }
 
@@ -7618,22 +7616,37 @@ div.netskrafl-container input[type="checkbox"] {
   color: #333;
 }
 
-.netskrafl-container .modal-dialog.gatadagsins-help .modal-header .close {
-  background: none;
+.netskrafl-container .modal-dialog.gatadagsins-help .modal-content {
+  position: relative;
+}
+
+.netskrafl-container .modal-dialog.gatadagsins-help .close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--malfridur-accent);
   border: none;
-  font-size: 28px;
+  border-radius: 6px;
   cursor: pointer;
   padding: 0;
-  width: 30px;
-  height: 30px;
+  width: 36px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #999;
+  color: white;
+  z-index: 10;
+  transition: all 0.2s ease;
 }
 
-.netskrafl-container .modal-dialog.gatadagsins-help .modal-header .close:hover {
-  color: #333;
+.netskrafl-container .modal-dialog.gatadagsins-help .close .glyphicon {
+  font-size: 18px;
+  top: 0;
+}
+
+.netskrafl-container .modal-dialog.gatadagsins-help .close:hover {
+  background-color: var(--logo-accent);
+  transform: scale(1.05);
 }
 
 .netskrafl-container .modal-dialog.gatadagsins-help .modal-body {
@@ -7718,9 +7731,9 @@ div.netskrafl-container input[type="checkbox"] {
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 9999;
+  /* z-index: 9999; */
   overflow: hidden;
-  touch-action: none;
+  /* touch-action: none; */
 }
 
 /* Larger screen adjustments */
@@ -7734,6 +7747,7 @@ div.netskrafl-container input[type="checkbox"] {
 
   .netskrafl-container .modal-dialog.gatadagsins-help .modal-header {
     padding: 20px;
+    padding-right: 20px;
   }
 
   .netskrafl-container .modal-dialog.gatadagsins-help .modal-header h2 {
@@ -7834,6 +7848,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
+  margin-bottom: 20px;
 }
 
 /* Override rack positioning for Gáta Dagsins */
@@ -8697,7 +8712,11 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
 /* ================= LEADERBOARD VIEW STYLES =============== */
 
 .netskrafl-container .leaderboard-view {
+  display: flex;
+  flex-direction: column;
   padding: 0px 10px;
+  height: 100%;
+  overflow: hidden;
 }
 
 .netskrafl-container .leaderboard-view.loading,
@@ -8716,6 +8735,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
   display: flex;
   flex-direction: column;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .netskrafl-container .leaderboard-title {
@@ -8736,13 +8756,16 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
   display: flex;
   flex-direction: column;
   gap: 8px;
+  overflow-y: auto;
+  height: 360px;
+  overscroll-behavior-y: contain;
 }
 
 .netskrafl-container .leaderboard-entry {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px;
+  gap: 8px;
+  padding: 8px;
   background-color: #f8f8f8;
   border-radius: 6px;
   transition: all 0.3s ease;
@@ -8788,6 +8811,45 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
   color: var(--malfridur-green);
 }
 
+.netskrafl-container .entry-star {
+  display: inline-block;
+  margin-right: 8px;
+  color: var(--malfridur-secondary);
+  line-height: 1;
+}
+
+.netskrafl-container .entry-star .glyphicon {
+  font-size: 13px;
+}
+
+/* ================= HELP DIALOG BONUS SQUARES =============== */
+
+.netskrafl-container .help-bonus-square {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  margin-left: 4px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.netskrafl-container .help-bonus-square.double-letter {
+  background-color: var(--double-letter-color);
+}
+
+.netskrafl-container .help-bonus-square.triple-letter {
+  background-color: var(--triple-letter-color);
+}
+
+.netskrafl-container .help-bonus-square.double-word {
+  background-color: var(--double-word-color);
+}
+
+.netskrafl-container .help-bonus-square.triple-word {
+  background-color: var(--triple-word-color);
+}
+
 /* ================= MOBILE STATS BUTTON =============== */
 
 .netskrafl-container .mobile-stats-button {
@@ -8825,7 +8887,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
 .netskrafl-container .modal-dialog.stats-modal {
   visibility: visible;
   position: fixed;
-  top: 50%;
+  top: 52%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10000;
@@ -8884,7 +8946,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
 .netskrafl-container .modal-dialog.stats-modal .modal-body {
   padding-top: 15px;
   padding-bottom: 15px;
-  overflow-y: auto;
+  overflow-y: hidden;
   flex: 1;
   overscroll-behavior-y: contain;
 }
@@ -8892,6 +8954,11 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
 /* Desktop styles for Gáta Dagsins */
 
 @media all and (min-width: 1024px) {
+
+  .modal-backdrop-netskrafl {
+    z-index: 9999;
+  }
+
   /* Show all thermometer moves on desktop */
   .netskrafl-container .thermometer-move-overlay:nth-child(n+2) {
     display: flex;
@@ -9018,6 +9085,11 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
     width: 100%;
   }
 
+  .netskrafl-container .leaderboard-list {
+    height: 514px; /* Space for 10 entries */
+    overscroll-behavior-y: contain;
+  }
+
   /* Show thermometer on desktop */
   .netskrafl-container div.gatadagsins-thermometer-column {
     display: flex;
@@ -9034,7 +9106,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
     margin-top: 0;
     padding-top: 8px;
     padding-bottom: 24px;
-    overflow-x: hidden;
+    overflow: hidden;
   }
 
   .netskrafl-container div.gatadagsins-rack-area {
@@ -9042,6 +9114,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
     /* Push left to compensate for row ids
        on the left side of the board */
     padding-left: 36px;
+    margin-bottom: 0;
   }
 
   /* Show desktop score on desktop */
@@ -9086,4 +9159,8 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
     margin-right: 5px;
   }
 
+  .netskrafl-container div.gatadagsins-container div.info {
+    bottom: 42px;
+  }
+
 }

package/dist/esm/index.js

@@ -31450,7 +31450,6 @@ const Movelist = (initialVnode) => {
                 view,
                 move,
                 info: {
-                    key: i.toString(),
                     leftTotal: leftTotal, rightTotal: rightTotal,
                     player: player, co: co, tiles: tiles, score: score
                 }
@@ -31759,79 +31758,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 +31812,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 +31829,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 +31842,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 +32141,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) => {
@@ -32294,8 +32295,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
@@ -35873,6 +35873,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();
@@ -36213,6 +36215,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) {
@@ -36225,6 +36229,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) {
@@ -36275,6 +36280,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)
@@ -36632,7 +36666,6 @@ const MobileStatus = () => {
                 return null;
             const { bestPossibleScore, globalBestScore, personalBestScore } = riddle;
             // Determine if player achieved best possible score
-            const achieved = bestMove !== undefined;
             const celebrate = bestMove && bestMove.word !== "";
             // Determine current leader score (may be this player or another)
             let leaderScore = 0;
@@ -36669,8 +36702,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
@@ -36791,25 +36823,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("Besta mögulega lögn\n(er þegar fundin)");
-                }
+            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
@@ -37045,7 +37069,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);
@@ -37053,7 +37080,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())
                 ]);
             }))
@@ -37154,7 +37183,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);
@@ -37166,15 +37195,15 @@ const GataDagsinsRightSide = {
                 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);
     }
@@ -37205,14 +37234,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 " +
@@ -37231,8 +37259,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:"),