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

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 = {