@mideind/netskrafl-react 1.2.0 → 1.3.0

package/dist/cjs/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/cjs/index.js

@@ -36693,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)
         ])));
     }
@@ -37063,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;
             };
@@ -37260,17 +37271,25 @@ 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;
             };