@mideind/netskrafl-react 2.0.1 → 2.1.1

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

@@ -3206,22 +3206,27 @@ div.netskrafl-racktile {
     0% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     45% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     50% {
         color: black;
         background-color: white;
+        border-color: white;
     }
     95% {
         color: black;
         background-color: white;
+        border-color: white;
     }
     100% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
 }
 
@@ -3229,22 +3234,27 @@ div.netskrafl-racktile {
     0% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     45% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     50% {
         color: black;
         background-color: white;
+        border-color: white;
     }
     95% {
         color: black;
         background-color: white;
+        border-color: white;
     }
     100% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
 }
 
@@ -3252,22 +3262,27 @@ div.netskrafl-racktile {
     0% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     45% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     50% {
         color: var(--blank-tile);
         background-color: white;
+        border-color: white;
     }
     95% {
         color: var(--blank-tile);
         background-color: white;
+        border-color: white;
     }
     100% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
 }
 
@@ -3275,22 +3290,65 @@ div.netskrafl-racktile {
     0% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     45% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     50% {
         color: var(--blank-tile);
         background-color: white;
+        border-color: white;
     }
     95% {
         color: var(--blank-tile);
         background-color: white;
+        border-color: white;
     }
     100% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
+    }
+}
+
+/* Text-only animation for tiles (background handled by parent td) */
+
+@keyframes selBlinkText {
+    0% {
+        color: white;
+    }
+    45% {
+        color: white;
+    }
+    50% {
+        color: black;
+    }
+    95% {
+        color: black;
+    }
+    100% {
+        color: white;
+    }
+}
+
+@keyframes selBlankText {
+    0% {
+        color: white;
+    }
+    45% {
+        color: white;
+    }
+    50% {
+        color: var(--blank-tile);
+    }
+    95% {
+        color: var(--blank-tile);
+    }
+    100% {
+        color: white;
     }
 }
 
@@ -3367,19 +3425,83 @@ div.netskrafl-racktile {
 }
 
 .netskrafl-container div.sel {
+    background-color: transparent;
+    color: inherit;
+}
+
+div.netskrafl-blanktile.sel {
+    background-color: transparent;
+    color: inherit;
+}
+
+/* Make the parent td also blink when it contains a selected tile */
+
+.netskrafl-container div.rack td:has(> div.sel),
+.netskrafl-container div.board td:has(> div.sel),
+.netskrafl-container table.board td:has(> div.sel) {
     animation: selBlink 1.2s infinite;
     -webkit-animation: selBlink 1.2s infinite;
 }
 
-div.netskrafl-blanktile.sel {
-    animation: selBlank 1.2s infinite;
-    -webkit-animation: selBlank 1.2s infinite;
+/* Make the parent td match the background of an exchange-selected tile */
+
+div.rack td:has(> div.netskrafl-xchgsel) {
+    background-color: var(--human-color);
+    border-color: var(--human-color);
 }
 
 .netskrafl-container td.sel {
     outline: var(--cancel-button) solid 3px;
 }
 
+/* Container focus styling - remove default outline */
+
+.netskrafl-container:focus {
+    outline: none;
+}
+
+/* Keyboard tile placement target indicator */
+
+.netskrafl-container td.keyboard-target {
+    position: relative;
+    background-color: rgba(102, 178, 102, 0.4); /* Light green highlight */
+}
+
+.netskrafl-container td.keyboard-target::after {
+    font-family: "Glyphicons Regular";
+    content: "\E212"; /* right-arrow */
+    position: absolute;
+    top: calc(50% + 1px);
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 15px;
+    color: var(--cancel-button);
+    opacity: 0.8;
+    animation: pulse 1.5s infinite;
+}
+
+.netskrafl-container td.keyboard-target.vertical::after {
+    content: "\E213"; /* down-arrow */
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.4;
+    }
+    25% {
+        opacity: 0.8;
+    }
+    50% {
+        opacity: 1;
+    }
+    75% {
+        opacity: 0.8;
+    }
+    100% {
+        opacity: 0.4;
+    }
+}
+
 .netskrafl-container div.xchg {
     cursor: pointer;
 }
@@ -7585,6 +7707,12 @@ div.netskrafl-container input[type="checkbox"] {
     overflow-y: hidden;
 }
 
+/* Container focus styling - remove default outline */
+
+.netskrafl-container:focus {
+    outline: none;
+}
+
 .netskrafl-container div.gatadagsins-main {
     display: flex;
     position: relative;