I'm currently in the process of developing a straightforward game using Angular.
The game is structured to consist of multiple rounds, each with unique characteristics that are distinguished by the variable roundType.
For instance, round types can include:
- NORMAL => "Read the question and select the correct answer"
- SONG => "Listen to the song and choose the correct answer"
- IMAGE => "View the image and select the correct answer"
Every round will feature various questions, songs, or images.
To manage the distinct behaviors of each round type, I have created three separate components with the following selectors:
- round-normal
- round-song
- round-image
This enables me to dynamically load components within the parent.component.html like so:
<div>
<round-normal *ngIf="roundType == 'NORMAL'"></round-normal>
<round-song *ngIf="roundType == 'SONG'"></round-song>
<round-image *ngIf="roundType == 'IMAGE'"></round-image>
</div>
However, as I anticipate incorporating additional round types in future iterations, implementing individual rows for each is not conducive, as it leads to inefficient coding practices.
While I have scoured the Angular documentation for similar use-cases, a suitable solution remains elusive.
I am seeking recommendations on the optimal course of action moving forward. Your insights would be greatly appreciated!
Many thanks.