🐒 🦍 🐶 🐕 🐩 🐺 🦊 🦝 🐱 🐈 🦁 🐯 🐅 🐆 🐴 🐎 🦄 🦓 🦌 🐮 🐂 🐃 🐄 🐷 🐖 🐗 🐽 🐏 🐑 🐐 🐪 🐫 🦙 🦒 🐘 🦏 🦛 🐭 🐁 🐀 🐹 🐰 🐇 🐿 🦔 🦇 🐻 🐨 🐼 🦘 🦡 🐾 🦃 🐔 🐓 🐣 🐤 🐥 🐦 🐧 🕊 🦅 🦆 🦢 🦉 🦚 🦜 🐸 🐊 🐢 🦎 🐍 🐲 🐉 🦕 🦖 🐳 🐋 🐬 🐟 🐠 🐡 🦈 🐙 🐚 🦀 🦞 🦐 🦑 🐌 🦋 🐛 🐜 🐝 🐞 🦗 🕷 🕸 🦂 🦟 🦠

.eslintignore

@@ -0,0 +1,2 @@
+lib
+demo-dist

.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier",
+    "react-hooks"
+  ],
+  "rules": {
+    "comma-dangle": [
+      "error",
+      "always-multiline"
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/no-unescaped-entities": [
+      "error",
+      {
+        "forbid": [
+          ">",
+          "}"
+        ]
+      }
+    ],
+    "prettier/prettier": 1,
+    "react/prop-types": 0,
+    "no-debugger": "warn",
+    "@typescript-eslint/ban-ts-comment": "warn"
+  }
+}

.gitignore

@@ -1,106 +1,3 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-.vscode
+demo-dist
+lib
+node_modules

.nvmrc

@@ -1 +1 @@
-v16.13.1
+v18.7.0

README.md

@@ -1,33 +1,72 @@
 # beep-boop
 
-[p2panda](https://github.com/p2panda/handbook) demo chat client running as a statically hosted web or native [Tauri](https://tauri.studio/) desktop application. See it live [here](https://p2panda.org/demo/). ⬅️
+Play with the other animals in the zoo.
 
-## Requirements
+<img src="screenshot.png" width="350" />
 
-* Node.js
-* Rust
+This is a React component you can embed in your website. It will connect to a [p2panda](https://github.com/p2panda/handbook) node and allow you to collaboratively play the game in the p2panda network.
+
+## Installation
+
+```bash
+npm i zoo-adventures
+```
+
+## Usage
+
+```js
+import ZooAdventures from 'zoo-adventures';
+
+const App = () => {
+  return (
+    <ZooAdventures />
+  );
+}
+```
+
+To configure the component you can pass in the following arguments:
+
+
+* `boardSize: number` Dimensions of the board, set to 4 when it is a 4x4 board (defaults to `4`)
+* `winSize: number` Required number of pieces in horizontal, vertical, diagonal row to win (defaults to `3`)
+* `documentId: string` All players play on the same board, this is the document id of it (defaults to `0020c301d659...`)
+* `endpoint: string` URL of the p2panda node (defaults to `http://localhost:2020/graphql`)
+* `schemaId: string` ID of the game board schema, make sure the board size matches the fields (defaults to `zoo_adventures_002094037...`)
+* `updateIntervalMs: number` Interval to fetch latest board game state from node in milliseconds (defaults to `2000`)
 
 ## Development
 
+### Setup
+
 ```bash
-# Install Node dependencies
+# Install NodeJS dependencies
 npm install
+```
+
+### Register schema
+
+The used schema for this game is already deployed in the p2panda network. If you want to to deploy it on your [local node](https://github.com/p2panda/aquadoggo), you can run:
 
-# Run development server (via http://localhost:4000)
-npm run start
+```bash
+node register-schema.js
+```
+
+It will deploy the schema and create the game board document on your node hosted at `http://localhost:2020`.
 
-# Start native application in development mode (make sure the development
-# server runs simultaneously)
-npm run tauri:start
+### Component
 
+```bash
 # Check linter errors
 npm run lint
 
-# Build static files for web hosting
+# Build library and demo
 npm run build
 
-# Build native desktop application
-npm run tauri:build
+# Watch for changes and automatically run `build`
+npm run watch
+
+# Start server to host demo (needs building first)
+npm run serve
 ```
 
 ## License