https://github.com/fireproof-storage/sketch-magnetic-poetry

Multi-player live magnetic poetry using 🎈 PartyKit and 🔥 Fireproof
https://github.com/fireproof-storage/sketch-magnetic-poetry

collaboration crdt database partykit react websocket

Last synced: 7 days ago
JSON representation

Multi-player live magnetic poetry using 🎈 PartyKit and 🔥 Fireproof

• Host: GitHub
• URL: https://github.com/fireproof-storage/sketch-magnetic-poetry
• Owner: fireproof-storage
• License: mit
• Created: 2023-10-05T15:43:40.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-05T16:07:21.000Z (about 1 year ago)
• Last Synced: 2024-01-26T01:00:51.118Z (10 months ago)
• Topics: collaboration, crdt, database, partykit, react, websocket
• Language: TypeScript
• Homepage: https://magnetic-poetry.use-fireproof.com
• Size: 692 KB
• Stars: 2
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sketch-magnetic-poetry

This is a multiplayer magnetic poetry web toy, running at [magnetic-poetry.use-fireproof.com](https://magnetic-poetry.use-fireproof.com).

Users can drag and drop word tiles in collaboration with others in the same room. You can choose to save poems to the attached Fireproof database. Click the 🔥 link to see your data in the database.

Thanks to [Matt Webb for creating the original app this is based on.](https://github.com/partykit/sketch-mosaic)

## What you'll find here

This app is based on Next.js and PartyKit.

To share state, PartyKit keeps a `Poem` object in party-side storage. When a client connects, it receives the entire object in a websocket message called `sync`. When a client makes a turn, the new tile is added to the mosaic, and broadcast to all others in the room as an `update` message.

Saved poems are archived to the database and the raw data can be accessed by clicking the 🔥 link.

To see this code:

- server (party-side): `src/partykit/server.ts`

- client: `src/app/Room.ts`

You can see the database connection in `src/app/Room.ts`: `connect.partykit(database, process.env.NEXT_PUBLIC_PARTYKIT_HOST!)`

And see how to configure PartyKit for Fireproof in `partykit.json`:

```json

{

  "name": "magnetic",

  "main": "src/partykit/server.ts",

  "parties": {

    "fireproof": "node_modules/@fireproof/partykit/src/server.ts"

  }

}

```

![image](/assets/screenshot.png)

## To run this locally

Clone the repo, then (assuming you have Node.js installed):

```bash

npm install

cp .env.example .env  # tells the app where to find the partyserver

npx partykit dev  # runs the partyserver

npm run dev       # runs the app

```

Then go to [localhost:3000](http://localhost:3000) to use the app (check out multiplayer by opening multiple browser windows).

The state of the game is kept in room storage. There's a debug endpoint so you can see the current state (you'll need to refresh the page to see changes). Go to [127.0.0.1:1999/party/announcer](http://127.0.0.1:1999/party/announcer) -- check out the the partyserver code for how this works.