feat(ui): added complete js routing for create game

added complete js routing for each button. Removed every form and replaced buttons with divs
2025-11-11 16:46:06 +01:00
parent b508d2f428
commit 6d958cdd9e
7 changed files with 252 additions and 45 deletions
--- a/knockoutwhistweb/app/controllers/IngameController.scala
+++ b/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)
-    Redirect(routes.IngameController.game(gameId))
+    val playerToKickUUID = UUID.fromString(playerToKick)
+    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)
-    Redirect(routes.MainMenuController.mainMenu())
+    val result = Try {
+      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"
+        ))
    }
  }
  }
--- a/knockoutwhistweb/app/controllers/JavaScriptRoutingController.scala
+++ b/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")
  }
--- a/knockoutwhistweb/app/controllers/MainMenuController.scala
+++ b/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"
+      ))
    }
    
  }
--- a/knockoutwhistweb/app/views/ingame/ingame.scala.html
+++ b/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">
-                            <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">
+                            <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')">
                                @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
-                            </button>
-                        </form>
+                            </div>
                    </div>
                    }
                </div>
--- a/knockoutwhistweb/app/views/lobby/lobby.scala.html
+++ b/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))">
-                        <button type="submit" class="btn btn-danger ms-auto">Exit</button>
-                    </form>
+                        <div class="btn btn-danger ms-auto" onclick="leaveGame('@gamelobby.id')">Exit</div>
                </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">
-                                        <button type="submit" class="btn btn-danger">Remove</button>
-                                    </form>
+                                    <div class="btn btn-danger" onclick="removePlayer('@gamelobby.id', '@playersession.id')">Remove</div>
                                }
                            </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) {
--- a/knockoutwhistweb/conf/routes
+++ b/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)
--- a/knockoutwhistweb/public/javascripts/main.js
+++ b/knockoutwhistweb/public/javascripts/main.js
@@ -103,21 +103,161 @@ function sendGameCreationRequest(dataObject) {
        body: JSON.stringify(dataObject)
    })
        .then(response => {
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            return response.json();
+            return response.json().then(data => {
+                if (!response.ok) {
+                    return Promise.reject(data);
+                }
+                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);
-            alert('Could not create game. Please try again.');
+            if (error && error.errorMessage) {
+                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.');
+            }
+        });
+}
+