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
-    if (postData.isDefined) {
-      val gamename = postData.get.get("lobbyname").flatMap(_.headOption).getOrElse(s"${request.user.name}'s Game")
-      val playeramount = postData.get.get("playeramount").flatMap(_.headOption).getOrElse("")
+    val jsonBody = request.body.asJson
+    if (jsonBody.isDefined) {
+      val gamename: String = (jsonBody.get \ "lobbyname").asOpt[String]
+        .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="mt-3">
-                <label for="lobbyname" class="form-label">Lobby-Name</label>
-                <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 class="w-50 mx-auto">
+        <div class="mt-3">
+            <label for="lobbyname" class="form-label">Lobby-Name</label>
+            <input type="text" class="form-control" id="lobbyname" name="lobbyname" placeholder="Lobby 1" required>
         </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>
 }