6. Typescript

Oefening 1: interface en filter

Het doel is om een app te maken om karakters van spellen in aan te maken, en te kunnen filteren op een stat.

Maak daarvoor eerst een interface aan voor je karakter die volgende properties heeft:

• id (string uuid)
• name (string)
• class (string)
• health (int)
• mana (int)
• lastStrike (datum + tijd)

Maak deze interface aan in een aparte file.

Vul zelf een array men enkele characters in code. Wanneer de app start vertrek je van deze array. Maak deze array aan in een aparte file. Kies voor korte en simpele namen (maakt het testen makkelijker) en vermijd dubbele namen. De waarde van health zet je op een getal tussen 1 en 15 en de waarde van mana tussen 1 en 5.

Vraag eerst aan de gebruiker op welke stat deze wil filteren (class, health, mana).

Als de gebruiker 'class' heeft opgegeven, vraag je welke class en zoek je op die class (niet hoofdlettergevoelig).

Als de gebruiker health of mana heeft opgegeven vraag je wat de minimumwaarde van de stat moet zijn.

Je filtert de array op basis van deze 2 vragen en toont de gebruiker het resultaat. Het resultaat toont alle data van het karakter op een propere manier weergegeven.

Oefening 2: menu en toevoegen

Vertrek van jouw oplossing voor oefening 1.

Bouw een kleine menu in je app waar voorlopig volgende opties in zitten:

• 1: filter
• 2: toevoegen

Als de gebruiker '1' kiest doet de app wat die in oefening 1 deed.

Als de gebruiker '2' kiest, dan vraag je de gebruiker achter alle properties behalve de 'id' en de 'lastStrike'. De 'id' genereer je, en de 'lastStrike' zet je op null.

Op basis van deze antwoorden maak je een nieuw karakter aan en voeg je dit toe aan de array. Daarna toon je de volledige array.

oefening 3: lus, exit en refractor

Neem het resultaat van oefening 2, en bouw een lus rond je oefening + een extra optie 'exit' in je menu. De lus herhaalt telkens het maken van de keuze + de gevolgen van de keuze, en sluit af als de gebruiker 'exit' kiest.

Je menu ziet er nu zo uit:

• 1: filter
• 2: toevoegen
• 0: exit

Splits je code op in meerdere functies en gebruik typescript om deze op te bouwen. Je hebt op zijn minst functies die ongeveer het volgende doen:

• Toon menu
• Verwerk keuze
• Filter
• Voeg toe
• Toon karakters

Bij voorkeur splits je ook deze methodes nog logisch op.

oefening 4: attack

Neem het resultaat van oefening 3, en bouw een extra optie 'Attack' met nummer 3. Als de gebruiker die optie kiest, toont de applicatie eerst alle karakters en hun info. Hergebruik hiervoor de methode om de karakters te tonen.

Vraag aan de gebruiker welk karakter de aanval uitvoert. De gebruiker geeft de naam van het karakter in, deze controle mag niet hoofdlettergevoelig zijn. Je maakt hiervoor een methode die de naam binnen krijgt en het volledige object of null teruggeeft op basis van de array. Als de naam niet gevonden is, toon je gewoon het hoofdmenu opnieuw. Dit karakter is je aanvaller.

Doe hetzelfde, maar vraag nu welk karakter aangevallen moet worden. Hergebruik de methode die je net hebt aangemaakt. Als je gebruiker 2 keer hetzelfde karakter kiest, dan valt die gewoon zichzelf aan. Je mag als uitbreiding op de oefening een filter maken en dubbels controle, maar dit is niet noodzakelijk. Dit karakter is je verdediger.

Genereer nu een random getal tussen 1 en 10 om te kijken hoeveel schade je zal aanrichten. Check eerst of de aanvaller wel voldoende 'mana' over heeft. Elke aanval verbruikt 2 mana punten. Indien de aanvaller minder dan 2 mana punten heeft, toon je aan de gebruiker dat het karakter te weinig mana heeft.

Vervolgens pas je de aanval toe:

• De aanvaller zen mana moet 2 punten naar beneden
• De verdediger zen health moet verminderd worden met de schade die je berekend hebt
• De lastStrike van de aanvaller moet ingesteld worden op de huidige datum en tijd
• Als de verdediger zen health 0 of minder is, dan toon je dat deze dood is en verwijder je deze uit de array

Maak 1 of meerdere methodes aan om de aanval te programmeren.

oefening 5: type aliases

Neem het resultaat van oefening 4, en vervang de 'class' door een type alias waar je (minstens) 5 classes standaard in zet. Voor inspiratie kan je classes nemen uit boardgames, video games, of science fiction. Verzin gerust zelf grappige classes.

Maak nog een type alias aan om de aanvaller en verdediger samen in te bewaren. Je krijgt nu een type 'attack' waar je eerst de aanvaller en dan de verdediger in bewaart.

Pas de type aliases ook toe in je bestaande code.

oefening 6: herhaling classes

We hebben het hieronder over het begrip 'class' in het programmeren en niet over de class van je karakter.

Maak een class 'Game' aan en herschrijf je app zodat deze nu object geörienteerd is. In de constructor geef je de array van karakters mee. De code in je index.ts zal dus enkel nog de Game klasse aanmaken, de array meegeven, en een methode 'start()' oproepen die de app start.

oefening 7: optionele uitbreidingen

• Voeg een stat 'damage' toe die als multiplier dient voor je aanval
• Voeg een stat 'defense' toe die als multiplier dient voor je aanval (=> vermenigvuldig met 1 gedeeld door je defense stat)
• Voeg een functie 'heal' toe die een karakter zen health vermeerdert met 10 en mana met 4
• Voeg een type alias toe die de status van je karakter kan bijhouden (dead/alive) en voeg die toe als property van de karakter. Pas de status mee aan bij elke aanval en toon deze wanneer je de karakters toont.
• Sla de karakters op in een JSON bestand dat je uitleest in plaats van een array te gebruiken
• Maak een optie 'opslaan' die het JSON bestand dat je uitleest update