Aufgabenstellung

Uno wird interaktiv!
Die Spielerin kann durch 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 Farben bewirkt.

Konzeption

1. Erstellen Sie zunächst ein Anwendungsfalldiagramm. Stellen Sie hierbei vereinfacht die Interaktionsmöglichkeiten der Spielerin mit dem System Uno dar. Beachten Sie die Recherchehinweise.
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 und vollständige 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 und beachten Sie die Vorschläge, die wir in Vorlesung und Praktikum bereits gemeinsam gefunden haben.
5. Diese Konzeption muss am Sonntag vorliegen, so dass die Betreuer sie prüfen können und eine Freigabe für die Implementation geben können. Verfassen Sie die Konzepte also derart, dass ein nicht mit der Aufgabe vertrauter Programmierer die Lösung implementieren könnte. Das wird das Kriterium der Betreuer für die Freigabe sein.

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 oben sichtbar werden.
• Die Eigenschaft targetdes 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;

Recherchehinweise

• References-UML der MindMap (wurde erweitert um Beispiele)
• Array.sort
• DOM-Hierarchy (beachte Unterschied Klassen- und Objekthierarchie)