ci: bump version to v4.6.0

feat(api): BAC-11 Websocket - Return to Lobby (#94 )
Reviewed-on: #94 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>
2025-12-01 19:07:26 +00:00 · 2025-12-01 20:04:17 +01:00 · 2025-12-01 18:53:23 +00:00 · 2025-12-01 19:50:19 +01:00 · 2025-12-01 18:18:44 +00:00 · 2025-12-01 19:13:32 +01:00
76 changed files with 4796 additions and 2189 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1 @@
+.env
--- a/.gitignore
+++ b/.gitignore
@@ -138,3 +138,4 @@ target
 /knockoutwhistweb/.g8/
 /knockoutwhistweb/.bsp/
 /currentSnapshot.json
+.env
--- a/.sbtopts
+++ b/.sbtopts
@@ -0,0 +1,2 @@
+-J--add-opens=java.base/java.util=ALL-UNNAMED
+-J--add-opens=java.base/java.lang=ALL-UNNAMED
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-##  (2025-11-03)
+##  (2025-11-07)

 ### ⚠ BREAKING CHANGES

@@ -7,7 +7,10 @@
 ### Features

 * **config:** add issue templates for Epics, User Stories, and Subtasks ([#4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/4)) ([d71809d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/d71809d6f4389b03ecc8ee9b857e58a4da413fa2))
+* **docker:** added docker container support ([#47](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/47)) ([4d6ea54](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/4d6ea54771c284d5ea0bb798fedaf0423a6cdd58))
 * implemented multigame support ([#34](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/34)) ([afde6c0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/afde6c02da2c3055084ae90ab6b11b63b0e11cfb))
+* **ui:** add Lobby and Main Menu Body ([#38](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/38)) ([051e740](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/051e7406e30385d3260631a783f507b90d9f94d1))
+* **ui:** add main menu navbar and join game functionality ([#35](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/35)) ([32d4f9c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/32d4f9c6cefa20f10816dad9f33548a146d4c2c3))
 * **ui:** added rules ([#12](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/12)) ([92e4851](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/92e4851219e64ad919d7f8bc7c30232ef7d6570f))
 * **ui:** CSS Animations [#18](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/18) ([#27](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/27)) ([c0dadf8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c0dadf89274169b396089c2e7b3d69b043097186))
 * **ui:** implement CSS variables for theme support ([#26](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/26)) ([1f377de](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1f377de0f43aaf17271d29678a1accf11cfe121c)), closes [#17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/17)
@@ -18,17 +21,22 @@

 * **base:** fixed persistence logic ([#21](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/21)) ([7f765b4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/7f765b4514459202df3768c64a1df383fecb66e2))
 * **config:** modified git module to use the main branch ([#10](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/10)) ([ccf44ed](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/ccf44ede41e10df4b973c9cecc09d1e7105143f5))
+* disabled external node ([51d9c0b](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/51d9c0b5f687d951f42480e333f37b3155d58dbd))
+* ensure proper unlocking of user session locks in game actions ([#37](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/37)) ([44c88c8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/44c88c8f60abf4a54e721f8e7f6de44a6d28b258))
 * **imports:** reorganized import statements for clarity and consistency ([#22](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/22)) ([1517d0c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1517d0c006247a95b02f66fa5bc53cc78b9d89fa))
+* improve lock handling in user session interactions ([#36](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/36)) ([96c3846](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/96c38466d20203a561a5bc3bba560c9d9fd6d754))
 * **ui:** add light mode styles, update font families and fixed ui ([#24](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/24)) ([729a4ee](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/729a4eec6b721f8118d0feffa44721262ccd595f))
 * **ui:** added dark mode ([#25](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/25)) ([6c31fa0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/6c31fa0538e5d71c8be9a728eebf7576cb108782))
 * **ui:** changed backgrounds ([#33](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/33)) ([bef96ba](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/bef96ba7e39a633c1972b01b1c1ebab9d1d3ee1c))
+* update allowed hosts filter and adjust background color in login page ([#45](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/45)) ([aa83082](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/aa83082d095b30fd3eae336ad5f1aa5d409fbdab))
+* update file paths and improve session handling in user interactions ([#39](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/39)) ([de565b5](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/de565b52dca6b49b903eceaecd47cc3a5429608b))

 ### Reverts

 * ci: bump version to v1.0.0 [skip ci] ([91d7f6c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/91d7f6ca003edb368aba76b7a82c8b42d22bdbfe))
 * version bumb ([2e10059](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/2e10059a6756befe6f8e70c94fd34b865693efb8))
 * version bump ([7879d1a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/7879d1ab6ee8f227c19b69b467a28dd7b479ff73))
-##  (2025-11-03)
+##  (2025-11-07)

 ### ⚠ BREAKING CHANGES

@@ -37,7 +45,10 @@
 ### Features

 * **config:** add issue templates for Epics, User Stories, and Subtasks ([#4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/4)) ([d71809d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/d71809d6f4389b03ecc8ee9b857e58a4da413fa2))
+* **docker:** added docker container support ([#47](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/47)) ([4d6ea54](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/4d6ea54771c284d5ea0bb798fedaf0423a6cdd58))
 * implemented multigame support ([#34](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/34)) ([afde6c0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/afde6c02da2c3055084ae90ab6b11b63b0e11cfb))
+* **ui:** add Lobby and Main Menu Body ([#38](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/38)) ([051e740](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/051e7406e30385d3260631a783f507b90d9f94d1))
+* **ui:** add main menu navbar and join game functionality ([#35](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/35)) ([32d4f9c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/32d4f9c6cefa20f10816dad9f33548a146d4c2c3))
 * **ui:** added rules ([#12](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/12)) ([92e4851](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/92e4851219e64ad919d7f8bc7c30232ef7d6570f))
 * **ui:** CSS Animations [#18](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/18) ([#27](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/27)) ([c0dadf8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c0dadf89274169b396089c2e7b3d69b043097186))
 * **ui:** implement CSS variables for theme support ([#26](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/26)) ([1f377de](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1f377de0f43aaf17271d29678a1accf11cfe121c)), closes [#17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/17)
@@ -48,94 +59,126 @@

 * **base:** fixed persistence logic ([#21](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/21)) ([7f765b4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/7f765b4514459202df3768c64a1df383fecb66e2))
 * **config:** modified git module to use the main branch ([#10](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/10)) ([ccf44ed](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/ccf44ede41e10df4b973c9cecc09d1e7105143f5))
+* disabled external node ([51d9c0b](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/51d9c0b5f687d951f42480e333f37b3155d58dbd))
+* ensure proper unlocking of user session locks in game actions ([#37](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/37)) ([44c88c8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/44c88c8f60abf4a54e721f8e7f6de44a6d28b258))
 * **imports:** reorganized import statements for clarity and consistency ([#22](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/22)) ([1517d0c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1517d0c006247a95b02f66fa5bc53cc78b9d89fa))
+* improve lock handling in user session interactions ([#36](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/36)) ([96c3846](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/96c38466d20203a561a5bc3bba560c9d9fd6d754))
 * **ui:** add light mode styles, update font families and fixed ui ([#24](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/24)) ([729a4ee](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/729a4eec6b721f8118d0feffa44721262ccd595f))
 * **ui:** added dark mode ([#25](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/25)) ([6c31fa0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/6c31fa0538e5d71c8be9a728eebf7576cb108782))
 * **ui:** changed backgrounds ([#33](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/33)) ([bef96ba](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/bef96ba7e39a633c1972b01b1c1ebab9d1d3ee1c))
+* update allowed hosts filter and adjust background color in login page ([#45](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/45)) ([aa83082](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/aa83082d095b30fd3eae336ad5f1aa5d409fbdab))
+* update file paths and improve session handling in user interactions ([#39](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/39)) ([de565b5](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/de565b52dca6b49b903eceaecd47cc3a5429608b))

 ### Reverts

 * ci: bump version to v1.0.0 [skip ci] ([91d7f6c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/91d7f6ca003edb368aba76b7a82c8b42d22bdbfe))
 * version bumb ([2e10059](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/2e10059a6756befe6f8e70c94fd34b865693efb8))
 * version bump ([7879d1a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/7879d1ab6ee8f227c19b69b467a28dd7b479ff73))
-##  (2025-11-03)

-### ⚠ BREAKING CHANGES
-
-* implemented multigame support (#34)
-
-### Features
-
-* **config:** add issue templates for Epics, User Stories, and Subtasks ([#4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/4)) ([d71809d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/d71809d6f4389b03ecc8ee9b857e58a4da413fa2))
-* implemented multigame support ([#34](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/34)) ([afde6c0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/afde6c02da2c3055084ae90ab6b11b63b0e11cfb))
-* **ui:** added rules ([#12](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/12)) ([92e4851](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/92e4851219e64ad919d7f8bc7c30232ef7d6570f))
-* **ui:** CSS Animations [#18](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/18) ([#27](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/27)) ([c0dadf8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c0dadf89274169b396089c2e7b3d69b043097186))
-* **ui:** implement CSS variables for theme support ([#26](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/26)) ([1f377de](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1f377de0f43aaf17271d29678a1accf11cfe121c)), closes [#17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/17)
-* **ui:** LESS Integration ([72fcf78](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/72fcf783b8ca5ce260e4b152016353e7dc1edb69)), closes [#15-Create-a-default-theme-with-Less-](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/15-Create-a-default-theme-with-Less-) [#23](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/23)
-* **ui:** UI now shows player names instead of their id ([#11](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/11)) ([c168ae7](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c168ae7dc05e99c1890661aa3b63f4d4d12779fb))
+##  (2025-11-07)

 ### Bug Fixes

-* **base:** fixed persistence logic ([#21](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/21)) ([7f765b4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/7f765b4514459202df3768c64a1df383fecb66e2))
-* **config:** modified git module to use the main branch ([#10](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/10)) ([ccf44ed](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/ccf44ede41e10df4b973c9cecc09d1e7105143f5))
-* **imports:** reorganized import statements for clarity and consistency ([#22](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/22)) ([1517d0c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1517d0c006247a95b02f66fa5bc53cc78b9d89fa))
-* **ui:** add light mode styles, update font families and fixed ui ([#24](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/24)) ([729a4ee](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/729a4eec6b721f8118d0feffa44721262ccd595f))
-* **ui:** added dark mode ([#25](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/25)) ([6c31fa0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/6c31fa0538e5d71c8be9a728eebf7576cb108782))
-* **ui:** changed backgrounds ([#33](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/33)) ([bef96ba](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/bef96ba7e39a633c1972b01b1c1ebab9d1d3ee1c))
-
-### Reverts
-
-* ci: bump version to v1.0.0 [skip ci] ([91d7f6c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/91d7f6ca003edb368aba76b7a82c8b42d22bdbfe))
-* version bumb ([2e10059](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/2e10059a6756befe6f8e70c94fd34b865693efb8))
-##  (2025-11-03)
-
-### ⚠ BREAKING CHANGES
-
-* implemented multigame support (#34)
-
-### Features
-
-* **config:** add issue templates for Epics, User Stories, and Subtasks ([#4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/4)) ([d71809d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/d71809d6f4389b03ecc8ee9b857e58a4da413fa2))
-* implemented multigame support ([#34](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/34)) ([afde6c0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/afde6c02da2c3055084ae90ab6b11b63b0e11cfb))
-* **ui:** added rules ([#12](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/12)) ([92e4851](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/92e4851219e64ad919d7f8bc7c30232ef7d6570f))
-* **ui:** CSS Animations [#18](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/18) ([#27](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/27)) ([c0dadf8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c0dadf89274169b396089c2e7b3d69b043097186))
-* **ui:** implement CSS variables for theme support ([#26](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/26)) ([1f377de](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1f377de0f43aaf17271d29678a1accf11cfe121c)), closes [#17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/17)
-* **ui:** LESS Integration ([72fcf78](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/72fcf783b8ca5ce260e4b152016353e7dc1edb69)), closes [#15-Create-a-default-theme-with-Less-](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/15-Create-a-default-theme-with-Less-) [#23](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/23)
-* **ui:** UI now shows player names instead of their id ([#11](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/11)) ([c168ae7](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c168ae7dc05e99c1890661aa3b63f4d4d12779fb))
+* ensure proper CMD syntax in Dockerfile ([#48](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/48)) ([5c6d3ac](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/5c6d3ac436f6d23a36f58b6835c9bd50feddc789))
+##  (2025-11-07)

 ### Bug Fixes

-* **base:** fixed persistence logic ([#21](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/21)) ([7f765b4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/7f765b4514459202df3768c64a1df383fecb66e2))
-* **config:** modified git module to use the main branch ([#10](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/10)) ([ccf44ed](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/ccf44ede41e10df4b973c9cecc09d1e7105143f5))
-* **imports:** reorganized import statements for clarity and consistency ([#22](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/22)) ([1517d0c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1517d0c006247a95b02f66fa5bc53cc78b9d89fa))
-* **ui:** add light mode styles, update font families and fixed ui ([#24](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/24)) ([729a4ee](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/729a4eec6b721f8118d0feffa44721262ccd595f))
-* **ui:** added dark mode ([#25](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/25)) ([6c31fa0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/6c31fa0538e5d71c8be9a728eebf7576cb108782))
-* **ui:** changed backgrounds ([#33](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/33)) ([bef96ba](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/bef96ba7e39a633c1972b01b1c1ebab9d1d3ee1c))
-
-### Reverts
-
-* ci: bump version to v1.0.0 [skip ci] ([91d7f6c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/91d7f6ca003edb368aba76b7a82c8b42d22bdbfe))
-##  (2025-11-03)
-
-### ⚠ BREAKING CHANGES
-
-* implemented multigame support (#34)
-
-### Features
-
-* **config:** add issue templates for Epics, User Stories, and Subtasks ([#4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/4)) ([d71809d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/d71809d6f4389b03ecc8ee9b857e58a4da413fa2))
-* implemented multigame support ([#34](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/34)) ([afde6c0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/afde6c02da2c3055084ae90ab6b11b63b0e11cfb))
-* **ui:** added rules ([#12](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/12)) ([92e4851](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/92e4851219e64ad919d7f8bc7c30232ef7d6570f))
-* **ui:** CSS Animations [#18](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/18) ([#27](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/27)) ([c0dadf8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c0dadf89274169b396089c2e7b3d69b043097186))
-* **ui:** implement CSS variables for theme support ([#26](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/26)) ([1f377de](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1f377de0f43aaf17271d29678a1accf11cfe121c)), closes [#17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/17)
-* **ui:** LESS Integration ([72fcf78](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/72fcf783b8ca5ce260e4b152016353e7dc1edb69)), closes [#15-Create-a-default-theme-with-Less-](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/15-Create-a-default-theme-with-Less-) [#23](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/23)
-* **ui:** UI now shows player names instead of their id ([#11](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/11)) ([c168ae7](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c168ae7dc05e99c1890661aa3b63f4d4d12779fb))
+* changelog syntax ([2e54880](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/2e548803020c99f62644283fcf3570048261173a))
+##  (2025-11-07)

 ### Bug Fixes

-* **base:** fixed persistence logic ([#21](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/21)) ([7f765b4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/7f765b4514459202df3768c64a1df383fecb66e2))
-* **config:** modified git module to use the main branch ([#10](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/10)) ([ccf44ed](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/ccf44ede41e10df4b973c9cecc09d1e7105143f5))
-* **imports:** reorganized import statements for clarity and consistency ([#22](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/22)) ([1517d0c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1517d0c006247a95b02f66fa5bc53cc78b9d89fa))
-* **ui:** add light mode styles, update font families and fixed ui ([#24](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/24)) ([729a4ee](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/729a4eec6b721f8118d0feffa44721262ccd595f))
-* **ui:** added dark mode ([#25](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/25)) ([6c31fa0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/6c31fa0538e5d71c8be9a728eebf7576cb108782))
-* **ui:** changed backgrounds ([#33](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/33)) ([bef96ba](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/bef96ba7e39a633c1972b01b1c1ebab9d1d3ee1c))
+* removed trailing ([64a7a63](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/64a7a63ab3dff59e66f62328e3b5865bb177fcde))
+##  (2025-11-07)
+
+### Bug Fixes
+
+* traling ([54e3215](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/54e321512777f6722864694eb677eab0e8418a9f))
+##  (2025-11-07)
+
+### Bug Fixes
+
+* removed trailing ([5e503cb](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/5e503cbc364f7cb23926976acc6cee575eadd9d6))
+##  (2025-11-07)
+
+### Bug Fixes
+
+* trailing ([7adc8b8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/7adc8b8645390cd18d63b4eee6db8ef448b7a46a))
+##  (2025-11-07)
+
+### Bug Fixes
+
+* removed trailing ([c7dd72e](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c7dd72ecc2786ef63daf2b4288093025a8e22bfd))
+* removed trailing ([42a5adb](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/42a5adbae01802587a48a9de15bad44b5ef014cf))
+##  (2025-11-20)
+
+### ⚠ BREAKING CHANGES
+
+* **game:** Fixed polling, SPA, Gameplayloop etc. (#59)
+
+### Features
+
+* **ci:** Polling ([370de17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/370de175db65edf87e7ab211190977b540a39d85))
+* **ci:** Polling  Added polling for when the game starts and a card gets played ([#58](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/58)) ([e60fe7c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/e60fe7c98dcab05949140a8a54ed6e4e2fbbc022))
+* **game:** Fixed polling, SPA, Gameplayloop etc. ([#59](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/59)) ([a58b2e0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/a58b2e03b11a54667d63ba6604f579a8e328c9d1))
+* **ui:** added js routing, updated ingame ui, added tricktable ([#50](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/50)) ([c220e54](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c220e54bb8d87f4f0f37a089bcd993e8df806123)), closes [#43](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/43) [#43](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/43)
+* **ui:** implement tie & trump menu, fixed some critical bugs ([#52](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/52)) ([5d245d0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/5d245d0011a5fb03193514303b45702cd8329224))
+
+### Bug Fixes
+
+* **polling:** Improve polling mechanism and delay handling ([#60](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/60)) ([641c892](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/641c892981649eb85640527cc0fe325ff683fa77))
+##  (2025-11-22)
+
+### Bug Fixes
+
+* **api:** Fixed a bug where the game would reload on game start ([#81](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/81)) ([9738a04](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/9738a04b7a3c63c8cd1450e563ec04823fb3c35a))
+##  (2025-11-23)
+
+### ⚠ BREAKING CHANGES
+
+* **websocket:** Implement WebSocket connection and event handling (#82)
+
+### Features
+
+* **websocket:** Implement WebSocket connection and event handling ([#82](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/82)) ([8ca909d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/8ca909db522dd7108a3e40ce84811eaf8695eaa5))
+##  (2025-11-24)
+##  (2025-11-26)
+
+### Features
+
+* **api:** Implement received hand event handling and UI updates ([#83](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/83)) ([52e5033](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/52e5033afca344ae40a644196555a9655913710a)), closes [#76](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/76)
+* **base:** Fixed logic for websockets and added GameStateEvent. Might've caused instability on other feature branches! ([#84](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/84)) ([b81bb3d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/b81bb3d0aeb8500a9d7417a10e24e7f8a17d71d2))
+##  (2025-11-26)
+
+### Features
+
+* **api:** Implemented card played event via websocket ([#85](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/85)) ([3c0828f](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/3c0828fdbeb507706b86f1662476c46e760533e4))
+##  (2025-11-26)
+
+### Features
+
+* **api:** Implemented session closed and kick event via websocket ([#87](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/87)) ([1ef5e8a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1ef5e8a72fdf8a3d1ae624c8c3d7c6595017bc6f))
+##  (2025-12-01)
+
+### Features
+
+* **api:** Implemented turn event via websocket ([#86](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/86)) ([2aee79b](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/2aee79bb6887008397aa0780d1d74ce96af1c202))
+* GameState to Title Mapping BAC-1 ([#92](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/92)) ([6e17328](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/6e17328846745375482c97383b143d86a86e7f32))
+* **ui:** Implement countless feature using the SJWP ([#89](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/89)) ([1f96290](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1f962903712163543fd4f98e696be5e7e29d88a6))
+* **ui:** Popups ([#91](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/91)) ([0037820](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/003782090509bca1c5022c308231b7560dd9b23d))
+
+### Bug Fixes
+
+* **api:** Fixed websocket routing ([#88](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/88)) ([46c96d4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/46c96d4ceb935ac91fc515a1fdaef195e5ebc0a7))
+* **api:** fixes - reimplemented animations ([#90](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/90)) ([cfcd967](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/cfcd967ce08ecf07f3f06826c337f684eb3b0c5f))
+##  (2025-12-01)
+
+### Features
+
+* **api:** BAC-10 Websockets - Kick Users ([#93](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/93)) ([0541bb5](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/0541bb58d19efd98d134b3d0412f39b4b1001783))
+##  (2025-12-01)
+
+### Features
+
+* **api:** BAC-11 Websocket - Return to Lobby ([#94](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/94)) ([fd2467a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/fd2467a9ea22dca64d5152a5a3e6db86d9a6f345))
--- a/41
+++ b/41
@@ -0,0 +1,41 @@
+# === Stage 1: Build the Play application ===
+FROM sbtscala/scala-sbt:eclipse-temurin-alpine-22_36_1.10.3_3.5.1 AS builder
+
+WORKDIR /app
+
+# Install Node.js and Less CSS preprocessor
+USER root
+RUN apk add --no-cache nodejs npm && \
+    npm install -g less
+
+# Cache dependencies first
+COPY project ./project
+COPY build.sbt ./
+RUN sbt -Dscoverage.skip=true update
+
+# Copy the rest of the code
+COPY . .
+
+# Build the app and stage it
+RUN sbt -Dscoverage.skip=true clean stage
+
+# === Stage 2: Runtime image ===
+FROM eclipse-temurin:21-jre-alpine
+
+# Install Argon2 CLI and libraries
+RUN apk add --no-cache bash argon2 argon2-libs
+
+WORKDIR /opt/playapp
+
+# Copy staged Play build
+COPY --from=builder /app/knockoutwhistweb/target/universal/stage /opt/playapp
+
+# Expose the default Play port
+EXPOSE 9000
+
+# Set environment variables
+ENV PLAY_HTTP_PORT=9000
+
+# Run the Play app
+ENTRYPOINT ["./bin/knockoutwhistweb"]
+CMD ["-Dplay.server.pidfile.path=/dev/null"]
--- a/build.sbt
+++ b/build.sbt
@@ -1,12 +1,12 @@
 ThisBuild / scalaVersion := "3.5.1"

 lazy val commonSettings = Seq(
-  libraryDependencies += "org.scalactic" %% "scalactic" % "3.2.18",
-  libraryDependencies += "org.scalatest" %% "scalatest" % "3.2.18" % "test",
-  libraryDependencies += "io.github.mkpaz" % "atlantafx-base" % "2.0.1",
-  libraryDependencies += "org.scalafx" %% "scalafx" % "22.0.0-R33",
-  libraryDependencies += "org.scala-lang.modules" %% "scala-xml" % "2.3.0",
-  libraryDependencies += "org.playframework" %% "play-json" % "3.1.0-M1",
+  libraryDependencies += "org.scalactic" %% "scalactic" % "3.2.19",
+  libraryDependencies += "org.scalatest" %% "scalatest" % "3.2.19" % "test",
+  libraryDependencies += "io.github.mkpaz" % "atlantafx-base" % "2.1.0",
+  libraryDependencies += "org.scalafx" %% "scalafx" % "24.0.2-R36",
+  libraryDependencies += "org.scala-lang.modules" %% "scala-xml" % "2.4.0",
+  libraryDependencies += "org.playframework" %% "play-json" % "3.1.0-M9",
  libraryDependencies ++= {
    // Determine OS version of JavaFX binaries
    lazy val osName = System.getProperty("os.name") match {
@@ -19,7 +19,6 @@ lazy val commonSettings = Seq(
      .map(m => "org.openjfx" % s"javafx-$m" % "21" classifier osName)
  },
  libraryDependencies += guice,
-  coverageEnabled := true,
  coverageFailOnMinimum := true,
  coverageMinimumStmtTotal := 85,
  coverageMinimumBranchTotal := 100
@@ -39,8 +38,10 @@ lazy val knockoutwhistweb = project.in(file("knockoutwhistweb"))
    commonSettings,
    libraryDependencies += "org.scalatestplus.play" %% "scalatestplus-play" % "7.0.2" % Test,
    libraryDependencies += "de.mkammerer" % "argon2-jvm" % "2.12",
-    libraryDependencies += "com.auth0" % "java-jwt" % "4.3.0",
-    libraryDependencies += "com.github.ben-manes.caffeine" % "caffeine" % "3.2.2"
+    libraryDependencies += "com.auth0" % "java-jwt" % "4.5.0",
+    libraryDependencies += "com.github.ben-manes.caffeine" % "caffeine" % "3.2.3",
+    libraryDependencies += "tools.jackson.module" %% "jackson-module-scala" % "3.0.2",
+    JsEngineKeys.engineType := JsEngineKeys.EngineType.Node
  )

 lazy val root = (project in file("."))
--- a/2
+++ b/2
--- a/knockoutwhistweb/app/assets/stylesheets/dark-mode.less
+++ b/knockoutwhistweb/app/assets/stylesheets/dark-mode.less
@@ -1,6 +1,14 @@
@media (prefers-color-scheme: dark) {
  :root {
-    --background-image: url('/assets/images/background.png');
-    --color: white;
+    --background-image: url('/assets/images/background.png') !important;
+    --color: #f8f9fa !important; /* Light text on dark bg */
+    --highlightscolor: rgba(131, 131, 131, 0.75) !important;
+    --background-color: #192734;
+    /* Bootstrap variable overrides for dark mode */
+    --bs-body-color: var(--color);
+    --bs-link-color: #66b2ff;
+    --bs-link-hover-color: #99ccff;
+    --bs-border-color: rgba(255, 255, 255, 0.2);
+    --bs-heading-color: var(--color);
  }
 }
--- a/knockoutwhistweb/app/assets/stylesheets/light-mode.less
+++ b/knockoutwhistweb/app/assets/stylesheets/light-mode.less
@@ -1,4 +1,6 @@
 :root {
  --background-image: url('/assets/images/img.png');
  --color: black;
+  --highlightscolor: rgba(0, 0, 0, 0.75);
+  --background-color: rgba(228, 232, 237, 1);
 }
--- a/knockoutwhistweb/app/assets/stylesheets/main.less
+++ b/knockoutwhistweb/app/assets/stylesheets/main.less
@@ -2,16 +2,94 @@
@import "dark-mode.less";
@import "login.less";

+/* Provide default (light) variables so the site works even if light-mode.less fails */
+:root {
+  --background-image: url('/assets/images/img.png');
+  --color: #212529; /* Bootstrap body text default */
+
+  /* Bootstrap variable overrides for light mode */
+  --bs-body-color: var(--color) !important;
+  --bs-link-color: #0d6efd !important;
+  --bs-link-hover-color: #0a58ca !important;
+  --bs-border-color: rgba(0, 0, 0, 0.125) !important;
+  --bs-heading-color: var(--color) !important;
+}
+
+@background-color: var(--background-color);
+@highlightcolor: var(--highlightscolor);
@background-image: var(--background-image);
@color: var(--color);
@keyframes slideIn {
-  0% { transform: translateX(-100vw); }
-  100% { transform: translateX(0); }
+  0% {
+    transform: translateX(-100vw);
  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
 .game-field-background {
  background-image: @background-image;
-    background-size: 100vw 100vh;
  background-repeat: no-repeat;
+  background-size: cover;
+  max-width: 1400px;
+  margin: 0 auto;
+  min-height: 100vh;
+}
+
+.lobby-background {
+  background-color: @background-color;
+  width: 100%;
+  height: 100vh;
+}
+
+.navbar-header {
+  text-align: center;
+}
+
+.navbar-toggle {
+  float: none;
+  margin-right: 0;
+}
+
+.handcard :hover {
+  box-shadow: 3px 3px 3px @highlightcolor;
+}
+
+.inactive::after {
+  content: "";
+  position: absolute;
+  inset: 0; /* cover the whole container */
+  background: rgba(0, 0, 0, 0.50);
+  z-index: 10;
+  border-radius: 6px;
+  pointer-events: none; /* user can't click through overlay */
+}
+
+.bottom-div {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 1400px;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  padding: 10px;
+}
+
+/* Ensure body text color follows theme variable and works with Bootstrap */
+body {
+  color: @color;
+}
+
+.footer {
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  color: @color;
+  padding: 0.5rem 0;
+  flex-grow: 1; /* fill remaining vertical space as visual footer background */
 }

 .game-field {
@@ -19,17 +97,28 @@
  inset: 0;
  overflow: auto;
 }
+
+.navbar-drop-shadow {
+  box-shadow: 0 1px 15px 0 #000000
+}
+
+.ingame-side-shadow {
+  box-shadow: 0 1px 15px 0 #000000
+}
+
 #sessions {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
+
  h1 {
    animation: slideIn 0.5s ease-out forwards;
    animation-fill-mode: backwards;
  }
 }
+
 #textanimation {
  animation: slideIn 0.5s ease-out forwards;
  animation-fill-mode: backwards;
@@ -41,6 +130,7 @@
  font-size: 40px;
  font-family: Arial, serif;
 }
+
 #ingame {
  display: flex;
  flex-direction: column;
@@ -48,45 +138,59 @@
  justify-content: flex-end;
  height: 100%;
 }
+
 #ingame a, #ingame h1, #ingame p {
  color: @color;
  font-size: 40px;
  font-family: Arial, serif;
 }
-#playercards {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    height: 20%;
-    img {
+
+.ingame-cards-slide {
+  div {
    animation: slideIn 0.5s ease-out forwards;
    animation-fill-mode: backwards;
-        &:nth-child(1) { animation-delay: 0.5s; }
-        &:nth-child(2) { animation-delay: 1s; }
-        &:nth-child(3) { animation-delay: 1.5s; }
-        &:nth-child(4) { animation-delay: 2s; }
-        &:nth-child(5) { animation-delay: 2.5s; }
-        &:nth-child(6) { animation-delay: 3s; }
-        &:nth-child(7) { animation-delay: 3.5s; }
+
+    &:nth-child(1) {
+      animation-delay: 0.5s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: 1s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 1.5s;
+    }
+
+    &:nth-child(4) {
+      animation-delay: 2s;
+    }
+
+    &:nth-child(5) {
+      animation-delay: 2.5s;
+    }
+
+    &:nth-child(6) {
+      animation-delay: 3s;
+    }
+
+    &:nth-child(7) {
+      animation-delay: 3.5s;
+    }
  }
 }

-
-#cardsplayed {
-    display: flex;
-    flex-direction: row;
-    height: 10%;
-    min-height: 10%
-}
 #playedcardplayer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
 }
+
 #playedcardplayer p {
  font-size: 12px;
  height: 4%;
 }
+
 #playedcardplayer img {
  height: 90%;
 }
@@ -98,45 +202,95 @@
  width: 100%;
  justify-content: space-between;
 }
+
 #firstCardObject {
  display: flex;
  flex-direction: column;
  margin-right: 4%;
 }
+
 #firstCardObject img {
  height: 90%;
 }
+
 #firstCardObject p {
  height: 10%;
  font-size: 20px;

 }
-#trumpsuit {
-    display: flex;
-    flex-direction: row;
-    margin-left: 4%;
-}
-#nextPlayers {
+
+#next-players-container {
  display: flex;
  flex-direction: column;
-    align-items: center;
+  align-items: flex-start;
  height: 0;
+
  p {
    margin-top: 0;
    margin-bottom: 0;
  }
 }
-#invisible {
-    visibility: hidden;
-}
+
 #selecttrumpsuit {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
 }
+
 #rules {
  color: @color;
  font-size: 1.5em;
  font-family: Arial, serif;
 }
+
+.score-table {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.score-header {
+  font-weight: bold;
+  color: #000000;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.score-row {
+  color: #000000;
+}
+
+/* In-game centered stage and blurred sides overlay */
+.ingame-stage {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+}
+
+/* Wrapper that adds a backdrop blur to the background outside the centered card */
+.blur-sides {
+  position: relative;
+}
+
+/* Create an overlay that blurs everything behind it, except the central content area */
+.blur-sides::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  /* fallback: subtle vignette if backdrop-filter unsupported */
+  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.35) 100%);
+}
+
+@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
+  .blur-sides::before {
+    background: rgba(0, 0, 0, 0.08);
+    -webkit-backdrop-filter: blur(10px) saturate(110%);
+    backdrop-filter: blur(10px) saturate(110%);
+  }
+}
--- a/knockoutwhistweb/app/auth/AuthAction.scala
+++ b/knockoutwhistweb/app/auth/AuthAction.scala
@@ -15,13 +15,6 @@ class AuthAction @Inject()(val sessionManager: SessionManager, val parser: BodyP

  override def executionContext: ExecutionContext = ec

-  private def getUserFromSession(request: RequestHeader): Option[User] = {
-    val session = request.cookies.get("sessionId")
-    if (session.isDefined)
-      return sessionManager.getUserBySession(session.get.value)
-    None
-  }
-  
  override def invokeBlock[A](
                               request: Request[A],
                               block: AuthenticatedRequest[A] => Future[Result]
@@ -33,5 +26,12 @@ class AuthAction @Inject()(val sessionManager: SessionManager, val parser: BodyP
        Future.successful(Results.Redirect(routes.UserController.login()))
    }
  }
+
+  protected def getUserFromSession(request: RequestHeader): Option[User] = {
+    val session = request.cookies.get("sessionId")
+    if (session.isDefined)
+      return sessionManager.getUserBySession(session.get.value)
+    None
+  }
 }

--- a/knockoutwhistweb/app/components/WebApplicationConfiguration.scala
+++ b/knockoutwhistweb/app/components/WebApplicationConfiguration.scala
@@ -2,11 +2,13 @@ package components

 import de.knockoutwhist.components.DefaultConfiguration
 import de.knockoutwhist.ui.UI
+import de.knockoutwhist.utils.DelayHandler
 import de.knockoutwhist.utils.events.EventListener

 class WebApplicationConfiguration extends DefaultConfiguration {

  override def uis: Set[UI] = Set()
-  override def listener: Set[EventListener] = Set()
+
+  override def listener: Set[EventListener] = Set(DelayHandler)

 }
--- a/knockoutwhistweb/app/controllers/IngameController.scala
+++ b/knockoutwhistweb/app/controllers/IngameController.scala
@@ -1,59 +1,50 @@
 package controllers

 import auth.{AuthAction, AuthenticatedRequest}
-import de.knockoutwhist.control.GameState.{InGame, Lobby, SelectTrump, TieBreak}
-import exceptions.{CantPlayCardException, GameFullException, NotEnoughPlayersException, NotHostException, NotInThisGameException}
+import de.knockoutwhist.control.GameState
+import de.knockoutwhist.control.GameState.*
+import exceptions.*
 import logic.PodManager
-import model.sessions.{PlayerSession, UserSession}
+import logic.game.GameLobby
+import model.sessions.UserSession
+import model.users.User
 import play.api.*
+import play.api.libs.json.{JsValue, Json}
 import play.api.mvc.*
+import play.twirl.api.Html
+import util.GameUtil

+import java.util.UUID
 import javax.inject.*
+import scala.concurrent.ExecutionContext
 import scala.util.Try

-
-/**
- * This controller creates an `Action` to handle HTTP requests to the
- * application's home page.
- */
@Singleton
 class IngameController @Inject()(
-                                  val controllerComponents: ControllerComponents,
+                                  val cc: ControllerComponents,
                                  val authAction: AuthAction,
-                                  val podManager: PodManager
-                                ) extends BaseController {
+                                  implicit val ec: ExecutionContext
+                                ) extends AbstractController(cc) {

  def game(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
    game match {
      case Some(g) =>
-        g.logic.getCurrentState match {
-          case Lobby => Ok("Lobby: " + gameId)
-          case InGame =>
-            Ok(views.html.ingame.ingame(
-              g.getPlayerByUser(request.user),
-              g.logic
-            ))
-          case SelectTrump =>
-            Ok(views.html.ingame.selecttrump(
-              g.getPlayerByUser(request.user),
-              g.logic
-            ))
-          case TieBreak =>
-            Ok(views.html.ingame.tie(
-              g.getPlayerByUser(request.user),
-              g.logic
-            ))
-          case _ =>
-            InternalServerError(s"Invalid game state for in-game view. GameId: $gameId" + s" State: ${g.logic.getCurrentState}")
+        val results = Try {
+          IngameController.returnInnerHTML(g, g.logic.getCurrentState, request.user)
+        }
+        if (results.isSuccess) {
+          Ok(views.html.main("Knockout Whist - " + GameUtil.stateToTitle(g.logic.getCurrentState))(results.get))
+        } else {
+          InternalServerError(results.failed.get.getMessage)
        }
      case None =>
-        NotFound("Game not found")
+        Redirect(routes.MainMenuController.mainMenu())
    }
-    //NotFound(s"Reached end of game method unexpectedly. GameId: $gameId")
  }
+
  def startGame(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
    val result = Try {
      game match {
        case Some(g) =>
@@ -63,52 +54,84 @@ class IngameController @Inject()(
      }
    }
    if (result.isSuccess) {
-      NoContent
+      Ok(Json.obj(
+        "status" -> "success",
+        "redirectUrl" -> routes.IngameController.game(gameId).url,
+        "content" -> IngameController.returnInnerHTML(game.get, game.get.logic.getCurrentState, request.user).toString()
+      ))
    } 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 joinGame(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+
+  def kickPlayer(gameId: String, playerToKick: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
+    val game = PodManager.getGame(gameId)
+    val playerToKickUUID = UUID.fromString(playerToKick)
    val result = Try {
-      game match {
-        case Some(g) =>
-          g.addUser(request.user)
-        case None =>
-          NotFound("Game not found")
-      }
+      game.get.leaveGame(playerToKickUUID, true)
    }
    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 _: GameFullException =>
-          BadRequest(throwable.getMessage)
-        case _: IllegalArgumentException =>
-          BadRequest(throwable.getMessage)
-        case _: IllegalStateException =>
-          BadRequest(throwable.getMessage)
-        case _ =>
-          InternalServerError(throwable.getMessage)
+      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)
+    val result = Try {
+      game.get.leaveGame(request.user.id, false)
    }
+    if (result.isSuccess) {
+      Ok(Json.obj(
+        "status" -> "success",
+        "redirectUrl" -> routes.MainMenuController.mainMenu().url,
+        "content" -> views.html.mainmenu.creategame(Some(request.user)).toString
+      ))
+    } else {
+      InternalServerError(Json.obj(
+        "status" -> "failure",
+        "errorMessage" -> "Something went wrong."
+      ))
+    }
+  }
+
  def playCard(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] => {
-    val game = podManager.getGame(gameId)
+    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
@@ -120,35 +143,67 @@ class IngameController @Inject()(
            }
            optSession.foreach(_.lock.unlock())
            if (result.isSuccess) {
-              NoContent
+              Ok(Json.obj(
+                "status" -> "success"
+              ))
            } 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 _: NotInteractableException =>
+                  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"
+        ))
    }
  }
  }
+
  def playDogCard(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] => {
-    val game = podManager.getGame(gameId)
+    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]
+        }
        var optSession: Option[UserSession] = None
        val result = Try {
          cardIdOpt match {
@@ -173,15 +228,30 @@ class IngameController @Inject()(
          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
+              ))
          }
        }
      }
@@ -190,11 +260,15 @@ class IngameController @Inject()(
    }
  }
  }
+
  def playTrump(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
    game match {
      case Some(g) =>
-        val trumpOpt = request.body.asFormUrlEncoded.flatMap(_.get("trump").flatMap(_.headOption))
+        val jsonBody = request.body.asJson
+        val trumpOpt: Option[String] = jsonBody.flatMap { jsValue =>
+          (jsValue \ "trump").asOpt[String]
+        }
        trumpOpt match {
          case Some(trump) =>
            var optSession: Option[UserSession] = None
@@ -211,13 +285,25 @@ class IngameController @Inject()(
              val throwable = result.failed.get
              throwable match {
                case _: IllegalArgumentException =>
-                  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 _: 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 =>
@@ -227,11 +313,15 @@ class IngameController @Inject()(
        NotFound("Game not found")
    }
  }
+
  def playTie(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
    game match {
      case Some(g) =>
-        val tieOpt = request.body.asFormUrlEncoded.flatMap(_.get("tie").flatMap(_.headOption))
+        val jsonBody = request.body.asJson
+        val tieOpt: Option[String] = jsonBody.flatMap { jsValue =>
+          (jsValue \ "tie").asOpt[String]
+        }
        tieOpt match {
          case Some(tie) =>
            var optSession: Option[UserSession] = None
@@ -248,13 +338,25 @@ class IngameController @Inject()(
              val throwable = result.failed.get
              throwable match {
                case _: IllegalArgumentException =>
-                  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 _: 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 =>
@@ -265,4 +367,78 @@ class IngameController @Inject()(
    }
  }

+
+  def returnToLobby(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
+    val game = PodManager.getGame(gameId)
+    game match {
+      case Some(g) =>
+        val result = Try {
+          val session = g.getUserSession(request.user.id)
+          g.returnToLobby(session)
+        }
+        if (result.isSuccess) {
+          Ok(Json.obj(
+            "status" -> "success",
+            "redirectUrl" -> routes.IngameController.game(gameId).url
+          ))
+        } else {
+          val throwable = result.failed.get
+          throwable match {
+            case _: NotInThisGameException =>
+              BadRequest(Json.obj(
+                "status" -> "failure",
+                "errorMessage" -> throwable.getMessage
+              ))
+            case _: IllegalStateException =>
+              BadRequest(Json.obj(
+                "status" -> "failure",
+                "errorMessage" -> throwable.getMessage
+              ))
+            case _ =>
+              InternalServerError(Json.obj(
+                "status" -> "failure",
+                "errorMessage" -> throwable.getMessage
+              ))
+          }
+        }
+      case None =>
+        NotFound(Json.obj(
+          "status" -> "failure",
+          "errorMessage" -> "Game not found"
+        ))
+    }
+  }
+  
+}
+
+object IngameController {
+
+  def returnInnerHTML(gameLobby: GameLobby, gameState: GameState, user: User): Html = {
+    gameState match {
+      case Lobby => views.html.lobby.lobby(Some(user), gameLobby)
+      case InGame =>
+        views.html.ingame.ingame(
+          gameLobby.getPlayerByUser(user),
+          gameLobby
+        )
+      case SelectTrump =>
+        views.html.ingame.selecttrump(
+          gameLobby.getPlayerByUser(user),
+          gameLobby
+        )
+      case TieBreak =>
+        views.html.ingame.tie(
+          gameLobby.getPlayerByUser(user),
+          gameLobby
+        )
+      case FinishedMatch =>
+        views.html.ingame.finishedMatch(
+          Some(user),
+          gameLobby
+        )
+      case _ =>
+        throw new IllegalStateException(s"Invalid game state for in-game view. GameId: ${gameLobby.id}" + s" State: ${gameLobby.logic.getCurrentState}")
+    }
+  }
+  
 }
--- a/knockoutwhistweb/app/controllers/JavaScriptRoutingController.scala
+++ b/knockoutwhistweb/app/controllers/JavaScriptRoutingController.scala
@@ -0,0 +1,24 @@
+package controllers
+
+import auth.AuthAction
+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,
+                                           ) extends BaseController {
+  def javascriptRoutes(): Action[AnyContent] =
+    Action { implicit request =>
+      Ok(
+        JavaScriptReverseRouter("jsRoutes")(
+          routes.javascript.MainMenuController.createGame,
+          routes.javascript.MainMenuController.joinGame,
+          routes.javascript.MainMenuController.navSPA,
+          routes.javascript.UserController.login_Post
+        )
+      ).as("text/javascript")
+    }
+}
--- a/knockoutwhistweb/app/controllers/MainMenuController.scala
+++ b/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.*
@@ -15,13 +16,12 @@ import javax.inject.*
@Singleton
 class MainMenuController @Inject()(
                                    val controllerComponents: ControllerComponents,
-                                    val authAction: AuthAction,
-                                    val podManager: PodManager
+                                    val authAction: AuthAction
                                  ) extends BaseController {

  // Pass the request-handling function directly to authAction (no nested Action)
  def mainMenu(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    Ok(views.html.mainmenu.navbar(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] =>
@@ -29,33 +29,86 @@ class MainMenuController @Inject()(
  }

  def createGame(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val gameLobby = podManager.createGame(
+    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."))
+
+      val gameLobby = PodManager.createGame(
        host = request.user,
-      name = s"${request.user.name}'s Game",
-      maxPlayers = 4
+        name = gamename,
+        maxPlayers = playeramount.toInt
      )
-    Redirect(routes.IngameController.game(gameLobby.id))
+      Ok(Json.obj(
+        "status" -> "success",
+        "redirectUrl" -> routes.IngameController.game(gameLobby.id).url,
+        "content" -> IngameController.returnInnerHTML(gameLobby, gameLobby.logic.getCurrentState, request.user).toString
+      ))
+    } else {
+      BadRequest(Json.obj(
+        "status" -> "failure",
+        "errorMessage" -> "Invalid form submission"
+      ))
+    }
+
  }

  def joinGame(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val postData = request.body.asFormUrlEncoded
-    if (postData.isDefined) {
-      val gameId = postData.get.get("gameId").flatMap(_.headOption).getOrElse("")
-      val game = podManager.getGame(gameId)
+    val jsonBody = request.body.asJson
+    val gameId: Option[String] = jsonBody.flatMap { jsValue =>
+      (jsValue \ "gameId").asOpt[String]
+    }
+    if (gameId.isDefined) {
+      val game = PodManager.getGame(gameId.get)
      game match {
        case Some(g) =>
-          Redirect(routes.IngameController.joinGame(gameId))
+          g.addUser(request.user)
+          Ok(Json.obj(
+            "status" -> "success",
+            "redirectUrl" -> routes.IngameController.game(g.id).url,
+            "content" -> IngameController.returnInnerHTML(g, g.logic.getCurrentState, request.user).toString
+          ))
        case None =>
-          NotFound("Game not found")
+          NotFound(Json.obj(
+            "status" -> "failure",
+            "errorMessage" -> "No Game found"
+          ))
      }
    } else {
-      BadRequest("Invalid form submission")
+      BadRequest(Json.obj(
+        "status" -> "failure",
+        "errorMessage" -> "Invalid form submission"
+      ))
    }
  }

-  def rules(): Action[AnyContent] = {
-    Action { implicit request =>
-      Ok(views.html.mainmenu.rules())
+  def rules(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
+    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"
+        ))
    }
  }
+
 }
--- a/knockoutwhistweb/app/controllers/UserController.scala
+++ b/knockoutwhistweb/app/controllers/UserController.scala
@@ -3,6 +3,7 @@ package controllers
 import auth.{AuthAction, AuthenticatedRequest}
 import logic.user.{SessionManager, UserManager}
 import play.api.*
+import play.api.libs.json.Json
 import play.api.mvc.*

 import javax.inject.*
@@ -28,28 +29,35 @@ class UserController @Inject()(
        if (possibleUser.isDefined) {
          Redirect(routes.MainMenuController.mainMenu())
        } else {
-          Ok(views.html.login.login())
+          Ok(views.html.main("Login")(views.html.login.login()))
        }
      } else {
-        Ok(views.html.login.login())
+        Ok(views.html.main("Login")(views.html.login.login()))
      }
    }
  }

  def login_Post(): Action[AnyContent] = {
    Action { implicit request =>
-      val postData = request.body.asFormUrlEncoded
-      if (postData.isDefined) {
+      val jsonBody = request.body.asJson
+      val username: Option[String] = jsonBody.flatMap { jsValue =>
+        (jsValue \ "username").asOpt[String]
+      }
+      val password: Option[String] = jsonBody.flatMap { jsValue =>
+        (jsValue \ "password").asOpt[String]
+      }
+      if (username.isDefined && password.isDefined) {
        // Extract username and password from form data
-        val username = postData.get.get("username").flatMap(_.headOption).getOrElse("")
-        val password = postData.get.get("password").flatMap(_.headOption).getOrElse("")
-        val possibleUser = userManager.authenticate(username, password)
+        val possibleUser = userManager.authenticate(username.get, password.get)
        if (possibleUser.isDefined) {
-          Redirect(routes.MainMenuController.mainMenu()).withCookies(
+          Ok(Json.obj(
+            "status" -> "success",
+            "redirectUrl" -> routes.MainMenuController.mainMenu().url,
+            "content" -> views.html.mainmenu.creategame(possibleUser).toString
+          )).withCookies(
            Cookie("sessionId", sessionManager.createSession(possibleUser.get))
          )
        } else {
-          println("Failed login attempt for user: " + username)
          Unauthorized("Invalid username or password")
        }
      } else {
--- a/knockoutwhistweb/app/controllers/WebsocketController.scala
+++ b/knockoutwhistweb/app/controllers/WebsocketController.scala
@@ -0,0 +1,45 @@
+package controllers
+
+
+import auth.AuthAction
+import logic.PodManager
+import logic.user.SessionManager
+import model.sessions.{UserSession, UserWebsocketActor}
+import org.apache.pekko.actor.{ActorRef, ActorSystem, Props}
+import org.apache.pekko.stream.Materializer
+import play.api.*
+import play.api.libs.streams.ActorFlow
+import play.api.mvc.*
+
+import javax.inject.*
+
+
+@Singleton
+class WebsocketController @Inject()(
+                                     cc: ControllerComponents,
+                                     val sessionManger: SessionManager,
+                                   )(implicit system: ActorSystem, mat: Materializer) extends AbstractController(cc) {
+
+  def socket(): WebSocket = WebSocket.accept[String, String] { request =>
+    val session = request.cookies.get("sessionId")
+    if (session.isEmpty) throw new Exception("No session cookie found")
+    val userOpt = sessionManger.getUserBySession(session.get.value)
+    if (userOpt.isEmpty) throw new Exception("Invalid session")
+    val user = userOpt.get
+    val game = PodManager.identifyGameOfUser(user)
+    if (game.isEmpty) throw new Exception("User is not in a game")
+    val userSession = game.get.getUserSession(user.id)
+    ActorFlow.actorRef { out =>
+      println("Connect received")
+      KnockOutWebSocketActorFactory.create(out, userSession)
+    }
+  }
+
+  object KnockOutWebSocketActorFactory {
+    def create(out: ActorRef, userSession: UserSession): Props = {
+      Props(new UserWebsocketActor(out, userSession))
+    }
+  }
+
+
+}
--- a/knockoutwhistweb/app/events/KickEvent.scala
+++ b/knockoutwhistweb/app/events/KickEvent.scala
@@ -0,0 +1,9 @@
+package events
+
+import model.users.User
+
+case class KickEvent(user: User) extends UserEvent(user) {
+  
+  override def id: String = "KickEvent"
+
+}
--- a/knockoutwhistweb/app/events/LeftEvent.scala
+++ b/knockoutwhistweb/app/events/LeftEvent.scala
@@ -0,0 +1,9 @@
+package events
+
+import model.users.User
+
+case class LeftEvent(user: User) extends UserEvent(user) {
+
+  override def id: String = "LeftEvent"
+  
+}
--- a/knockoutwhistweb/app/events/LobbyUpdateEvent.scala
+++ b/knockoutwhistweb/app/events/LobbyUpdateEvent.scala
@@ -0,0 +1,9 @@
+package events
+
+import de.knockoutwhist.utils.events.SimpleEvent
+
+case class LobbyUpdateEvent() extends SimpleEvent {
+
+  override def id: String = "LobbyUpdateEvent"
+  
+}
--- a/knockoutwhistweb/app/events/UserEvent.scala
+++ b/knockoutwhistweb/app/events/UserEvent.scala
@@ -0,0 +1,12 @@
+package events
+
+import de.knockoutwhist.utils.events.SimpleEvent
+import model.users.User
+
+import java.util.UUID
+
+abstract class UserEvent(user: User) extends SimpleEvent {
+
+  def userId: UUID = user.id
+  
+}
--- a/knockoutwhistweb/app/logic/PodManager.scala
+++ b/knockoutwhistweb/app/logic/PodManager.scala
@@ -11,14 +11,14 @@ import util.GameUtil
 import javax.inject.Singleton
 import scala.collection.mutable

-@Singleton
-class PodManager {
+object PodManager {

  val TTL: Long = System.currentTimeMillis() + 86400000L // 24 hours in milliseconds
  val podIp: String = System.getenv("POD_IP")
  val podName: String = System.getenv("POD_NAME")

  private val sessions: mutable.Map[String, GameLobby] = mutable.Map()
+  private val userSession: mutable.Map[User, String] = mutable.Map()
  private val injector: Injector = Guice.createInjector(KnockOutWebConfigurationModule())

  def createGame(
@@ -35,6 +35,7 @@ class PodManager {
      host = host
    )
    sessions += (gameLobby.id -> gameLobby)
+    userSession += (host -> gameLobby.id)
    gameLobby
  }

@@ -42,8 +43,31 @@ class PodManager {
    sessions.get(gameId)
  }

-  private[logic] def removeGame(gameId: String): Unit = {
-    sessions.remove(gameId)
+  def registerUserToGame(user: User, gameId: String): Boolean = {
+    if (sessions.contains(gameId)) {
+      userSession += (user -> gameId)
+      true
+    } else {
+      false
+    }
  }

+  def unregisterUserFromGame(user: User): Unit = {
+    userSession.remove(user)
+  }
+
+  def identifyGameOfUser(user: User): Option[GameLobby] = {
+    userSession.get(user) match {
+      case Some(gameId) => sessions.get(gameId)
+      case None => None
+    }
+  }
+
+  private[logic] def removeGame(gameId: String): Unit = {
+    sessions.remove(gameId)
+    // Also remove all user sessions associated with this game
+    userSession.filterInPlace((_, v) => v != gameId)
+  }
+
+
 }
--- a/knockoutwhistweb/app/logic/game/GameLobby.scala
+++ b/knockoutwhistweb/app/logic/game/GameLobby.scala
@@ -10,11 +10,14 @@ import de.knockoutwhist.player.Playertype.HUMAN
 import de.knockoutwhist.player.{AbstractPlayer, PlayerFactory}
 import de.knockoutwhist.rounds.{Match, Round, Trick}
 import de.knockoutwhist.utils.events.{EventListener, SimpleEvent}
+import events.{KickEvent, LeftEvent, LobbyUpdateEvent, UserEvent}
 import exceptions.*
+import logic.PodManager
 import model.sessions.{InteractionType, UserSession}
 import model.users.User
+import play.api.libs.json.{JsObject, Json}

-import java.util.UUID
+import java.util.{Timer, TimerTask, UUID}
 import scala.collection.mutable
 import scala.collection.mutable.ListBuffer

@@ -25,10 +28,11 @@ class GameLobby private(
                         val name: String,
                         val maxPlayers: Int
                       ) extends EventListener {
-  logic.addListener(this)
-  logic.createSession()
+

  private val users: mutable.Map[UUID, UserSession] = mutable.Map()
+  logic.addListener(this)
+  logic.createSession()

  def addUser(user: User): UserSession = {
    if (users.size >= maxPlayers) throw new GameFullException("The game is full!")
@@ -36,9 +40,12 @@ class GameLobby private(
    if (logic.getCurrentState != Lobby) throw new IllegalStateException("The game has already started!")
    val userSession = new UserSession(
      user = user,
-      host = false
+      host = false,
+      gameLobby = this
    )
    users += (user.id -> userSession)
+    PodManager.registerUserToGame(user, id)
+    logic.invoke(LobbyUpdateEvent())
    userSession
  }

@@ -46,13 +53,13 @@ class GameLobby private(
    event match {
      case event: PlayerEvent =>
        users.get(event.playerId).foreach(session => session.updatePlayer(event))
+      case event: UserEvent =>
+        users.get(event.userId).foreach(session => session.updatePlayer(event))
      case event: GameStateChangeEvent =>
        if (event.oldState == MainMenu && event.newState == Lobby) {
          return
        }
        users.values.foreach(session => session.updatePlayer(event))
-      case event: SessionClosed =>
-        users.values.foreach(session => session.updatePlayer(event))
      case event: SimpleEvent =>
        users.values.foreach(session => session.updatePlayer(event))
    }
@@ -60,6 +67,7 @@ class GameLobby private(

  /**
   * Start the game if the user is the host.
+   *
   * @param user the user who wants to start the game.
   */
  def startGame(user: User): Unit = {
@@ -86,18 +94,34 @@ class GameLobby private(

  /**
   * Remove the user from the game lobby.
+   *
   * @param user the user who wants to leave the game.
+   * @param kicked whether the user was kicked or left voluntarily.
   */
-  def leaveGame(user: User): Unit = {
-    val sessionOpt = users.get(user.id)
+  def leaveGame(userId: UUID, kicked: Boolean): Unit = {
+    val sessionOpt = users.get(userId)
    if (sessionOpt.isEmpty) {
      throw new NotInThisGameException("You are not in this game!")
    }
-    users.remove(user.id)
+    if (sessionOpt.get.host) {
+      logic.invoke(SessionClosed())
+      users.clear()
+      PodManager.removeGame(id)
+      return
+    }
+    if (kicked) {
+      logic.invoke(KickEvent(sessionOpt.get.user))
+    } else {
+      logic.invoke(LeftEvent(sessionOpt.get.user))
+    }
+    users.remove(userId)
+    PodManager.unregisterUserFromGame(sessionOpt.get.user)
+    logic.invoke(LobbyUpdateEvent())
  }

  /**
   * Play a card from the player's hand.
+   *
   * @param userSession the user session of the player.
   * @param cardIndex   the index of the card in the player's hand.
   */
@@ -115,85 +139,6 @@ class GameLobby private(
    logic.playerInputLogic.receivedCard(card)
  }

-  /**
-   * Play a card from the player's hand while in dog life or skip the round.
-   * @param userSession the user session of the player.
-   * @param cardIndex the index of the card in the player's hand or -1 if the player wants to skip the round.
-   */
-  def playDogCard(userSession: UserSession, cardIndex: Int): Unit = {
-    val player = getPlayerInteractable(userSession, InteractionType.DogCard)
-    if (!player.isInDogLife) {
-      throw new CantPlayCardException("You are not in dog life!")
-    }
-    if (cardIndex == -1) {
-      if (!MatchUtil.dogNeedsToPlay(getMatch, getRound)) {
-        throw new CantPlayCardException("You can't skip this round!")
-      }
-      logic.playerInputLogic.receivedDog(None)
-    }
-    val hand = getHand(player)
-    val card = hand.cards(cardIndex)
-    userSession.resetCanInteract()
-    logic.playerInputLogic.receivedDog(Some(card))
-  }
-
-  /**
-   * Select the trump suit for the round.
-   * @param userSession the user session of the player.
-   * @param trumpIndex the index of the trump suit.
-   */
-  def selectTrump(userSession: UserSession, trumpIndex: Int): Unit = {
-    val player = getPlayerInteractable(userSession, InteractionType.TrumpSuit)
-    val trumpSuits = Suit.values.toList
-    val selectedTrump = trumpSuits(trumpIndex)
-    userSession.resetCanInteract()
-    logic.playerInputLogic.receivedTrumpSuit(selectedTrump)
-  }
-
-  /**
-   * 
-   * @param userSession
-   * @param tieNumber
-   */
-  def selectTie(userSession: UserSession, tieNumber: Int): Unit = {
-    val player = getPlayerInteractable(userSession, InteractionType.TieChoice)
-    userSession.resetCanInteract()
-    logic.playerTieLogic.receivedTieBreakerCard(tieNumber)
-  }
-
-  
-  //-------------------
-  
-  def getUserSession(userId: UUID): UserSession = {
-    val sessionOpt = users.get(userId)
-    if (sessionOpt.isEmpty) {
-      throw new NotInThisGameException("You are not in this game!")
-    }
-    sessionOpt.get
-  }
-
-  def getPlayerByUser(user: User): AbstractPlayer = {
-    getPlayerBySession(getUserSession(user.id))
-  }
-
-  private def getPlayerBySession(userSession: UserSession): AbstractPlayer = {
-    val playerOption = getMatch.totalplayers.find(_.id == userSession.id)
-    if (playerOption.isEmpty) {
-      throw new NotInThisGameException("You are not in this game!")
-    }
-    playerOption.get
-  }
-  
-  private def getPlayerInteractable(userSession: UserSession, iType: InteractionType): AbstractPlayer = {
-    if (!userSession.lock.isHeldByCurrentThread) {
-      throw new IllegalStateException("The user session is not locked!")
-    }
-    if (userSession.canInteract.isEmpty || userSession.canInteract.get != iType) {
-      throw new NotInteractableException("You can't play a card!")
-    }
-    getPlayerBySession(userSession)
-  }
-  
  private def getHand(player: AbstractPlayer): Hand = {
    val handOption = player.currentHand()
    if (handOption.isEmpty) {
@@ -202,14 +147,6 @@ class GameLobby private(
    handOption.get
  }

-  private def getMatch: Match = {
-    val matchOpt = logic.getCurrentMatch
-    if (matchOpt.isEmpty) {
-      throw new IllegalStateException("No match is currently running!")
-    }
-    matchOpt.get
-  }
-
  private def getRound: Round = {
    val roundOpt = logic.getCurrentRound
    if (roundOpt.isEmpty) {
@@ -226,6 +163,127 @@ class GameLobby private(
    trickOpt.get
  }

+  /**
+   * Play a card from the player's hand while in dog life or skip the round.
+   *
+   * @param userSession the user session of the player.
+   * @param cardIndex   the index of the card in the player's hand or -1 if the player wants to skip the round.
+   */
+  def playDogCard(userSession: UserSession, cardIndex: Int): Unit = {
+    val player = getPlayerInteractable(userSession, InteractionType.DogCard)
+    if (!player.isInDogLife) {
+      throw new CantPlayCardException("You are not in dog life!")
+    }
+    if (cardIndex == -1) {
+      if (MatchUtil.dogNeedsToPlay(getMatch, getRound)) {
+        throw new CantPlayCardException("You can't skip this round!")
+      }
+      logic.playerInputLogic.receivedDog(None)
+      return
+    }
+    val hand = getHand(player)
+    val card = hand.cards(cardIndex)
+    userSession.resetCanInteract()
+    logic.playerInputLogic.receivedDog(Some(card))
+  }
+
+  /**
+   * Select the trump suit for the round.
+   *
+   * @param userSession the user session of the player.
+   * @param trumpIndex  the index of the trump suit.
+   */
+  def selectTrump(userSession: UserSession, trumpIndex: Int): Unit = {
+    val player = getPlayerInteractable(userSession, InteractionType.TrumpSuit)
+    val trumpSuits = Suit.values.toList
+    val selectedTrump = trumpSuits(trumpIndex)
+    userSession.resetCanInteract()
+    logic.playerInputLogic.receivedTrumpSuit(selectedTrump)
+  }
+
+
+  //-------------------
+
+  private def getPlayerInteractable(userSession: UserSession, iType: InteractionType): AbstractPlayer = {
+    if (!userSession.lock.isHeldByCurrentThread) {
+      throw new IllegalStateException("The user session is not locked!")
+    }
+    if (userSession.canInteract.isEmpty || userSession.canInteract.get != iType) {
+      throw new NotInteractableException("You can't play a card!")
+    }
+    getPlayerBySession(userSession)
+  }
+
+  /**
+   *
+   * @param userSession
+   * @param tieNumber
+   */
+  def selectTie(userSession: UserSession, tieNumber: Int): Unit = {
+    val player = getPlayerInteractable(userSession, InteractionType.TieChoice)
+    userSession.resetCanInteract()
+    logic.playerTieLogic.receivedTieBreakerCard(tieNumber)
+  }
+
+  def returnToLobby(userSession: UserSession): Unit = {
+    if (!users.contains(userSession.id)) {
+      throw new NotInThisGameException("You are not in this game!")
+    }
+    val session = users(userSession.id)
+    if (session != userSession) {
+      throw new IllegalArgumentException("User session does not match!")
+    }
+    if (!session.host)
+      throw new NotHostException("Only the host can return to the lobby!")
+    logic.createSession()
+  }
+
+  def getPlayerByUser(user: User): AbstractPlayer = {
+    getPlayerBySession(getUserSession(user.id))
+  }
+
+  def getUserSession(userId: UUID): UserSession = {
+    val sessionOpt = users.get(userId)
+    if (sessionOpt.isEmpty) {
+      throw new NotInThisGameException("You are not in this game!")
+    }
+    sessionOpt.get
+  }
+
+  private def getPlayerBySession(userSession: UserSession): AbstractPlayer = {
+    val playerOption = getMatch.totalplayers.find(_.id == userSession.id)
+    if (playerOption.isEmpty) {
+      throw new NotInThisGameException("You are not in this game!")
+    }
+    playerOption.get
+  }
+
+  private def getMatch: Match = {
+    val matchOpt = logic.getCurrentMatch
+    if (matchOpt.isEmpty) {
+      throw new IllegalStateException("No match is currently running!")
+    }
+    matchOpt.get
+  }
+
+  def getPlayers: mutable.Map[UUID, UserSession] = {
+    users.clone()
+  }
+
+  def getLogic: GameLogic = {
+    logic
+  }
+
+  def getUsers: Set[User] = {
+    users.values.map(d => d.user).toSet
+  }
+
+  private def transmitToAll(event: JsObject): Unit = {
+    users.values.foreach(session => {
+      session.websocketActor.foreach(act => act.transmitJsonToClient(event))
+    })
+  }
+
 }

 object GameLobby {
@@ -246,7 +304,8 @@ object GameLobby {
    )
    lobby.users += (host.id -> new UserSession(
      user = host,
-      host = true
+      host = true,
+      gameLobby = lobby
    ))
    lobby
  }
--- a/knockoutwhistweb/app/logic/user/SessionManager.scala
+++ b/knockoutwhistweb/app/logic/user/SessionManager.scala
@@ -8,7 +8,9 @@ import model.users.User
 trait SessionManager {

  def createSession(user: User): String
+
  def getUserBySession(sessionId: String): Option[User]
+
  def invalidateSession(sessionId: String): Unit

 }
--- a/knockoutwhistweb/app/logic/user/UserManager.scala
+++ b/knockoutwhistweb/app/logic/user/UserManager.scala
@@ -8,9 +8,13 @@ import model.users.User
 trait UserManager {

  def addUser(name: String, password: String): Boolean
+
  def authenticate(name: String, password: String): Option[User]
+
  def userExists(name: String): Option[User]
+
  def userExistsById(id: Long): Option[User]
+
  def removeUser(name: String): Boolean

 }
--- a/knockoutwhistweb/app/logic/user/impl/BaseSessionManager.scala
+++ b/knockoutwhistweb/app/logic/user/impl/BaseSessionManager.scala
@@ -13,6 +13,7 @@ import java.time.Instant
 import java.time.temporal.ChronoUnit
 import java.util.concurrent.TimeUnit
 import javax.inject.{Inject, Singleton}
+import scala.util.Try

@Singleton
 class BaseSessionManager @Inject()(val keyProvider: JwtKeyProvider, val userManager: StubUserManager, val config: Config) extends SessionManager {
@@ -44,16 +45,22 @@ class BaseSessionManager @Inject()(val keyProvider: JwtKeyProvider, val userMana
  }

  override def getUserBySession(sessionId: String): Option[User] = {
-    //TODO verify JWT token instead of looking up in cache
    val cachedUser = cache.getIfPresent(sessionId)
    if (cachedUser != null) {
      Some(cachedUser)
    } else {
+      val result = Try {
        val decoded = verifier.verify(sessionId)
        val user = userManager.userExistsById(decoded.getClaim("id").asLong())
        user.foreach(u => cache.put(sessionId, u))
        user
      }
+      if (result.isSuccess) {
+        result.get
+      } else {
+        None
+      }
+    }
  }

  override def invalidateSession(sessionId: String): Unit = {
--- a/knockoutwhistweb/app/logic/user/impl/StubUserManager.scala
+++ b/knockoutwhistweb/app/logic/user/impl/StubUserManager.scala
@@ -22,6 +22,12 @@ class StubUserManager @Inject()(val config: Config) extends UserManager {
      id = java.util.UUID.fromString("223e4567-e89b-12d3-a456-426614174000"),
      name = "Leon",
      passwordHash = UserHash.hashPW("password123")
+    ),
+    "Jakob" -> User(
+      internalId = 2L,
+      id = java.util.UUID.fromString("323e4567-e89b-12d3-a456-426614174000"),
+      name = "Jakob",
+      passwordHash = UserHash.hashPW("password123")
    )
  )

--- a/knockoutwhistweb/app/model/sessions/PlayerSession.scala
+++ b/knockoutwhistweb/app/model/sessions/PlayerSession.scala
@@ -7,7 +7,9 @@ import java.util.UUID
 trait PlayerSession {

  def id: UUID
+
  def name: String
+
  def updatePlayer(event: SimpleEvent): Unit

 }
--- a/knockoutwhistweb/app/model/sessions/UserSession.scala
+++ b/knockoutwhistweb/app/model/sessions/UserSession.scala
@@ -2,14 +2,18 @@ package model.sessions

 import de.knockoutwhist.events.player.{RequestCardEvent, RequestTieChoiceEvent, RequestTrumpSuitEvent}
 import de.knockoutwhist.utils.events.SimpleEvent
+import logic.game.GameLobby
 import model.users.User
+import play.api.libs.json.{JsObject, JsValue}

 import java.util.UUID
-import java.util.concurrent.locks.{Lock, ReentrantLock}
+import java.util.concurrent.locks.ReentrantLock
+import scala.util.Try

-class UserSession(user: User, val host: Boolean) extends PlayerSession {
-  var canInteract: Option[InteractionType] = None
+class UserSession(val user: User, val host: Boolean, val gameLobby: GameLobby) extends PlayerSession {
  val lock: ReentrantLock = ReentrantLock()
+  var canInteract: Option[InteractionType] = None
+  var websocketActor: Option[UserWebsocketActor] = None

  override def updatePlayer(event: SimpleEvent): Unit = {
    event match {
@@ -22,6 +26,7 @@ class UserSession(user: User, val host: Boolean) extends PlayerSession {
        else canInteract = Some(InteractionType.Card)
      case _ =>
    }
+    websocketActor.foreach(_.transmitEventToClient(event))
  }

  override def id: UUID = user.id
@@ -32,4 +37,51 @@ class UserSession(user: User, val host: Boolean) extends PlayerSession {
    canInteract = None
  }

+  def handleWebResponse(eventType: String, data: JsObject): Unit = {
+    lock.lock()
+    val result = Try {
+      eventType match {
+        case "ping" =>
+          // No action needed for Ping
+          ()
+        case "StartGame" =>
+          gameLobby.startGame(user)
+        case "PlayCard" =>
+          val maybeCardIndex: Option[String] = (data \ "cardindex").asOpt[String]
+          maybeCardIndex match {
+            case Some(index) =>
+              val session = gameLobby.getUserSession(user.id)
+              gameLobby.playCard(session, index.toInt)
+            case None =>
+              println("Card Index not found or is not a number.")
+          }
+        case "PickTrumpsuit" =>
+          val maybeSuitIndex: Option[Int] = (data \ "suitIndex").asOpt[Int]
+          maybeSuitIndex match {
+            case Some(index) =>
+              val session = gameLobby.getUserSession(user.id)
+              gameLobby.selectTrump(session, index)
+            case None =>
+              println("Card Index not found or is not a number.")
+          }
+        case "KickPlayer" =>
+          val maybePlayerId: Option[String] = (data \ "playerId").asOpt[String]
+          maybePlayerId match {
+            case Some(id) =>
+              val playerUUID = UUID.fromString(id)
+              gameLobby.leaveGame(playerUUID, true)
+            case None =>
+              println("Player ID not found or is not a valid UUID.")
+          }
+        case "ReturnToLobby" =>
+          gameLobby.returnToLobby(this)
+      }
+    }
+    lock.unlock()
+    if (result.isFailure) {
+      val throwable = result.failed.get
+      throw throwable
+    }
+  }
+
 }
--- a/knockoutwhistweb/app/model/sessions/UserWebsocketActor.scala
+++ b/knockoutwhistweb/app/model/sessions/UserWebsocketActor.scala
@@ -0,0 +1,103 @@
+package model.sessions
+
+import de.knockoutwhist.utils.events.SimpleEvent
+import org.apache.pekko.actor.{Actor, ActorRef}
+import play.api.libs.json.{JsObject, JsValue, Json}
+import util.WebsocketEventMapper
+
+import scala.util.{Failure, Success, Try}
+
+class UserWebsocketActor(
+                          out: ActorRef,
+                          session: UserSession
+                        ) extends Actor {
+
+  {
+    session.lock.lock()
+    if (session.websocketActor.isDefined) {
+      val otherWebsocket = session.websocketActor.get
+      otherWebsocket.transmitTextToClient("Error: Multiple websocket connections detected. Closing your connection.")
+      context.stop(otherWebsocket.self)
+      transmitTextToClient("Previous websocket connection closed. You are now connected.")
+    }
+    session.websocketActor = Some(this)
+    session.lock.unlock()
+  }
+
+
+  override def receive: Receive = {
+    case msg: String =>
+      val jsonObject = Try {
+        Json.parse(msg)
+      }
+      Try {
+        jsonObject match {
+          case Success(value) =>
+            handle(value)
+          case Failure(exception) =>
+            transmitTextToClient(s"Error parsing JSON: ${exception.getMessage}")
+        }
+      }.failed.foreach(
+        ex => transmitTextToClient(s"Error handling message: ${ex.getMessage}")
+      )
+    case other =>
+  }
+
+  private def transmitTextToClient(text: String): Unit = {
+    out ! text
+  }
+
+  private def handle(json: JsValue): Unit = {
+    val idOpt = (json \ "id").asOpt[String]
+    if (idOpt.isEmpty) {
+      transmitJsonToClient(Json.obj(
+        "status" -> "error",
+        "error" -> "Missing 'id' field"
+      ))
+      return
+    }
+    val id = idOpt.get
+    val eventOpt = (json \ "event").asOpt[String]
+    if (eventOpt.isEmpty) {
+      transmitJsonToClient(Json.obj(
+        "id" -> id,
+        "event" -> null,
+        "status" -> "error",
+        "error" -> "Missing 'event' field"
+      ))
+      return
+    }
+    val statusOpt = (json \ "status").asOpt[String]
+    if (statusOpt.isDefined) {
+      return
+    }
+    val event = eventOpt.get
+    val data = (json \ "data").asOpt[JsObject].getOrElse(Json.obj())
+    val result = Try {
+      session.handleWebResponse(event, data)
+    }
+    if (result.isSuccess) {
+      transmitJsonToClient(Json.obj(
+        "id" -> id,
+        "event" -> event,
+        "status" -> "success"
+      ))
+    } else {
+      transmitJsonToClient(Json.obj(
+        "id" -> id,
+        "event" -> event,
+        "status" -> "error",
+        "error" -> result.failed.get.getMessage
+      ))
+    }
+  }
+
+  def transmitJsonToClient(jsonObj: JsValue): Unit = {
+    transmitTextToClient(jsonObj.toString())
+  }
+
+  def transmitEventToClient(event: SimpleEvent): Unit = {
+    transmitJsonToClient(WebsocketEventMapper.toJson(event, session))
+  }
+
+}
--- a/knockoutwhistweb/app/model/users/User.scala
+++ b/knockoutwhistweb/app/model/users/User.scala
@@ -1,5 +1,6 @@
 package model.users

+
 import java.util.UUID

 case class User(
@@ -16,5 +17,4 @@ case class User(
  private def withPasswordHash(newPasswordHash: String): User = {
    this.copy(passwordHash = newPasswordHash)
  }
-
 }
--- a/knockoutwhistweb/app/services/JwtKeyProvider.scala
+++ b/knockoutwhistweb/app/services/JwtKeyProvider.scala
@@ -12,10 +12,28 @@ import javax.inject.*
@Singleton
 class JwtKeyProvider @Inject()(config: Configuration) {

-  private def cleanPem(pem: String): String =
-    pem.replaceAll("-----BEGIN (.*)-----", "")
-      .replaceAll("-----END (.*)-----", "")
-      .replaceAll("\\s", "")
+  val publicKey: RSAPublicKey = {
+    val pemOpt = config.getOptional[String]("auth.publicKeyPem")
+    val fileOpt = config.getOptional[String]("auth.publicKeyFile")
+
+    pemOpt.orElse(fileOpt.map { path =>
+      new String(Files.readAllBytes(Paths.get(path)))
+    }) match {
+      case Some(pem) => loadPublicKeyFromPem(pem)
+      case None => throw new RuntimeException("No RSA public key configured.")
+    }
+  }
+  val privateKey: RSAPrivateKey = {
+    val pemOpt = config.getOptional[String]("auth.privateKeyPem")
+    val fileOpt = config.getOptional[String]("auth.privateKeyFile")
+
+    pemOpt.orElse(fileOpt.map { path =>
+      new String(Files.readAllBytes(Paths.get(path)))
+    }) match {
+      case Some(pem) => loadPrivateKeyFromPem(pem)
+      case None => throw new RuntimeException("No RSA private key configured.")
+    }
+  }

  private def loadPublicKeyFromPem(pem: String): RSAPublicKey = {
    val decoded = Base64.getDecoder.decode(cleanPem(pem))
@@ -29,28 +47,9 @@ class JwtKeyProvider @Inject()(config: Configuration) {
    KeyFactory.getInstance("RSA").generatePrivate(spec).asInstanceOf[RSAPrivateKey]
  }

-  val publicKey: RSAPublicKey = {
-    val pemOpt = config.getOptional[String]("auth.publicKeyPem")
-    val fileOpt = config.getOptional[String]("auth.publicKeyFile")
-
-    pemOpt.orElse(fileOpt.map { path =>
-      new String(Files.readAllBytes(Paths.get(path)))
-    }) match {
-      case Some(pem) => loadPublicKeyFromPem(pem)
-      case None => throw new RuntimeException("No RSA public key configured.")
-    }
-  }
-
-  val privateKey: RSAPrivateKey = {
-    val pemOpt = config.getOptional[String]("auth.privateKeyPem")
-    val fileOpt = config.getOptional[String]("auth.privateKeyFile")
-
-    pemOpt.orElse(fileOpt.map { path =>
-      new String(Files.readAllBytes(Paths.get(path)))
-    }) match {
-      case Some(pem) => loadPrivateKeyFromPem(pem)
-      case None => throw new RuntimeException("No RSA private key configured.")
-    }
-  }
+  private def cleanPem(pem: String): String =
+    pem.replaceAll("-----BEGIN (.*)-----", "")
+      .replaceAll("-----END (.*)-----", "")
+      .replaceAll("\\s", "")

 }
--- a/knockoutwhistweb/app/util/GameUtil.scala
+++ b/knockoutwhistweb/app/util/GameUtil.scala
@@ -1,5 +1,8 @@
 package util

+import de.knockoutwhist.control.GameState
+import de.knockoutwhist.control.GameState.{FinishedMatch, InGame, Lobby, MainMenu, SelectTrump, TieBreak}
+
 import scala.util.Random

 object GameUtil {
@@ -26,4 +29,15 @@ object GameUtil {
    code.toString()
  }
  
+  def stateToTitle(gameState: GameState): String = {
+    gameState match {
+      case Lobby => "Lobby"
+      case MainMenu => "Main Menu"
+      case InGame => "In Game"
+      case SelectTrump => "Select Trump"
+      case TieBreak => "Tie Break"
+      case FinishedMatch => "Finished Match"
+    }
+  }
+
 }
--- a/knockoutwhistweb/app/util/WebUIUtils.scala
+++ b/knockoutwhistweb/app/util/WebUIUtils.scala
@@ -1,13 +1,18 @@
 package util

-import de.knockoutwhist.cards.Card
 import de.knockoutwhist.cards.CardValue.*
 import de.knockoutwhist.cards.Suit.{Clubs, Diamonds, Hearts, Spades}
+import de.knockoutwhist.cards.{Card, Hand}
+import play.api.libs.json.{JsArray, Json}
 import play.twirl.api.Html
 import scalafx.scene.image.Image

 object WebUIUtils {
  def cardtoImage(card: Card): Html = {
+    views.html.render.card.apply(f"images/cards/${cardtoString(card)}.png")(card.toString)
+  }
+
+  def cardtoString(card: Card) = {
    val s = card.suit match {
      case Spades => "S"
      case Hearts => "H"
@@ -29,6 +34,25 @@ object WebUIUtils {
      case Three => "3"
      case Two => "2"
    }
-    views.html.render.card.apply(f"images/cards/$cv$s.png")(card.toString)
+    f"$cv$s"
  }
+
+  /**
+   * Map a Hand to a JsArray of cards
+   * Per card it has the string and the index in the hand
+   * @param hand
+   * @return
+   */
+  def handToJson(hand: Hand): JsArray = {
+    val cards = hand.cards
+    JsArray(
+      cards.zipWithIndex.map { case (card, index) =>
+        Json.obj(
+          "idx" -> index,
+          "card" -> cardtoString(card)
+        )
+      }
+    )
+  }
+
 }
--- a/knockoutwhistweb/app/util/WebsocketEventMapper.scala
+++ b/knockoutwhistweb/app/util/WebsocketEventMapper.scala
@@ -0,0 +1,55 @@
+package util
+
+import de.knockoutwhist.utils.events.SimpleEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsValue, Json}
+import tools.jackson.databind.json.JsonMapper
+import tools.jackson.module.scala.ScalaModule
+import util.mapper.*
+
+object WebsocketEventMapper {
+
+  private val scalaModule = ScalaModule.builder()
+    .addAllBuiltinModules()
+    .supportScala3Classes(true)
+    .build()
+
+  private val mapper = JsonMapper.builder().addModule(scalaModule).build()
+
+  private var customMappers: Map[String,SimpleEventMapper[SimpleEvent]] = Map()
+
+  private def registerCustomMapper[T <: SimpleEvent](mapper: SimpleEventMapper[T]): Unit = {
+    customMappers = customMappers + (mapper.id -> mapper.asInstanceOf[SimpleEventMapper[SimpleEvent]])
+  }
+  
+  // Register all custom mappers here
+  registerCustomMapper(ReceivedHandEventMapper)
+  registerCustomMapper(GameStateEventMapper)
+  registerCustomMapper(CardPlayedEventMapper)
+  registerCustomMapper(NewRoundEventMapper)
+  registerCustomMapper(NewTrickEventMapper)
+  registerCustomMapper(TrickEndEventMapper)
+  registerCustomMapper(RequestCardEventMapper)
+  registerCustomMapper(LobbyUpdateEventMapper)
+  registerCustomMapper(LeftEventMapper)
+  registerCustomMapper(KickEventMapper)
+  registerCustomMapper(SessionClosedMapper)
+  registerCustomMapper(TurnEventMapper)
+
+  def toJson(obj: SimpleEvent, session: UserSession): JsValue = {
+    val data: Option[JsValue] = if (customMappers.contains(obj.id)) {
+      Some(customMappers(obj.id).toJson(obj, session))
+    }else {
+      None
+    }
+    if (data.isEmpty) {
+      return Json.obj()
+    }
+    Json.obj(
+      "id" -> ("request-" + java.util.UUID.randomUUID().toString),
+      "event" -> obj.id,
+      "data" -> data
+    )
+  }
+
+}
--- a/knockoutwhistweb/app/util/mapper/CardPlayedEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/CardPlayedEventMapper.scala
@@ -0,0 +1,20 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.CardPlayedEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsArray, JsObject, Json}
+import util.WebUIUtils
+
+object CardPlayedEventMapper extends SimpleEventMapper[CardPlayedEvent]{
+
+  override def id: String = "CardPlayedEvent"
+
+  override def toJson(event: CardPlayedEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "firstCard" -> (if (event.trick.firstCard.isDefined) WebUIUtils.cardtoString(event.trick.firstCard.get) else "BLANK"),
+      "playedCards" -> JsArray(event.trick.cards.map { case (card, player) =>
+        Json.obj("cardId" -> WebUIUtils.cardtoString(card), "player" -> player.name)
+      }.toList)
+    )
+  }
+}
--- a/knockoutwhistweb/app/util/mapper/GameStateEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/GameStateEventMapper.scala
@@ -0,0 +1,19 @@
+package util.mapper
+
+import controllers.IngameController
+import de.knockoutwhist.events.global.GameStateChangeEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+import util.GameUtil
+
+object GameStateEventMapper extends SimpleEventMapper[GameStateChangeEvent] {
+
+  override def id: String = "GameStateChangeEvent"
+
+  override def toJson(event: GameStateChangeEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "title" -> ("Knockout Whist - " + GameUtil.stateToTitle(event.newState)),
+      "content" -> IngameController.returnInnerHTML(session.gameLobby, event.newState, session.user).toString
+    )
+  }
+}
--- a/knockoutwhistweb/app/util/mapper/KickEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/KickEventMapper.scala
@@ -0,0 +1,19 @@
+package util.mapper
+
+import controllers.routes
+import events.KickEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object KickEventMapper extends SimpleEventMapper[KickEvent] {
+
+  override def id: String = "KickEvent"
+
+  override def toJson(event: KickEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "url" -> routes.MainMenuController.mainMenu().url,
+      "content" -> views.html.mainmenu.creategame(Some(session.user)).toString,
+    )
+  }
+
+}
--- a/knockoutwhistweb/app/util/mapper/LeftEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/LeftEventMapper.scala
@@ -0,0 +1,19 @@
+package util.mapper
+
+import controllers.routes
+import events.{KickEvent, LeftEvent}
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object LeftEventMapper extends SimpleEventMapper[LeftEvent] {
+
+  override def id: String = "LeftEvent"
+
+  override def toJson(event: LeftEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "url" -> routes.MainMenuController.mainMenu().url,
+      "content" -> views.html.mainmenu.creategame(Some(session.user)).toString
+    )
+  }
+
+}
--- a/knockoutwhistweb/app/util/mapper/LobbyUpdateEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/LobbyUpdateEventMapper.scala
@@ -0,0 +1,25 @@
+package util.mapper
+
+import events.LobbyUpdateEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsArray, JsObject, Json}
+
+object LobbyUpdateEventMapper extends SimpleEventMapper[LobbyUpdateEvent] {
+
+  override def id: String = "LobbyUpdateEvent"
+
+  override def toJson(event: LobbyUpdateEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "host" -> session.host,
+      "maxPlayers" -> session.gameLobby.maxPlayers,
+      "players" -> JsArray(session.gameLobby.getPlayers.values.map(player => {
+        Json.obj(
+          "id" -> player.id,
+          "name" -> player.name,
+          "self" -> (player.id == session.user.id)
+        )
+      }).toList)
+    )
+  }
+
+}
--- a/knockoutwhistweb/app/util/mapper/NewRoundEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/NewRoundEventMapper.scala
@@ -0,0 +1,18 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.NewRoundEvent
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object NewRoundEventMapper extends SimpleEventMapper[NewRoundEvent]{
+  override def id: String = "NewRoundEvent"
+
+  override def toJson(event: NewRoundEvent, session: UserSession): JsObject = {
+    val gameLobby = session.gameLobby
+    Json.obj(
+      "trumpsuit" -> gameLobby.getLogic.getCurrentRound.get.trumpSuit.toString,
+      "players" -> gameLobby.getLogic.getCurrentMatch.get.playersIn.map(player => player.toString)
+    )
+  }
+}
--- a/knockoutwhistweb/app/util/mapper/NewTrickEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/NewTrickEventMapper.scala
@@ -0,0 +1,14 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.NewTrickEvent
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object NewTrickEventMapper extends SimpleEventMapper[NewTrickEvent]{
+  override def id: String = "NewTrickEvent"
+
+  override def toJson(event: NewTrickEvent, session: UserSession): JsObject = {
+    Json.obj()
+  }
+}
--- a/knockoutwhistweb/app/util/mapper/ReceivedHandEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/ReceivedHandEventMapper.scala
@@ -0,0 +1,17 @@
+package util.mapper
+
+import de.knockoutwhist.events.player.ReceivedHandEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+import util.WebUIUtils
+
+object ReceivedHandEventMapper extends SimpleEventMapper[ReceivedHandEvent] {
+
+  override def id: String = "ReceivedHandEvent"
+  override def toJson(event: ReceivedHandEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "dog" -> event.player.isInDogLife,
+      "hand" -> event.player.currentHand().map(hand => WebUIUtils.handToJson(hand))
+    )
+  }
+}
--- a/knockoutwhistweb/app/util/mapper/RequestCardEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/RequestCardEventMapper.scala
@@ -0,0 +1,16 @@
+package util.mapper
+
+import de.knockoutwhist.events.player.RequestCardEvent
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object RequestCardEventMapper extends SimpleEventMapper[RequestCardEvent]{
+  override def id: String = "RequestCardEvent"
+
+  override def toJson(event: RequestCardEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "player" -> event.player.name
+    )
+  }
+}
--- a/knockoutwhistweb/app/util/mapper/RoundEndEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/RoundEndEventMapper.scala
@@ -0,0 +1,20 @@
+package util.mapper
+
+import controllers.routes
+import de.knockoutwhist.events.global.RoundEndEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object RoundEndEventMapper extends SimpleEventMapper[RoundEndEvent] {
+
+  override def id: String = "RoundEndEvent"
+
+  override def toJson(event: RoundEndEvent, session: UserSession): JsObject = {
+
+    Json.obj(
+      "player" -> event.winner.name,
+      "tricks" -> event.amountOfTricks
+    )
+  }
+
+}
--- a/knockoutwhistweb/app/util/mapper/SessionClosedMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/SessionClosedMapper.scala
@@ -0,0 +1,19 @@
+package util.mapper
+
+import controllers.routes
+import de.knockoutwhist.events.global.SessionClosed
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object SessionClosedMapper extends SimpleEventMapper[SessionClosed] {
+
+  override def id: String = "SessionClosed"
+
+  override def toJson(event: SessionClosed, session: UserSession): JsObject = {
+    Json.obj(
+      "url" -> routes.MainMenuController.mainMenu().url,
+      "content" -> views.html.mainmenu.creategame(Some(session.user)).toString,
+    )
+  }
+
+}
--- a/knockoutwhistweb/app/util/mapper/SimpleEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/SimpleEventMapper.scala
@@ -0,0 +1,13 @@
+package util.mapper
+
+import de.knockoutwhist.utils.events.SimpleEvent
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.JsObject
+
+trait SimpleEventMapper[T <: SimpleEvent] {
+  
+  def id: String
+  def toJson(event: T, session: UserSession): JsObject
+
+}
--- a/knockoutwhistweb/app/util/mapper/TrickEndEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/TrickEndEventMapper.scala
@@ -0,0 +1,20 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.TrickEndEvent
+import de.knockoutwhist.rounds.Trick
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object TrickEndEventMapper extends SimpleEventMapper[TrickEndEvent]{
+  override def id: String = "TrickEndEvent"
+
+  override def toJson(event: TrickEndEvent, session: UserSession): JsObject = {
+    val gameLobby = session.gameLobby
+    Json.obj(
+      "playerwon" -> event.winner.name,
+      "playersin" -> gameLobby.getLogic.getCurrentMatch.get.playersIn.map(player => player.name),
+      "tricklist" -> gameLobby.getLogic.getCurrentRound.get.tricklist.map(trick => trick.winner.map(player => player.name).getOrElse("Trick in Progress"))
+    )
+  }
+}
--- a/knockoutwhistweb/app/util/mapper/TurnEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/TurnEventMapper.scala
@@ -0,0 +1,35 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.TurnEvent
+import de.knockoutwhist.player.AbstractPlayer
+import model.sessions.UserSession
+import play.api.libs.json.{JsArray, JsObject, Json}
+
+object TurnEventMapper extends SimpleEventMapper[TurnEvent] {
+
+  override def id: String = "TurnEvent"
+
+  override def toJson(event: TurnEvent, session: UserSession): JsObject = {
+    val nextPlayers = if (session.gameLobby.logic.getPlayerQueue.isEmpty) {
+      Json.arr()
+    } else {
+      val queue = session.gameLobby.logic.getPlayerQueue.get
+      JsArray(
+        queue.duplicate().map(player => mapPlayer(player)).toList
+      )
+    }
+    
+    Json.obj(
+      "currentPlayer" -> mapPlayer(event.player),
+      "nextPlayers" -> nextPlayers
+    )
+  }
+
+  private def mapPlayer(player: AbstractPlayer): JsObject = {
+    Json.obj(
+      "name" -> player.name,
+      "dog" -> player.isInDogLife
+    )
+  }
+
+}
--- a/knockoutwhistweb/app/views/ingame/finishedMatch.scala.html
+++ b/knockoutwhistweb/app/views/ingame/finishedMatch.scala.html
@@ -0,0 +1,38 @@
+@(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
+
+<main class="lobby-background vh-100" id="lobbybackground">
+    <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
+        <div class="row">
+            <div class="col">
+                <div class="p-3 text-center fs-4">Winner: @gamelobby.getLogic.getWinner</div>
+            </div>
+        </div>
+        <div class="row justify-content-center align-items-center flex-grow-1">
+        @if((gamelobby.getUserSession(user.get.id).host)) {
+            <div class="col-12 text-center mb-5">
+                <div class="btn btn-success" onclick="handleReturnToLobby()">Return to lobby</div>
+            </div>
+        } else {
+            <div class="col-12 text-center mt-3">
+                <div class="spinner-border mt-1" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+        }
+        </div>
+    </div>
+</main>
+<script>
+        function waitForFunction(name, checkInterval = 100) {
+            return new Promise(resolve => {
+                const timer = setInterval(() => {
+                    if (typeof window[name] === "function") {
+                        clearInterval(timer);
+                        resolve(window[name]);
+                    }
+                }, checkInterval);
+            });
+        }
+        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
+    connectWebSocket()
+</script>
--- a/knockoutwhistweb/app/views/ingame/ingame.scala.html
+++ b/knockoutwhistweb/app/views/ingame/ingame.scala.html
@@ -1,50 +1,146 @@
-@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.GameLogic)
+@import de.knockoutwhist.control.controllerBaseImpl.sublogic.util.TrickUtil
+@import de.knockoutwhist.utils.Implicits.*

-@main("Ingame") {
-<div id="ingame" class="game-field game-field-background">
-    <h1>Knockout Whist</h1>
-    <div id="nextPlayers">
-        <p>Next Player:</p>
-        <p>@logic.getPlayerQueue.get.duplicate().nextPlayer()</p>
-    </div>
-    <div id="firstCard">
-        <div id="trumpsuit">
-            <p>Trumpsuit: </p>
-            <p>@logic.getCurrentRound.get.trumpSuit</p>
-        </div>
-        <div id="firstCardObject">
-            <p>First Card</p>
-            @if(logic.getCurrentTrick.get.firstCard.isDefined) {
-                @util.WebUIUtils.cardtoImage(logic.getCurrentTrick.get.firstCard.get)
+@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
+
+<div class="lobby-background vh-100">
+    <main class="game-field-background vh-100 ingame-side-shadow">
+        <div class="py-5 container-xxl">
+
+            <div class="row ms-4 me-4">
+                <div class="col-4 mt-5 text-start">
+                    <h4 class="fw-semibold mb-1">Current Player</h4>
+                    @if(gamelobby.getLogic.getCurrentPlayer.isDefined) {
+                        <p class="fs-5 text-primary" id="current-player-name">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
                    }else {
-                @views.html.render.card.apply("images/cards/1B.png")("Blank Card")
+                        <p class="fs-5 text-primary" id="current-player-name">---</p>
+                    }
+                    @if(gamelobby.getLogic.getPlayerQueue.isDefined && gamelobby.getLogic.getCurrentMatch && !TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
+                        <h4 class="fw-semibold mb-1" id="next-players-text">Next Players</h4>
+                        <div id="next-players-container">
+                            @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
+                                <p class="fs-5 text-primary">@nextplayer @if(nextplayer.isInDogLife) {
+                                    🐶
+                                }</p>
                            }
                        </div>
-    </div>
-
-    <p>@logic.getCurrentPlayer.get has to play a card!</p>
-    @if(logic.getCurrentTrick.get.cards.nonEmpty) {
-        <p>Cards played</p>
                    } else {
-        <p id="invisible">Cards played</p>
-    }
+                        <h4 class="fw-semibold mb-1" style="display: none;" id="next-players-text">Next Players</h4>
+                        <div id="next-players-container">

-    <div id="cardsplayed">
-        @for((cardplayed, player) <- logic.getCurrentTrick.get.cards) {
-        <div id="playedcardplayer">
-            <p>@player</p>
-            @util.WebUIUtils.cardtoImage(cardplayed)
                        </div>
                    }
                </div>

-    <p>Your cards</p>
-    <div id="playercards">
-        @for(card <- player.currentHand().get.cards) {
-            @util.WebUIUtils.cardtoImage(card)
-        }
+                <div class="col-4 text-center">
+
+                    <div class="score-table mt-5" id="score-table-body">
+                        <h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
+
+                        <div class="d-flex justify-content-between score-header pb-1">
+                            <div style="width: 50%">PLAYER</div>
+                            <div style="width: 50%">TRICKS</div>
                        </div>

+                        @if(gamelobby.getLogic.getPlayerQueue.isDefined) {
+                            @for(player <- gamelobby.getLogic.getPlayerQueue.get.toList.sortBy { p =>
+                                -(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(p) }.size)
+                            }) {
+                                <div class="d-flex justify-content-between score-row pt-1">
+                                    <div style="width: 50%" class="text-truncate">@player.name</div>
+                                    <div style="width: 50%">
+                                    @(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(player) }.size)
+                                    </div>
+                                </div>
+                            }
+                        }else{
+                            <div class="d-flex justify-content-between score-row pt-1">
+                            </div>
+                        }
+

                    </div>
+                    <div class="d-flex justify-content-center g-3 mb-5" id="trick-cards-container">
+                        @if(gamelobby.getLogic.getCurrentTrick.isEmpty || gamelobby.getLogic.getCurrentTrick.get.cards.isEmpty) {
+                            <div class="col-auto">
+                            </div>
+                        } else {
+                            @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
+                                <div class="col-auto">
+                                    <div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem;
+                                        backdrop-filter: blur(4px);">
+                                        <div class="p-2">
+                                            @util.WebUIUtils.cardtoImage(cardplayed) width="100%"/>
+                                        </div>
+                                        <div class="card-body p-2 bg-transparent">
+                                            <small class="fw-semibold text-secondary">@player</small>
+                                        </div>
+                                    </div>
+                                </div>
                            }
+                        }
+                    </div>
+                </div>
+                <div class="col-4 mt-5 text-end">
+                    <h4 class="fw-semibold mb-1">Trumpsuit</h4>
+                    @if(gamelobby.getLogic.getCurrentRound.isEmpty) {
+                        <p class="fs-5 text-primary" id="trumpsuit">No Trumpsuit</p>
+                    }else {
+                        <p class="fs-5 text-primary" id="trumpsuit">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
+                    }
+
+                    <h5 class="fw-semibold mt-4 mb-1">First Card</h5>
+                    <div class="d-inline-block border rounded shadow-sm p-1 bg-light" id="first-card-container">
+                    @if(gamelobby.getLogic.getCurrentTrick.isDefined && gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
+                        @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get)
+                        width="80px"/>
+                    } else {
+                        @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/>
+                    }
+                    </div>
+                </div>
+            </div>
+
+            <div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px);
+                margin-left: 0;
+                margin-right: 0;">
+                <div class="row justify-content-center ingame-cards-slide @{
+                    !gamelobby.logic.getCurrentPlayer.contains(player) ? "inactive" |: ""
+                }" id="card-slide">
+                    @if(player.currentHand().isEmpty || player.currentHand().get.cards.isEmpty) {
+
+                    } else {
+                        @for(i <- player.currentHand().get.cards.indices) {
+                            <div class="col-auto handcard" 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, '@player.isInDogLife')">
+                                    @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
+                                </div>
+                                @if(player.isInDogLife) {
+                                    <div class="mt-2">
+                                        <button class="btn btn-danger" onclick="handleSkipDogLife(this, '@gamelobby.id')">
+                                            Skip Dog Life</button>
+                                    </div>
+                                }
+                            </div>
+                        }
+                    }
+                </div>
+            </div>
+        </div>
+    </main>
+</div>
+<script>
+    function waitForFunction(name, checkInterval = 100) {
+        return new Promise(resolve => {
+            const timer = setInterval(() => {
+                if (typeof window[name] === "function") {
+                    clearInterval(timer);
+                    resolve(window[name]);
+                }
+            }, checkInterval);
+        });
+    }
+    waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
+    connectWebSocket()
+    canPlayCard = @gamelobby.logic.getCurrentPlayer.contains(player);
+</script>
--- a/knockoutwhistweb/app/views/ingame/selecttrump.scala.html
+++ b/knockoutwhistweb/app/views/ingame/selecttrump.scala.html
@@ -1,27 +1,79 @@
-@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.GameLogic)
+@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)

-@main("Selecting Trumpsuit...") {
 <div id="selecttrumpsuit" class="game-field game-field-background">
-    @if(player.equals(logic.getCurrentMatch.get.roundlist.last.winner.get)) {
-        <h1>Knockout Whist</h1>
-        <p>You (@player.toString) have won the last round! Select a trumpsuit for the next round!</p>
-        <p>Available trumpsuits are displayed below:</p>
-        <div id="playercards">
-            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades))
-            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
-            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts))
-            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds))
+    <div class="ingame-stage blur-sides">
+        <div class="container py-4">
+            <div class="row justify-content-center">
+                <div class="col-12">
+                    <div class="card shadow-sm">
+                        <div class="card-header text-center">
+                            <h3 class="mb-0">Select Trump Suit</h3>
+                        </div>
+                        <div class="card-body">
+                            @if(gamelobby.logic.getCurrentMatch.isDefined) {
+                                @if(player.equals(gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get)) {
+                                    <div class="alert alert-info" role="alert" aria-live="polite">
+                                        You (@player.toString) won the last round. Choose the trump suit for the next round.
                                    </div>
-        <p>Your cards</p>

-        <div id="playercards">
-            @for(card <- player.currentHand().get.cards) {
-            @util.WebUIUtils.cardtoImage(card)
+                                    <div class="row justify-content-center col-auto mb-5">
+                                        <div class="col-auto handcard">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="0" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades))
+                                                width="120px" style="border-radius: 6px"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-auto handcard">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="1" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts))
+                                                width="120px" style="border-radius: 6px"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-auto handcard">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="2" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds))
+                                                width="120px" style="border-radius: 6px"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-auto handcard">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="3" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
+                                                width="120px" style="border-radius: 6px"/>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row justify-content-center ingame-cards-slide" id="card-slide">
+                                    @for(i <- player.currentHand().get.cards.indices) {
+                                        <div class="col-auto" style="border-radius: 6px">
+                                            @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
+                                        </div>
                                    }
                                    </div>
                                } else {
-    <h1>Knockout Whist</h1>
-    <p>@player.toString is choosing a trumpsuit. Starting new round when @player.toString picked a trumpsuit...</p>
-    }
+                                    <div class="alert alert-warning" role="alert" aria-live="polite">
+                                        @gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get.name
+                                        is choosing a trumpsuit. The new round will start once a suit is picked.
                                    </div>
                                }
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+        function waitForFunction(name, checkInterval = 100) {
+            return new Promise(resolve => {
+                const timer = setInterval(() => {
+                    if (typeof window[name] === "function") {
+                        clearInterval(timer);
+                        resolve(window[name]);
+                    }
+                }, checkInterval);
+            });
+        }
+        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
+    connectWebSocket()
+</script>
--- a/knockoutwhistweb/app/views/ingame/tie.scala.html
+++ b/knockoutwhistweb/app/views/ingame/tie.scala.html
@@ -1,27 +1,125 @@
-@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.GameLogic)
-
-@main("Tie") {
+@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
 <div id="tie" class="game-field game-field-background">
-    <h1>Knockout Whist</h1>
-    <p>The last Round was tied between
-    @for(players <- logic.playerTieLogic.getTiedPlayers) {
-        @players
+    <div class="ingame-stage blur-sides">
+        <div class="container py-4">
+            <div class="row justify-content-center">
+                <div class="col-12 col-md-10 col-lg-8">
+                    <div class="card shadow-sm">
+                        <div class="card-header text-center">
+                            <h3 class="mb-0">Tie Break</h3>
+                        </div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <p class="card-text">
+                                    The last round was tied between:
+                                    <span class="ms-1">
+                                        @for(players <- gamelobby.logic.playerTieLogic.getTiedPlayers) {
+                                            <span class="badge text-bg-secondary me-1">@players</span>
                                        }
+                                    </span>
                                </p>
-    @if(player.equals(logic.playerTieLogic.currentTiePlayer())) {
-        <p>Pick a card between 1 and @logic.playerTieLogic.highestAllowedNumber()! The resulting card will be your card for the cut.</p>
-    } else {
-        <p>@logic.playerTieLogic.currentTiePlayer() is currently picking his number for the cut.</p>
-        <p>Currently picked Cards:</p>
-        <div id="cardsplayed">
-            @for((player, card) <- logic.playerTieLogic.getSelectedCard) {
-            <div id="playedcardplayer">
-                <p>@player</p>
+                            </div>
+
+                            @if(player.equals(gamelobby.logic.playerTieLogic.currentTiePlayer())) {
+                                @defining(gamelobby.logic.playerTieLogic.highestAllowedNumber()) { maxNum =>
+                                    <div class="alert alert-info" role="alert" aria-live="polite">
+                                        Pick a number between 1 and @{
+                                        maxNum + 1
+                                    }.
+                                    The resulting card will be your card for the cut.
+                                    </div>
+
+                                    <div class="row g-2 align-items-center">
+                                        <div class="col-auto">
+                                            <label for="tieNumber" class="col-form-label">Your number</label>
+                                        </div>
+                                        <div class="col-auto">
+                                            <input type="number" id="tieNumber" class="form-control" name="tie" min="1" max="@{
+                                                maxNum + 1
+                                            }" placeholder="1" required>
+                                        </div>
+                                        <div class="col-auto">
+                                            <button onclick="selectTie('@gamelobby.id')" class="btn btn-primary">
+                                                Confirm</button>
+                                        </div>
+                                    </div>
+                                    <h6 class="mt-4 mb-3">Currently Picked Cards</h6>
+
+                                    <div id="cardsplayed" class="row g-3 justify-content-center">
+                                    @if(gamelobby.logic.playerTieLogic.getSelectedCard.nonEmpty) {
+                                        @for((player, card) <- gamelobby.logic.playerTieLogic.getSelectedCard) {
+                                            <div class="col-6">
+                                                <div class="card shadow-sm border-0 h-100 text-center">
+                                                    <div class="card-body d-flex flex-column justify-content-between">
+                                                        <p class="card-text fw-semibold mb-2 text-primary">@player</p>
+                                                        <div class="card-img-top">
                                                        @util.WebUIUtils.cardtoImage(card)
                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        }
+                                    } else {
+                                        <div class="col-12">
+                                            <div class="alert alert-info text-center" role="alert">
+                                                <i class="bi bi-info-circle me-2"></i>
+                                                No cards have been selected yet.
+                                            </div>
+                                        </div>
+                                    }
+                                    </div>
+                                }
+                            } else {
+                                <div class="alert alert-warning" role="alert" aria-live="polite">
+                                    <strong>@gamelobby.logic.playerTieLogic.currentTiePlayer()</strong>
+                                    is currently picking a number for the cut.
+                                </div>
+
+                                <h6 class="mt-4 mb-3">Currently Picked Cards</h6>
+
+                                <div id="cardsplayed" class="row g-3 justify-content-center">
+                                @if(gamelobby.logic.playerTieLogic.getSelectedCard.nonEmpty) {
+                                    @for((player, card) <- gamelobby.logic.playerTieLogic.getSelectedCard) {
+                                        <div class="col-6 col-sm-4 col-md-3 col-lg-2">
+                                            <div class="card shadow-sm border-0 h-100 text-center">
+                                                <div class="card-body d-flex flex-column justify-content-between">
+                                                    <p class="card-text fw-semibold mb-2 text-primary">@player</p>
+                                                    <div class="card-img-top">
+                                                    @util.WebUIUtils.cardtoImage(card)
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    }
+                                } else {
+                                    <div class="col-12">
+                                        <div class="alert alert-info text-center" role="alert">
+                                            <i class="bi bi-info-circle me-2"></i>
+                                            No cards have been selected yet.
+                                        </div>
+                                    </div>
                                }
                                </div>
                            }

                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+        function waitForFunction(name, checkInterval = 100) {
+            return new Promise(resolve => {
+                const timer = setInterval(() => {
+                    if (typeof window[name] === "function") {
+                        clearInterval(timer);
+                        resolve(window[name]);
                    }
+                }, checkInterval);
+            });
+        }
+        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
+    connectWebSocket()
+</script>
--- a/knockoutwhistweb/app/views/lobby/lobby.scala.html
+++ b/knockoutwhistweb/app/views/lobby/lobby.scala.html
@@ -0,0 +1,115 @@
+@(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
+
+<main class="lobby-background vh-100" id="lobbybackground">
+    <!-- Kick Modal -->
+    <div class="modal fade" data-backdrop="static" data-keyboard="false" data-focus="true" id="kickedModal" tabindex="-1" role="dialog" aria-labelledby="kickedModalTitle">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="kickedModalTitle">Kicked</h5>
+                </div>
+                <div class="modal-body">
+                    <p>You've been kicked from the lobby.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Session Closed Modal -->
+    <div class="modal fade" data-backdrop="static" data-keyboard="false" data-focus="true" id="sessionClosed" tabindex="-1" role="dialog" aria-labelledby="sessionClosedModalTitle">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="sessionClosedModalTitle">Session Closed</h5>
+                </div>
+                <div class="modal-body">
+                    <p>The session was closed.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Lobby -->
+    <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
+        <div class="row">
+            <div class="col">
+                <div class="p-3 fs-1 d-flex align-items-center">
+                    <div class="text-center" style="flex-grow: 1;">
+                        Lobby-Name: @gamelobby.name
+                    </div>
+                    <div class="btn btn-danger ms-auto" onclick="leaveGame('@gamelobby.id')">Exit</div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <div class="p-3 text-center fs-4" id="playerAmount">
+                    Players: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
+            </div>
+        </div>
+        <div class="row justify-content-center align-items-center flex-grow-1">
+        @if((gamelobby.getUserSession(user.get.id).host)) {
+            <div id="players" class="justify-content-center align-items-center d-flex">
+            @for(playersession <- gamelobby.getPlayers.values) {
+                <div class="col-auto my-auto m-3">
+                    <div class="card" style="width: 18rem;">
+                        <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
+                        <div class="card-body">
+                        @if(playersession.id == user.get.id) {
+                            <h5 class="card-title">@playersession.name (You)</h5>
+                            <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
+                        } else {
+                            <h5 class="card-title">@playersession.name</h5>
+                            <div class="btn btn-danger" onclick="handleKickPlayer('@playersession.id')">
+                                Remove</div>
+                        }
+                        </div>
+                    </div>
+                </div>
+            }
+            </div>
+            <div class="col-12 text-center mb-5">
+                <div class="btn btn-success" onclick="startGame()">Start Game</div>
+            </div>
+        } else {
+            <div id="players" class="justify-content-center align-items-center d-flex">
+            @for(playersession <- gamelobby.getPlayers.values) {
+                <div class="col-auto my-auto m-3"> <div class="card" style="width: 18rem;">
+                    <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
+                    <div class="card-body">
+                    @if(playersession.id == user.get.id) {
+                        <h5 class="card-title">@playersession.name (You)</h5>
+                    } else {
+                        <h5 class="card-title">@playersession.name</h5>
+                    }
+                    </div>
+                </div>
+                </div>
+            }
+            </div>
+            <div class="col-12 text-center mt-3">
+                <p class="fs-4">Waiting for the host to start the game...</p>
+                <div class="spinner-border mt-1" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+        }
+        </div>
+    </div>
+</main>
+<script>
+/*
+        function waitForFunction(name, checkInterval = 100) {
+            return new Promise(resolve => {
+                const timer = setInterval(() => {
+                    if (typeof window[name] === "function") {
+                        clearInterval(timer);
+                        resolve(window[name]);
+                    }
+                }, checkInterval);
+            });
+        }
+        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
+*/
+    connectWebSocket()
+</script>
--- a/knockoutwhistweb/app/views/login/login.scala.html
+++ b/knockoutwhistweb/app/views/login/login.scala.html
@@ -1,20 +1,17 @@
@()
-
-@main("Login") {
 <div class="login-box">
    <div class="card login-card p-4">
        <div class="card-body">
-                <h3 class="text-center mb-4">Login</h3>
-
-                <form action="@routes.UserController.login_Post()" method="post">
+            <h3 class="text-center mb-4 text-body">Login</h3>
+            <form onsubmit="login(); return false;">
                <div class="mb-3">
-                        <label for="username" class="form-label">Username</label>
-                        <input type="text" class="form-control" id="username" name="username" placeholder="Enter Username" required>
+                    <label for="username" class="form-label text-body">Username</label>
+                    <input type="text" class="form-control text-body" id="username" name="username" placeholder="Enter Username" required>
                </div>

                <div class="mb-3">
-                        <label for="password" class="form-label">Password</label>
-                        <input type="password" class="form-control" id="password" name="password" placeholder="Enter password" required>
+                    <label for="password" class="form-label text-body">Password</label>
+                    <input type="password" class="form-control text-body" id="password" name="password" placeholder="Enter password" required>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3">
@@ -34,8 +31,13 @@
    </div>
 </div>
 <script src="@routes.Assets.versioned("/javascripts/particles.js")"></script>
-    <div id="particles-js" style="background-color: rgb(182, 25, 36);
+<script>
+        particlesJS.load('particles-js', 'assets/conf/particlesjs-config.json', function() {
+            console.log('callback - particles.js config loaded');
+        });
+        disconnectWebSocket();
+</script>
+<div id="particles-js" style="background-color: rgb(11, 8, 8);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;"></div>
-}
--- a/knockoutwhistweb/app/views/main.scala.html
+++ b/knockoutwhistweb/app/views/main.scala.html
@@ -9,20 +9,26 @@
 <!DOCTYPE html>
 <html lang="en">
    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
        @* Here's where we render the page title `String`. *@
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
-
    </head>

-    <body>
+    <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>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="@routes.JavaScriptRoutingController.javascriptRoutes()" type="text/javascript"></script>
+    <script src="@routes.Assets.versioned("javascripts/websocket.js")" type="text/javascript"></script>
+    <script src="@routes.Assets.versioned("javascripts/events.js")" type="text/javascript"></script>
+    <script src="@routes.Assets.versioned("javascripts/interact.js")" type="text/javascript"></script>
+    <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
+
+    <body class="d-flex flex-column min-vh-100" id="main-body">
        @* And here's where we render the `Html` object containing
        * the page content. *@
        @content
-
-        <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>
 </html>
--- a/knockoutwhistweb/app/views/mainmenu/creategame.scala.html
+++ b/knockoutwhistweb/app/views/mainmenu/creategame.scala.html
@@ -0,0 +1,33 @@
+@(user: Option[model.users.User])
+
+@navbar(user)
+<main class="lobby-background flex-grow-1">
+    <div class="w-25 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">
+            <div class="btn btn-success" onclick="createGameJS()">Create Game</div>
+        </div>
+    </div>
+</main>
+<script>
+            disconnectWebSocket();
+</script>
--- a/knockoutwhistweb/app/views/mainmenu/navbar.scala.html
+++ b/knockoutwhistweb/app/views/mainmenu/navbar.scala.html
@@ -1,28 +1,32 @@
@(user: Option[model.users.User])
-@main("Knockout Whist - Main Menu") {
-    <nav class="navbar navbar-expand-lg bg-body-tertiary">
-        <div class="container-fluid">
+<nav class="navbar navbar-expand-lg bg-body-tertiary navbar-drop-shadow">
+    <div class="container d-flex justify-content-start">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
-            <div class="collapse navbar-collapse" id="navBar">
-                <a class="navbar-brand" href="@routes.MainMenuController.mainMenu()">KnockOutWhist</a>
+        <div class="collapse navbar-collapse justify-content-center" id="navBar">
+            <a class="navbar-brand ms-auto" href="@routes.MainMenuController.mainMenu()">
+                <img src="@routes.Assets.versioned("images/logo.png")" alt="Logo" width="30" height="20" class="d-inline-block align-text-top">
+                KnockOutWhist
+            </a>
            <div class="navbar-nav me-auto mb-2 mb-lg-0">
                <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="#">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" method="post" action="@routes.MainMenuController.joinGame()">
-                        <input class="form-control me-2" type="text" placeholder="Enter GameCode" name="gameId" aria-label="Join Game"/>
+                <form class="navbar-nav me-auto mb-2 mb-lg-0" onsubmit="joinGame(); return false;">
+                    <input class="form-control me-2" type="text" placeholder="Enter GameCode" id="gameId" aria-label="Join Game"/>
                    <button class="btn btn-outline-success" type="submit">Join</button>
                </form>
            </div>
@@ -36,8 +40,10 @@
                            <span class="ms-2">@user.get.name</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
-                                <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Stats</a></li>
-                                <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Settings</a></li>
+                            <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">
+                                Stats</a></li>
+                            <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">
+                                Settings</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="@routes.UserController.logout()">Logout</a></li>
                        </ul>
@@ -53,4 +59,3 @@
        </div>
    </div>
 </nav>
-}
--- a/knockoutwhistweb/app/views/mainmenu/rules.scala.html
+++ b/knockoutwhistweb/app/views/mainmenu/rules.scala.html
@@ -1,63 +1,180 @@
-@()
+@(user: Option[model.users.User])
+@navbar(user)

-@main("Rules") {
-<div id="rules" class="game-field game-field-background">
-    <table>
-        <caption>Rules Overview and Equipment</caption>
-        <thead>
-        <tr>
-            <th>Section</th>
-            <th>Details</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-            <td>Players</td>
-            <td>Two to seven players. The aim is to be the last player left in the game.</td>
-        </tr>
-        <tr>
-            <td>Aim</td>
-            <td>To be the last player left in at the end of the game, with the object in each hand being to win a majority of tricks.</td>
-        </tr>
-        <tr>
-            <td>Equipment</td>
-            <td>A standard 52-card pack is used.</td>
-        </tr>
-        <tr>
-            <td>Card Ranks</td>
-            <td>In each suit, cards rank from highest to lowest: A K Q J 10 9 8 7 6 5 4 3 2.</td>
-        </tr>
-        <tr>
-            <td>Deal (First Hand)</td>
-            <td>The dealer deals seven cards to each player. One card is turned up to determine the trump suit for the round.</td>
-        </tr>
-        <tr>
-            <td>Deal (Subsequent Hands)</td>
-            <td>The deal rotates clockwise. The player who took the most tricks in the previous hand selects the trump suit. If there's a tie for the highest number of tricks, players cut cards to decide who calls trumps. One fewer card is dealt in each successive hand until the final hand consists of one card each.</td>
-        </tr>
-        <tr>
-            <td>Play</td>
-            <td>The player to the dealer's left (eldest hand) leads the first trick. Any card can be led. Other players must follow suit if possible. A player with no cards of the suit led may play any card.</td>
-        </tr>
-        <tr>
-            <td>Winning a Trick</td>
-            <td>The highest card of the suit led wins, unless a trump is played, in which case the highest trump wins. The winner of the trick leads the next.</td>
-        </tr>
-        <tr>
-            <td>Leading Trumps</td>
-            <td>Some rules disallow leading trumps before the suit has been 'broken' (a trump has been played to the lead of another suit). Leading trumps is always permissible if a player holds only trumps.</td>
-        </tr>
-        <tr>
-            <td>Knockout</td>
-            <td>At the end of each hand, any player who took no tricks is knocked out and takes no further part in the game.</td>
-        </tr>
-        <tr>
-            <td>Winning the Game</td>
-            <td>The game is won when a player takes all the tricks in a round, as all other players are knocked out, leaving only one player remaining.</td>
-        </tr>
-        </tbody>
-            <td>Dog Life</td>
-            <td>The first player who takes no tricks is awarded a "dog's life". In the next hand, that player is dealt one card and can decide which trick to play it to. Each time a trick is played the "dog" may either play the card or knock on the table and wait to play it later. If the dog wins a trick, the player to the left leads to the next and the dog re-enters the game properly in the next hand. If the dog fails, they are knocked out.</td>
-    </table>
+<main class="lobby-background flex-grow-1">
+    <div class="container my-4" style="max-width: 980px;">
+        <div class="card rules-card shadow-sm rounded-3 overflow-hidden">
+            <div class="card-header text-center py-3 border-0">
+                <h3 class="mb-0 rules-title">Game Rules Overview</h3>
            </div>
-}
+
+            <div class="card-body p-0">
+                <style>
+
+                </style>
+
+                <div class="accordion rules-accordion" id="rulesAccordion">
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingPlayers">
+                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlayers" aria-expanded="true" aria-controls="collapsePlayers">
+                                Players
+                            </button>
+                        </h2>
+                        <div id="collapsePlayers" class="accordion-collapse collapse show" aria-labelledby="headingPlayers" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                Two to seven players. The aim is to be the last player left in the game.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingAim">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAim" aria-expanded="false" aria-controls="collapseAim">
+                                Aim
+                            </button>
+                        </h2>
+                        <div id="collapseAim" class="accordion-collapse collapse" aria-labelledby="headingAim" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                To be the last player left at the end of the game, with the object in each hand being to win a majority of tricks.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingEquipment">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEquipment" aria-expanded="false" aria-controls="collapseEquipment">
+                                Equipment
+                            </button>
+                        </h2>
+                        <div id="collapseEquipment" class="accordion-collapse collapse" aria-labelledby="headingEquipment" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                A standard 52-card pack is used.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingRanks">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRanks" aria-expanded="false" aria-controls="collapseRanks">
+                                Card Ranks
+                            </button>
+                        </h2>
+                        <div id="collapseRanks" class="accordion-collapse collapse" aria-labelledby="headingRanks" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                In each suit, cards rank from highest to lowest: A K Q J 10 9 8 7 6 5 4 3 2.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingDealFirst">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDealFirst" aria-expanded="false" aria-controls="collapseDealFirst">
+                                Deal (First Hand)
+                            </button>
+                        </h2>
+                        <div id="collapseDealFirst" class="accordion-collapse collapse" aria-labelledby="headingDealFirst" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The dealer deals seven cards to each player. One card is turned up to determine the trump suit for the round.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingDealSubsequent">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDealSubsequent" aria-expanded="false" aria-controls="collapseDealSubsequent">
+                                Deal (Subsequent Hands)
+                            </button>
+                        </h2>
+                        <div id="collapseDealSubsequent" class="accordion-collapse collapse" aria-labelledby="headingDealSubsequent" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The deal rotates clockwise. The player who took the most tricks in the previous hand selects the trump suit. If there's a tie, players cut cards to decide who calls trumps. One fewer card is dealt in each successive hand until the final hand consists of one card each.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingPlay">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlay" aria-expanded="false" aria-controls="collapsePlay">
+                                Play
+                            </button>
+                        </h2>
+                        <div id="collapsePlay" class="accordion-collapse collapse" aria-labelledby="headingPlay" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The player to the dealer's left (eldest hand) leads the first trick. Any card can be led. Other players must follow suit if possible. A player with no cards of the suit led may play any card.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingWinningTrick">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWinningTrick" aria-expanded="false" aria-controls="collapseWinningTrick">
+                                Winning a Trick
+                            </button>
+                        </h2>
+                        <div id="collapseWinningTrick" class="accordion-collapse collapse" aria-labelledby="headingWinningTrick" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The highest card of the suit led wins, unless a trump is played, in which case the highest trump wins. The winner of the trick leads the next.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingLeadingTrumps">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLeadingTrumps" aria-expanded="false" aria-controls="collapseLeadingTrumps">
+                                Leading Trumps
+                            </button>
+                        </h2>
+                        <div id="collapseLeadingTrumps" class="accordion-collapse collapse" aria-labelledby="headingLeadingTrumps" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                Some rules disallow leading trumps before the suit has been 'broken' (a trump has been played to the lead of another suit). Leading trumps is always permissible if a player holds only trumps.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingKnockout">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseKnockout" aria-expanded="false" aria-controls="collapseKnockout">
+                                Knockout
+                            </button>
+                        </h2>
+                        <div id="collapseKnockout" class="accordion-collapse collapse" aria-labelledby="headingKnockout" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                At the end of each hand, any player who took no tricks is knocked out and takes no further part in the game.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingWinningGame">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWinningGame" aria-expanded="false" aria-controls="collapseWinningGame">
+                                Winning the Game
+                            </button>
+                        </h2>
+                        <div id="collapseWinningGame" class="accordion-collapse collapse" aria-labelledby="headingWinningGame" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The game is won when a player takes all the tricks in a round, as all other players are knocked out, leaving only one player remaining.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingDogLife">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDogLife" aria-expanded="false" aria-controls="collapseDogLife">
+                                Dog Life
+                            </button>
+                        </h2>
+                        <div id="collapseDogLife" class="accordion-collapse collapse" aria-labelledby="headingDogLife" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The first player who takes no tricks is awarded a \"dog's life\". In the next hand, that player is dealt one card and can decide which trick to play it to. Each time a trick is played the dog may either play the card or knock on the table and wait to play it later. If the dog wins a trick, the player to the left leads the next and the dog re-enters the game properly in the next hand. If the dog fails, they are knocked out.
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+<script>
+        disconnectWebSocket();
+</script>
--- a/knockoutwhistweb/app/views/render/card.scala.html
+++ b/knockoutwhistweb/app/views/render/card.scala.html
@@ -1,2 +1,2 @@
@(src: String)(alt: String)
-<img src="@routes.Assets.versioned(src)" alt="@alt"/>
+<img src="@routes.Assets.versioned(src)" alt="@alt"
--- a/knockoutwhistweb/conf/application.conf
+++ b/knockoutwhistweb/conf/application.conf
@@ -1,14 +1,15 @@
 # https://www.playframework.com/documentation/latest/Configuration
 play.filters.disabled += play.filters.csrf.CSRFFilter
+play.filters.disabled += play.filters.hosts.AllowedHostsFilter

+play.http.secret.key="QCY?tAnfk?aZ?iwrNwnxIlR6CTf:G3gf:90Latabg@5241AB`R5W:1uDFN];Ik@n"
+play.http.secret.key=${?APPLICATION_SECRET}

 auth {
  issuer = "knockoutwhistweb"
  audience = "ui"
-   # ${?PUBLIC_KEY_FILE}
-  privateKeyFile = "D:\\Workspaces\\Gitops\\rsa512-private.pem"
-  privateKeyPem  = ${?PUBLIC_KEY_PEM}
-   #${?PUBLIC_KEY_FILE}
-  publicKeyFile = "D:\\Workspaces\\Gitops\\rsa512-public.pem"
+  privateKeyFile = ${?PRIVATE_KEY_FILE}
+  privateKeyPem  = ${?PRIVATE_KEY_PEM}
+  publicKeyFile = ${?PUBLIC_KEY_FILE}
  publicKeyPem  = ${?PUBLIC_KEY_PEM}
 }
--- a/knockoutwhistweb/conf/logback.xml
+++ b/knockoutwhistweb/conf/logback.xml
@@ -14,7 +14,8 @@
        <file>${application.home:-.}/logs/application.log</file>
        <encoder class="PatternLayoutEncoder">
            <charset>UTF-8</charset>
-      <pattern>%d{yyyy-MM-dd HH:mm:ss} %highlight(%-5level) %cyan(%logger{36}) %magenta(%X{pekkoSource}) %msg%n</pattern>
+            <pattern>%d{yyyy-MM-dd HH:mm:ss} %highlight(%-5level) %cyan(%logger{36}) %magenta(%X{pekkoSource}) %msg%n
+            </pattern>
        </encoder>
    </appender>

@@ -27,7 +28,8 @@
        <!-- <withJansi>true</withJansi> -->
        <encoder class="PatternLayoutEncoder">
            <charset>UTF-8</charset>
-      <pattern>%d{yyyy-MM-dd HH:mm:ss} %highlight(%-5level) %cyan(%logger{36}) %magenta(%X{pekkoSource}) %msg%n</pattern>
+            <pattern>%d{yyyy-MM-dd HH:mm:ss} %highlight(%-5level) %cyan(%logger{36}) %magenta(%X{pekkoSource}) %msg%n
+            </pattern>
        </encoder>
    </appender>

--- a/knockoutwhistweb/conf/routes
+++ b/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)
@@ -11,6 +12,7 @@ GET     /assets/*file               controllers.Assets.versioned(path="/public",
 # 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()
@@ -23,7 +25,6 @@ GET     /logout                     controllers.UserController.logout()

 # In-game routes
 GET         /game/:id                controllers.IngameController.game(id: String)
-GET    /game/:id/join               controllers.IngameController.joinGame(id: String)
-POST   /game/:id/start              controllers.IngameController.startGame(id: String)

-POST   /game/:id/playCard           controllers.IngameController.playCard(id: String)
+# Websocket
+GET         /websocket               controllers.WebsocketController.socket()
--- a/knockoutwhistweb/public/images/logo.png
+++ b/knockoutwhistweb/public/images/logo.png
--- a/knockoutwhistweb/public/javascripts/events.js
+++ b/knockoutwhistweb/public/javascripts/events.js
@@ -0,0 +1,333 @@
+var canPlayCard = false;
+
+function alertMessage(message) {
+    let newHtml = '';
+    const alertId = `alert-${Date.now()}`;
+    const fadeTime = 500;
+    const duration = 5000;
+    newHtml += `
+        <div class="fixed-top d-flex justify-content-center mt-3" style="z-index: 1050;">
+        <div
+        id="${alertId}" class="alert alert-primary d-flex align-items-center p-2 mb-0 w-auto" role="alert" style="display: none;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+            </svg>
+            <div class="small">
+                <small>${message}</small>
+            </div>
+        </div>
+    </div>
+    `;
+    $('#main-body').prepend(newHtml);
+    const $notice = $(`#${alertId}`);
+    $notice.fadeIn(fadeTime);
+    setTimeout(function() {
+        $notice.fadeOut(fadeTime, function() {
+            $(this).parent().remove();
+        });
+    }, duration);
+}
+function receiveHandEvent(eventData) {
+    //Data
+    const dog = eventData.dog;
+    const hand = eventData.hand;
+
+    const handElement = $('#card-slide');
+    handElement.addClass('ingame-cards-slide')
+
+    let newHtml = '';
+
+    //Build Hand Container
+    hand.forEach((card) => {
+        //Data
+        const idx = card.idx;
+        const cardS = card.card;
+
+        const cardHtml = `
+                        <div class="col-auto handcard" style="border-radius: 6px">
+                            <div class="btn btn-outline-light p-0 border-0 shadow-none" 
+                                 data-card-id="${idx}" 
+                                 style="border-radius: 6px" 
+                                 onclick="handlePlayCard(this, '${dog}')">
+                                
+                                <img src="/assets/images/cards/${cardS}.png" width="120px" style="border-radius: 6px" alt="${cardS}"/>
+                            </div>
+                        </div>
+                    `;
+        newHtml += cardHtml;
+    });
+
+    //Build dog if needed
+    if (dog) {
+        newHtml += `
+                        <div class="mt-2">
+                            <button class="btn btn-danger" onclick="handleSkipDogLife(this)">Skip Turn</button>
+                        </div>
+                    `;
+    }
+    handElement.html(newHtml);
+}
+function newRoundEvent(eventData) {
+    const trumpsuit = eventData.trumpsuit;
+    const players = eventData.players;
+
+    const tableElement = $('#score-table-body');
+
+
+    let tablehtml = `
+        <h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
+
+                        <div class="d-flex justify-content-between score-header pb-1">
+                            <div style="width: 50%">PLAYER</div>
+                            <div style="width: 50%">TRICKS</div>
+                        </div>
+    `;
+
+    players.forEach(
+        tablehtml += `
+            <div class="d-flex justify-content-between score-row pt-1">
+                                <div style="width: 50%" class="text-truncate">'${players}'</div>
+                                <div style="width: 50%">
+                                    0
+                                </div>
+                            </div>
+        `
+    );
+    tableElement.html(tablehtml);
+
+    const trumpsuitClass = $('#trumpsuit');
+    trumpsuitClass.html(trumpsuit);
+
+}
+function trickEndEvent(eventData) {
+    const winner = eventData.playerwon;
+    const players = eventData.playersin;
+    const tricklist = eventData.tricklist;
+
+    let newHtml = '';
+
+    let tricktable = $('#score-table-body');
+
+    newHtml += `
+        <h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
+
+                        <div class="d-flex justify-content-between score-header pb-1">
+                            <div style="width: 50%">PLAYER</div>
+                            <div style="width: 50%">TRICKS</div>
+                        </div>
+    `;
+    let playercounts = new Map();
+
+    players.forEach( player => {
+            playercounts.set(player, 0)
+    });
+    tricklist.forEach( player => {
+            if ( player !== "Trick in Progress" && playercounts.has(player)) {
+                playercounts.set(player, playercounts.get(player) + 1)
+            }
+        }
+    )
+    const playerorder = players.sort((playerA, playerB) => {
+        const countA = playercounts.get(playerA) || 0;
+        const countB = playercounts.get(playerB) || 0;
+        return countB - countA;
+    });
+    playerorder.forEach( player => {
+        newHtml += `
+            <div class="d-flex justify-content-between score-row pt-1">
+                                    <div style="width: 50%" class="text-truncate">${player}</div>
+                                    <div style="width: 50%">
+                                    ${playercounts.get(player)}
+                                    </div>
+                                </div>
+        `
+    });
+    alertMessage(`${winner} won the trick!`)
+    tricktable.html(newHtml);
+
+}
+function newTrickEvent() {
+    const firstCardContainer = $('#first-card-container');
+    const emptyHtml = '';
+    let newHtml = '';
+    newHtml += `
+        <img src="/assets/images/cards/1B.png" alt="Blank Card" width="80px" style="border-radius: 6px"/>
+    `;
+    firstCardContainer.html(newHtml);
+    const playedCardsContainer = $('#trick-cards-container')
+    playedCardsContainer.html(emptyHtml)
+}
+function requestCardEvent(eventData) {
+    const player = eventData.player;
+    const handElement = $('#card-slide')
+    handElement.removeClass('inactive');
+    canPlayCard = true;
+}
+
+
+function receiveGameStateChange(eventData) {
+    const content = eventData.content;
+    const title = eventData.title || 'Knockout Whist';
+    const url = eventData.url || null;
+
+    exchangeBody(content, title, url);
+}
+function receiveCardPlayedEvent(eventData) {
+    const firstCard = eventData.firstCard;
+    const playedCards = eventData.playedCards;
+
+    const trickCardsContainer = $('#trick-cards-container');
+    const firstCardContainer = $('#first-card-container')
+
+    let trickHTML = '';
+    playedCards.forEach(cardCombo => {
+        trickHTML += `
+                            <div class="col-auto">
+                                <div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem; backdrop-filter: blur(4px);">
+                                    <div class="p-2">
+                                        <img src="/assets/images/cards/${cardCombo.cardId}.png" width="100%" alt="${cardCombo.cardId}"/>
+                                    </div>
+                                    <div class="card-body p-2 bg-transparent">
+                                        <small class="fw-semibold text-secondary">${cardCombo.player}</small>
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+    });
+    trickCardsContainer.html(trickHTML);
+
+    let altText;
+    let imageSrc;
+    if (firstCard === "BLANK") {
+        imageSrc = "/assets/images/cards/1B.png";
+        altText = "Blank Card";
+    } else {
+        imageSrc = `/assets/images/cards/${firstCard}.png`;
+        altText = `Card ${firstCard}`;
+    }
+
+    const newFirstCardHTML = `
+                        <img src="${imageSrc}" alt="${altText}" width="80px" style="border-radius: 6px"/>
+                    `;
+    firstCardContainer.html(newFirstCardHTML);
+}
+function receiveLobbyUpdateEvent(eventData) {
+    const host = eventData.host;
+    const maxPlayers = eventData.maxPlayers;
+    const players = eventData.players;
+
+    const lobbyPlayersContainer = $('#players');
+    const playerAmountBox = $('#playerAmount');
+
+    let newHtml = ''
+
+    if (host) {
+        players.forEach(user => {
+
+            const inner = user.self ? `<h5 class="card-title">${user.name} (You)</h5>
+                                <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>`
+                : `    <h5 class="card-title">${user.name}</h5>
+                                    <div class="btn btn-danger" onclick="handleKickPlayer('${user.id}')">Remove</div>`
+
+            newHtml += `<div class="col-auto my-auto m-3">
+                            <div class="card" style="width: 18rem;">
+                                <img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
+                                <div class="card-body">
+                                    ${inner}
+                                </div>
+                            </div>
+                        </div>`
+        })
+    } else {
+        players.forEach(user => {
+
+            const inner = user.self ? `<h5 class="card-title">${user.name} (You)</h5>` : `    <h5 class="card-title">${user.name}</h5>`
+
+            newHtml += `<div class="col-auto my-auto m-3">
+                            <div class="card" style="width: 18rem;">
+                                <img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
+                                <div class="card-body">
+                                    ${inner}
+                                </div>
+                            </div>
+                        </div>`
+        })
+    }
+
+    lobbyPlayersContainer.html(newHtml);
+    playerAmountBox.text(`Players: ${players.length} / ${maxPlayers}`);
+
+}
+function receiveKickEvent(eventData) {
+    $('#kickedModal').modal({
+        backdrop: 'static',
+        keyboard: false
+    }).modal('show');
+
+    setTimeout(() => {
+        receiveGameStateChange(eventData)
+    }, 5000);
+}
+function receiveSessionClosedEvent(eventData) {
+    $('#sessionClosed').modal({
+        backdrop: 'static',
+        keyboard: false
+    }).modal('show');
+
+    setTimeout(() => {
+        receiveGameStateChange(eventData)
+    }, 5000);
+}
+
+
+function receiveTurnEvent(eventData) {
+    const currentPlayer = eventData.currentPlayer;
+    const nextPlayers = eventData.nextPlayers;
+
+    const currentPlayerNameContainer = $('#current-player-name');
+    const nextPlayersContainer = $('#next-players-container');
+    const nextPlayerText = $('#next-players-text');
+
+    let currentPlayerName = currentPlayer.name;
+    if (currentPlayer.dog) {
+        currentPlayerName += " 🐶";
+    }
+    currentPlayerNameContainer.text(currentPlayerName);
+
+    if (nextPlayers.length === 0) {
+        nextPlayerText.hide();
+        nextPlayersContainer.html('');
+    } else {
+        console.log("Length"+nextPlayers.length);
+        nextPlayerText.show();
+        let nextPlayersHtml = '';
+        nextPlayers.forEach((player) => {
+            let playerName = player.name;
+            if (player.dog) {
+                playerName += " 🐶";
+            }
+            nextPlayersHtml += `<p class="fs-5 text-primary">${playerName}</p>`;
+        });
+        nextPlayersContainer.html(nextPlayersHtml);
+    }
+}
+function receiveRoundEndEvent(eventData) {
+    const player = eventData.player
+    const tricks = eventData.tricks
+    alertMessage(`${player} won this round with ${tricks} tricks!`)
+}
+onEvent("ReceivedHandEvent", receiveHandEvent)
+onEvent("GameStateChangeEvent", receiveGameStateChange)
+onEvent("NewRoundEvent", newRoundEvent)
+onEvent("TrickEndEvent", trickEndEvent)
+onEvent("NewTrickEvent", newTrickEvent)
+onEvent("RequestCardEvent", requestCardEvent)
+onEvent("CardPlayedEvent", receiveCardPlayedEvent)
+onEvent("LobbyUpdateEvent", receiveLobbyUpdateEvent)
+onEvent("LeftEvent", receiveGameStateChange)
+onEvent("KickEvent", receiveKickEvent)
+onEvent("SessionClosed", receiveSessionClosedEvent)
+onEvent("TurnEvent", receiveTurnEvent)
+onEvent("RoundEndEvent", receiveRoundEndEvent)
+
+globalThis.alertMessage = alertMessage
--- a/knockoutwhistweb/public/javascripts/interact.js
+++ b/knockoutwhistweb/public/javascripts/interact.js
@@ -0,0 +1,82 @@
+function handlePlayCard(card, dog) {
+
+    if(!canPlayCard) return
+    canPlayCard = false;
+
+    const cardId = card.dataset.cardId;
+
+    console.debug(`Playing card ${cardId} from hand`)
+
+    const wiggleKeyframes = [
+        { transform: 'translateX(0)' },
+        { transform: 'translateX(-5px)' },
+        { transform: 'translateX(5px)' },
+        { transform: 'translateX(-5px)' },
+        { transform: 'translateX(0)' }
+    ];
+
+    const wiggleTiming = {
+        duration: 400,
+        iterations: 1,
+        easing: 'ease-in-out',
+        fill: 'forwards'
+    };
+
+
+    const cardslide = $('#card-slide')
+
+    const payload = {
+        cardindex: cardId,
+        isDog: dog
+    }
+    sendEventAndWait("PlayCard", payload).then(
+        () => {
+            card.parentElement.remove();
+            cardslide.find('.handcard').each(function(newIndex) {
+
+                const $innerButton = $(this).find('.btn');
+                $innerButton.attr('data-card-id', newIndex);
+
+                const isInDogLife = $innerButton.attr('onclick').includes("'true'") ? 'true' : 'false';
+                $innerButton.attr('onclick', `handlePlayCard(this, '${isInDogLife}')`);
+
+                console.debug(`Re-indexed card: Old index was ${$innerButton.attr('data-card-id')}, New index is ${newIndex}`);
+            });
+
+            cardslide.addClass("inactive")
+        }
+    ).catch(
+        (err) => {
+            canPlayCard = true;
+            const cardslide = $('#card-slide')
+            cardslide.removeClass("inactive")
+            card.parentElement.animate(wiggleKeyframes, wiggleTiming);
+            alertMessage(err.message)
+        }
+    )
+}
+
+function handleSkipDogLife(button) {
+    // TODO needs implementation
+}
+function startGame() {
+    sendEvent("StartGame")
+}
+
+function handleTrumpSelection(object) {
+    const $button = $(object);
+    const trumpIndex = parseInt($button.data('trump'));
+    const payload = {
+        suitIndex: trumpIndex
+    }
+    sendEvent("PickTrumpsuit", payload)
+
+}
+function handleKickPlayer(playerId) {
+    sendEvent("KickPlayer", {
+        playerId: playerId
+    })
+}
+function handleReturnToLobby() {
+    sendEvent("ReturnToLobby")
+}
--- a/knockoutwhistweb/public/javascripts/main.js
+++ b/knockoutwhistweb/public/javascripts/main.js
@@ -1,3 +1,222 @@
-particlesJS.load('particles-js', 'assets/conf/particlesjs-config.json', function() {
-    console.log('callback - particles.js config loaded');
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2025 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+    'use strict'
+
+    const getStoredTheme = () => localStorage.getItem('theme')
+    const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+    const getPreferredTheme = () => {
+        const storedTheme = getStoredTheme()
+        if (storedTheme) {
+            return storedTheme
+        }
+
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    const setTheme = theme => {
+        if (theme === 'auto') {
+            document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+        } else {
+            document.documentElement.setAttribute('data-bs-theme', theme)
+        }
+    }
+
+    setTheme(getPreferredTheme())
+
+    const showActiveTheme = (theme, focus = false) => {
+        const themeSwitcher = document.querySelector('#bd-theme')
+
+        if (!themeSwitcher) {
+            return
+        }
+
+        const themeSwitcherText = document.querySelector('#bd-theme-text')
+        const activeThemeIcon = document.querySelector('.theme-icon-active use')
+        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+            element.classList.remove('active')
+            element.setAttribute('aria-pressed', 'false')
+        })
+
+        btnToActive.classList.add('active')
+        btnToActive.setAttribute('aria-pressed', 'true')
+        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+        if (focus) {
+            themeSwitcher.focus()
+        }
+    }
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        const storedTheme = getStoredTheme()
+        if (storedTheme !== 'light' && storedTheme !== 'dark') {
+            setTheme(getPreferredTheme())
+        }
+    })
+
+    window.addEventListener('DOMContentLoaded', () => {
+        showActiveTheme(getPreferredTheme())
+
+        document.querySelectorAll('[data-bs-theme-value]')
+            .forEach(toggle => {
+                toggle.addEventListener('click', () => {
+                    const theme = toggle.getAttribute('data-bs-theme-value')
+                    setStoredTheme(theme)
+                    setTheme(theme)
+                    showActiveTheme(theme, true)
+                })
+            })
+    })
+})()
+
+function createGameJS() {
+    let lobbyName = $('#lobbyname').val();
+    if ($.trim(lobbyName) === "") {
+        lobbyName = "DefaultLobby"
+    }
+    const jsonObj = {
+        lobbyname: lobbyName,
+        playeramount: $("#playeramount").val()
+    }
+    sendGameCreationRequest(jsonObj);
+}
+
+function sendGameCreationRequest(dataObject) {
+    const route = jsRoutes.controllers.MainMenuController.createGame();
+
+    $.ajax({
+        url: route.url,
+        type: route.type,
+        contentType: 'application/json',
+        data: JSON.stringify(dataObject),
+        dataType: 'json',
+        success: (data => {
+            if (data.status === 'success') {
+                exchangeBody(data.content, "Knockout Whist - Lobby", data.redirectUrl);
+            }
+        }),
+        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}`);
+            }
+        })
+    })
+}
+
+function exchangeBody(content, title = "Knockout Whist", url = null) {
+    if (url) {
+        window.history.pushState({}, title, url);
+    }
+    $("#main-body").html(content);
+    document.title = title;
+}
+
+function login() {
+    const username = $('#username').val();
+    const password = $('#password').val();
+
+    const jsonObj = {
+        username: username,
+        password: password
+    };
+
+    const route = jsRoutes.controllers.UserController.login_Post();
+    $.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, 'Knockout Whist - Create Game', data.redirectUrl);
+                return
+            }
+            alert('Login failed. Please check your credentials and try again.');
+        }),
+        error: ((jqXHR) => {
+            const errorData = JSON.parse(jqXHR.responseText);
+            if (errorData?.errorMessage) {
+                alert(`${errorData.errorMessage}`);
+            } else {
+                alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
+            }
+        })
    });
+}
+
+function joinGame() {
+    const gameId = $('#gameId').val();
+
+    const jsonObj = {
+        gameId: gameId
+    };
+
+    const route = jsRoutes.controllers.MainMenuController.joinGame();
+    $.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, "Knockout Whist - Lobby", 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?.errorMessage) {
+                alert(`${errorData.errorMessage}`);
+            } else {
+                alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
+            }
+        })
+    });
+    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?.errorMessage) {
+                alert(`${errorData.errorMessage}`);
+            } else {
+                alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
+            }
+        })
+    });
+    return false
+}
+
+
+globalThis.exchangeBody = exchangeBody;
--- a/knockoutwhistweb/public/javascripts/particles.js
+++ b/knockoutwhistweb/public/javascripts/particles.js
@@ -159,8 +159,7 @@ var pJS = function(tag_id, params){
        if (pJS.retina_detect && window.devicePixelRatio > 1) {
            pJS.canvas.pxratio = window.devicePixelRatio;
            pJS.tmp.retina = true;
-    } 
-    else{
+        } else {
            pJS.canvas.pxratio = 1;
            pJS.tmp.retina = false;
        }
@@ -181,7 +180,6 @@ var pJS = function(tag_id, params){
    };


-
    /* ---------- pJS functions - canvas ------------ */

    pJS.fn.canvasInit = function () {
@@ -289,15 +287,13 @@ var pJS = function(tag_id, params){
                }
            }

-    }
-    else if(color.value == 'random'){
+        } else if (color.value == 'random') {
            this.color.rgb = {
                r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
                g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
                b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0)
            }
-    }
-    else if(typeof(color.value) == 'string'){
+        } else if (typeof (color.value) == 'string') {
            this.color = color;
            this.color.rgb = hexToRgb(this.color.value);
        }
@@ -364,7 +360,6 @@ var pJS = function(tag_id, params){
        this.vy_i = this.vy;


-
        /* if shape is image */

        var shape_type = pJS.particles.shape.type;
@@ -393,7 +388,6 @@ var pJS = function(tag_id, params){
        }


-
    };


@@ -569,16 +563,14 @@ var pJS = function(tag_id, params){
            if (p.x - p.radius > pJS.canvas.w) {
                p.x = new_pos.x_left;
                p.y = Math.random() * pJS.canvas.h;
-      }
-      else if(p.x + p.radius < 0){
+            } else if (p.x + p.radius < 0) {
                p.x = new_pos.x_right;
                p.y = Math.random() * pJS.canvas.h;
            }
            if (p.y - p.radius > pJS.canvas.h) {
                p.y = new_pos.y_top;
                p.x = Math.random() * pJS.canvas.w;
-      }
-      else if(p.y + p.radius < 0){
+            } else if (p.y + p.radius < 0) {
                p.y = new_pos.y_bottom;
                p.x = Math.random() * pJS.canvas.w;
            }
@@ -947,10 +939,7 @@ var pJS = function(tag_id, params){
                p.y = pos.y;
            }

-    }
-
-
-    else if(pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) {
+        } else if (pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) {

            if (!pJS.tmp.repulse_finish) {
                pJS.tmp.repulse_count++;
@@ -1056,7 +1045,6 @@ var pJS = function(tag_id, params){
    };


-
    /* ---------- pJS functions - vendors ------------ */

    pJS.fn.vendors.eventsListeners = function () {
@@ -1078,8 +1066,7 @@ var pJS = function(tag_id, params){
                if (pJS.interactivity.el == window) {
                    var pos_x = e.clientX,
                        pos_y = e.clientY;
-        }
-        else{
+                } else {
                    var pos_x = e.offsetX || e.clientX,
                        pos_y = e.offsetY || e.clientY;
                }
@@ -1126,8 +1113,7 @@ var pJS = function(tag_id, params){
                            } else {
                                if (pJS.interactivity.modes.push.particles_nb == 1) {
                                    pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);
-                }
-                else if(pJS.interactivity.modes.push.particles_nb > 1){
+                                } else if (pJS.interactivity.modes.push.particles_nb > 1) {
                                    pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb);
                                }
                            }
@@ -1398,8 +1384,6 @@ var pJS = function(tag_id, params){
    };


-
-
    /* ---------- pJS - start ------------ */


@@ -1408,7 +1392,6 @@ var pJS = function(tag_id, params){
    pJS.fn.vendors.start();


-
 };

 /* ---------- global functions - vendors ------------ */
--- a/knockoutwhistweb/public/javascripts/websocket.js
+++ b/knockoutwhistweb/public/javascripts/websocket.js
@@ -0,0 +1,197 @@
+// javascript
+let ws = null; // will be created by connectWebSocket()
+const pending = new Map(); // id -> { resolve, reject, timer }
+const handlers = new Map(); // eventType -> handler(data) -> (value|Promise)
+
+let timer = null;
+
+// helper to attach message/error/close handlers to a socket
+function setupSocketHandlers(socket) {
+    socket.onmessage = (event) => {
+        console.debug("SERVER MESSAGE:", event.data);
+        let msg;
+        try {
+            msg = JSON.parse(event.data);
+        } catch (e) {
+            console.debug("Non-JSON message from server:", event.data, e);
+            return;
+        }
+
+        const id = msg.id;
+        const eventType = msg.event;
+        const status = msg.status;
+        const data = msg.data;
+
+        if (id && typeof status === "string") {
+            const entry = pending.get(id);
+            if (!entry) return;
+            clearTimeout(entry.timer);
+            pending.delete(id);
+
+            if (status === "success") {
+                entry.resolve(data === undefined ? {} : data);
+            } else {
+                entry.reject(new Error(msg.error || "Server returned error"));
+            }
+            return;
+        }
+
+        if (id && eventType) {
+            const handler = handlers.get(eventType);
+            const sendResponse = (result) => {
+                const response = {id: id, event: eventType, status: result};
+                if (socket && socket.readyState === WebSocket.OPEN) {
+                    socket.send(JSON.stringify(response));
+                } else {
+                    console.warn("Cannot send response, websocket not open");
+                }
+            };
+
+            if (!handler) {
+                // no handler: respond with an error object in data so server can fail it
+                console.warn("No handler for event:", eventType);
+                sendResponse({error: "No handler for event: " + eventType});
+                return;
+            }
+
+            try {
+                Promise.resolve(handler(data === undefined ? {} : data))
+                    .then(_ => sendResponse("success"))
+                    .catch(_ => sendResponse("error"));
+            } catch (err) {
+                sendResponse("error");
+            }
+        }
+    };
+
+    socket.onerror = (error) => {
+        console.error("WebSocket Error:", error);
+        if (timer) clearInterval(timer);
+        for (const [id, entry] of pending.entries()) {
+            clearTimeout(entry.timer);
+            entry.reject(new Error("WebSocket error/closed"));
+            pending.delete(id);
+        }
+        if (socket.readyState === WebSocket.OPEN) socket.close(1000, "Unexpected error.");
+    };
+
+    socket.onclose = (event) => {
+        if (timer) clearInterval(timer);
+        for (const [id, entry] of pending.entries()) {
+            clearTimeout(entry.timer);
+            entry.reject(new Error("WebSocket closed"));
+            pending.delete(id);
+        }
+        if (event.wasClean) {
+            console.log(`Connection closed cleanly, code=${event.code} reason=${event.reason}`);
+        } else {
+            console.warn('Connection died unexpectedly.');
+        }
+    };
+}
+
+// connect/disconnect helpers
+function connectWebSocket(url = null) {
+    if (!url) {
+        const loc = window.location;
+        const protocol = loc.protocol === "https:" ? "wss:" : "ws:";
+        url = protocol + "//" + loc.host + "/websocket";
+    }
+    if (ws && ws.readyState === WebSocket.OPEN) return Promise.resolve();
+    if (ws && ws.readyState === WebSocket.CONNECTING) {
+        // already connecting - return a promise that resolves on open
+        return new Promise((resolve, reject) => {
+            const prevOnOpen = ws.onopen;
+            const prevOnError = ws.onerror;
+            ws.onopen = (ev) => {
+                if (prevOnOpen) prevOnOpen(ev);
+                resolve();
+            };
+            ws.onerror = (err) => {
+                if (prevOnError) prevOnError(err);
+                reject(err);
+            };
+        });
+    }
+
+    ws = new WebSocket(url);
+    setupSocketHandlers(ws);
+
+    return new Promise((resolve, reject) => {
+        ws.onopen = () => {
+            console.log("WebSocket connection established!");
+            // start heartbeat
+            timer = setInterval(() => {
+                if (ws && ws.readyState === WebSocket.OPEN) {
+                    sendEventAndWait("ping", {}).then(
+                        () => console.debug("PING RESPONSE RECEIVED"),
+                    ).catch(
+                        (err) => console.warn("PING ERROR:", err.message),
+                    );
+                    console.debug("PING SENT");
+                }
+            }, 5000);
+            resolve();
+        };
+
+        ws.onerror = (err) => {
+            reject(err);
+        };
+    });
+}
+
+function disconnectWebSocket(code = 1000, reason = "Client disconnect") {
+    if (timer) {
+        clearInterval(timer);
+        timer = null;
+    }
+    if (ws) {
+        try {
+            ws.close(code, reason);
+        } catch (e) {
+        }
+        ws = null;
+    }
+}
+
+function sendEvent(eventType, eventData) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+        console.warn("WebSocket is not open. Unable to send message.");
+        return;
+    }
+    const id = Date.now().toString(36) + Math.random().toString(36).substring(2, 9);
+    const message = {id: id, event: eventType, data: eventData};
+    ws.send(JSON.stringify(message));
+    console.debug("SENT:", message);
+}
+
+function sendEventAndWait(eventType, eventData, timeoutMs = 10000) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+        return Promise.reject(new Error("WebSocket is not open"));
+    }
+    const id = Date.now().toString(36) + Math.random().toString(36).substring(2, 9);
+    const message = {id: id, event: eventType, data: eventData};
+    const p = new Promise((resolve, reject) => {
+        const timerId = setTimeout(() => {
+            if (pending.has(id)) {
+                pending.delete(id);
+                reject(new Error(`No response within ${timeoutMs}ms for id=${id}`));
+            }
+        }, timeoutMs);
+        pending.set(id, {resolve, reject, timer: timerId});
+    });
+    ws.send(JSON.stringify(message));
+    console.debug("SENT (await):", message);
+    return p;
+}
+
+function onEvent(eventType, handler) {
+    handlers.set(eventType, handler);
+}
+
+globalThis.sendEvent = sendEvent;
+globalThis.sendEventAndWait = sendEventAndWait;
+globalThis.onEvent = onEvent;
+globalThis.connectWebSocket = connectWebSocket;
+globalThis.disconnectWebSocket = disconnectWebSocket;
+globalThis.isWebSocketConnected = () => !!ws && ws.readyState === WebSocket.OPEN;
--- a/project/plugins.sbt
+++ b/project/plugins.sbt
@@ -6,3 +6,5 @@ addSbtPlugin("com.eed3si9n" % "sbt-assembly" % "2.3.0")
 addSbtPlugin("org.scoverage" % "sbt-coveralls" % "1.3.1")

 addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.1.2")
+addSbtPlugin("nl.gn0s1s" % "sbt-dotenv" % "3.2.0")
+
--- a/versions.env
+++ b/versions.env
@@ -1,3 +1,3 @@
-MAJOR=2
-MINOR=0
+MAJOR=4
+MINOR=6
 PATCH=0
Author	SHA1	Message	Date
TeamCity	f115c03ecb	ci: bump version to v4.6.0	2025-12-01 19:07:26 +00:00
Janis	fd2467a9ea	feat(api): BAC-11 Websocket - Return to Lobby (#94 ) Reviewed-on: #94 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-12-01 20:04:17 +01:00
TeamCity	9d3f3940a9	ci: bump version to v4.5.0	2025-12-01 18:53:23 +00:00
Janis	0541bb58d1	feat(api): BAC-10 Websockets - Kick Users (#93 ) Reviewed-on: #93 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-12-01 19:50:19 +01:00
TeamCity	89a6aa22f7	ci: bump version to v4.4.0	2025-12-01 18:18:44 +00:00
Janis	6e17328846	feat: GameState to Title Mapping BAC-1 (#92 ) Reviewed-on: #92 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-12-01 19:13:32 +01:00
Janis	0037820905	feat(ui): Popups (#91 ) Fixed sorting and added popups for trickend and roundend Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #91	2025-11-27 10:01:19 +01:00
Janis	cfcd967ce0	fix(api): fixes - reimplemented animations (#90 ) Reviewed-on: #90	2025-11-27 09:52:00 +01:00
Janis	1f96290371	feat(ui): Implement countless feature using the SJWP (#89 ) Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #89	2025-11-27 08:53:37 +01:00
Janis	2aee79bb68	feat(api): Implemented turn event via websocket (#86 ) Co-authored-by: TeamCity <teamcity@service.local> Reviewed-on: #86 Reviewed-by: lq64 <lq@blackhole.local>	2025-11-27 07:57:37 +01:00
Janis	46c96d4ceb	fix(api): Fixed websocket routing (#88 ) Reviewed-on: #88 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-11-27 07:51:02 +01:00
TeamCity	14b4473f72	ci: bump version to v4.3.0	2025-11-26 17:44:23 +00:00
Janis	1ef5e8a72f	feat(api): Implemented session closed and kick event via websocket (#87 ) Reviewed-on: #87 Reviewed-by: lq64 <lq@blackhole.local> Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-11-26 18:41:25 +01:00
TeamCity	576e5af87e	ci: bump version to v4.2.0	2025-11-26 12:37:57 +00:00
Janis	3c0828fdbe	feat(api): Implemented card played event via websocket (#85 ) Reviewed-on: #85 Reviewed-by: lq64 <lq@blackhole.local> Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-11-26 13:35:05 +01:00
TeamCity	ae7f04abc3	ci: bump version to v4.1.0	2025-11-26 10:29:11 +00:00
Janis	b81bb3d0ae	feat(base): Fixed logic for websockets and added GameStateEvent. Might've caused instability on other feature branches! (#84 ) Reviewed-on: #84 Reviewed-by: lq64 <lq@blackhole.local> Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-11-26 11:26:08 +01:00
Janis	52e5033afc	feat(api): Implement received hand event handling and UI updates (#83 ) #76 Reviewed-on: #83	2025-11-24 14:31:31 +01:00
TeamCity	10a26404b3	ci: bump version to v4.0.1	2025-11-24 11:21:05 +00:00
TeamCity	11478a096d	ci: bump version to v4.0.0	2025-11-23 15:15:09 +00:00
Janis	8ca909db52	feat(websocket)!: Implement WebSocket connection and event handling (#82 ) Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #82 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-11-23 16:11:46 +01:00
TeamCity	1edb3bfd89	ci: bump version to v3.0.1	2025-11-22 20:38:51 +00:00
Janis	9738a04b7a	fix(api): Fixed a bug where the game would reload on game start (#81 ) Reviewed-on: #81 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-11-22 21:36:23 +01:00
TeamCity	2bc50664e0	ci: bump version to v3.0.0	2025-11-20 15:31:03 +00:00
Janis	3e3a062a06	ci: bump version to v2.0.0	2025-11-20 16:27:39 +01:00
Janis	641c892981	fix(polling): Improve polling mechanism and delay handling (#60 ) Reviewed-on: #60	2025-11-20 10:51:39 +01:00
Janis	a58b2e03b1	feat(game)!: Fixed polling, SPA, Gameplayloop etc. (#59 ) Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #59 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-11-19 22:54:20 +01:00
Janis	e60fe7c98d	feat(ci): Polling Added polling for when the game starts and a card gets played (#58 ) Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #58	2025-11-14 09:11:32 +01:00
Janis	370de175db	feat(ci): Polling Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #53	2025-11-13 11:07:08 +01:00
Janis	5d245d0011	feat(ui): implement tie & trump menu, fixed some critical bugs (#52 ) Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #52 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-11-13 08:20:30 +01:00
lq64	c220e54bb8	feat(ui): added js routing, updated ingame ui, added tricktable (#50 ) This merge request has full JS routing for calling specific endpoints. Game is fully playable but doesn't have polling yet. This version already has the UI changes adressed in MR #43 so first merge MR #43 and then this one or only merge this one because it already has the UI changes :) Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #50 Reviewed-by: Janis <janis-e@gmx.de>	2025-11-12 11:44:21 +01:00
TeamCity	b847d3c054	ci: bump version to v1.0.9	2025-11-07 16:54:36 +00:00
Janis	c7dd72ecc2	fix: removed trailing	2025-11-07 17:52:12 +01:00
Janis	42a5adbae0	fix: removed trailing	2025-11-07 17:46:55 +01:00
TeamCity	ae9a8f2af9	ci: bump version to v1.0.8	2025-11-07 16:28:11 +00:00
Janis	7adc8b8645	fix: trailing	2025-11-07 17:25:35 +01:00
TeamCity	146348470f	ci: bump version to v1.0.7	2025-11-07 15:52:23 +00:00
Janis	5e503cbc36	fix: removed trailing	2025-11-07 16:49:51 +01:00
TeamCity	126e2030ae	ci: bump version to v1.0.6	2025-11-07 15:45:22 +00:00
Janis	54e3215127	fix: traling	2025-11-07 16:42:50 +01:00
TeamCity	72d2845772	ci: bump version to v1.0.5	2025-11-07 15:00:33 +00:00
Janis	64a7a63ab3	fix: removed trailing	2025-11-07 15:56:50 +01:00
TeamCity	51c36348b9	ci: bump version to v1.0.4	2025-11-07 14:47:49 +00:00
Janis	2e54880302	fix: changelog syntax	2025-11-07 15:45:31 +01:00
TeamCity	266406fe7c	ci: bump version to v1.0.3	2025-11-07 14:38:07 +00:00
Janis	5c6d3ac436	fix: ensure proper CMD syntax in Dockerfile (#48 ) Reviewed-on: #48 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-11-07 15:24:08 +01:00
TeamCity	674619dadc	ci: bump version to v1.0.2	2025-11-07 14:09:00 +00:00
TeamCity	ef539d3eea	ci: bump version to v1.0.1	2025-11-07 14:02:39 +00:00
TeamCity	e09463b138	ci: bump version to v1.0.0	2025-11-07 13:45:15 +00:00
Janis	4d6ea54771	feat(docker): added docker container support (#47 ) Reviewed-on: #47 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-11-07 14:22:23 +01:00
Janis	aa83082d09	fix: update allowed hosts filter and adjust background color in login page (#45 ) Reviewed-on: #45	2025-11-07 11:13:59 +01:00
Janis	42e7597e26	ci: revert setup (#44 ) Reviewed-on: #44	2025-11-07 11:05:49 +01:00
TeamCity	6befd9c722	ci: bump version to v.. [skip ci]	2025-11-07 09:58:59 +00:00
Janis	51d9c0b5f6	fix: disabled external node	2025-11-07 10:18:11 +01:00
Janis	de565b52dc	fix: update file paths and improve session handling in user interactions (#39 ) Reviewed-on: #39	2025-11-06 10:03:28 +01:00
Janis	051e7406e3	feat(ui): add Lobby and Main Menu Body (#38 ) Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #38 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-11-06 09:03:09 +01:00