MMProg:WiSe2015:Praktikum:Aufgabe 8

Praktikumsaufgabe 8

Model-View-Controller

Ziel

Ziel dieser Aufgabe ist es einen einarmigen Banditen nach dem Model-View-Controller-Paradigma zu programmieren.

Vorbereitung

Erzeugen Sie einen neuen Ordner namens "aufgabe8" innerhalb Ihres Verzeichnis für die Praktikumsaufgaben. Speichern Sie alle Dateien aus dem Lehveranstaltungsordner "aufgabe8/vorlage" in diesem Ordner ab.

Die Vorlage enthält die Verzeichnisstruktur, die fertige HTML-Datei, die "EventDispatcher"-Klasse und die fertige Hauptdatei. Es gilt den gesamten Code für das Model, die View und den Controller zu entwickeln.

Nutzen Sie die Code-Beispiele in den folgende Abschnitten um zu überprüfen ob Ihre Implementierungen korrekt sind. Untersuchen Sie außerdem die Beispiele aus der Vorlesung unter "aufgabe8/beispiele" falls Sie nicht weiterkommen.

Model

Das Modell des einarmigen Banditen setzt sich aus den beiden Komponenten "Slot" und "SlotMachine" zusammen.

Tipp: Lassen Sie die Event-Kommunikation und die asynchrone Funktionsweise im ersten Schritt der Implementierung aus.

Slot

"Slot" repräsentiert ein Feld welches eine Menge an möglichen Werten vorhält und stets einen dieser Werte annimmt. Die Menge an möglichen Werten wird bei der Erzeugung eines Felds als Argument an den Konstruktor übergeben.

Mithilfe der Funktion "spin()" wird das Feld asynchron zufällig oft gedreht und nimmt immer wieder einen zufälligen Wert an. Nutzen Sie einen JavaScript-Timer (z.B. setTimeout) um das wiederholte asynchrone Drehen zu implementieren.

Bei jeder Drehung des Felds wird das Ereignis "spin" erzeugt. Wenn das Feld aufhört sich zu drehen wird das Ereignis "stop" erzeugt. Als Daten für die beiden Ereignisse wird der jeweils aktuell angenommene Wert des Feldes mit übergeben.

Anmerkungen: - Nutzen Sie die Hilfsklasse "EventDispatcher" aus der Vorlage für die Event-Kommunikation. - Nutzen Sie Math.random() um einen zufälligen Wert zu erzeugen oder zufällig eine Entscheidung zu treffen.

Folgender Code sollte dann ein Feld erzeugen und zufällig häufig den neuen Wert ausgeben und abschließend einmal den finalen:

var slot = new Slot(['red', 'green', 'blue']);
slot.eventDispatcher.addEventListener('spin', function(event) {
  console.log('Neuer Wert: ' + event.detail);
});
slot.eventDispatcher.addEventListener('stop', function(event) {
  console.log('Finaler Wert: ' + event.detail);
});
slot.spin();

SlotMachine

"SlotMachine" repräsentiert eine Sammlung einer variablen Anzahl an Feldern und einer Menge an möglichen Werten für diese. Die Anzahl der Felder und die Menge der möglichen Werte werden bei der Erzeugung als Argument an den Konstruktor übergeben.

Die "SlotMachine" erzeugt anhand der gegebenen Anzahl automatisch die einzelnen Felder und verwaltet diese intern. Mithilfe der Funktion "spin()" wird die Funktion "spin()" von jedem in der Sammlung enthaltenen Feld augerufen.

Die "SlotMachine" hört auf jedes "spin"-Ereignis der Felder und erzeugt selbst daraufhin ein eigenes "spin"-Ereignis. Haben alle enhtaltenen Felder das "stop"-Ereignis erzeugt, erzeugt die "SlotMachine" ebenso ein finales "stop"-Ereignis. Die beiden Ereignisse übergeben als Daten jeweils alle aktuellen Werte der enthaltenen Felder als Liste.

Folgender Code sollte drei Felder erzeugen und für jede Drehung jedes Felds und einmal abschließend alle Werte ausgeben.

var slotMachine = new SlotMachine(3, ['red', 'green', 'blue']);
slotMachine.eventDispatcher.addEventListener('spin', function(event) {
  console.log('Neue Werte: ' + event.detail);
});
slotMachine.eventDispatcher.addEventListener('stop', function(event) {
  console.log('Finale Werte: ' + event.detail);
});
slotMachine.spin();

View

Es wird empfohlen, dass Sie in den folgenden Abschnitten die SVG-API nutzen um die Views zu implementieren. Möchten Sie DOM nutzen müssen Sie die "index.js" geringfügig ändern und die Views entsprechend anders benennen. Analog zu dem Modell besteht die View des einarmigen Banditen aus den zwei Komponenten "SlotSVGView" und "SlotMachineSVGView".

SlotSVGView

Eine "SlotSVGView" erzeugt für ein Feld ein rechteckige Repräsentation welche bei jedem neu angenommenen Wert die Farbe wechselt. Das bedeutet, dass solch eine View die beiden Ereignisse "spin" und "stop" verarbeiten und entsprechend anzeigen muss.

Folgender Code sollte für ein Feld ein Rectheck erzeugen welches beim Drehen des Felds zufällig oft seine Farbe wechselt.

var slot = new Slot(['red', 'green', 'blue']);
var slotView = new SlotSVGView(slot);
document.querySelector('body').appendChild(slotView);
slot.spin();

Tipp: Nutzen Sie Namen von Farben wie zum Beispiel "black" als mögliche Werte für Felder um das Rendering zu vereinfachen.

SlotMachineSVGView

Eine "SlotMachineSVGView" ist das View-Gegenstück zu einer "SlotMachine", d.h. sie visualisiert eine Sammlung von Feldern. Bei der Erzeugung einer solchen View wird für jedes darzustellende Feld eine eigene "SlotMachineSVGView" erzeugt.

Folgender Code sollte für eine Sammlung von drei Feldern drei Rechtecke darstellen, welche Ihre Farbe wechseln.

var slotMachine = new SlotMachine(3, ['red', 'green', 'blue']);
var slotMachineView = new SlotMachineSVGView(slotMachine);
document.querySelector('body').appendChild(slotView);
slotMachine.spin();

Controller

Der Controller-Teil besteht aus der Komponente "SlotMachineController", welche lediglich das Model kennen muss.

Bei einem "click"-Ereignis auf dem Button mit der ID "spin-button" wird "spin()" auf der "SlotMachine" aufgerufen. Mithilfe von setAttribute() wird dem Attribut "disabled" auf dem Button der Wert "disabled" zugewiesen. Auf diese Weise wird der Button deaktiviert und kann nicht nochmal gedrückt werden, solange sich die Felder drehen. Außerdem wird dem Attribut "innerHTML" auf dem Element mit der ID "result-text" der Text "Drehen..." zugewiesen.

Sobald die "SlotMachine" das "stop"-Ereignis erzeugt, überprüft der Controller ob der Spieler das Spiel gewonnen hat. Sind alle Felder wertegleich wird dem "innerHTML" des Elements mit der ID "result-text" der Wert "Gewonnen!" zugewiesen. Ist dies nicht der Fall wird der Wert "Verloren!" zugewiesen, um zu signalisieren, dass der Spieler verloren hat.

Spiel testen

Wurde alles korrekt implementiert, können Sie nun den einarmigen Banditen benutzen.