Skip to content

Pimp My Wall

Introduction

Pimp My Wall is a BeeScreens application allowing players to draw on a canvas together. A tutorial is available to learn how to create an interactive drawing application.

Pimp My Wall - Screenshot 1 Pimp My Wall - Screenshot 2

How to run

Architecture and design

The Pimp My Wall application is built around three main components:

  • Backend - The backend service used by Pimp My Wall.
  • Frontend - The frontend service used by Pimp My Wall.
  • Package - The package shared by Pimp My Wall between the frontend and the backend side.
d6d46209-c84b-441d-90b6-3debc64e385d

Backend

The backend is a NestJS application. It is a WebSocket server that allows players to join a game and draw together on a canvas.

Code and how to run in the Backend code.

Frontend

The frontend is a Next.js application. It is a WebSocket client that allows players to join a game and draw together on a canvas.

Code and how to run in the Frontend code.

Package

The package is a TypeScript package shared by the frontend and the backend. It contains all the types and enums used by the frontend and the backend.

Code and how to run in the Package code.

Technical details

The following section describe how the app works.

The player joins a game

Schema

b7544ad2-6194-4a4d-9904-09055f4ae9e9

Implementation details

  1. When a WebSocket connection is established, the socket automatically joins a default room. All events can be emitted to this/from this default room. The connection is bi-directional.
  2. The backend emits a GAME event with a GameData containing all the game structure in its current state.
  3. The browser listen on a GAME event with a GameData object type and saves it. The browser renders the draw from the GameData object type.

Send stroke data

Schema

62b8933b-3575-47d6-a969-39757f0c096c

Implementation details

  1. We must distinguish two cases when emitting a stroke data: a new stroke is started or we continue to add points to the previous stroke:
  2. A new stroke is started: The POINT event is emitted with a Point object type with all attributes.
  3. A previous stroke is continued: The POINT event is emitted with a Point object type only with the { x, y } coordinates. size and color attributes are kept from previous points.
  4. Considering the two cases presented above:
  5. A new stroke is started: The backend listens to a POINT event with a Point object type and updates the GameData object type by creating a new stroke and adding the point for the player.
  6. A previous stroke is continued: The backend listens to a POINT event with a Point object type and updates the GameData object type by adding the point to the last stroke for the player.
  7. A PLAYER_POINT event is emitted with a PlayerPoint object type to all other players in the room.
  8. The browser listens to a PLAYER_POINT event with a PlayerPoint object type and updates the GameData object type according to the two cases presented above. The browser renders the draw from the GameData object type.

Send background data

Schema

ff2e4ed4-a406-4de1-8781-7227aa2243fa

Implementation details

  1. The BACKGROUND event is emitted with a Background object type.
  2. The backend listens to a BACKGROUND event and updates the GameData object type.
  3. A PLAYER_BACKGROUND event is emitted with a PlayerBackground object type to all other players in the room.
  4. The browser listens to a PLAYER_BACKGROUND event with a PlayerBackground object type and updates the GameData object type. The browser renders the draw from the GameData object type.

Send end stroke event

Schema

5b8ab49b-4fcd-4a8b-873c-2f1476036a04

Implementation details

  1. The END_STROKE event is emitted.
  2. The backend listens to a END_STROKE event and optimises the last stroke of the player in the Game object type.
  3. A END_STROKE_FROM_PLAYER event is emitted with a Player object type to all other players in the room.
  4. The browser listens to a END_STROKE_FROM_PLAYER event with a Player object type and optimises the last stroke of the player in the GameData object type. The browser renders the draw from the GameData object type.

Reset event

Schema

57b40dc2-cadb-43f8-aeab-f7a631b88b15

Undo event

Schema

5dc3842e-c0b1-4e63-9d05-6ea4d7f19962

Implementation details

  1. The UNDO event is emitted.
  2. The browser listens on a UNDO event.

Configure the frontend using query parameters

The frontend can be configured using the query parameters. At the moment, two pages exists and have their own query parameters to customize the frontend.

Common query parameters

  • x - Set the x coordinate to display the sketch
  • y - Set the y coordinate to display the sketch
  • scaleX - Set the scale of the x coordinate to display the sketch
  • scaleY - Set the scale of the y coordinate to display the sketch

Query parameters specific to the play/:gameId page

  • move - Set the sketch in moving mode
  • draw - Set the sketch in drawing mode
  • strokeColor - Set the color of the stroke
  • strokeSize - Set the size of the stroke

Query parameters specific to the display/:gameId page

  • screensaver - Hide the toolbar and enable the screensaver

Here is an example of an URL with query parameters to start the frontend of Pimp My Wall with a specific configuration:

https://pmw.beescreens.ch/display/1?x=0&y=0&scaleX=2&scaleY=2