SET til Elm

1 Bordet

I dette kapitel skal vi sørge for, at SET-bordet bliver sat rigtigt op, så det kan vise 12 kort. Med andre ord skal vi nu implementere det vi har lært om HTML og CSS ved hjælp af Elm.

Inden vi går i gang skal I hente en template at arbejde i. Akkurat, som vi gjorde med talspillet. Templaten kan hentes her: Link.

1.1 Det første kort

Det betyder, at vi skal have browseren til at vise følgende HTML:

HTML
<div class="card">
	<div class="symbol red solid squiggle"></div>
	<div class="symbol red solid squiggle"></div>
</div>

Det føles rart at bygge tingene op fra bunden, så vi ved, at det hele virker. Vi begynder derfor med at skrive kortet direkte ind i funktionen view.

Html.main_ [] 
    [ Html.div [ Attributes.class "card" ]
    	[ Html.div [Attributes.class "symbol", Attributes.class "red", **HER MANGLER NOGET**][]
    	, **HER MANGLER OGSÅ NOGET**
    	]
    ]

Det bliver et kæmpe arbejde, hvis vi skal skrive hvert eneste SET-kort ind i koden som ovenfor - og det er heller ikke særligt fleksibelt, når vi gerne vil bygge et spil, hvor man skal kunne interagere med kortene. Vi vil derfor følge en anden strategi.

Målet er i stedet at lave en funktion, der tager et Card som input og giver os den korrekte Html Msg som output. Så kan vi nemlig let vise et hvilket som helst kort uden at redigere direkte i vores view-funktion. Vores mål i dette afsnit er derfor at definere en funktion viewCard:

Elm (viewCard)
viewCard : Card -> Html Msg
viewCard card = 
	**DET FUNKTIONEN GØR**

For at kunne gøre det, har vi brug for at kunne oversætte værdier af de tre typer Color, Shape og Shading til de relevante classes. Det kan for eksempel gøres således:

Elm (colorToClass)
colorToClass : Color -> Attribute Msg
colorToClass color = 
	case color of
		Green ->
			Attributes.class "green"
		Purple ->
			Attributes.class "purple"
		Red ->
			Attributes.class "red"

Som du måske kom frem til i øvelsen ovenfor, så skal numberToClass ikke have en værdi af typen Attribute Msg som output, fordi antallet af symboler på et kort ikke dikteres af en HTML-class. Vi vender tilbage til at definere numberToClass om lidt, men først skal vi have det, vi har lavet indtil nu, til at fungere.

Vi skal nu lave første udgave af viewCard-funktionen, som kan bruges til at vise et kort. Som diskuteret ovenfor, så har vi lidt udfordringer med antallet af symboler, men farve, fyld og form skulle være på plads.

Elm (viewCard)
viewCard: Card -> Html Msg
viewCard card = 
	**DET HER SKAL DU LAVE NU**

HTML
<div class="card">
	<div class="symbol red solid squiggle"></div>
</div>

Nu er vi klar til at vise et kort, der ser således ud:

Html.main_ [] 
    [ **Her skal du bruge viewCard** 
    ]

Hvis alt er gået godt, kan du nu se dette kort i browseren:

Det er lidt anderledes at arbejde med antallet af symboler på kortet, for Number skal, som vi allerede har bemærket, ikke være en HTML-class men derimod antallet af <div></div>-elementer på kortet. Derfor giver det mening at definere en hjælpefunktion numberToInt, der har et heltal som output. Husk, at et heltal har typen Int i Elm.

Elm (numberToInt)
numberToInt: Number -> Int
numberToInt number = 
	**DET HER SKAL DU LAVE NU**

Nu er vi klar til at rette viewCard, så vi viser det korrekte antal symboler.

1.2 En række af kort

I dette afsnit skal vi udvide vores view-funktion, så den viser en række af kort. Vejen frem minder rigtig meget om den, som vi fulgte i foregående afsnit: Vi vil definere en funktion viewRow, som skal kalde viewCard. Der skal være tre kort på en række, så følgende definition virker fornuftig:

Elm (viewRow)
viewRow: Card -> Card -> Card -> Html Msg
viewRow firstCard secondCard thirdCard = 
	**DET FUNKTIONEN GØR**

Målet er at få følgende vist i bowseren:

<div class="row">
	<div class="card">
		<div class="symbol red solid squiggle"></div>
		<div class="symbol red solid squiggle"></div>
	</div>
	<div class="card">
		<div class="symbol red solid squiggle"></div>
		<div class="symbol red solid squiggle"></div>
	</div>
	<div class="card">
		<div class="symbol red solid squiggle"></div>
		<div class="symbol red solid squiggle"></div>
	</div>
</div>

Elm (viewRow)
viewRow: Card -> Card -> Card -> Html Msg
viewRow firstCard secondCard thirdCard = 
	**DET FUNKTIONEN GØR**

viewRow : Card -> Card -> Card -> Html Msg
viewRow firstCard secondCard thirdCard =
    Html.div [Attributes.class "row"]
        [ viewCard firstCard
        , **HER MANGLER NOGET**
        ]

Det hele fungerer, men viewRow gentager en del af koden, når vi kalder viewCard hele tre gange. Tænk engang, hvis der skulle være flere kort i en række, for eksempel 10 kort, så skulle vi kalde viewCard 10 gange! Vi vil nu forsøge at omskrive viewRow, så der ikke bliver gentaget kode. Det kan gøres ved, at viewRow i stedet for de tre enkelte kort tager en samlet lsite af kort som input. Med andre ord betyder det, at viewRow skal tage en liste af typen List Card som input!

Elm (viewRow)
viewRow: List Card -> Html Msg
viewRow cards = 
	Html.div [Attributes.class "row"] (**HER SKAL List.map BRUGES**)

1.3 Hele bordet

Nu er det tid til at lave hele bordet! På et SET-bord ligger der normalt 12 kort. Du har sikkert allerede gættet, at vi skal lave en funktion viewTable, og at den skal tage en list af typen List Card som input. Vi kaster os ud i det, og et bud på en definition af viewTable kunne være:

Elm (viewTable)
viewTable: List Card -> Html Msg
viewTable cards = 
	Html.div [Attributes.class "table"] (List.map viewRow cards)

Problemet er at listen exampleTable er en liste af enkelte kort. Du kan tænke på det sådan her:

exampleTable == [kort1, kort2, kort3, kort4, kort5, kort6, kort7, kort8, kort9, kort10, kort 11, kort12]

Vi kan godt fikse det, og vi behøver faktisk ikke lave ret meget om. Lad os overveje, hvordan exampleTable skulle se ud, hvis vi gerne vil bruge List.map og viewRow som ovenfor. I så fald skal de 12 kort i exampleTable ordnes i lister - én for hver række! Vi har altså brug for en liste af lister, som ser sådan her ud:

[[kort1, kort2, kort3], [kort4, kort5, kort6], [kort7, kort8, kort9] , [kort10, kort 11, kort12]]

Vi skal nu lave en funktion buildRows, der inddeler exampleTable i lister med tre kort, som ovenfor.

Elm (buildRows)
buildRows: List Card -> List (List Card)
buildRows cards =
	case cards of
		x :: y :: z :: rest -> 
			**LAV EN SMART REKURSION HER**
		rest ->
			[]

[x,y,z] :: (buildRows rest)

viewTable : List Card -> Html Msg
viewTable cards =
    Html.div [ Attributes.class "table"] (List.map viewRow ( buildRows cards))

Nu er der kun tilbage, at vi skal have vist noget, der er lidt mere interessant end 12 ens kort! Heldigvis kommer Template.elm med endnu en konstant myTable, som består af 12 tilfældige SET-kort.

Det sidste vi mangler er at gøre bordet til en del af modellen i elm arkitekturen, så vi ikke bare loader 12 kort, men i stedet får mulighed for at bruge hele elm arkitekturen.