Events: Mau Mau Interaktiv - JirkaDellOro/EIA2 GitHub Wiki

Stellen Sie zunächst sicher, dass tslint auf ihrem Rechner korrekt installiert und die VSCode Erweiterung aktiviert ist.

Öffnen Sie am besten einmal den EIA2-Repository-Ordner in VSCode. So können immer direkt an ihren Aufgaben weiterarbeiten und müssen nicht immer erste irgendwelche Dateien zusammensuchen.

Aufgabenstellung

Mau Mau wird interaktiv.
Die Spielerin kann durch einen Klick (oder Touch) auf eine Handkarte diese ausspielen. Die Karte verschwindet dadurch von ihrer Hand, die gleiche Karte erscheint auf dem Ablagestapel. Durch Klick oder Touch auf den Nachziehstapel nimmt sie eine zufällige Karte vom Deck auf die Hand. Letzteres geschieht auch, wenn sie auf der Tastatur die Leerzeichentaste drückt. Sind keine Karten mehr im Deck, ist diese Interaktion allerdings nicht mehr möglich, sie kann aber noch die restlichen Karten der Hand ausspielen. Bei den Handkarten befindet sich zudem ein Button, dessen Betätigung eine Sortierung der Handkarten nach Symbol (und wenn Sie es hinbekommen, Kartenwert) bewirkt.

Konzeption

  1. Erstellen Sie zunächst ein Anwendungsfalldiagramm. Stellen Sie hierbei vereinfacht die Interaktionsmöglichkeiten der Spielerin mit dem System Mau Mau dar. Beachten Sie die Recherchehinweise sowie das Beispiel aus der letzten Aufgabe.
  2. Erstellen Sie eine neue Skizze mit sämtlichen relevanten HTML-Auszeichnungen und deren Eigenschaften. Lassen Sie hierbei Ihre Erfahrung aus der vorangegangenen Aufgabe einfließen.
  3. Erstellen Sie für alle Anwendungsfälle aussagekräftige, vollständige und syntaktisch korrekte Aktivitätsdiagramme. Sie wissen, dass Elemente des DOM Informationen zu Ereignissen im System erhalten können, insbesondere zum Typ des Ereignisses und dessen Ziel. Wenden Sie diese Kenntnis an.
  4. Erweitern und korrigieren Sie auch das Konzept zum Hauptprogramm und den bereits vorhandenen Funktionen um die Aktivitäten, die erforderlich sind, um das Eventsystem zu nutzen und die Interaktion zu ermöglichen.
    • Es ist durchaus möglich, dass Sie während der Recherche feststellen, dass die bislang von Ihnen gewählten Strukturen oder Algorithmen für die Lösung der aktuellen Aufgabe suboptimal sind. Gehen Sie dann ein entsprechendes Redesign an.
  5. Die Konzeption muss zum Praktikumstermin vorliegen. Sprechen Sie dieses mit Ihren Betreuern durch und fangen Sie erst danach an mit der Implementation.

Implementation

Beginnen Sie dann mit der Implementation. Beachten Sie den Beispielcode aus der Vorlesung und halten Sie sich strikt an den CodingStyle!

  • Achten Sie auch darauf, dass übergeordnete Aktivitäten im Code oben stehen, Unteraktivitäten weiter unten. Ebenso sollte die Installation von Listenern möglichst gleich ganz oben sichtbar werden.
  • Die Eigenschaft target des Event-Objekts ist immer vom Typ EventTarget, was sehr weit oben in der Klassenhierarchie steht. Um auf die erweiterten Eigenschaften z.B. eines angeklickten HTML-Elementes zugreifen zu können, muss man TypeScript mitteilen, dass man ein spezialisiertes Objekt erwartet. Dies geschieht, indem man den erwarteten Typ in spitzen Klammern davor schreibt. Beispiel: let domCard: HTMLElement = <HTMLElement>_event.target;
    Diesen Vorgang nennt man auch "casten".
  • Verwenden Sie nicht die HTML Auszeichnung onclick sondern ausschließlich addEventListener in TS. Warum genau lernen wir in der nächsten Vorlesung.

Recherchehinweise

  • Array.sort
  • DOM-Hierarchy (beachte Unterschied Klassen- und Objekthierarchie)
  • Anwendungsfalldiagramm
  • References-UML der MindMap

Weitere Hinweise

  • Achten Sie darauf, dass Sie nur die vorliegende Aufgabe bearbeiten und nicht schon weiter denken.

  • Verlinken Sie das aktuelle Konzept sowie Ihre (ausführbare) html-Datei im Steckbrief. Bei Klick auf den Link sollten die Betreuer direkt auf die oben genannten Dateien weitergeleitet werden, und nicht erst in Ihrem Repository nach der richtigen Datei suchen müssen. Ist dies nicht gewährleistet, schaltet die Ampel eine Stufe weiter.

  • Verwenden Sie keine anonymen Funktionen. Besonders bei der Sortierfunktion sind viele JS-Beispiele mit Hilfe von anonymen Funktionen gelöst. Anonyme Funktionen sind in unserem Kurs genauso verboten wie verschachtelte Funktionen und der Datentyp any.