pixelplanet/README.md

257 lines
13 KiB
Markdown
Raw Normal View History

2020-01-02 16:58:06 +00:00
# PixelPlanet.fun
2020-02-18 10:28:27 +00:00
2020-06-23 06:21:56 +00:00
[![Guilded](https://img.shields.io/badge/Discord-Support-blue.svg)](https://pixelplanet.fun/guilded) ![](https://github.com/pixelplanetdev/pixelplanet/workflows/Node%20CI/badge.svg)
2020-01-04 01:53:37 +00:00
2020-01-02 16:58:06 +00:00
Official repository of [pixelplanet.fun](http://www.pixelplanet.fun).
![videothumb](promotion/videothumb.gif)
Just to the 2nd anniversary of r/space, pixelplanet takes pixelgames to a new level. Place pixels, create pixelart and fight faction wars on pixelplanet.fun.
Pixelplanet is a 65k x 65k large canvas that is a map of the world and can also be seen as 3d globe, you can place pixels where ever you want, build an island, take over another country with a flag or just create pixelart.
30 well chosen colors (decided by polls within the community) are available and you can place a pixel every 3s on an empty space, and 5s on an already set pixel. But pixels can be stacked up to a minute, so you don't have to wait every time.
2020-01-02 16:58:06 +00:00
Pixelplanet receives regular updates and launches events, like a zero second cooldown day on r/place anniversary. We are driven by our community, because placing pixels is more fun together.
Controls:
W, A, S, D, click and drag or pan: Move
Q, E or scroll or pinch: Zoom
Click or tab: Place Pixel
![screenshot](promotion/screenshot.png)
## Build
2020-01-03 13:23:37 +00:00
### Requirements
2020-01-02 16:58:06 +00:00
- [nodejs environment](https://nodejs.org/en/)
### Building
2020-01-04 02:12:27 +00:00
Checkout repository
```
git clone https://github.com/pixelplanetdev/pixelplanet.git
cd pixelplanet
```
Install packages and build
2020-01-02 16:58:06 +00:00
```
2020-01-03 23:34:51 +00:00
npm install
npm run build
2020-01-02 16:58:06 +00:00
```
2020-01-04 02:12:27 +00:00
2020-01-02 16:58:06 +00:00
All needed files to run it got created in `./build`
2020-01-04 02:12:27 +00:00
Notes:
- If you run into problems, make sure that you have rights to g++ (if not, run as root and then chown username:username -R . after build)
2020-01-04 02:12:27 +00:00
- If `npm install` fails with "unable to connect to github.com" set:
2020-01-04 02:12:27 +00:00
2020-01-02 16:58:06 +00:00
```
git config --global url.https://github.com/.insteadOf git://github.com/
```
## Run
2020-01-03 13:23:37 +00:00
### Requirements
2020-01-02 16:58:06 +00:00
- nodejs environment with [npm](https://www.npmjs.com/get-npm)
- [pm2](https://github.com/Unitech/pm2) (`npm install -g pm2`) as process manager and for logging
- [redis](https://redis.io/) as database for storìng the canvas
2020-01-02 16:58:06 +00:00
- mysql or mariadb ([setup own user](https://www.digitalocean.com/community/tutorials/how-to-create-a-new-user-and-grant-permissions-in-mysql) and [create database](https://www.w3schools.com/SQl/sql_create_db.asp) for pixelplanet) for storing additional data like IP blacklist
### Configuration
Configuration takes place in the environment variables that are defined in ecosystem.yml
#### Neccessary Configuration
| Variable | Description | Example |
|----------------|:-------------------------|------------------------:|
| PORT | Port | 80 |
2020-01-09 18:18:11 +00:00
| REDIS_URL | URL:PORT of redis server | "redis://localhost:6379" |
2020-01-02 16:58:06 +00:00
| MYSQL_HOST | MySql Host | "localhost" |
| MYSQL_USER | MySql User | "user" |
| MYSQL_PW | MySql Password | "password" |
| MYSQL_DATABASE | MySql Database | "pixelpladb" |
#### Optional Configuration
| Variable | Description | Example |
|-------------------|:--------------------------------------|--------------------|
| ASSET_SERVER | URL for assets | "http://localhost" |
| USE_PROXYCHECK | Check users for Proxies | 0 |
| APISOCKET_KEY | Key for API Socket for SpecialAccess™ | "SDfasife3" |
| ADMIN_IDS | Ids of users with Admin rights | "1,12,3" |
2020-05-16 12:54:14 +00:00
| CAPTCHA_METHOD | 0: none, 1: reCaptcha, 2: hCaptcha | 2 |
| CAPTCHA_SECRET | re/hCaptcha secret key | "asdieewff" |
| CAPTCHA_SITEKEY | re/hCaptcha site key | "23ksdfssd" |
| CAPTCHA_TIME | time in minutes between captchas | 30 |
| SESSION_SECRET | random sting for express sessions | "ayylmao" |
| LOG_MYSQL | if sql queries should get logged | 0 |
| USE_XREALIP | see cloudflare section | 1 |
| BACKUP_URL | url of backup server (see Backup) | "http://localhost" |
| BACKUP_DIR | mounted directory of backup server | "/mnt/backup/" |
| GMAIL_USER | gmail username if used for mails | "ppfun@gmail.com" |
| GMAIL_PW | gmail password if used for mails | "lolrofls" |
2020-05-24 15:52:04 +00:00
| HOURLY_EVENT | run hourly void event on main canvas | 1 |
2020-01-02 16:58:06 +00:00
Notes:
- to be able to use USE_PROXYCHECK, you have to have an account on proxycheck.io or getipintel or another checker setup and you might set some proxies in`proxies.json` that get used for making proxycheck requests. Look into `src/isProxy.js` to see how things work, but keep in mind that this isn't neccessarily how pixelplanet.fun uses it.
- Admins are users with 0cd and access to `Admintools`in their User Menu for image-upload and whatever
2020-01-02 16:58:06 +00:00
- You can find out the id of a user by looking into the logs (i.e. `info: {ip} / {id} wants to place 2 in (1701, -8315)`) when he places a pixel or by checking the MySql Users database
- If you use gmail as mail transport, make sure that less-secure apps are allowed to access it in your settings [here](https://myaccount.google.com/lesssecureapps)
2020-01-02 16:58:06 +00:00
#### Social Media
| Variable | Description |
|-----------------------|:-------------------------|
| DISCORD_INVITE | Invite to discord server |
| DISCORD_CLIENT_ID | All |
| DISCORD_CLIENT_SECRET | those |
| GOOGLE_CLIENT_ID | values |
| GOOGLE_CLIENT_SECRET | are |
| FACEBOOK_APP_ID | for |
| FACEBOOK_APP_SECRET | login |
| VK_CLIENT_ID | with |
| VK_CLIENT_SECRET | Social |
| REDDIT_CLIENT_ID | Media |
| REDDIT_CLIENT_SECRET | Accounts |
Notes:
2020-01-02 16:58:06 +00:00
- The HTML for SocialMedia logins is in src/componets/UserAreaModal.js , delete stuff from there if you don't need it
- The HTML for the Help Screen is in src/components/HelpModal.js
2020-04-28 07:33:02 +00:00
Canvas specific configuartion like colors and cooldown is in `canvases.json` for all canvases.
Meaning of some values:
| Key | Description |
|--------|:--------------------------------------------------|
| ident | Unique character used in the url |
2020-04-28 07:33:02 +00:00
| title | Title |
| size | canvas size, power of 4 and between 256 and 65536 |
| bcd | Base cooldown for unset pixels |
| pcd | Cooldown for placing on set pixels |
| cds | Stack time of Cooldown |
| cli | Number of colors on the palette to ignore |
| ranked | If pixels on canvas count on player statistic |
| req | requieremt to place on the canvas |
| sd | Start-date of the canvas for historical view |
| desc | Small desctiption text |
| v | If 3D voxel canvas (boolean) |
| hid | Hidden canvases, can be just seen by pressing P |
2020-04-28 07:33:02 +00:00
The canvas size limit can be surpassed by changing the websocket packages in src/socket/packages/ to send chunk coordinates in 16bit.
req is an integer and if >0 is the amount of total pixels placed before being allowed to play there, if -1 it has no requirement and if 0 it is limited to registered users.
The colors that are ignored via cli are used for making the canvas (blue ocean and white continents) and to know if the pixel is already set by a user or not.
2020-01-28 12:52:35 +00:00
If you want to add a new canvas, be sure that you additionally create `public/loading${canvasId}.png`, `public/assets3d/normal${canvasId}.jpg`, `public/preview${canvasId}.png` and `public/assets3d/specular${canvasId}.jpg`, check out the existing ones to see what those files are for.
2020-01-02 16:58:06 +00:00
The default configuration values can be seen in `src/core/config.js` and for the canvases in `src/core/constats.js`
#### Styles
To add more css styles, create a new css file in `src/styles` based on `src/styles/default.css` and add it to the FILES array in `tools/minifyCss.js`
2020-01-02 16:58:06 +00:00
### Running
1. Make sure that mysql and redis are running
3. Start with
2020-01-02 16:58:06 +00:00
```
pm2 start ecosystem.yml
```
Notes:
2020-11-05 22:41:16 +00:00
- pixelplanet uses the unix command sendmail for sending verification and password reset mails if no GMAIL account is given. If you are on windows, this might not work.
2020-01-02 16:58:06 +00:00
### Logging
2020-04-30 07:43:50 +00:00
General logs are in `~/pm2/log/`, you can view them with
2020-01-02 16:58:06 +00:00
```
pm2 log web
```
2020-01-02 16:58:06 +00:00
you can flush the logs with
2020-01-02 16:58:06 +00:00
```
pm2 log flush
```
2020-05-01 03:00:14 +00:00
Pixel placing logs are in `./log/pixels.log`and proxycheck logs in `./log/proxies.log` in the directory where you start pixelplaent. They get rotated daily and deleted if >14d old.
2020-04-30 07:43:50 +00:00
2020-01-02 16:58:06 +00:00
### Stopping
```
pm2 stop web
```
### If using Cloudflare / Reverse Proxy
2020-01-02 16:58:06 +00:00
In order to get the real IP and not use the cloudflare Proxy IP for placing pixels, we filter those out. The cloudflare IPs are in src/utils/cloudflareip.js and used in src/utils/ip.js. If for some reason cloudflare ads more IPs to it, you can see them at https://www.cloudflare.com/ips/ and add them.
If you use any other Reverse Proxy, you can define it's IPs there too.
If USE\_XREALIP is set, we take the IP from the X-Real-Ip header without checking for cloudflare IPs. Use this if you have pixelplanet running behind nginx use the nginx set\_realip module to give us the client ip on the X-Real-Ip header. And be sure to also forward X-Forwarded-Port and set X-Forwarded-Proto.
2020-01-02 16:58:06 +00:00
### Auto-Start
To have the canvas with all it's components autostart at systemstart,
enable mysql, redis (and probably nginx if you use it) according to your system (`systemctl enable ...`)
And then setup pm2 startup with:
```
pm2 startup
```
(execute as the user that is running pixelplanet)
And follow the printed steps if needed. This will generate a systemctl service file `/etc/systemd/system/pm2-pixelplanet.service` and enable it. You will have to run `pm2 save` while the canvas is running to let pm2 know what to start.
To make sure that mysql and redis are up when pixelplanet starts, edit this service file and modify the lines:
```
Wants=network-online.target
After=network.target mysql.service redis.service
```
### Development
2020-01-04 02:12:27 +00:00
Run `npm run lint:src` to check for code errors and warnings or `npm run lint -- ./your/file.js` to check a single file.
Please do not produce too many additional warnings.
2020-01-04 02:12:27 +00:00
You can use `npm run babel-node ./your/script.js` to execute a script with local babel.
2020-01-03 13:01:57 +00:00
2020-01-04 02:12:27 +00:00
`npm run upgrade` can be use for interactively upgrading npm packages.
2020-01-08 18:09:05 +00:00
## Backups and Historical View
2020-01-08 18:09:05 +00:00
PixelPlanet includes a backup script that creates full canvas backups daily in the form of PNG tile files and incremential backups all 15min (or whatever you define) that saves PNG tiles with just the differences since the last full daily backup.
It requires a [second running redis instance](https://www.digitalocean.com/community/questions/multiple-redis-instances-on-ubuntu-16-04).
The backup script gets built when building pixelplanet and also gets copied to build/ directory. You can run it with:
```
node backup.js REDIS_URL_CANVAS REDIS_URL_BACKUP BACKUP_DIRECTORY [INTERVAL] [COMMAND]
2020-01-08 18:09:05 +00:00
```
Make sure to get the order right, because the backup redis instance will be overwritten every hour.
Interval is the time in minutes between incremential backups. If interval is undefined, it will just make one backup and then exit.
If command is defined, it will be executed after every backup (just one command, with no arguments, like "dosomething.sh"), this is useful for synchronisation with a storage server i.e..
2020-01-08 18:09:05 +00:00
Alternatively you can run it with pm2, just like pixelplanet. An example ecosystem-backup.example.yml file will be located in the build directory.
Note:
- You do not have to run backups or historical view, it's optional.
2020-05-24 15:52:04 +00:00
### Hourly Event
Hourly event is an MMORPG style event that launches once in two hours where users have to fight against a growing void that starts at a random position at the main canvas. If they complete it successfully, the whole canvas will have half cooldown for a few minutes.
### Historical view
2020-01-10 13:24:51 +00:00
![historicalview](promotion/historicalview.gif)
Pixelplanet is able to let the user browse through the past with those backups. For this you need to define `BACKUP_URL` and `BACKUP_DIR` in your ecosystem.yml for pixelplanet.
`BACKUP_URL` is the URL where the backup folder is available. It's best to let another server serve those files or at least use nginx.
`BACKUP_DIR` is the full path of the local directory where the backup is located (whats set as `BACKUP_DIRECTORY` in the command of the backup.js).
2020-01-28 12:52:35 +00:00
## 3D canvas
If v is set and true for a canvas in the canvas.json, it will be a 3D voxel canvas.
3D Canvases can not be seen in Historical View.
![threecanvas](promotion/threecanvas.png)