feat(nav): Implement SPA navigation for main menu and rules

knockoutwhistweb/app/controllers/JavaScriptRoutingController.scala

@@ -17,8 +17,9 @@ class JavaScriptRoutingController  @Inject()(
     Ok(
       JavaScriptReverseRouter("jsRoutes")(
           routes.javascript.MainMenuController.createGame,
-          routes.javascript.IngameController.startGame,
           routes.javascript.MainMenuController.joinGame,
+          routes.javascript.MainMenuController.navSPA,
+          routes.javascript.IngameController.startGame,
           routes.javascript.IngameController.kickPlayer,
           routes.javascript.IngameController.leaveGame,
           routes.javascript.IngameController.playCard,

knockoutwhistweb/app/controllers/MainMenuController.scala

@@ -23,7 +23,7 @@ class MainMenuController @Inject()(
 
   // Pass the request-handling function directly to authAction (no nested Action)
   def mainMenu(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    Ok(views.html.main("KnockOutWhist")(views.html.mainmenu.creategame(Some(request.user))))
+    Ok(views.html.main("Knockout Whist - Create Game")(views.html.mainmenu.creategame(Some(request.user))))
   }
 
   def index(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
@@ -88,6 +88,29 @@ class MainMenuController @Inject()(
   }
 
   def rules(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    Ok(views.html.mainmenu.rules(Some(request.user)))
+    Ok(views.html.main("Knockout Whist - Rules")(views.html.mainmenu.rules(Some(request.user))))
+  }
+
+  def navSPA(location: String) : Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
+    location match {
+      case "0" => // Main Menu
+        Ok(Json.obj(
+          "status" -> "success",
+          "redirectUrl" -> routes.MainMenuController.mainMenu().url,
+          "content" -> views.html.mainmenu.creategame(Some(request.user)).toString
+        ))
+      case "1" => // Rules
+        Ok(Json.obj(
+          "status" -> "success",
+          "redirectUrl" -> routes.MainMenuController.rules().url,
+          "content" -> views.html.mainmenu.rules(Some(request.user)).toString
+        ))
+      case _ =>
+        BadRequest(Json.obj(
+          "status" -> "failure",
+          "errorMessage" -> "Invalid form submission"
+        ))
     }
   }
+
+}

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

@@ -13,14 +13,14 @@
                     <ul class="navbar-nav mb-2 mb-lg-0">
                         @if(user.isDefined) {
                             <li class="nav-item">
-                                <a class="nav-link active" aria-current="page" href="@routes.MainMenuController.mainMenu()">Create Game</a>
+                                <a class="nav-link active" aria-current="page" onclick="navSpa('0', 'Knockout Whist - Create Game'); return false;" href="@routes.MainMenuController.mainMenu()">Create Game</a>
                             </li>
                             <li class="nav-item">
                                 <a class="nav-link disabled" aria-disabled="true">Lobbies</a>
                             </li>
                         }
                         <li class="nav-item">
-                            <a class="nav-link active" href="@routes.MainMenuController.rules()">Rules</a>
+                            <a class="nav-link active" onclick="navSpa('1', 'Knockout Whist - Rules'); return false;" href="@routes.MainMenuController.rules()">Rules</a>
                         </li>
                     </ul>
                     <form class="navbar-nav me-auto mb-2 mb-lg-0" onsubmit="joinGame(); return false;">

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

@@ -1,6 +1,4 @@
 @(user: Option[model.users.User])
-
-@main("Rules") {
     @navbar(user)
 
     <main class="lobby-background flex-grow-1">
@@ -177,4 +175,3 @@
             </div>
         </div>
     </main>
-}

knockoutwhistweb/conf/routes

@@ -12,6 +12,7 @@ GET     /assets/*file                       controllers.Assets.versioned(path="/
 # Main menu routes
 GET     /mainmenu                           controllers.MainMenuController.mainMenu()
 GET     /rules                              controllers.MainMenuController.rules()
+GET     /navSPA/:pType                      controllers.MainMenuController.navSPA(pType)
 
 POST    /createGame                         controllers.MainMenuController.createGame()
 POST    /joinGame                           controllers.MainMenuController.joinGame()

knockoutwhistweb/public/javascripts/main.js

@@ -413,7 +413,7 @@ function login() {
         data: JSON.stringify(jsonObj),
         success: (data => {
             if (data.status === 'success') {
-                exchangeBody(data.content, "Knockout Whist - Main Menu", data.redirectUrl);
+                exchangeBody(data.content, 'Knockout Whist - Create Game', data.redirectUrl);
                 return
             }
             alert('Login failed. Please check your credentials and try again.');
@@ -462,6 +462,34 @@ function joinGame() {
     return false
 }
 
+function navSpa(page, title) {
+    const route = jsRoutes.controllers.MainMenuController.navSPA(page);
+    $.ajax({
+        url: route.url,
+        type: route.type,
+        contentType: 'application/json',
+        dataType: 'json',
+        data: JSON.stringify(jsonObj),
+        success: (data => {
+            if (data.status === 'success') {
+                exchangeBody(data.content, title, data.redirectUrl);
+                return
+            }
+            alert('Could not join the game. Please check the Game ID and try again.');
+        }),
+        error: ((jqXHR) => {
+            const errorData = JSON.parse(jqXHR.responseText);
+            if (errorData && errorData.errorMessage) {
+                alert(`${errorData.errorMessage}`);
+            } else {
+                alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
+            }
+        })
+    });
+    return false
+}
+
+
 function selectTie(gameId) {
     const route = jsRoutes.controllers.IngameController.playTie(gameId);
     const jsonObj = {