@mideind/netskrafl-react 2.1.0 → 2.2.0

package/README.md

@@ -1,63 +1,138 @@
 
 # netskrafl-react
 
-## A React front end for Netskrafl
+A React front end for Netskrafl, packaged as a React component library.
 
-This is a web front end for the Netskrafl game server, packaged as a React component.
+## Components
 
-The component is written in TypeScript. It assumes that the containing application
-(a) performs user authentication and (b) determines whether users have full access to the
-Netskrafl functionality (typically by being paying subscribers) or limited/free access.
-Information about (a) and (b) is passed to the component via its props.
+This library provides two main components:
 
-The code for the Netskrafl backend server can be found on GitHub
-at [https://github.com/mideind/Netskrafl](https://github.com/mideind/Netskrafl).
-The backend is written in Python, using the Flask web framework.
-The `netskrafl-react` component talks to the Netskrafl server via a
-JSON API over HTTPS, and uses Firebase for real-time updates.
+- **Netskrafl** - The full multiplayer crossword game
+- **GataDagsins** - A daily crossword riddle ("Riddle of the Day")
 
-The source code for `netskrafl-react` is a bit unusual in that it was originally
-written for the [Mithril](https://mithril.js.org) UI framework. The Mithril code
-has been wrapped in a React component. Modifying the component thus requires
-some familiarity with Mithril, as well as React. However, Mithril is fairly
-straightforward and arguably simpler than React, so this should not be a major
-obstacle.
+Both components are responsive and mobile-friendly.
 
 ## Installation
 
-To install the Netskrafl React component via `npm`, run the following command:
+```bash
+npm install @mideind/netskrafl-react
+```
 
+Requires React 18+. This package is distributed as ESM only.
+
+## Usage
+
+Import the component and its styles:
+
+```tsx
+import { Netskrafl } from '@mideind/netskrafl-react';
+import '@mideind/netskrafl-react/style.css';
+
+function App() {
+    return (
+        <Netskrafl
+            state={{
+                userEmail: 'user@example.com',
+                userFullName: 'Example User',
+                userId: 'unique-user-id',
+                firebaseToken: 'firebase-auth-token',
+                subscriber: true,
+                locale: 'is',
+                urlPrefix: 'https://netskrafl.is',
+            }}
+        />
+    );
+}
 ```
-npm install @mideind/netskrafl-react
+
+For Gáta Dagsins:
+
+```tsx
+import { GataDagsins } from '@mideind/netskrafl-react';
+import '@mideind/netskrafl-react/style.css';
+
+function App() {
+    return (
+        <GataDagsins
+            state={{
+                userEmail: 'user@example.com',
+                userFullName: 'Example User',
+                userId: 'unique-user-id',
+                firebaseToken: 'firebase-auth-token',
+                subscriber: true,
+                locale: 'is',
+                urlPrefix: 'https://netskrafl.is',
+            }}
+        />
+    );
+}
 ```
 
-## Development
+### Props
 
-During development, you can run the rollup bundler in watch mode by running:
+| Prop | Type | Description |
+|------|------|-------------|
+| `userEmail` | string | User's email address |
+| `userFullName` | string | User's display name |
+| `userId` | string | Unique user identifier |
+| `firebaseToken` | string | Firebase authentication token for real-time updates |
+| `subscriber` | boolean | Whether user has full access (subscriber) or limited/free access |
+| `locale` | string | UI language (`'is'` for Icelandic, `'en'` for English) |
+| `urlPrefix` | string | Base URL of the Netskrafl backend server |
 
-```bash
-npm run watch
-```
+## Features
 
-You can also use Storybook as a testing container by running:
+- Drag-and-drop tile placement
+- Click-to-select tile placement
+- Keyboard tile placement (type letters to place tiles)
+- Real-time game updates via Firebase
+- Mobile-responsive design with touch support
+- Pinch-to-zoom on mobile devices
 
-```bash
-npm run storybook
-```
+## Architecture
+
+The components are written in TypeScript. They assume that the containing
+application handles user authentication and subscription status.
 
-To build the component for production, run:
+The code uses a hybrid React-Mithril architecture: the components are React
+wrappers around [Mithril](https://mithril.js.org) UI code. Modifying the
+components requires familiarity with both frameworks, though Mithril is
+straightforward and arguably simpler than React.
+
+The components communicate with the Netskrafl backend server via a JSON API
+over HTTPS, and use Firebase for real-time updates.
+
+## Backend
+
+The Netskrafl backend server code is available at
+[github.com/mideind/Netskrafl](https://github.com/mideind/Netskrafl).
+The backend is written in Python using the Flask web framework.
+
+## Development
 
 ```bash
+# Install dependencies
+npm install
+
+# Run rollup in watch mode
+npm run watch
+
+# Run Storybook for development/testing
+npm run storybook
+
+# Build for production
 npm run rollup
-```
 
-See the `package.json` file for specifics.
+# Type-check
+npx tsc --noEmit
+
+# Lint
+npx @biomejs/biome check src/
+```
 
-## License and copyright
+## License
 
-Copyright © 2025 Miðeind ehf. The original author of `netskrafl-react`
-is *Vilhjálmur Þorsteinsson*.
+Copyright © 2025 Miðeind ehf. Original author: Vilhjálmur Þorsteinsson.
 
-This code is released under the
-[CC-BY-NC 4.0 license](https://creativecommons.org/licenses/by-nc/4.0/).
+Released under the [CC-BY-NC 4.0 license](https://creativecommons.org/licenses/by-nc/4.0/).
 See the LICENSE file for details.

package/dist/esm/css/netskrafl.css

@@ -319,9 +319,6 @@
 
 */
 
-/*
-*/
-
 div.netskrafl-container {
     --logo-primary: #c94314;
     --logo-primary-light: hsl(from var(--logo-primary) h s 75%);
@@ -507,7 +504,6 @@ div.netskrafl-container * {
 
 .netskrafl-container .ui-tabs {
     position: relative;
-    /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
     padding: 3px;
     border-width: 0;
 }
@@ -711,11 +707,11 @@ div.netskrafl-container * {
     text-transform: uppercase;
 }
 
-@media all and (max-width: 360px) {
-    /* Hack to squeeze the content on 360 pixel wide phones */
+@media all and (max-width: 374px) and (orientation: portrait) {
+    /* Scale down for phones narrower than the 375px design width */
     div.netskrafl-container {
         transform: scale(0.96, 1);
-        /* 0.96 = 360/375 */
+        /* 0.96 = 360/375, scales 375px design to fit 360px viewport */
         transform-origin: left top;
     }
 }
@@ -6083,13 +6079,14 @@ div.netskrafl-container input[type="checkbox"] {
 
 /* ================= MOBILE LANDSCAPE UI ====================== */
 
-@media all and (min-width: 667px) {
-    /* Mobile screen, landscape mode */
+@media all and (min-width: 667px) and (orientation: landscape) {
+    /* Mobile screen, landscape mode (width >= 667px AND landscape orientation) */
     div.netskrafl-container {
         /* Reference width */
         width: 667px;
         /* Reference height */
-        height: 375px;
+        height: calc(100dvh - var(--header-size, 3rem));
+        max-height: 686px;
         overflow-y: hidden;
     }
     .netskrafl-container div.tabbed-page {
@@ -6311,14 +6308,15 @@ div.netskrafl-container input[type="checkbox"] {
     }
 }
 
-@media all and (min-width: 667px) and (max-height: 360px) {
+@media all and (min-width: 667px) and (orientation: landscape) and (max-height: 360px) {
+    /* Very short landscape screens - scale board down slightly */
     .netskrafl-container div.board {
         transform: scale(0.96);
         transform-origin: top left;
     }
 }
 
-/* fullscreen.css */
+/* Large screen (iPad and larger) */
 
 @media all and (min-width: 1024px) {
     .netskrafl-container .ui-helper-reset {
@@ -6370,19 +6368,16 @@ div.netskrafl-container input[type="checkbox"] {
         padding-bottom: 1px;
         background-color: var(--tab-background);
     }
-    /* Large screen (iPad and larger) */
     div.netskrafl-container {
         width: 1024px;
-        height: 768px;
-        /* Was 748 */
+        height: 686px;
         overflow-y: hidden;
     }
     .netskrafl-container div.game-container {
-        height: 768px;
+        height: 100%;
     }
     .netskrafl-container div.heading {
         height: auto;
-        /* background-color: @heading-background; */
     }
     .netskrafl-container div.logo {
         display: block;
@@ -6410,7 +6405,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.info {
         display: block;
         position: absolute;
-        bottom: 152px;
+        bottom: 52px;
         top: auto;
         left: 28px;
         width: 50px;
@@ -6482,7 +6477,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.board-area {
         margin: 0;
         /* width should not be set here */
-        height: 750px;
+        height: 746px;
     }
     .netskrafl-container div.board {
         position: absolute;
@@ -7607,7 +7602,6 @@ div.netskrafl-container input[type="checkbox"] {
         width: 428px;
         height: 292px;
         padding-top: 12px;
-        /* Override */
     }
     .netskrafl-container span.left-to-move,
     .netskrafl-container span.right-to-move {
@@ -7993,6 +7987,20 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     color: #333;
 }
 
+.netskrafl-container .date-navigator .solver-count-pill {
+    background-color: var(--malfridur-green);
+    color: white;
+    font-family: var(--number-font);
+    font-size: 11px;
+    font-weight: bold;
+    padding: 2px 8px;
+    border-radius: 10px;
+    margin-left: 10px;
+    min-width: 20px;
+    text-align: center;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
 .netskrafl-container .mobile-date-nav-container {
     display: flex;
     justify-content: center;
@@ -8004,10 +8012,15 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     padding: 0;
     width: 100%;
     justify-content: center;
-    gap: 20px;
     margin-bottom: 0;
 }
 
+/* Add spacing between date navigator children (replacing gap) */
+
+.netskrafl-container .mobile-date-nav-container .date-navigator > * + * {
+    margin-left: 16px;
+}
+
 /* Mobile status bar - visible on mobile only */
 
 .netskrafl-container div.gatadagsins-mobile-status {
@@ -9227,7 +9240,17 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     }
 
     .netskrafl-container div.gatadagsins-container {
-        height: 680px;
+        /* Dynamic viewport height minus header, adapts to browser chrome */
+        height: calc(100dvh - var(--header-size, 3rem));
+        max-height: 686px; /* Cap on large screens */
+    }
+
+    .netskrafl-container div.gatadagsins-board-rack-wrapper {
+        justify-content: flex-start; /* Align to the top of the screen */
+    }
+
+    .netskrafl-container div.gatadagsins-board-area {
+        flex: 0 0 auto; /* Don't expand - just fit the board */
     }
 
     .netskrafl-container div.gatadagsins-container div.board {
@@ -9256,7 +9279,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     }
 
     .netskrafl-container .desktop-date-nav-container {
-        margin-bottom: 10px;
+        margin-bottom: 6px;
     }
 
     /* Desktop tab styling adjustments */
@@ -9319,13 +9342,14 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
         flex-direction: column;
         order: 0;
         margin-top: 0;
+        margin-right: 12px;
         padding-top: 8px;
         padding-bottom: 24px;
         overflow: hidden;
     }
 
     .netskrafl-container div.gatadagsins-rack-area {
-        flex: 0 0 120px;
+        flex: 0 0 104px;
         /* Push left to compensate for row ids
        on the left side of the board */
         padding-left: 36px;
@@ -9377,7 +9401,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
         margin-right: 5px;
     }
 
-    .netskrafl-container div.gatadagsins-container div.info {
-        bottom: 42px;
+    .netskrafl-container div.info {
+        bottom: 72px;
     }
 }