Add a custom Web Component¶
Refer to the CanvasComponent.ts
in the frontend for an example.
- Create a class with the name
[Name]Component
, for exampleMyComponent
. - Extend the class from
HTMLElement
. - Add the required logic to render your component.
- 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
. - Add your component to the
Page
enumeration inRootComponent.ts
, for exampleMy = "my"
. - Add your component to the
switch (this._currentPage)
inRootComponent.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 derouter.use(gameService.createPlayerSessionMiddleware());
. - Frontend: Erf je service class over van
BaseRouteService
en maak gebruik van de bestaandegetJsonApi
enpostJsonApi
functies. Eventueel kun jemethodJsonApi
ook nogprotected
maken als je meer nodig hebt danGET
enPOST
.
Doe-het-zelf oplossingen:
- Backend: Voeg de regel
router.use(gameService.createPlayerSessionMiddleware());
toe aan je eigenroutes.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 jefetch
, zie ook deBaseRouteService
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!