Programmierung

Programmierung

1. Togglebutton

Um einen Togglebutton zu erstellen habe ich mir eine passende svg Datei gesucht, welche ich in der HTML eingebunden habe. Dieser Toggelpfeil soll den Nutzenden die Möglichkeit geben zwischen der “OVER VIEW” und “POSITIONS” Ansicht hin und her zu wechseln.

Der Togglebutton überprüft mit “chartView” auf welcher Seite er sich gerade befindet. Abhängig davon ob der Togglepfeil sich zu diesem Zeitpunkte auf “sunburst” (“OVER VIEW”) oder “positions” (”POSITIONS”) befindet wird daraufhin “drawPositions” oder “drawSunburst” aufgerufen. Zudem wird auch angezeigt wo ich mich gerade befinde. Dies ändert sich mit “textNextToLineOverview” oder “textNextToLinePositions.” Die Klasse “Flipped” wird umgeschaltet, welche den Butten nach dem klicken horizontal spiegelt.

2. OVER VIEW Kreisbild

In dem Kreisbild der “OVER VIEW” Ansicht sieht man für jeden Spieler einen Kreis. Diese sind Farbig nach Kontinenten sortiert. Die Segmente sind aufgeteilt nach Ländern und und die inneren Spielerkreise sind jünger als die äußeren. Der Radius der Kreise soll den Marktwert darstellen.

Dafür habe ich die “drawSunburst” Funktion erstellt. Wenn die aktuelle Ansicht “chartView” leer ist, lege ich die Größe, Position und Hintergrundfarbe jedes Spielerkreises mit den in den Daten gespeicherten Werten fest.

3. Verschieben der Kreise

Bei Toggeln verschwinden die Kreisbilder nicht nur. Sie bewegen sich in die Positionen des neuen Kreisbildes.

Beim Toggeln wird die Funktion ”drawPositions” aufgerufen. Diese Funktion animiert die Kreise, indem sie ihre Positionen und Größen ändert, sodass sie um die Spielerpositionen herum angeordnet sind, anstatt im Sunburst-Muster. Dieses vorgehen dauert 100 Millisekunden.

4. POSITIONS Kreisbild

Bei dem Positionskreisbild habe ich versuch die Positionen der Spieler zu Symbolisieren. Die Konsistenz sollte aber gewahrt werden. Daher sind die Attribute der Kreise gleich wie bei dem “OVER VIEW” Kreisbild. Der Radius für den Marktwert und die Farbe für den Kontinent. Ich habe zu erst die Positionen auf einem Papier skizziert und sie dann in js übertragen.

Damit die Spielerkreise auf den Positionen nicht übereinander liegen ist eine Funktion implementiert, welche die kreise zufällig platziert.

Ein weiterer Grund warum sich die Kreise zu einer Traube bilden ist Matter.js. Dies macht aus den Kreisen Physikalische Objekte welche kollidieren können.

Der Restliche Code für das erzeugen der Spielerkreise sieht wie folgt aus.

5. Hover für Informationen

Beim Hovern über die einzelnen Spielerkreise bekommt man eine Anzeige des jeweiligen Spielers zu sehen. In dieser Anzeige steht Name, Alter, Land, Kontinent, Position, Marktwert, gelbe und rote Karte.

3 Kontinente

Da in dem Datensatz keine Kontinente hinterlegt sind, habe ich diese nachträglich hinzugefügt. Diese Kontinente habe ich genutzt um die Kreise farblich von einander abzugrenzen.

Dafür habe ich die einzelnen Länder genommen und zusätzlich dazu die dazugehörigen Kontinente geschrieben. Daraufhin habe ich jedem Kontinent jeweils eine Farbe zugeordnet.