@mideind/netskrafl-react 3.4.5 → 3.4.7

package/README.md

@@ -20,74 +20,115 @@ npm install @mideind/netskrafl-react
 
 Requires React 18+. This package is distributed as ESM only.
 
+If using Next.js, add the package to `transpilePackages` in `next.config.ts`:
+
+```ts
+transpilePackages: ['@mideind/netskrafl-react'],
+```
+
 ## Usage
 
-Import the component and its styles:
+Import the component, its styles, and optionally the props type:
 
 ```tsx
 import { Netskrafl } from '@mideind/netskrafl-react';
+import type { INetskraflProps } 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',
-            }}
-        />
-    );
+    const props: INetskraflProps = {
+        state: {
+            serverUrl: 'https://your-netskrafl-server.is',
+            userEmail: 'user@example.com',
+            userNick: 'User',
+            userFullname: 'Example User',
+            token: 'jwt-auth-token',
+            plan: 'friend',
+            hasPaid: true,
+            // Firebase configuration
+            projectId: 'netskrafl',
+            firebaseApiKey: '...',
+            firebaseAppId: '...',
+            firebaseSenderId: '...',
+            databaseUrl: 'https://your-netskrafl.firebaseio.com',
+            measurementId: '...',
+            // Optional
+            loginMethod: 'myapp',
+            subscriptionUrl: '/subscribe',
+        },
+        tokenExpired: async () => {
+            // Called when the auth token expires.
+            // Fetch a new JWT and return it, or return undefined on failure.
+            const res = await fetch('/api/token', { method: 'POST' });
+            const data = await res.json();
+            return data.jwt;
+        },
+    };
+    return <Netskrafl {...props} />;
 }
 ```
 
-For Gáta Dagsins:
+For Gáta Dagsins, the usage is identical except for the component name:
 
 ```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',
-            }}
-        />
-    );
+    return <GataDagsins state={{ /* same shape */ }} tokenExpired={...} />;
 }
 ```
 
 ### Props
 
+Both components accept `INetskraflProps`:
+
 | Prop | Type | Description |
 |------|------|-------------|
+| `state` | `Partial<GlobalState>` | Configuration and user state (see below) |
+| `tokenExpired` | `() => Promise<string \| undefined>` | Optional callback invoked when the auth token expires; should return a fresh JWT |
+
+### State fields
+
+The `state` prop is a partial `GlobalState` object. Commonly used fields:
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `serverUrl` | string | Base URL of the Netskrafl backend server |
 | `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 |
+| `userNick` | string | User's short display name |
+| `userFullname` | string | User's full display name |
+| `token` | string | JWT authentication token for API requests |
+| `plan` | string | Subscription plan identifier (e.g. `'friend'`) |
+| `hasPaid` | boolean | Whether the user has an active subscription |
+| `loginMethod` | string | Identifies the host application (e.g. `'malstadur'`) |
+| `subscriptionUrl` | string | URL to redirect users for subscription management |
+| `projectId` | string | Firebase project ID |
+| `firebaseApiKey` | string | Firebase API key |
+| `firebaseAppId` | string | Firebase app ID |
+| `firebaseSenderId` | string | Firebase messaging sender ID |
+| `databaseUrl` | string | Firebase Realtime Database URL |
+| `measurementId` | string | Firebase Analytics measurement ID |
+| `movesUrl` | string | URL of the moves microservice |
+| `movesAccessKey` | string | Access key for the moves microservice |
+| `locale` | string | UI language (`'is'` for Icelandic, `'en_US'` for English) |
+| `runningLocal` | boolean | Set to `true` in development environments |
+| `userGroupId` | string? | Optional group identifier for Gáta Dagsins leaderboards |
+
+All fields are optional (the state is `Partial<GlobalState>`), but the
+components need at minimum `serverUrl`, `userEmail`, `token`, and the
+Firebase configuration fields to function.
 
 ## Features
 
-- Drag-and-drop tile placement
+- Drag-and-drop tile placement with touch support
 - 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
+- Mobile-responsive design
+- Pinch-to-zoom on mobile (pinch to zoom out, spread to zoom in)
+- Double-tap to zoom out on mobile
+- Auto-zoom when placing tiles on the board
 
 ## Architecture
 
@@ -123,6 +164,9 @@ npm run storybook
 # Build for production
 npm run rollup
 
+# Build CSS only (faster, for CSS-only changes)
+npm run css
+
 # Type-check
 npx tsc --noEmit
 
@@ -132,7 +176,7 @@ npx @biomejs/biome check src/
 
 ## License
 
-Copyright © 2025 Miðeind ehf. Original author: Vilhjálmur Þorsteinsson.
+Copyright © 2026 Miðeind ehf. Original author: Vilhjálmur Þorsteinsson.
 
 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

@@ -328,9 +328,9 @@
 
   Skrafl-explo.css
 
-  Styles for netskrafl.is using Málstaður colors
+  Styles for Netskrafl using Málstaður colors
 
-  Copyright © 2025 Miðeind ehf.
+  Copyright © 2026 Miðeind ehf.
   Author: Vilhjalmur Thorsteinsson
 
   The Creative Commons Attribution-NonCommercial 4.0
@@ -6535,12 +6535,13 @@ div.netskrafl-container input[type="checkbox"] {
 }
 
 /* ==========================================================================
-   RESPONSIVE: Mobile portrait (extra tall - iPhone X+)
+   RESPONSIVE: Mobile default (overridden by the landscape query below)
    ========================================================================== */
 
-@media all and (max-width: 1023px) and (min-height: 632px) {
-    /* iPhone X or taller */
-    /* Tall mobile phones: use two lines to display the header */
+@media all and (max-width: 1023px) {
+    /* Default mobile styles: two-line header, score and tab layout.
+       The landscape query further down overrides these for wide+short
+       viewports with orientation: landscape. */
     .netskrafl-container div.scoreleft {
         display: inline-block;
         position: relative;
@@ -6677,7 +6678,7 @@ div.netskrafl-container input[type="checkbox"] {
         text-align: center;
     }
     .netskrafl-container div.logowrapper {
-        width: 0%;
+        display: none;
     }
     .netskrafl-container div.playerwrapper {
         width: 100%;
@@ -6785,12 +6786,9 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.player {
         min-height: 36px;
     }
-    .netskrafl-container div.player-btn {
-        width: 84px;
-        padding-top: 6px;
-    }
+    .netskrafl-container div.player-btn,
     .netskrafl-container div.robot-btn {
-        width: 84px;
+        width: 120px;
         padding-top: 6px;
     }
     .netskrafl-container div.scoreleft,
@@ -6808,7 +6806,7 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div.movelist-container {
         height: calc(100vh - 90px);
-        height: calc(100dvh - var(--header-size, 40px) - 44px);
+        height: calc(100dvh - var(--header-size, 40px) - 72px);
         padding-top: 0px;
         padding-bottom: 0px;
     }
@@ -7112,6 +7110,9 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.game-container div.header-logo {
         display: none;
     }
+    .netskrafl-container div.game-container div.logowrapper {
+        display: none;
+    }
     .netskrafl-container div.board-help {
         display: block;
         z-index: 2;