Skip to content

Commit

Permalink
Add documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
jrmi committed Jan 16, 2022
1 parent 7e5a2a6 commit a4c869c
Show file tree
Hide file tree
Showing 13 changed files with 708 additions and 444 deletions.
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
14
16
File renamed without changes.
108 changes: 13 additions & 95 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ do with a real table. You share a common space with other players like if you we
If you move something or if you flip a card, other players see
this action and can respond in real time.

Hint: you really should use an audio conference application to speak with other players.
Hint: you really should use an audio conference application to speak with other players.

Airboardgame doesn't force you, you make the rules.
Airboardgame is just a game table simulator : what you would do with a real
Expand Down Expand Up @@ -61,14 +61,14 @@ Airboardgame is not only designed to play games but also to create them.
In just few minutes you can create simple games without any
development skills and play with your friends.

Wants to test a concept? Play a Print & Play game? Use airboardgame without
the need for more hardware.
You want to test a concept? Try a print & play game? You can use Airboardgame
without the need for more hardware.

The only limit is your imagination.

To access this features, login then click on the « create new game » button on home page.
To access this features, login then click on the « Create new game » button on home page.

We want Airboardgame to be simple, intuitive and a consistent web application.
We want Airboardgame to be simple, intuitive web application.
Just give a try and if you like it share it and contribute.

You can create a game with simple actions :
Expand All @@ -80,6 +80,7 @@ You can create a game with simple actions :
* Note,
* Counter,
* Image that can represent cards, board, token, perks, …
* Pre-made items
*
* Choose board size
* Add available items not on the board but in the "game box" like extension or material for more user.
Expand All @@ -90,95 +91,12 @@ You can drag'n'drop image from your desktop to the board to use them in Airboard

* Open source web application,
* Made with React and Socket.io,
* Use recoiljs as state management,
* Client to client driven architecture.

## Installation instructions
* Use Recoiljs as state management,
* Client to client driven architecture,
* Use Ricochet.js as backend framework.

This is the procedure to install AirBoarGame application from scratch for
development purpose.
You need a recent node version. You can (and should) use [nvm](https://github.com/nvm-sh/nvm)
to initialize your environment.
## Developper documentation

### Backend

First you need to install and start the server part of the application.
The server code use [Ricochet.js](https://github.com/jrmi/ricochet.js). A local
instance is installed and can be started but you can use your own instance.

To proceed, execute:

```sh
cd backend
npm ci
cp .env.dist .env
```

You have the opportunity to modify Ricochet.js configuration now by editing this
file. Default values should be fine for test but remember that data are only kept in
memory so you loose all your changes each time you restart the ricochet server
with this default. You also must to register again your site.
See [Ricochet.js](https://github.com/jrmi/ricochet.js) documentation for more
options and how to make data to persist.

Now you can start the ricochet server:

```sh
npm run ricochet
```

Then you must create the Airboardgame ricochet site by visiting your ricochet
server URL with a browser and fill the site creation form. Default Ricochet
server URL if you didn't modify configuration should be `http://localhost:4050/`.

The only important value here is `site Id` that should have the `airboardgame`
value.

Since the form is submitted, save the key from the server response and customize
`.env` file using this key to set the `RICOCHET_SITE_KEY`.

Remember to confirm the site creation by clicking the link displayed in Ricochet.js
sever logs if you use the default configuration for SMTP.

Now, you should start backend code modifications monitoring to generate
code executed by Ricochet.js in another terminal:

```sh
npm run watch
```

you also need an instance of `wire.io` so in another terminal, execute:

```sh
# /!\ Need npm >= v7
PORT=4051 npx wire.io
```

See [wire.io](https://github.com/jrmi/wire.io) documentation for more information
on how to configure it.

### Client

In another terminal, go back to project root and execute:

```sh
cd <project_root>/
npm ci
cp .env.dist .env
```

Edit the `.env` file to fit your needs. Default should be fine if you didn't
modify server configuration.

Then you can start the client:

```sh
npm start
```

Now you should have four terminals:

* the one with Ricochet.js server instance. Backend logs can be found here
* one terminal with auto build on change for backend files
* another with `wire.io` server running
* and a last one with React frontend server
* [Installation instructions](docs/dev.md)
* [Deploy your own instance](docs/dev.md)
* [Contributing guide](docs/dev.md)
62 changes: 42 additions & 20 deletions backend/.env.dist
Original file line number Diff line number Diff line change
@@ -1,39 +1,61 @@
# Secret key generated by Ricochet.js. This is the key issued when you created the site.
RICOCHET_SITE_KEY=

# --- Ricochet configuration start here
# --- Ricochet configuration start here

# Ricochet server port and host
# Change this if you need external access
SERVER_PORT=4050
SERVER_HOST=localhost

# memory, disk or s3 storage are available
FILE_STORAGE=memory
# Configure the JSON store backend
# Available backends: memory, nedb, mongodb
# Use nedb or mongodb for persistent storage
# Memory store is lost when the server is stopped
JSON_STORE_BACKEND=memory

# S3 storage configuration
S3_ACCESS_KEY=
S3_SECRET_KEY=
S3_ENDPOINT=
S3_BUCKET=
# Uncomment if you use the nedb store backend
#NEDB_DIRNAME=/path/to/data # Any path where Nedb databases will be stored

# Only for testing purpose
S3_BUCKET_TEST=test-bucket-001
# Uncomment if you use the mongodb JSON store backend
#MONGODB_URI=
#MONGODB_DATABASE=

# memory or nedb store backend
STORE_BACKEND=memory
# Configure the file store backend
# Available backend: memory, disk or s3
# Memory store is lost when the server is stopped
FILE_STORE_BACKEND=memory

NEDB_BACKEND_DIRNAME=/path/to/data # Any path where nedb databases will be kept
# Disk file storage configuration
# Uncomment for 'disk' file storage
#DISK_DESTINATION=/path/to/dir/

# S3 storage configuration
# Uncomment the following lines if you want to use 's3' backend storage
#S3_ACCESS_KEY=
#S3_SECRET_KEY=
#S3_ENDPOINT=
#S3_BUCKET=
#S3_REGION=
#S3_PROXY=
#S3_CDN=
#S3_SIGNED_URL=

# Should be a unique long key here
RICOCHET_SECRET=YourSuperSecretHere

# Smtp server configuration
# If you let the fake host, sent mails are displayed in the console.
EMAIL_HOST=fake
EMAIL_PORT=
EMAIL_USER=
EMAIL_PASSWORD=
EMAIL_FROM=

# Webconference Openvidu configuration
# See https://docs.openvidu.io for more information
# --- Ricochet configuration ends here

# Wire.io port configuration
WIREIO_PORT=4051

# Secret key generated by Ricochet.js when you've registered the site.
RICOCHET_SITE_KEY=

OPENVIDU_URL=
OPENVIDU_SECRET=
# To show better logs set to 1 (then use npm run ricochetjs:pino)
USE_PINO=0
Loading

1 comment on commit a4c869c

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.