Skip to content

Add a custom Web Component

Refer to the CanvasComponent.ts in the frontend for an example.

  1. Create a class with the name [Name]Component, for example MyComponent.
  2. Extend the class from HTMLElement.
  3. Add the required logic to render your component.
  4. Register the component inside index.ts with. Make sure the element name exists out of at least two components seperated by a dash, for example: game-my.
  5. Add your component to the Page enumeration in RootComponent.ts, for example My = "my".
  6. Add your component to the switch (this._currentPage) in RootComponent.ts.

To instruct the frontend to switch to your Web Component, return a SwitchPageActionResult from an action on the backend.

Relevante instructievideo

Aanvulling 1: Gebruik PlayerSession

Er wordt in bovenstaande video gezegd dat je in je eigen endpoint de PlayerSession kunt benaderen via de gameService. Dit klopt! Als je je eigen routes.ts maakt zoals de video laat zien, moet je echter wat extra werk verrichten om dit werkend te krijgen!

Je kunt onderstaande oplossingen naar behoefte afwisselen.

Makkelijke oplossingen:

  • Backend: Registreer de routes die gebruik moeten maken van de PlayerSession in de game-implementation/routes.ts onder de router.use(gameService.createPlayerSessionMiddleware());.
  • Frontend: Erf je service class over van BaseRouteService en maak gebruik van de bestaande getJsonApi en postJsonApi functies. Eventueel kun je methodJsonApi ook nog protected maken als je meer nodig hebt dan GET en POST.

Doe-het-zelf oplossingen:

  • Backend: Voeg de regel router.use(gameService.createPlayerSessionMiddleware()); toe aan je eigen routes.ts, en zet vervolgens alle routes die gebruik moeten maken van de PlayerSession daar onder.
  • Frontend: Zorg ervoor dat je de X-PlayerSessionId header meestuurt met je fetch, zie ook de BaseRouteService voor een voorbeeld.

De rede dat het dan wél werkt is omdat de middleware in de backend controleert of de frontend een X-PlayerSessionId meestuurt. Met die informatie kan de backend vervolgens de juiste PlayerSession voor de speler inladen. Mis je één van deze twee onderdelen, dan krijg je altijd een undefined als je gameService.getPlayerSession() doet!

Aanvulling 2: Naamgeving routes.ts en export const router

Vanuit conventie is het fijn om alle routes altijd in een routes.ts te registeren. Je bent echter vrij om de export een andere naam te geven, zodat je geen router as nieuweNaam hoeft te doen.

Aanvulling 3: Wat is de CSS magie?

Dat gaan we natuurlijk niet volledig verklappen, maar we willen je wel op weg helpen.

In de RootComponent op de frontend zit een renderCurrentPage-functie. Deze geeft altijd maar één Web Component terug om te renderen op de pagina. Het is nu of de <game-canvas> of één van de andere web componenten, maar nooit meerdere tegelijk.

Je moet er dus voor zorgen dat je altijd de <game-canvas> op je pagina zet, met eventueel een actief web component. Dit is gemakkelijk te bereiken door een kleine aanpassing in de render en renderCurrentPage functies.

De CSS magie is vervolgens je web componenten een position: absolute; top: 0; left: 0; geven. De rest mag je zelf uitvogelen!