Frontend and Backend communication

Earlier in this documentation it was said that on the frontend the CanvasComponent.ts communicates with backend. It uses the service/GameRouteService.ts for that. We can now put that everything that happens into perspective.

Whenever you load the CanvasComponent on the frontend, the /api/game/state API endpoint is called, which then returns a GameState with:

• Information about the current room
• Available actions in the current room
• Available game objects in the current room

After clicking an action and game object in the UI, the /api/game/action API endpoint is called, which then again returns a GameState.

Rinse and repeat.

Sequence Diagram

sequenceDiagram
    actor Player
    participant index.html
    participant index.ts
    participant RootComponent
    participant CanvasComponent
    participant GameRouteService
    participant Backend

    Player->>index.html: Visit index.html
    activate index.html

    index.html->>index.ts: Load index.ts
    activate index.ts
    index.ts->>RootComponent: Load RootComponent as <game-root>
    RootComponent-->>index.ts: 
    index.ts->>CanvasComponent: Load CanvasComponent as <game-canvas>
    CanvasComponent-->>index.ts: 
    index.ts-->>index.html: 
    deactivate index.ts

    index.html->>RootComponent: Render <game-root>
    activate RootComponent
    RootComponent-->>RootComponent: Call render()
    RootComponent-->>RootComponent: Call renderCurrentPage()
    RootComponent->>CanvasComponent: Render <game-canvas>
    activate CanvasComponent
    CanvasComponent-->>CanvasComponent: Call refreshGameState()
    CanvasComponent->>GameRouteService: Call getGameState()
    activate GameRouteService
    GameRouteService->>Backend: GET api/game/state
    activate Backend
    Backend-->>GameRouteService: Return GameState
    deactivate Backend
    GameRouteService-->>CanvasComponent: 
    deactivate GameRouteService
    CanvasComponent-->>CanvasComponent: Call updateGameState()
    CanvasComponent-->>CanvasComponent: Call render()
    CanvasComponent-->>RootComponent: 
    deactivate CanvasComponent
    RootComponent-->>index.html: 
    deactivate RootComponent
    index.html-->>Player: Show result
    deactivate index.html

    Player->>index.html: Click Action-button
    activate index.html
    index.html->>CanvasComponent: Handle click-event
    activate CanvasComponent
    CanvasComponent->>GameRouteService: Call executeAction()
    activate GameRouteService
    GameRouteService->>Backend: POST api/game/action
    activate Backend
    Backend-->>GameRouteService: Return GameState
    deactivate Backend
    GameRouteService-->>CanvasComponent: 
    deactivate GameRouteService
    CanvasComponent-->>CanvasComponent: Call updateGameState()
    CanvasComponent-->>CanvasComponent: Call render()
    CanvasComponent-->>index.html: 
    deactivate CanvasComponent
    index.html-->>Player: Show result
    deactivate index.html