knockoutwhistweb/app/controllers/IngameController.scala

@@ -6,6 +6,7 @@ import exceptions.{CantPlayCardException, GameFullException, NotEnoughPlayersExc
 import logic.PodManager
 import model.sessions.{PlayerSession, UserSession}
 import play.api.*
+import play.api.libs.json.Json
 import play.api.mvc.*
 
 import java.util.UUID
@@ -64,30 +65,70 @@ class IngameController @Inject()(
       }
     }
     if (result.isSuccess) {
-      Redirect(routes.IngameController.game(gameId))
+      Ok(Json.obj(
+        "status" -> "success",
+        "redirectUrl" -> routes.IngameController.game(gameId).url
+      ))
     } else {
       val throwable = result.failed.get
       throwable match {
         case _: NotInThisGameException =>
-          BadRequest(throwable.getMessage)
+          BadRequest(Json.obj(
+            "status" -> "failure",
+            "errorMessage" -> throwable.getMessage
+          ))
         case _: NotHostException =>
-          Forbidden(throwable.getMessage)
+          Forbidden(Json.obj(
+            "status" -> "failure",
+            "errorMessage" -> throwable.getMessage
+          ))
         case _: NotEnoughPlayersException =>
-          BadRequest(throwable.getMessage)
+          BadRequest(Json.obj(
+            "status" -> "failure",
+            "errorMessage" -> throwable.getMessage
+          ))
         case _ =>
-          InternalServerError(throwable.getMessage)
+          InternalServerError(Json.obj(
+            "status" -> "failure",
+            "errorMessage" -> throwable.getMessage
+          ))
       }
     }
   }
-  def kickPlayer(gameId: String, playerToKick: UUID): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
+  def kickPlayer(gameId: String, playerToKick: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
     val game = podManager.getGame(gameId)
-    game.get.leaveGame(playerToKick)
+    val playerToKickUUID = UUID.fromString(playerToKick)
-    Redirect(routes.IngameController.game(gameId))
+    val result = Try {
+      game.get.leaveGame(playerToKickUUID)
+    }
+    if(result.isSuccess) {
+      Ok(Json.obj(
+        "status" -> "success",
+        "redirectUrl" -> routes.IngameController.game(gameId).url
+      ))
+    } else {
+      InternalServerError(Json.obj(
+        "status" -> "failure",
+        "errorMessage" -> "Something went wrong."
+      ))
+    }
   }
   def leaveGame(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
     val game = podManager.getGame(gameId)
-    game.get.leaveGame(request.user.id)
+    val result = Try {
-    Redirect(routes.MainMenuController.mainMenu())
+      game.get.leaveGame(request.user.id)
+    }
+    if (result.isSuccess) {
+      Ok(Json.obj(
+        "status" -> "success",
+        "redirectUrl" -> routes.MainMenuController.mainMenu().url
+      ))
+    } else {
+      InternalServerError(Json.obj(
+        "status" -> "failure",
+        "errorMessage" -> "Something went wrong."
+      ))
+    }
   }
   def joinGame(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
     val game = podManager.getGame(gameId)
@@ -119,7 +160,10 @@ class IngameController @Inject()(
     val game = podManager.getGame(gameId)
     game match {
       case Some(g) =>
-        val cardIdOpt = request.body.asFormUrlEncoded.flatMap(_.get("cardId").flatMap(_.headOption))
+        val jsonBody = request.body.asJson
+        val cardIdOpt: Option[String] = jsonBody.flatMap { jsValue =>
+          (jsValue \ "cardID").asOpt[String]
+        }
         cardIdOpt match {
           case Some(cardId) =>
             var optSession: Option[UserSession] = None
@@ -131,27 +175,51 @@ class IngameController @Inject()(
             }
             optSession.foreach(_.lock.unlock())
             if (result.isSuccess) {
-              NoContent
+              Ok(Json.obj(
+                "status" -> "success",
+                "redirectUrl" -> routes.IngameController.game(gameId).url
+              ))
             } else {
               val throwable = result.failed.get
               throwable match {
                 case _: CantPlayCardException =>
-                  BadRequest(throwable.getMessage)
+                  BadRequest(Json.obj(
+                    "status" -> "failure",
+                    "errorMessage" -> throwable.getMessage
+                  ))
                 case _: NotInThisGameException =>
-                  BadRequest(throwable.getMessage)
+                  BadRequest(Json.obj(
+                    "status" -> "failure",
+                    "errorMessage" -> throwable.getMessage
+                  ))
                 case _: IllegalArgumentException =>
-                  BadRequest(throwable.getMessage)
+                  BadRequest(Json.obj(
+                    "status" -> "failure",
+                    "errorMessage" -> throwable.getMessage
+                  ))
                 case _: IllegalStateException =>
-                  BadRequest(throwable.getMessage)
+                  BadRequest(Json.obj(
+                    "status" -> "failure",
+                    "errorMessage" -> throwable.getMessage
+                  ))
                 case _ =>
-                  InternalServerError(throwable.getMessage)
+                  InternalServerError(Json.obj(
+                    "status" -> "failure",
+                    "errorMessage" -> throwable.getMessage
+                  ))
               }
             }
           case None =>
-            BadRequest("cardId parameter is missing")
+            BadRequest(Json.obj(
+              "status" -> "failure",
+              "errorMessage" -> "cardId Parameter is missing"
+            ))
         }
       case None =>
-        NotFound("Game not found")
+        NotFound(Json.obj(
+          "status" -> "failure",
+          "errorMessage" -> "Game not found"
+        ))
     }
   }
   }

knockoutwhistweb/app/controllers/JavaScriptRoutingController.scala

@@ -16,7 +16,10 @@ class JavaScriptRoutingController  @Inject()(
     Ok(
       JavaScriptReverseRouter("jsRoutes")(
           routes.javascript.MainMenuController.createGame,
-          routes.javascript.IngameController.startGame
+          routes.javascript.IngameController.startGame,
+          routes.javascript.IngameController.kickPlayer,
+          routes.javascript.IngameController.leaveGame,
+          routes.javascript.IngameController.playCard
       )
     ).as("text/javascript")
   }

knockoutwhistweb/app/controllers/MainMenuController.scala

@@ -36,7 +36,7 @@ class MainMenuController @Inject()(
         .getOrElse(s"${request.user.name}'s Game")
 
       val playeramount: String = (jsonBody.get \ "playeramount").asOpt[String]
-        .getOrElse(throw new IllegalArgumentException("Player amount is required and must be an integer."))
+        .getOrElse(throw new IllegalArgumentException("Player amount is required."))
 
       val gameLobby = podManager.createGame(
         host = request.user,
@@ -48,7 +48,10 @@ class MainMenuController @Inject()(
         "redirectUrl" -> routes.IngameController.game(gameLobby.id).url
       ))
     } else {
-      BadRequest("Invalid form submission")
+      BadRequest(Json.obj(
+        "status" -> "failure",
+        "errorMessage" -> "Invalid form submission"
+      ))
     }
     
   }

knockoutwhistweb/app/views/ingame/ingame.scala.html

@@ -75,12 +75,9 @@
                 <div class="row justify-content-center" id="card-slide">
                     @for(i <- player.currentHand().get.cards.indices) {
                     <div class="col-auto handcard" style="border-radius: 6px">
-                        <form action="@(routes.IngameController.playCard(gamelobby.id))" method="post" class="m-0 p-0" style="border-radius: 6px">
+                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-card-id="@i" style="border-radius: 6px" onclick="handlePlayCard(this, '@gamelobby.id')">
-                            <input type="hidden" name="cardId" value="@i" />
-                            <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" style="border-radius: 6px">
                                 @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
-                            </button>
+                            </div>
-                        </form>
                     </div>
                     }
                 </div>

knockoutwhistweb/app/views/lobby/lobby.scala.html

@@ -9,9 +9,7 @@
                     <div class="text-center" style="flex-grow: 1;">
                         Lobby-Name: @gamelobby.name
                     </div>
-                    <form action="@(routes.IngameController.leaveGame(gamelobby.id))">
+                        <div class="btn btn-danger ms-auto" onclick="leaveGame('@gamelobby.id')">Exit</div>
-                        <button type="submit" class="btn btn-danger ms-auto">Exit</button>
-                    </form>
                 </div>
             </div>
         </div>
@@ -34,16 +32,14 @@
                                 } else {
                                     <h5 class="card-title">@playersession.name</h5>
     @*                                <p class="card-text">Your text could be here!</p>*@
-                                    <form action="@(routes.IngameController.kickPlayer(gamelobby.id, playersession.id))" method="post">
+                                    <div class="btn btn-danger" onclick="removePlayer('@gamelobby.id', '@playersession.id')">Remove</div>
-                                        <button type="submit" class="btn btn-danger">Remove</button>
-                                    </form>
                                 }
                             </div>
                         </div>
                     </div>
                 }
                 <div class="col-12 text-center mb-5">
-                    <a href="@(routes.IngameController.startGame(gamelobby.id))" class="btn btn-success">Start Game</a>
+                    <div class="btn btn-success" onclick="startGame('@gamelobby.id')">Start Game</div>
                 </div>
             } else {
                 @for(playersession <- gamelobby.getPlayers.values) {

knockoutwhistweb/conf/routes

@@ -26,6 +26,6 @@ GET     /logout                     controllers.UserController.logout()
 GET    /game/:id                    controllers.IngameController.game(id: String)
 GET    /game/:id/join               controllers.IngameController.joinGame(id: String)
 GET    /game/:id/start              controllers.IngameController.startGame(id: String)
-POST    /game/:id/kickPlayer         controllers.IngameController.kickPlayer(id: String, playerId: java.util.UUID)
+POST    /game/:id/kickPlayer         controllers.IngameController.kickPlayer(id: String, playerId: String)
 GET     /game/:id/leaveGame         controllers.IngameController.leaveGame(id: String)
 POST   /game/:id/playCard           controllers.IngameController.playCard(id: String)

knockoutwhistweb/public/javascripts/main.js

@@ -103,21 +103,161 @@ function sendGameCreationRequest(dataObject) {
         body: JSON.stringify(dataObject)
     })
         .then(response => {
-            if (!response.ok) {
+            return response.json().then(data => {
-                throw new Error(`HTTP error! status: ${response.status}`);
+                if (!response.ok) {
-            }
+                    return Promise.reject(data);
-            return response.json();
+                }
+                return data;
+            });
         })
         .then(data => {
             if (data.status === 'success') {
-                // Redirect the user
                 window.location.href = data.redirectUrl;
-            } else {
-                console.error("Game creation failed:", data.message);
             }
         })
         .catch(error => {
-            console.error('Fetch error:', error);
+            if (error && error.errorMessage) {
-            alert('Could not create game. Please try again.');
+                alert(`${error.errorMessage}`);
+            } else {
+                alert('An unexpected error occurred. Please try again.');
+            }
         });
 }
+function startGame(gameId) {
+    sendGameStartRequest(gameId)
+}
+function sendGameStartRequest(gameId) {
+    const route = jsRoutes.controllers.IngameController.startGame(gameId);
+
+    fetch(route.url, {
+        method: route.type,
+    })
+        .then(response => {
+            return response.json().then(data => {
+                if (!response.ok) {
+                    return Promise.reject(data);
+                }
+                return data;
+            });
+        })
+        .then(data => {
+            // SUCCESS BLOCK: data is the { status: 'success', ... } object
+            if (data.status === 'success') {
+                window.location.href = data.redirectUrl;
+            }
+        })
+        .catch(error => {
+            if (error && error.errorMessage) {
+                alert(`${error.errorMessage}`);
+            } else {
+                alert('An unexpected error occurred. Please try again.');
+            }
+        });
+}
+function removePlayer(gameid, playersessionId) {
+    sendRemovePlayerRequest(gameid, playersessionId)
+}
+
+function sendRemovePlayerRequest(gameId, playersessionId) {
+    const route = jsRoutes.controllers.IngameController.kickPlayer(gameId, playersessionId);
+
+    fetch(route.url, {
+        method: route.type,
+        headers: {
+            'Content-Type': 'application/json',
+        }
+    })
+        .then(response => {
+            return response.json().then(data => {
+                if (!response.ok) {
+                    return Promise.reject(data);
+                }
+                return data;
+            });
+        })
+        .then(data => {
+            // SUCCESS BLOCK: data is the { status: 'success', ... } object
+            if (data.status === 'success') {
+                window.location.href = data.redirectUrl;
+            }
+        })
+        .catch(error => {
+            if (error && error.errorMessage) {
+                alert(`${error.errorMessage}`);
+            } else {
+                alert('An unexpected error occurred. Please try again.');
+            }
+        });
+}
+function leaveGame(gameId) {
+    sendLeavePlayerRequest(gameId)
+}
+function sendLeavePlayerRequest(gameId) {
+
+    const route = jsRoutes.controllers.IngameController.leaveGame(gameId);
+    fetch(route.url, {
+        method: route.type,
+    })
+        .then(response => {
+            return response.json().then(data => {
+                if (!response.ok) {
+                    return Promise.reject(data);
+                }
+                return data;
+            });
+        })
+        .then(data => {
+            // SUCCESS BLOCK: data is the { status: 'success', ... } object
+            if (data.status === 'success') {
+                window.location.href = data.redirectUrl;
+            }
+        })
+        .catch(error => {
+            if (error && error.errorMessage) {
+                alert(`${error.errorMessage}`);
+            } else {
+                alert('An unexpected error occurred. Please try again.');
+            }
+        });
+}
+
+function handlePlayCard(cardobject, gameId) {
+    const cardId = cardobject.dataset.cardId;
+    const jsonObj = {
+        cardID: cardId
+    }
+    sendPlayCardRequest(jsonObj, gameId)
+}
+
+function sendPlayCardRequest(jsonObj, gameId) {
+    const route = jsRoutes.controllers.IngameController.playCard(gameId);
+
+    fetch(route.url, {
+        method: route.type,
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(jsonObj)
+    })
+        .then(response => {
+            return response.json().then(data => {
+                if (!response.ok) {
+                    return Promise.reject(data);
+                }
+                return data;
+            });
+        })
+        .then(data => {
+            if (data.status === 'success') {
+                window.location.href = data.redirectUrl;
+            }
+        })
+        .catch(error => {
+            if (error && error.errorMessage) {
+                alert(`${error.errorMessage}`);
+            } else {
+                alert('An unexpected error occurred. Please try again.');
+            }
+        });
+}
+