feat(ui): added js routing for create game

added js routing for create game, removed the form and button

knockoutwhistweb/app/controllers/JavaScriptRoutingController.scala

@@ -0,0 +1,23 @@
+package controllers
+
+import auth.{AuthAction, AuthenticatedRequest}
+import logic.PodManager
+import play.api.mvc.{Action, AnyContent, BaseController, ControllerComponents}
+import play.api.routing.JavaScriptReverseRouter
+
+import javax.inject.Inject
+
+class JavaScriptRoutingController  @Inject()(
+                                              val controllerComponents: ControllerComponents,
+                                              val authAction: AuthAction,
+                                              val podManager: PodManager
+                                            ) extends BaseController {
+  def javascriptRoutes(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
+    Ok(
+      JavaScriptReverseRouter("jsRoutes")(
+          routes.javascript.MainMenuController.createGame,
+          routes.javascript.IngameController.startGame
+      )
+    ).as("text/javascript")
+  }
+}

knockoutwhistweb/app/controllers/MainMenuController.scala

@@ -3,6 +3,7 @@ package controllers
 import auth.{AuthAction, AuthenticatedRequest}
 import logic.PodManager
 import play.api.*
+import play.api.libs.json.Json
 import play.api.mvc.*
 
 import javax.inject.*
@@ -29,16 +30,23 @@ class MainMenuController @Inject()(
   }
 
   def createGame(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val postData = request.body.asFormUrlEncoded
+    val jsonBody = request.body.asJson
-    if (postData.isDefined) {
+    if (jsonBody.isDefined) {
-      val gamename = postData.get.get("lobbyname").flatMap(_.headOption).getOrElse(s"${request.user.name}'s Game")
+      val gamename: String = (jsonBody.get \ "lobbyname").asOpt[String]
-      val playeramount = postData.get.get("playeramount").flatMap(_.headOption).getOrElse("")
+        .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."))
+
       val gameLobby = podManager.createGame(
         host = request.user,
         name = gamename,
         maxPlayers = playeramount.toInt
       )
-      Redirect(routes.IngameController.game(gameLobby.id))
+      Ok(Json.obj(
+        "status" -> "success",
+        "redirectUrl" -> routes.IngameController.game(gameLobby.id).url
+      ))
     } else {
       BadRequest("Invalid form submission")
     }

knockoutwhistweb/app/views/main.scala.html

@@ -22,7 +22,7 @@
             @* And here's where we render the `Html` object containing
              * the page content. *@
             @content
-
+        <script src="@routes.JavaScriptRoutingController.javascriptRoutes()" type="text/javascript"></script>
         <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
     </body>

knockoutwhistweb/app/views/mainmenu/creategame.scala.html

@@ -3,32 +3,30 @@
 @main("Create Game") {
 @navbar(user)
 <main class="lobby-background flex-grow-1">
-    <form action="@routes.MainMenuController.createGame()" method="post">
+    <div class="w-50 mx-auto">
-        <div class="w-50 mx-auto">
+        <div class="mt-3">
-            <div class="mt-3">
+            <label for="lobbyname" class="form-label">Lobby-Name</label>
-                <label for="lobbyname" class="form-label">Lobby-Name</label>
+            <input type="text" class="form-control" id="lobbyname" name="lobbyname" placeholder="Lobby 1" required>
-                <input type="text" class="form-control" id="lobbyname" name="lobbyname" placeholder="Lobby 1" required>
-            </div>
-            <div class="form-check form-switch mt-3">
-                <input class="form-check-input" type="checkbox" id="visibilityswitch" disabled>
-                <label class="form-check-label" for="visibilityswitch">public/private</label>
-            </div>
-                <div class="mt-3">
-                    <label for="playeramount" class="form-label">Playeramount:</label>
-                    <input type="range" class="form-range text-body" min="2" max="7" value="2" id="playeramount" name="playeramount">
-                    <div class="d-flex justify-content-between">
-                        <span>2</span>
-                        <span>3</span>
-                        <span>4</span>
-                        <span>5</span>
-                        <span>6</span>
-                        <span>7</span>
-                    </div>
-                </div>
-            <div class="mt-3 text-center">
-                <button type="submit" class="btn btn-success">Create Game</button>
-            </div>
         </div>
-    </form>
+        <div class="form-check form-switch mt-3">
+            <input class="form-check-input" type="checkbox" id="visibilityswitch" disabled>
+            <label class="form-check-label" for="visibilityswitch">public/private</label>
+        </div>
+            <div class="mt-3">
+                <label for="playeramount" class="form-label">Playeramount:</label>
+                <input type="range" class="form-range text-body" min="2" max="7" value="2" id="playeramount" name="playeramount">
+                <div class="d-flex justify-content-between">
+                    <span>2</span>
+                    <span>3</span>
+                    <span>4</span>
+                    <span>5</span>
+                    <span>6</span>
+                    <span>7</span>
+                </div>
+            </div>
+        <div class="mt-3 text-center">
+            <div class="btn btn-success" onclick="createGameJS()">Create Game</div>
+        </div>
+    </div>
 </main>
 }

knockoutwhistweb/conf/routes

@@ -3,7 +3,8 @@
 # https://www.playframework.com/documentation/latest/ScalaRouting
 # ~~~~
 
-
+# For the javascript routing
+GET     /assets/js/routes           controllers.JavaScriptRoutingController.javascriptRoutes()
 # Primary routes
 GET     /                           controllers.MainMenuController.index()
 GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

knockoutwhistweb/public/javascripts/main.js

@@ -77,4 +77,47 @@
                 })
             })
     })
-})()
+})()
+
+function createGameJS() {
+    let lobbyName = document.getElementById("lobbyname").value;
+    if (lobbyName === "") {
+        lobbyName = "DefaultLobby"
+    }
+    const playerAmount = document.getElementById("playeramount").value;
+    const jsonObj = {
+        lobbyname: lobbyName,
+        playeramount: playerAmount
+    }
+    sendGameCreationRequest(jsonObj);
+}
+
+function sendGameCreationRequest(dataObject) {
+    const route = jsRoutes.controllers.MainMenuController.createGame();
+
+    fetch(route.url, {
+        method: route.type,
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(dataObject)
+    })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json();
+        })
+        .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.');
+        });
+}