View
Die Ansicht programmieren
Als nächstes wollen wir die Ansicht programmieren.
Dazu müssen wir in main
die Funktion mit dem Namen Browser.sandbox aufrufen
und ihr ein Record mit dem initialen Modell, der Update-Funktion
und der View-Funktion übergeben.
Da die update-Funktion noch nicht programmiert wird,
wir sie aber schon in der Browser.sandbox-Funktion
übergeben müssen, können wir hier erst einmal einen Platzhalter
verwenden.
Du kannst dich somit an der folgenden Implementierung orientieren:
module Main exposing (..)
-- Importe ...
-- Typen und initialModel ...
view : Model -> Html Msg
view model =
-- ... hier fehlt noch etwas ...
update : Msg -> Model -> Model
update msg model =
model
main =
Browser.sandbox
{ init = initialModel
, update = update
, view = view
}
Ansicht des Nim-Spiels
Die Überlegungen zur Ansicht des Nim-Spiels könnten so aussehen:
Wir müssen uns überlegen welche Nachrichten wir an die update-Funktion
senden wollen.
Diese müssen nämlich in der View-Funktion vorgesehen werden.
Eine Nachricht ist auf jeden Fall die Anzahl der Streichhölzer,
die ein Spieler nehmen möchte.
Da die Nachricht an sich immer die gleiche ist und sich nur im Wert unterscheidet,
können wir die Anzahl der Streichhölzer als Parameter anhängen.
Konkrete Nachrichten können also die Form Nimm 1, Nimm 2
oder Nimm 3 haben.
Später sind noch weitere Nachrichten denkbar, um z.B. die Namen
der Spieler einzugeben oder das Spiel neu zu starten.
Diese lassen wir aber erst einmal außen vor.
Die Ansicht soll die restlichen Streichhölzer, den aktuellen Spieler,
den Gewinner und die drei Buttons zum Ziehen der Streichhölzer enthalten.
Da man sowohl für die Anzeige des aktuellen Spielers als auch des Gewinners eine
Zeichenkette benötigt, macht es Sinn eine Funktion zu schreiben,
die aus einem Spieler einen String erzeugt.
Aufgabe 1
view, die das Modell entgegennimmt
und die HTML-Struktur für die Ansicht des Nim-Spiels zurückgibt.
Die Ansicht soll die restlichen Streichhölzer, den aktuellen Spieler, den Gewinner
und die drei Buttons zum Ziehen der Streichhölzer anzeigen.
Die Buttons sollen die Nachrichten Nimm 1, Nimm 2
und Nimm 3 senden.
-- Importe ...
-- Typen und initialModel ...
type Msg
= Nimm ???
spielerAlsString : Spieler -> String
spielerAlsString spieler =
???
view : Model -> Html Msg
view model =
div []
[ p [] [ ... restliche Streichhölzer ... ]
, p [] [ ... aktueller Spieler ... ]
, p [] [ ... Gewinner ... ]
, button [ onClick ??? ] [ text "Nimm 1" ]
, ...
, ...
]
update : Msg -> Model -> Model
update msg model =
model
main =
Browser.sandbox
{ init = initialModel
, update = update
, view = view
}
