Skip to content

Frontend (/src/web)

The frontend is structured as a typical Model-View-Controller (MVC) application, but instead of having Controller-classes, everything is a Web Component (extending from HTMLElement). On top of that, the concept of Services and Helpers are introduced.

The frontend project has two predefined Web Components:

  • RootComponent
  • CanvasComponent

Flow-wise, this is how things work together:

  1. wwwroot/index.html loads the src/index.ts
  2. src/index.ts defines which Web Components are available to the page
  3. wwwroot/index.html renders a <game-root> HTML element, which causes src/components/RootComponent.ts to be rendered.
  4. src/components/RootComponent.ts renders the src/components/CanvasComponent.ts by default
  5. src/components/CanvasComponent.ts communicates with the backend and renders the result accordingly

Each file tries to adhere to the Single Responsibility principle from SOLID:

  • Anything under wwwroot determines what the user will see
  • Anything under src/components handle how the user can interact with what they will see
  • Anything under src/services handle specific tasks for the Web Components, for example communicating to the backend.
  • Anything under src/helpers is logic that could be considered static functions.