7. Vite
7. Vite
In deze oefeningenreeks oefen je op:
- Het gebruik van Typescript
- Herhaling DOM en Fetch
Voor deze oefeningen zijn startbestanden voorzien, je vindt deze op GitPub.
Startbestanden
Oefening 1
De pagina 'fetch.html' komt uit de voorbeelden van H5. Zet deze om naar een typescript project door:
- Een nieuw Vite project aan te maken op de correcte manier
- De folderstructuur te voorzien zoals aangeleerd in les 6
- Een model aan te maken voor 'Post' (interface)
- Voer de fetch request uit in een browser om te zien welke velden je moet voorzien.
- Bootstrap te importeren zoals aangeleerd in les 6 in plaats van op de oude manier
- De code om te zetten naar de structuur aangeleerd in les 6
Oefening 2
Schrijf een webpagina die een willekeurige foto toont wanneer je op de knop "Random foto" drukt. In de map img vind je 9 afbeeldingen die je kan gebruiken.
Zorg ervoor dat dezelfde afbeelding niet twee keer na elkaar zichtbaar is. Om dit te controleren, toon je een log van de foto's in een div onder de knop. Hierin staat steeds wat de vorige waarde was en de nieuwe random waarde die je gegenereerd hebt. Zoals je in onderstaand voorbeeld kunt zien, was de vorige waarde 1 en moeten we steeds opnieuw random waarden blijven genereren totdat de nieuwe waarde (3) verschillend is van de vorige waarde (1).
Deze oefening is een variant op oefening 2 van les 4.
Maak gebruik van de Vite project in typescript. Maak voor de afbeeldingen een type alias aan met een tuple, met als eerste element de index en als 2de element de bestandsnaam.
Oefening 3
Schrijf een app die gebruik maakt van een API om een trivia quiz te maken. Je houdt het simpel en hergebruikt steeds 1 pagina om de vragen, score, en het eindtotaal te tonen.
Gebruik onderstaande API om quizvragen te genereren. Gebruik minstens een model om de vraag in op te vangen. Gebruik type aliases voor het type van de vraag en de moeilijkheidsgraad.
Optioneel & uitdagend Oefening 4
Deze oefening bouwt verder op de optionele oefening val hoofdstuk 6. Dit hoofdstuk voegt een interface toe voor het Tic Tac Toe spel. Hiervoor moeten enkele aanpassingen gebeuren aan de API die we vorig hoofdstuk geschreven hebben.
BoardGame klasse
ReadMove
In de vorige versie van deze oefening, las de readMove methode de input uit de console. In deze versie krijgt de readMove methode de coördinaten van de zet als parameters, wordt het gepaste Move object aangemaakt en wordt de zet uitgevoerd (als deze reglementair is).
Render methode aanpassen
Pas de renderBoard methode aan zodat deze een HTMLDivElement teruggeeft dat het spelbord voorstelt, in plaats van een string. Baseer je hiervoor op onderstaande HTML-code.
<div class="board">
<div class="board-row">
<button class="board-cell" data-row="0" data-column="0"></button>
<button class="board-cell" data-row="0" data-column="1"></button>
<button class="board-cell" data-row="0" data-column="2"></button>
</div>
<div class="board-row">
<button class="board-cell" data-row="1" data-column="0"></button>
<button class="board-cell" data-row="1" data-column="1"></button>
<button class="board-cell" data-row="1" data-column="2"></button>
</div>
<div class="board-row">
<button class="board-cell" data-row="2" data-column="0"></button>
<button class="board-cell" data-row="2" data-column="1"></button>
<button class="board-cell" data-row="2" data-column="2"></button>
</div>
</div>Bij elke druk op de knop, moet de readMove methode aangeroepen worden met de juiste coördinaten. Het is vanzelfsprekend dat dit enkel gebeurd als het spel nog niet afgelopen.
Constructor
Voeg extra parameters toe aan de constructor van de BoardGame klasse. De onBoardChange functie is een callback die aangeroepen wordt telkens het bord verandert en die het nieuwe bord als parameter krijgt (van het type HTMLDivElement). De onDone functie is een callback die aangeroepen wordt wanneer het spel afgelopen is en die de winnaar als parameter krijgt (van het type Player of de string literal 'Draw').
Aangezien de BoardGame klasse gebruikt wordt in de MiniMax klasse, zal je ook deze constructor moeten aanpassen.
Tips
Je plaatst je parameters best in een interface, dit maakt het makkelijker om deze types later te herbruiken.
MiniMax klasse
Play methode aanpassen
De play methode is niet langer nodig, aangezien de game-loop nu bepaald wordt de interactie van de gebruiker met de HTML-knoppen.
De enige code uit de play methode die nog belangrijk is, zijn de twee lijnen die een AI zet uitvoeren. Verhuis deze code naar een nieuwe applyAIMove methode. Zorg ervoor dat de applyAIMove methode enkel iets doet als het spel nog niet afgelopen is.
Constructor
Ook de constructor van de MiniMax klasse moet aangepast worden. Voeg om te beginnen een onPlayerChange callback functie toe als parameter, deze functie wordt aangeroepen telkens de speler verandert en krijgt de huidige speler als parameter. Voor Tic-Tac-Toe is die niet echt nuttig aangezien er niet veel zetten zijn en AI deze snel kan berekenen. Maar voor schaken kan dit eventueel wel nuttig zijn, afhankelijk van de diepte van de zoekboom.
Waar in de vorige versie een instantie van de BoardGame klasse werd meegegeven, pas je dit nu aan naar de constructor voor BoardGame (of een subklasse hiervan). Om een constructor te typen in typescript, gebruik je de volgende syntax:
type ConstructorForBoardGame = new (param1: Type1, param2: Type2) => BoardGame;
const demo: ConstructorForBoardGame = TicTacToe;Verder krijgt de constructor van de MiniMax klasse natuurlijk de onBoardChange en onDone callback functies mee als parameters. Instantieer de BoardGame klasse (of een subklasse hiervan) in de constructor van de MiniMax klasse en geef de nodige parameters mee.
Zorg ervoor dat onBoardChange parameter uitgebreid wordt. Enerzijds moet de functie die als argument meegegeven is aan de MiniMax klasse aangeroepen worden, anderzijds moet de MiniMax klasse zelf ook reageren op de verandering van het bord. Elke verandering stelt namelijk een nieuwe zet voor. Zorg ervoor dat op basis van de huidige zet (AI of speler) de juiste acties uitgevoerd worden, ofwel wordt de applyAIMove methode opgeroepen, ofwel wordt er gewacht op de volgende zet van de speler.
UI
Zet een nieuw Vite project op waarbij je gebruik maakt van de html en css code in de startbestanden.
Als de gebruiker op de "Start game" knop klikt, wordt een nieuwe instantie van de MiniMax klasse gemaakt en worden de nodige callback functies meegegeven (als parameters van de constructor).
Zorg ervoor dat elke wijziging van het bord gerenderd wordt in de UI, en dat de huidige speler weergegeven wordt in de UI. Als het spel afgelopen is (en de onDone callback functie dus aangeroepen wordt), toon je een bericht in de UI met de uitslag van het spel. Gebruik hiervoor het modaal venster uit de startbestanden, je kan dit programmatorisch openen en sluiten, zoals beschreven in de Bootstrap documentatie.
Onderstaande video toont e werking van de applicatie.