@mideind/netskrafl-react 2.1.0 → 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.