Technical documentation

Socket IO events and messages

connect (from a Playground)

• trigger: a new Playground is opened in a browser and connect to the server, send its ID and client type (renderer).
• emitter: public/paysagerenderer.js
• receivers: app.js
• data {playgroundId: playgroundid, client: client}

connect (from a Programmer)

• trigger: a new Programmer is opened in a browser and connect the server, send the ID of the playground it is targeting and it client type (programmer).
• emitter: public/programmerjs/receptiontransmission.js
• receiver: app.js
• data {playgroundId: playgroundid, client: client}

code update

• trigger: an user click on the [Go live!] button to send a new code.
• emitter: public/programmerjs/receptiontransmission.js (Programmer)
• receivers: public/paysagerenderer.js app.js (Server)
• data {playgroundId: playgroundid, objectId: objectid, mediatype: mediatype, client: client, code: code}

objects full update

• trigger: the server receive a code update from a Programmer page and must then send a new list to the programmer pages
• emitter: app.js
• receivers: public/programmerjs/receptiontransmission.js
• data
  • playgroundId
  • objectIds

playground full update

See code update.

• trigger:
• emitter: app.js
• receivers: public/paysagerenderer.js
• data {ObjectId: code}

request code

• trigger: an user click on a code object link from the code object list to get it in their Programmer
• emitter: public/programmerjs/receptiontransmission.js
• receiver: app.js
• data
  • playgroundId
  • objectId

source code

• trigger: the server receive a request code message from a Programmer page
• emitter: app.js
• receivers: public/programmerjs/receptiontransmission.js
• data
  • playgroundId
  • objectId
  • code

Sequence diagram per use cases

viewer loads page

viewer                 viewer browser                  server
  |--- open page --------->|                            |
  |                        |---------- connect -------->|
  |                        |<- playground full update --|
  |<-- renders creatures---|                            |

programmer loads page

programmer               browser                       server
  |--- open page --------->|                            |
  |                        |---------- connect -------->|
  |                        |<-------- objects list -----|
  |<- show code ids list --|                            |

programmer chooses code to edit

programmer                browser                      server
  |---- click code id ---->|
  |                        |------ request code ------->|
  |                        |<----- source code ---------|
  |<- show code in editor -|

programmer pushes updated code

programmer          programmer browser            server                  preview/other clients
  |--- click "go live" ---->|                       |                               |
  |                         |---- code update ----->|                               |
  |                         |                       |------ code update ----------->|
  |                         |<----------------------+------ objects list ---------->|

programmer deletes a code

programmer     programmer browser          server                 preview/other clients
  |--- click 🗑  ---->|                       |                              |
  |                  |---- code delete ----->|                              |
  |                  |                       |----- code delete ----------->|
  |                  |<----------------------+----- objects list ---------->|