feat(ui): Popups (#91)

Fixed sorting and added popups for trickend and roundend

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #91

knockoutwhistweb/app/util/mapper/RoundEndEventMapper.scala

@@ -0,0 +1,20 @@
+package util.mapper
+
+import controllers.routes
+import de.knockoutwhist.events.global.RoundEndEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object RoundEndEventMapper extends SimpleEventMapper[RoundEndEvent] {
+
+  override def id: String = "RoundEndEvent"
+
+  override def toJson(event: RoundEndEvent, session: UserSession): JsObject = {
+
+    Json.obj(
+      "player" -> event.winner.name,
+      "tricks" -> event.amountOfTricks
+    )
+  }
+
+}

knockoutwhistweb/public/javascripts/events.js

@@ -128,8 +128,8 @@ function trickEndEvent(eventData) {
         }
     )
     const playerorder = players.sort((playerA, playerB) => {
-        const countA = playercounts.get(playerA.name) || 0;
-        const countB = playercounts.get(playerB.name) || 0;
+        const countA = playercounts.get(playerA) || 0;
+        const countB = playercounts.get(playerB) || 0;
         return countB - countA;
     });
     playerorder.forEach( player => {
@@ -142,7 +142,9 @@ function trickEndEvent(eventData) {
                                 </div>
         `
     });
+    alertMessage(`${winner} won the trick!`)
     tricktable.html(newHtml);
+
 }
 function newTrickEvent() {
     const firstCardContainer = $('#first-card-container');
@@ -309,7 +311,11 @@ function receiveTurnEvent(eventData) {
         nextPlayersContainer.html(nextPlayersHtml);
     }
 }
-
+function receiveRoundEndEvent(eventData) {
+    const player = eventData.player
+    const tricks = eventData.tricks
+    alertMessage(`${player} won this round with ${tricks} tricks!`)
+}
 onEvent("ReceivedHandEvent", receiveHandEvent)
 onEvent("GameStateChangeEvent", receiveGameStateChange)
 onEvent("NewRoundEvent", newRoundEvent)
@@ -322,5 +328,6 @@ onEvent("LeftEvent", receiveGameStateChange)
 onEvent("KickEvent", receiveKickEvent)
 onEvent("SessionClosed", receiveSessionClosedEvent)
 onEvent("TurnEvent", receiveTurnEvent)
+onEvent("RoundEndEvent", receiveRoundEndEvent)
 
 globalThis.alertMessage = alertMessage