Socket-Pixels-Server

Server that uses Web Sockets to create a room for r/place-esque canvas at Socket-Pixels

Details • Key Features • How To Use • Related • License

Details

This is a simple clone of the r/place canvas implemented in HTML, CSS, and JavaScript. The r/place canvas was a collaborative art project on Reddit that allowed users to place colored pixels on a large canvas. This clone project aims to recreate the canvas functionality and allow users to draw on a similar canvas.

Key Features

• Custom color selection
  • Instead of the fixed 16 colors in r/place, select custom colors when creating a room. It's like a box of crayons (but better ofc)
• Custom timeouts
  • Set custom timeouts, restricting them on how long they'll have to wait between two pixel places.
• IP-based identification
  • Users are identified using their IP addresses so that timeouts can be implemented. Just to try and (hopefully) keep things under control.
• Custom grid sizes
  • Select custom grid sizes for the canvas.
• Local database
  • To keep things simple and make this server locally hostable, I used a database that stores data locally (tindogb) so that you don't have to worry about setting up a cloud database.

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/chakri68/socket-pixels-server

# Go into the repository
$ cd socket-pixels-server

# Install dependencies
$ yarn install

# Run the app
$ yarn start

Note I recommend using yarn for faster downloads (more) TingoDB code can be reused with MongoDB (more)

Related

Socket-Pixels - Svelte Frontend for Socket-Pixels

Support

License

MIT

---