feat(ui): added working ingame ui

Added ingame ui with bootstrap. There were problems with the lock procedure
feat(ui): add Lobby and Main Menu Body
2025-11-05 11:39:50 +01:00 · 2025-11-05 11:38:32 +01:00 · 2025-11-05 11:36:08 +01:00 · 2025-11-05 11:32:26 +01:00
38 changed files with 538 additions and 2224 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1 +0,0 @@
 .env
--- a/.gitignore
+++ b/.gitignore
@@ -138,4 +138,3 @@ target
 /knockoutwhistweb/.g8/
 /knockoutwhistweb/.bsp/
 /currentSnapshot.json
 .env
--- a/.sbtopts
+++ b/.sbtopts
@@ -1,2 +0,0 @@
 -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-07)
+##  (2025-11-03)
 ### ⚠ BREAKING CHANGES
@@ -7,10 +7,7 @@
 ### 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)
@@ -21,22 +18,17 @@
 * **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-07)
+##  (2025-11-03)
 ### ⚠ BREAKING CHANGES
@@ -45,10 +37,7 @@
 ### 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)
@@ -59,68 +48,94 @@
 * **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)
 ### Bug Fixes
 * 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
 * changelog syntax ([2e54880](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/2e548803020c99f62644283fcf3570048261173a))
 ##  (2025-11-07)
 ### Bug Fixes
 * 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-19)
 ### ⚠ BREAKING CHANGES
-* **game:** Fixed polling, SPA, Gameplayloop etc. (#59)
+* implemented multigame support (#34)
 ### Features
-* **ci:** Polling ([370de17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/370de175db65edf87e7ab211190977b540a39d85))
+* **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))
-* **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))
+* 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))
-* **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 rules ([#12](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/12)) ([92e4851](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/92e4851219e64ad919d7f8bc7c30232ef7d6570f))
-* **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:** 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 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))
+* **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))
 ### 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))
 ### 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))
 ### 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))
--- a/41
+++ b/41
@@ -1,41 +0,0 @@
 # === 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
@@ -19,6 +19,7 @@ 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 +40,7 @@ lazy val knockoutwhistweb = project.in(file("knockoutwhistweb"))
    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.github.ben-manes.caffeine" % "caffeine" % "3.2.2"
    JsEngineKeys.engineType := JsEngineKeys.EngineType.Node
  )
 lazy val root = (project in file("."))
--- a/conventionalcommit.json
+++ b/conventionalcommit.json
@@ -113,4 +113,4 @@
      "description": "The commit references another commit by its hash ID.<br>For multiple hash IDs, use a comma as separator"
    }
  }
-}
+}
--- a/2
+++ b/2
--- a/knockoutwhistweb/app/assets/stylesheets/dark-mode.less
+++ b/knockoutwhistweb/app/assets/stylesheets/dark-mode.less
@@ -1,14 +1,6 @@
@media (prefers-color-scheme: dark) {
  :root {
-    --background-image: url('/assets/images/background.png') !important;
+    --background-image: url('/assets/images/background.png');
-    --color: #f8f9fa !important; /* Light text on dark bg */
+    --color: white;
    --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,6 +1,4 @@
 :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,87 +2,16 @@
@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); }
 }
 .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 {
@@ -90,15 +19,6 @@ body {
    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;
@@ -133,21 +53,31 @@ body {
    font-size: 40px;
    font-family: Arial, serif;
 }
-
+#playercards {
-.ingame-cards-slide {
+    display: flex;
-  div {
+    flex-direction: row;
-    animation: slideIn 0.5s ease-out forwards;
+    justify-content: center;
-    animation-fill-mode: backwards;
+    height: 20%;
-    &:nth-child(1) { animation-delay: 0.5s; }
+    img {
-    &:nth-child(2) { animation-delay: 1s; }
+        animation: slideIn 0.5s ease-out forwards;
-    &:nth-child(3) { animation-delay: 1.5s; }
+        animation-fill-mode: backwards;
-    &:nth-child(4) { animation-delay: 2s; }
+        &:nth-child(1) { animation-delay: 0.5s; }
-    &:nth-child(5) { animation-delay: 2.5s; }
+        &:nth-child(2) { animation-delay: 1s; }
-    &:nth-child(6) { animation-delay: 3s; }
+        &:nth-child(3) { animation-delay: 1.5s; }
-    &:nth-child(7) { animation-delay: 3.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;
@@ -181,6 +111,11 @@ body {
    font-size: 20px;
 }
 #trumpsuit {
    display: flex;
    flex-direction: row;
    margin-left: 4%;
 }
 #nextPlayers {
    display: flex;
    flex-direction: column;
@@ -204,52 +139,4 @@ body {
    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
@@ -14,8 +14,8 @@ class AuthAction @Inject()(val sessionManager: SessionManager, val parser: BodyP
  extends ActionBuilder[AuthenticatedRequest, AnyContent] {
  override def executionContext: ExecutionContext = ec
-
+  
-  protected def getUserFromSession(request: RequestHeader): Option[User] = {
+  private def getUserFromSession(request: RequestHeader): Option[User] = {
    val session = request.cookies.get("sessionId")
    if (session.isDefined)
      return sessionManager.getUserBySession(session.get.value)
--- a/knockoutwhistweb/app/controllers/IngameController.scala
+++ b/knockoutwhistweb/app/controllers/IngameController.scala
@@ -1,74 +1,57 @@
 package controllers
 import auth.{AuthAction, AuthenticatedRequest}
-import de.knockoutwhist.control.GameState.{FinishedMatch, InGame, Lobby, SelectTrump, TieBreak}
+import de.knockoutwhist.control.GameState.{InGame, Lobby, SelectTrump, TieBreak}
-import exceptions.*
+import exceptions.{CantPlayCardException, GameFullException, NotEnoughPlayersException, NotHostException, NotInThisGameException}
 import logic.PodManager
-import logic.game.GameLobby
+import model.sessions.{PlayerSession, UserSession}
 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 java.util.UUID
 import javax.inject.*
 import scala.concurrent.ExecutionContext
 import scala.util.Try
@Singleton
 class IngameController @Inject() (
                                   val cc: ControllerComponents,
                                   val podManager: PodManager,
                                   val authAction: AuthAction,
                                   implicit val ec: ExecutionContext
                                 ) extends AbstractController(cc) {
-  def returnInnerHTML(gameLobby: GameLobby, user: User): Html = {
+/**
-    gameLobby.logic.getCurrentState match {
+ * This controller creates an `Action` to handle HTTP requests to the
-      case Lobby => views.html.lobby.lobby(Some(user), gameLobby)
+ * application's home page.
-      case InGame =>
+ */
-        views.html.ingame.ingame(
+@Singleton
-          gameLobby.getPlayerByUser(user),
+class IngameController @Inject()(
-          gameLobby
+                                  val controllerComponents: ControllerComponents,
-        )
+                                  val authAction: AuthAction,
-      case SelectTrump =>
+                                  val podManager: PodManager
-          views.html.ingame.selecttrump(
+                                ) extends BaseController {
            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}")
    }
  }
  def game(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
    val game = podManager.getGame(gameId)
    game match {
      case Some(g) =>
-        val results = Try {
+        g.logic.getCurrentState match {
-          returnInnerHTML(g, request.user)
+          case Lobby => Ok(views.html.lobby.lobby(Some(request.user), g))
-
+          case InGame =>
-        }
+            Ok(views.html.ingame.ingame(
-        if (results.isSuccess) {
+              g.getPlayerByUser(request.user),
-          Ok(views.html.main("In-Game - Knockout Whist")(results.get))
+              g
-        } else {
+            ))
-          InternalServerError(results.failed.get.getMessage)
+          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}")
        }
      case None =>
        NotFound("Game not found")
    }
    //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)
@@ -81,80 +64,62 @@ class IngameController @Inject() (
      }
    }
    if (result.isSuccess) {
-      Ok(Json.obj(
+      Redirect(routes.IngameController.game(gameId))
        "status" -> "success",
        "redirectUrl" -> routes.IngameController.game(gameId).url
      ))
    } else {
      val throwable = result.failed.get
      throwable match {
        case _: NotInThisGameException =>
-          BadRequest(Json.obj(
+          BadRequest(throwable.getMessage)
            "status" -> "failure",
            "errorMessage" -> throwable.getMessage
          ))
        case _: NotHostException =>
-          Forbidden(Json.obj(
+          Forbidden(throwable.getMessage)
            "status" -> "failure",
            "errorMessage" -> throwable.getMessage
          ))
        case _: NotEnoughPlayersException =>
-          BadRequest(Json.obj(
+          BadRequest(throwable.getMessage)
            "status" -> "failure",
            "errorMessage" -> throwable.getMessage
          ))
        case _ =>
-          InternalServerError(Json.obj(
+          InternalServerError(throwable.getMessage)
            "status" -> "failure",
            "errorMessage" -> throwable.getMessage
          ))
      }
    }
  }
-  def kickPlayer(gameId: String, playerToKick: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
+  def kickPlayer(gameId: String, playerToKick: UUID): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
    val game = podManager.getGame(gameId)
-    val playerToKickUUID = UUID.fromString(playerToKick)
+    game.get.leaveGame(playerToKick)
-    val result = Try {
+    Redirect(routes.IngameController.game(gameId))
      game.get.leaveGame(playerToKickUUID)
    }
    if(result.isSuccess) {
      Ok(Json.obj(
        "status" -> "success",
        "redirectUrl" -> routes.IngameController.game(gameId).url
      ))
    } else {
      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)
    game.get.leaveGame(request.user.id)
    Redirect(routes.MainMenuController.mainMenu())
  }
  def joinGame(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
    val game = podManager.getGame(gameId)
    val result = Try {
-      game.get.leaveGame(request.user.id)
+      game match {
        case Some(g) =>
          g.addUser(request.user)
        case None =>
          NotFound("Game not found")
      }
    }
    if (result.isSuccess) {
-      Ok(Json.obj(
+      Redirect(routes.IngameController.game(gameId))
        "status" -> "success",
        "redirectUrl" -> routes.MainMenuController.mainMenu().url
      ))
    } else {
-      InternalServerError(Json.obj(
+      val throwable = result.failed.get
-        "status" -> "failure",
+      throwable match {
-        "errorMessage" -> "Something went wrong."
+        case _: GameFullException =>
-      ))
+          BadRequest(throwable.getMessage)
        case _: IllegalArgumentException =>
          BadRequest(throwable.getMessage)
        case _: IllegalStateException =>
          BadRequest(throwable.getMessage)
        case _ =>
          InternalServerError(throwable.getMessage)
      }
    }
  }
  def playCard(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] => {
    val game = podManager.getGame(gameId)
    game match {
      case Some(g) =>
-        val jsonBody = request.body.asJson
+        val cardIdOpt = request.body.asFormUrlEncoded.flatMap(_.get("cardId").flatMap(_.headOption))
        val cardIdOpt: Option[String] = jsonBody.flatMap { jsValue =>
          (jsValue \ "cardID").asOpt[String]
        }
        cardIdOpt match {
          case Some(cardId) =>
            var optSession: Option[UserSession] = None
@@ -166,55 +131,27 @@ class IngameController @Inject() (
            }
            optSession.foreach(_.lock.unlock())
            if (result.isSuccess) {
-              Ok(Json.obj(
+              NoContent
                "status" -> "success"
              ))
            } else {
              val throwable = result.failed.get
              throwable match {
                case _: CantPlayCardException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
                case _: NotInThisGameException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
                case _: IllegalArgumentException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
                case _: IllegalStateException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
                case _: NotInteractableException =>
                  BadRequest(Json.obj(
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
                case _ =>
-                  InternalServerError(Json.obj(
+                  InternalServerError(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
              }
            }
          case None =>
-            BadRequest(Json.obj(
+            BadRequest("cardId parameter is missing")
              "status" -> "failure",
              "errorMessage" -> "cardId Parameter is missing"
            ))
        }
      case None =>
-        NotFound(Json.obj(
+        NotFound("Game not found")
          "status" -> "failure",
          "errorMessage" -> "Game not found"
        ))
    }
  }
  }
@@ -222,10 +159,7 @@ class IngameController @Inject() (
    val game = podManager.getGame(gameId)
    game match {
      case Some(g) => {
-        val jsonBody = request.body.asJson
+        val cardIdOpt = request.body.asFormUrlEncoded.flatMap(_.get("cardId").flatMap(_.headOption))
        val cardIdOpt: Option[String] = jsonBody.flatMap { jsValue =>
          (jsValue \ "cardID").asOpt[String]
        }
        var optSession: Option[UserSession] = None
        val result = Try {
          cardIdOpt match {
@@ -250,30 +184,15 @@ class IngameController @Inject() (
          val throwable = result.failed.get
          throwable match {
            case _: CantPlayCardException =>
-              BadRequest(Json.obj(
+              BadRequest(throwable.getMessage)
                "status" -> "failure",
                "errorMessage" -> throwable.getMessage
              ))
            case _: NotInThisGameException =>
-              BadRequest(Json.obj(
+              BadRequest(throwable.getMessage)
                "status" -> "failure",
                "errorMessage" -> throwable.getMessage
              ))
            case _: IllegalArgumentException =>
-              BadRequest(Json.obj(
+              BadRequest(throwable.getMessage)
                "status" -> "failure",
                "errorMessage" -> throwable.getMessage
              ))
            case _: IllegalStateException =>
-              BadRequest(Json.obj(
+              BadRequest(throwable.getMessage)
                "status" -> "failure",
                "errorMessage" -> throwable.getMessage
              ))
            case _ =>
-              InternalServerError(Json.obj(
+              InternalServerError(throwable.getMessage)
                "status" -> "failure",
                "errorMessage" -> throwable.getMessage
              ))
          }
        }
      }
@@ -286,10 +205,7 @@ class IngameController @Inject() (
    val game = podManager.getGame(gameId)
    game match {
      case Some(g) =>
-        val jsonBody = request.body.asJson
+        val trumpOpt = request.body.asFormUrlEncoded.flatMap(_.get("trump").flatMap(_.headOption))
        val trumpOpt: Option[String] = jsonBody.flatMap { jsValue =>
          (jsValue \ "trump").asOpt[String]
        }
        trumpOpt match {
          case Some(trump) =>
            var optSession: Option[UserSession] = None
@@ -306,25 +222,13 @@ class IngameController @Inject() (
              val throwable = result.failed.get
              throwable match {
                case _: IllegalArgumentException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
                case _: NotInThisGameException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
                case _: IllegalStateException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
                case _ =>
-                  InternalServerError(Json.obj(
+                  InternalServerError(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
              }
            }
          case None =>
@@ -338,10 +242,7 @@ class IngameController @Inject() (
    val game = podManager.getGame(gameId)
    game match {
      case Some(g) =>
-        val jsonBody = request.body.asJson
+        val tieOpt = request.body.asFormUrlEncoded.flatMap(_.get("tie").flatMap(_.headOption))
        val tieOpt: Option[String] = jsonBody.flatMap { jsValue =>
          (jsValue \ "tie").asOpt[String]
        }
        tieOpt match {
          case Some(tie) =>
            var optSession: Option[UserSession] = None
@@ -358,25 +259,13 @@ class IngameController @Inject() (
              val throwable = result.failed.get
              throwable match {
                case _: IllegalArgumentException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
                case _: NotInThisGameException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
                case _: IllegalStateException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
                case _ =>
-                  InternalServerError(Json.obj(
+                  InternalServerError(throwable.getMessage)
                    "status" -> "failure",
                    "errorMessage" -> throwable.getMessage
                  ))
              }
            }
          case None =>
@@ -386,47 +275,5 @@ class IngameController @Inject() (
        NotFound("Game not found")
    }
  }
  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"
        ))
    }
  }
 }
--- a/knockoutwhistweb/app/controllers/JavaScriptRoutingController.scala
+++ b/knockoutwhistweb/app/controllers/JavaScriptRoutingController.scala
@@ -1,35 +0,0 @@
 package controllers
 import auth.{AuthAction, AuthenticatedRequest}
 import logic.PodManager
 import play.api.mvc.{Action, AnyContent, BaseController, ControllerComponents}
 import play.api.routing.JavaScriptReverseRouter
 import javax.inject.Inject
 class JavaScriptRoutingController  @Inject()(
                                              val controllerComponents: ControllerComponents,
                                              val authAction: AuthAction,
                                              val podManager: PodManager
                                            ) extends BaseController {
  def javascriptRoutes(): Action[AnyContent] =
    Action { implicit request =>
    Ok(
      JavaScriptReverseRouter("jsRoutes")(
          routes.javascript.MainMenuController.createGame,
          routes.javascript.MainMenuController.joinGame,
          routes.javascript.MainMenuController.navSPA,
          routes.javascript.IngameController.startGame,
          routes.javascript.IngameController.kickPlayer,
          routes.javascript.IngameController.leaveGame,
          routes.javascript.IngameController.playCard,
          routes.javascript.IngameController.playDogCard,
          routes.javascript.IngameController.playTrump,
          routes.javascript.IngameController.playTie,
          routes.javascript.IngameController.returnToLobby,
          routes.javascript.PollingController.polling,
          routes.javascript.UserController.login_Post
      )
    ).as("text/javascript")
  }
 }
--- a/knockoutwhistweb/app/controllers/MainMenuController.scala
+++ b/knockoutwhistweb/app/controllers/MainMenuController.scala
@@ -3,7 +3,6 @@ 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.*
@@ -17,13 +16,12 @@ import javax.inject.*
 class MainMenuController @Inject()(
                                    val controllerComponents: ControllerComponents,
                                    val authAction: AuthAction,
-                                    val podManager: PodManager,
+                                    val podManager: PodManager
                                    val ingameController: IngameController
                                  ) 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.main("Knockout Whist - Create Game")(views.html.mainmenu.creategame(Some(request.user))))
+    Ok(views.html.mainmenu.creategame(Some(request.user)))
  }
  def index(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
@@ -31,86 +29,41 @@ class MainMenuController @Inject()(
  }
  def createGame(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val jsonBody = request.body.asJson
+    val postData = request.body.asFormUrlEncoded
-    if (jsonBody.isDefined) {
+    if (postData.isDefined) {
-      val gamename: String = (jsonBody.get \ "lobbyname").asOpt[String]
+      val gamename = postData.get.get("lobbyname").flatMap(_.headOption).getOrElse(s"${request.user.name}'s Game")
-        .getOrElse(s"${request.user.name}'s Game")
+      val playeramount = postData.get.get("playeramount").flatMap(_.headOption).getOrElse("")
      val playeramount: String = (jsonBody.get \ "playeramount").asOpt[String]
        .getOrElse(throw new IllegalArgumentException("Player amount is required."))
      val gameLobby = podManager.createGame(
        host = request.user,
        name = gamename,
        maxPlayers = playeramount.toInt
      )
-      Ok(Json.obj(
+      Redirect(routes.IngameController.game(gameLobby.id))
        "status" -> "success",
        "redirectUrl" -> routes.IngameController.game(gameLobby.id).url,
        "content" -> ingameController.returnInnerHTML(gameLobby, request.user).toString
      ))
    } else {
-      BadRequest(Json.obj(
+      BadRequest("Invalid form submission")
        "status" -> "failure",
        "errorMessage" -> "Invalid form submission"
      ))
    }
  }
  def joinGame(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val jsonBody = request.body.asJson
+    val postData = request.body.asFormUrlEncoded
-    val gameId: Option[String] = jsonBody.flatMap { jsValue =>
+    if (postData.isDefined) {
-      (jsValue \ "gameId").asOpt[String]
+      val gameId = postData.get.get("gameId").flatMap(_.headOption).getOrElse("")
-    }
+      val game = podManager.getGame(gameId)
    if (gameId.isDefined) {
      val game = podManager.getGame(gameId.get)
      game match {
        case Some(g) =>
-          g.addUser(request.user)
+          Redirect(routes.IngameController.joinGame(gameId))
          Ok(Json.obj(
            "status" -> "success",
            "redirectUrl" -> routes.IngameController.game(g.id).url,
            "content" -> ingameController.returnInnerHTML(g, request.user).toString
          ))
        case None =>
-          NotFound(Json.obj(
+          NotFound("Game not found")
            "status" -> "failure",
            "errorMessage" -> "No Game found"
          ))
      }
    } else {
-      BadRequest(Json.obj(
+      BadRequest("Invalid form submission")
        "status" -> "failure",
        "errorMessage" -> "Invalid form submission"
      ))
    }
  }
-  def rules(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
+  def rules(): Action[AnyContent] = {
-    Ok(views.html.main("Knockout Whist - Rules")(views.html.mainmenu.rules(Some(request.user))))
+    Action { implicit request =>
-  }
+      Ok(views.html.mainmenu.rules())
  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/PollingController.scala
+++ b/knockoutwhistweb/app/controllers/PollingController.scala
@@ -1,152 +0,0 @@
 package controllers
 import auth.{AuthAction, AuthenticatedRequest}
 import controllers.PollingController.{scheduler, timeoutDuration}
 import de.knockoutwhist.cards.Hand
 import de.knockoutwhist.player.AbstractPlayer
 import logic.PodManager
 import logic.game.{GameLobby, PollingEvents}
 import logic.game.PollingEvents.{CardPlayed, LobbyCreation, LobbyUpdate, NewRound, NewTrick, ReloadEvent}
 import model.sessions.UserSession
 import model.users.User
 import play.api.libs.json.{JsArray, JsValue, Json}
 import play.api.mvc.{AbstractController, Action, AnyContent, ControllerComponents, Result}
 import util.WebUIUtils
 import javax.inject.{Inject, Singleton}
 import scala.concurrent.{ExecutionContext, Future}
 import java.util.concurrent.{Executors, ScheduledExecutorService, TimeUnit}
 import scala.concurrent.duration.*
 object PollingController {
  private val scheduler: ScheduledExecutorService = Executors.newSingleThreadScheduledExecutor()
  private val timeoutDuration = 25.seconds
 }
@Singleton
 class PollingController @Inject() (
                                    val cc: ControllerComponents,
                                    val podManager: PodManager,
                                    val authAction: AuthAction,
                                    val ingameController: IngameController,
                                    implicit val ec: ExecutionContext
                                  ) extends AbstractController(cc) {
  private def buildCardPlayResponse(game: GameLobby, hand: Option[Hand], player: AbstractPlayer, newRound: Boolean): JsValue = {
    val currentRound = game.logic.getCurrentRound.get
    val currentTrick = game.logic.getCurrentTrick.get
    val trickCardsJson = Json.toJson(
      currentTrick.cards.map { case (card, player) =>
        Json.obj("cardId" -> WebUIUtils.cardtoString(card), "player" -> player.name)
      }
    )
    val scoreTableJson = Json.toJson(
      game.getLogic.getPlayerQueue.get.toList.map { player =>
        Json.obj(
          "name" -> player.name,
          "tricks" -> currentRound.tricklist.count(_.winner.contains(player))
        )
      }
    )
    val stringHand = hand.map { h =>
      val cardStrings = h.cards.map(WebUIUtils.cardtoString)
      Json.toJson(cardStrings).as[JsArray]
    }.getOrElse(Json.arr())
    val firstCardId = currentTrick.firstCard.map(WebUIUtils.cardtoString).getOrElse("BLANK")
    val nextPlayer = game.getLogic.getPlayerQueue.get.duplicate().nextPlayer().name
    Json.obj(
      "status" -> "cardPlayed",
      "animation" -> newRound,
      "handData" -> stringHand,
      "dog" -> player.isInDogLife,
      "currentPlayerName" -> game.logic.getCurrentPlayer.get.name,
      "trumpSuit" -> currentRound.trumpSuit.toString,
      "trickCards" -> trickCardsJson,
      "scoreTable" -> scoreTableJson,
      "firstCardId" -> firstCardId,
      "nextPlayer" -> nextPlayer,
      "yourTurn" -> (game.logic.getCurrentPlayer.get == player)
    )
  }
  private def buildLobbyUsersResponse(game: GameLobby, userSession: UserSession): JsValue = {
    Json.obj(
      "status" -> "lobbyUpdate",
      "host" ->  userSession.host,
      "users" -> game.getUsers.map(u => Json.obj(
        "name" -> u.name,
        "id" -> u.id,
        "self" -> (u.id == userSession.id)
      ))
    )
  }
  def handleEvent(event: PollingEvents, game: GameLobby, userSession: UserSession): Result = {
    event match {
      case NewRound =>
        val player = game.getPlayerByUser(userSession.user)
        val hand = player.currentHand()
        val jsonResponse = buildCardPlayResponse(game, hand, player, true)
        Ok(jsonResponse)
      case NewTrick =>
        val player = game.getPlayerByUser(userSession.user)
        val hand = player.currentHand()
        val jsonResponse = buildCardPlayResponse(game, hand, player, false)
        Ok(jsonResponse)
      case CardPlayed =>
        val player = game.getPlayerByUser(userSession.user)
        val hand = player.currentHand()
        val jsonResponse = buildCardPlayResponse(game, hand, player, false)
        Ok(jsonResponse)
      case LobbyUpdate =>
        Ok(buildLobbyUsersResponse(game, userSession))
      case ReloadEvent =>
        val jsonResponse = Json.obj(
          "status" -> "reloadEvent",
          "redirectUrl" -> routes.IngameController.game(game.id).url,
          "content" -> ingameController.returnInnerHTML(game, userSession.user).toString
        )
        Ok(jsonResponse)
    }
  }
  def polling(gameId: String): Action[AnyContent] = authAction.async { implicit request: AuthenticatedRequest[AnyContent] =>
    val playerId = request.user.id
    podManager.getGame(gameId) match {
      case Some(game) =>
        val playerEventQueue = game.getEventsOfPlayer(playerId)
        if (playerEventQueue.nonEmpty) {
          val event = playerEventQueue.dequeue()
          Future.successful(handleEvent(event, game, game.getUserSession(playerId)))
        } else {
          val eventPromise = game.registerWaiter(playerId)
          val scheduledFuture = scheduler.schedule(
            new Runnable {
              override def run(): Unit =
                eventPromise.tryFailure(new java.util.concurrent.TimeoutException("Polling Timeout"))
            },
            timeoutDuration.toMillis,
            TimeUnit.MILLISECONDS
          )
          eventPromise.future.map { event =>
            scheduledFuture.cancel(false)
            game.removeWaiter(playerId)
            handleEvent(event, game, game.getUserSession(playerId))
          }.recover {
            case _: Throwable =>
              game.removeWaiter(playerId)
              NoContent
          }
        }
      case None =>
        Future.successful(NotFound("Game not found."))
    }
  }
 }
--- a/knockoutwhistweb/app/controllers/UserController.scala
+++ b/knockoutwhistweb/app/controllers/UserController.scala
@@ -3,7 +3,6 @@ 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.*
@@ -29,35 +28,28 @@ class UserController @Inject()(
        if (possibleUser.isDefined) {
          Redirect(routes.MainMenuController.mainMenu())
        } else {
-          Ok(views.html.main("Login")(views.html.login.login()))
+          Ok(views.html.login.login())
        }
      } else {
-        Ok(views.html.main("Login")(views.html.login.login()))
+        Ok(views.html.login.login())
      }
    }
  }
  def login_Post(): Action[AnyContent] = {
    Action { implicit request =>
-      val jsonBody = request.body.asJson
+      val postData = request.body.asFormUrlEncoded
-      val username: Option[String] = jsonBody.flatMap { jsValue =>
+      if (postData.isDefined) {
        (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 possibleUser = userManager.authenticate(username.get, password.get)
+        val username = postData.get.get("username").flatMap(_.headOption).getOrElse("")
        val password = postData.get.get("password").flatMap(_.headOption).getOrElse("")
        val possibleUser = userManager.authenticate(username, password)
        if (possibleUser.isDefined) {
-          Ok(Json.obj(
+          Redirect(routes.MainMenuController.mainMenu()).withCookies(
            "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/logic/game/GameLobby.scala
+++ b/knockoutwhistweb/app/logic/game/GameLobby.scala
@@ -2,24 +2,21 @@ package logic.game
 import de.knockoutwhist.cards.{Hand, Suit}
 import de.knockoutwhist.control.GameLogic
-import de.knockoutwhist.control.GameState.{InGame, Lobby, MainMenu}
+import de.knockoutwhist.control.GameState.{Lobby, MainMenu}
 import de.knockoutwhist.control.controllerBaseImpl.sublogic.util.{MatchUtil, PlayerUtil}
-import de.knockoutwhist.events.global.tie.TieTurnEvent
+import de.knockoutwhist.events.global.{GameStateChangeEvent, SessionClosed}
-import de.knockoutwhist.events.global.{CardPlayedEvent, GameStateChangeEvent, NewTrickEvent, SessionClosed}
+import de.knockoutwhist.events.player.PlayerEvent
 import de.knockoutwhist.events.player.{PlayerEvent, ReceivedHandEvent}
 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 exceptions.*
 import logic.game.PollingEvents.{CardPlayed, LobbyCreation, LobbyUpdate, NewRound, NewTrick, ReloadEvent}
 import model.sessions.{InteractionType, UserSession}
 import model.users.User
 import java.util.UUID
 import scala.collection.mutable
 import scala.collection.mutable.ListBuffer
 import scala.concurrent.Promise as ScalaPromise
 class GameLobby private(
                 val logic: GameLogic,
@@ -28,41 +25,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()
-  private val eventsPerPlayer: mutable.Map[UUID, mutable.Queue[PollingEvents]] = mutable.Map()
+  
  private val waitingPromises: mutable.Map[UUID, ScalaPromise[PollingEvents]] = mutable.Map()
  private val lock = new Object
  lock.synchronized {
    logic.addListener(this)
    logic.createSession()
  }
  def registerWaiter(playerId: UUID): ScalaPromise[PollingEvents] = {
    val promise = ScalaPromise[PollingEvents]()
    lock.synchronized {
      val queue = eventsPerPlayer.getOrElseUpdate(playerId, mutable.Queue())
      if (queue.nonEmpty) {
        val evt = queue.dequeue()
        promise.success(evt)
        promise
      } else {
        waitingPromises.put(playerId, promise)
        promise
      }
    }
  }
  def removeWaiter(playerId: UUID): Unit = {
    lock.synchronized {
      waitingPromises.remove(playerId)
    }
  }
  def addUser(user: User): UserSession = {
    if (users.size >= maxPlayers) throw new GameFullException("The game is full!")
    if (users.contains(user.id)) throw new IllegalArgumentException("User is already in the game!")
@@ -72,29 +39,17 @@ class GameLobby private(
      host = false
    )
    users += (user.id -> userSession)
    addToQueue(LobbyUpdate)
    userSession
  }
  override def listen(event: SimpleEvent): Unit = {
    event match {
      case event: ReceivedHandEvent =>
        addToQueue(NewRound)
        users.get(event.playerId).foreach(session => session.updatePlayer(event))
      case event: CardPlayedEvent =>
        addToQueue(CardPlayed)
      case event: TieTurnEvent =>
        addToQueue(ReloadEvent)
        users.get(event.player.id).foreach(session => session.updatePlayer(event))
      case event: PlayerEvent =>
        users.get(event.playerId).foreach(session => session.updatePlayer(event))
      case event: NewTrickEvent =>
        addToQueue(NewTrick)
      case event: GameStateChangeEvent =>
        if (event.oldState == MainMenu && event.newState == Lobby) {
          return
        }
        addToQueue(ReloadEvent)
        users.values.foreach(session => session.updatePlayer(event))
      case event: SessionClosed =>
        users.values.foreach(session => session.updatePlayer(event))
@@ -103,33 +58,6 @@ class GameLobby private(
    }
  }
  private def addToQueue(event: PollingEvents): Unit = {
    lock.synchronized {
      users.keys.foreach { playerId =>
        val q = eventsPerPlayer.getOrElseUpdate(playerId, mutable.Queue())
        q.enqueue(event)
      }
      val waiterIds = waitingPromises.keys.toList
      waiterIds.foreach { playerId =>
        val q = eventsPerPlayer.getOrElseUpdate(playerId, mutable.Queue())
        if (q.nonEmpty) {
          val evt = q.dequeue()
          val p = waitingPromises.remove(playerId)
          p.foreach(_.success(evt))
        }
      }
    }
    waitingPromises.keys.foreach { playerId =>
      val queue =  eventsPerPlayer(playerId)
      if (queue.nonEmpty) {
        val promise = waitingPromises(playerId)
        promise.success(queue.dequeue())
        waitingPromises.remove(playerId)
      }
    }
  }
  /**
   * Start the game if the user is the host.
   * @param user the user who wants to start the game.
@@ -166,7 +94,6 @@ class GameLobby private(
      throw new NotInThisGameException("You are not in this game!")
    }
    users.remove(userId)
    addToQueue(LobbyUpdate)
  }
  /**
@@ -199,11 +126,10 @@ class GameLobby private(
      throw new CantPlayCardException("You are not in dog life!")
    }
    if (cardIndex == -1) {
-      if (MatchUtil.dogNeedsToPlay(getMatch, getRound)) {
+      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)
@@ -235,19 +161,6 @@ class GameLobby private(
    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()
  }
  //-------------------
@@ -270,9 +183,7 @@ class GameLobby private(
  def getLogic: GameLogic = {
    logic
  }
-  def getEventsOfPlayer(playerId: UUID): mutable.Queue[PollingEvents] = {
+
    eventsPerPlayer.getOrElseUpdate(playerId, mutable.Queue())
  }
  private def getPlayerBySession(userSession: UserSession): AbstractPlayer = {
    val playerOption = getMatch.totalplayers.find(_.id == userSession.id)
    if (playerOption.isEmpty) {
@@ -322,11 +233,7 @@ class GameLobby private(
    }
    trickOpt.get
  }
-
+  
  def getUsers: Set[User] = {
    users.values.map(d => d.user).toSet
  }
 }
 object GameLobby {
--- a/knockoutwhistweb/app/logic/game/PollingEvents.scala
+++ b/knockoutwhistweb/app/logic/game/PollingEvents.scala
@@ -1,10 +0,0 @@
 package logic.game
 enum PollingEvents {
  case CardPlayed
  case NewRound
  case NewTrick
  case ReloadEvent
  case LobbyUpdate
  case LobbyCreation
 }
--- a/knockoutwhistweb/app/logic/user/impl/BaseSessionManager.scala
+++ b/knockoutwhistweb/app/logic/user/impl/BaseSessionManager.scala
@@ -13,7 +13,6 @@ 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 {
@@ -45,21 +44,15 @@ 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 decoded = verifier.verify(sessionId)
+      val user = userManager.userExistsById(decoded.getClaim("id").asLong())
-        val user = userManager.userExistsById(decoded.getClaim("id").asLong())
+      user.foreach(u => cache.put(sessionId, u))
-        user.foreach(u => cache.put(sessionId, u))
+      user
        user
      }
      if (result.isSuccess) {
        result.get
      } else {
        None
      }
    }
  }
--- a/knockoutwhistweb/app/logic/user/impl/StubUserManager.scala
+++ b/knockoutwhistweb/app/logic/user/impl/StubUserManager.scala
@@ -22,12 +22,6 @@ 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/UserSession.scala
+++ b/knockoutwhistweb/app/model/sessions/UserSession.scala
@@ -7,7 +7,7 @@ import model.users.User
 import java.util.UUID
 import java.util.concurrent.locks.{Lock, ReentrantLock}
-class UserSession(val user: User, val host: Boolean) extends PlayerSession {
+class UserSession(user: User, val host: Boolean) extends PlayerSession {
  var canInteract: Option[InteractionType] = None
  val lock: ReentrantLock = ReentrantLock()
--- a/knockoutwhistweb/app/util/WebUIUtils.scala
+++ b/knockoutwhistweb/app/util/WebUIUtils.scala
@@ -8,10 +8,6 @@ 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"
@@ -33,7 +29,6 @@ object WebUIUtils {
      case Three => "3"
      case Two => "2"
    }
-    f"$cv$s"
+    views.html.render.card.apply(f"images/cards/$cv$s.png")(card.toString)
  }
 }
--- a/knockoutwhistweb/app/views/ingame/finishedMatch.scala.html
+++ b/knockoutwhistweb/app/views/ingame/finishedMatch.scala.html
@@ -1,37 +0,0 @@
@(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="backToLobby('@gamelobby.id')">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'));
 </script>
--- a/knockoutwhistweb/app/views/ingame/ingame.scala.html
+++ b/knockoutwhistweb/app/views/ingame/ingame.scala.html
@@ -1,107 +1,51 @@
@import de.knockoutwhist.control.controllerBaseImpl.sublogic.util.TrickUtil
@import de.knockoutwhist.utils.Implicits.*
@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
-<div class="lobby-background vh-100">
+@main("Ingame") {
-    <main class="game-field-background vh-100 ingame-side-shadow">
+<div class="container">
-        <div class="py-5 container-xxl">
+    <div class="row">
-
+        <div class="col-4 mt-5 text-start">
-            <div class="row ms-4 me-4">
+            <p class="fs-4">Next Player</p>
-                <div class="col-4 mt-5 text-start">
+            <p class="fs-4">@gamelobby.getLogic.getPlayerQueue.get.duplicate().nextPlayer()</p>
                    <h4 class="fw-semibold mb-1">Current Player</h4>
                    <p class="fs-5 text-primary" id="current-player-name">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
                    @if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
                    <h4 class="fw-semibold mb-1">Next Player</h4>
                    @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
                    <p class="fs-5 text-primary" id="next-player-name">@nextplayer</p>
                    }
                    }
                </div>
                <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>
                        @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>
                        }
                    </div>
                    <div class="d-flex justify-content-center g-3 mb-5" id="trick-cards-container">
                        @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>
                    <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.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">
                    @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, '@gamelobby.id', '@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 class="col-4 mt-5 text-center">
            <p class="fs-3">Cards played</p>
        </div>
        <div class="col-4 mt-5 text-end">
            <p class="fs-4">Trumpsuit:</p>
            <p class="fs-4">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
            <p class="fs-4 mt-5">First Card:</p>
            @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
                @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="30%"/>
            } else {
                @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="30%"/>
            }
        </div>
    </div>
    <div class="row">
        <div class="col-6 mt-5">
            @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
                <div class="col-auto">
                    <div class="card" style="max-width: 8rem;">
                        @util.WebUIUtils.cardtoImage(cardplayed) />
                        <div class="card-body">
                            <h5 class="card-title">@player</h5>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
    <div class="row gx-0">
                @for(i <- 0 until player.currentHand().get.cards.size) {
                    <div class="col-auto">
                        <form action="@(routes.IngameController.playCard(gamelobby.id))" class="d-flex" method="post">
                            <input type="hidden" name="cardId" value="@i" />
                            <button type="submit" class="btn bg-transparent p-0 m-0">
                                @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="40%" />
                            </button>
                        </form>
                    </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'));
 </script>
--- a/knockoutwhistweb/app/views/ingame/selecttrump.scala.html
+++ b/knockoutwhistweb/app/views/ingame/selecttrump.scala.html
@@ -1,71 +1,27 @@
-@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
+@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.GameLogic)
@main("Selecting Trumpsuit...") {
 <div id="selecttrumpsuit" class="game-field game-field-background">
-    <div class="ingame-stage blur-sides">
+    @if(player.equals(logic.getCurrentMatch.get.roundlist.last.winner.get)) {
-        <div class="container py-4">
+        <h1>Knockout Whist</h1>
-            <div class="row justify-content-center">
+        <p>You (@player.toString) have won the last round! Select a trumpsuit for the next round!</p>
-                <div class="col-12">
+        <p>Available trumpsuits are displayed below:</p>
-                    <div class="card shadow-sm">
+        <div id="playercards">
-                        <div class="card-header text-center">
+            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades))
-                            <h3 class="mb-0">Select Trump Suit</h3>
+            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
-                        </div>
+            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts))
-                        <div class="card-body">
+            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds))
                            @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>
                                <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, '@gamelobby.id')">
                                            @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, '@gamelobby.id')">
                                            @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, '@gamelobby.id')">
                                            @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, '@gamelobby.id')">
                                            @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 {
                                <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>
+        <p>Your cards</p>
        <div id="playercards">
            @for(card <- player.currentHand().get.cards) {
            @util.WebUIUtils.cardtoImage(card)
            }
        </div>
    } else {
    <h1>Knockout Whist</h1>
    <p>@player.toString is choosing a trumpsuit. Starting new round when @player.toString picked a trumpsuit...</p>
    }
 </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'));
 </script>
--- a/knockoutwhistweb/app/views/ingame/tie.scala.html
+++ b/knockoutwhistweb/app/views/ingame/tie.scala.html
@@ -1,117 +1,27 @@
-@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
+@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.GameLogic)
@main("Tie") {
 <div id="tie" class="game-field game-field-background">
-    <div class="ingame-stage blur-sides">
+    <h1>Knockout Whist</h1>
-        <div class="container py-4">
+    <p>The last Round was tied between
-            <div class="row justify-content-center">
+    @for(players <- logic.playerTieLogic.getTiedPlayers) {
-                <div class="col-12 col-md-10 col-lg-8">
+        @players
-                    <div class="card shadow-sm">
+    }
-                        <div class="card-header text-center">
+    </p>
-                            <h3 class="mb-0">Tie Break</h3>
+    @if(player.equals(logic.playerTieLogic.currentTiePlayer())) {
-                        </div>
+        <p>Pick a card between 1 and @logic.playerTieLogic.highestAllowedNumber()! The resulting card will be your card for the cut.</p>
-                        <div class="card-body">
+    } else {
-                            <div class="mb-3">
+        <p>@logic.playerTieLogic.currentTiePlayer() is currently picking his number for the cut.</p>
-                                <p class="card-text">
+        <p>Currently picked Cards:</p>
-                                    The last round was tied between:
+        <div id="cardsplayed">
-                                    <span class="ms-1">
+            @for((player, card) <- logic.playerTieLogic.getSelectedCard) {
-                                    @for(players <- gamelobby.logic.playerTieLogic.getTiedPlayers) {
+            <div id="playedcardplayer">
-                                        <span class="badge text-bg-secondary me-1">@players</span>
+                <p>@player</p>
-                                    }
+                @util.WebUIUtils.cardtoImage(card)
                                    </span>
                                </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'));
 </script>
--- a/knockoutwhistweb/app/views/lobby/lobby.scala.html
+++ b/knockoutwhistweb/app/views/lobby/lobby.scala.html
@@ -1,81 +1,84 @@
@(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
-<main class="lobby-background vh-100" id="lobbybackground">
+@main("Lobby") {
-    <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
+<div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col">
+        <div class="col">
-                <div class="p-3 fs-1 d-flex align-items-center">
+            <div class="p-3 fs-1 d-flex align-items-center">
-                    <div class="text-center" style="flex-grow: 1;">
+                <div class="text-center" style="flex-grow: 1;">
-                        Lobby-Name: @gamelobby.name
+                    Lobby-Name: @gamelobby.name
                    </div>
                    <div class="btn btn-danger ms-auto" onclick="leaveGame('@gamelobby.id')">Exit</div>
                </div>
                <form action="@(routes.IngameController.leaveGame(gamelobby.id))">
                    <button type="submit" class="btn btn-danger ms-auto">Exit</button>
                </form>
            </div>
        </div>
-        <div class="row">
+    </div>
-            <div class="col">
+    <div class="row">
-                <div class="p-3 text-center fs-4">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
+        <div class="col">
-            </div>
+            <div class="p-3 text-center fs-4">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
        </div>
-        <div class="row justify-content-center align-items-center flex-grow-1">
+    </div>
    <div class="row justify-content-center">
        @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="col-auto">
                    <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) {
+                            @if(playersession.id == user.get.id) {
-                            <h5 class="card-title">@playersession.name (You)</h5>
+                                <h5 class="card-title">@playersession.name (You)</h5>
-                            <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
+                                <p class="card-text">Your text could be here!</p>
-                        } else {
+                                <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
-                            <h5 class="card-title">@playersession.name</h5>
+                            } else {
-                            <div class="btn btn-danger" onclick="removePlayer('@gamelobby.id', '@playersession.id')">Remove</div>
+                                <h5 class="card-title">@playersession.name</h5>
-                        }
+                                <p class="card-text">Your text could be here!</p>
                                <form action="@(routes.IngameController.kickPlayer(gamelobby.id, playersession.id))" method="post">
                                    <button type="submit" class="btn btn-danger">Remove</button>
                                </form>
                            }
                        </div>
                    </div>
                </div>
            }
-            </div>
+            <div class="row">
-            <div class="col-12 text-center mb-5">
+                <div class="col text-center mt-3">
-                <div class="btn btn-success" onclick="startGame('@gamelobby.id')">Start Game</div>
+                    <a href="@(routes.IngameController.startGame(gamelobby.id))" class="btn btn-success">Start Game</a>
                </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;">
+            <div class="col-auto">
                <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) {
+                        @if(playersession.id == user.get.id) {
                        <h5 class="card-title">@playersession.name (You)</h5>
-                    } else {
+                        <p class="card-text">Your text could be here!</p>
                        } else {
                        <h5 class="card-title">@playersession.name</h5>
-                    }
+                        <p class="card-text">Your text could be here!</p>
                        }
                    </div>
                </div>
-                </div>
+            </div>
            }
            <div class="row">
                <div class="col mt-3">
                    <p class="text-center fs-4">Waiting for the host to start the game...</p>
                </div>
            </div>
-            <div class="col-12 text-center mt-3">
+            <div class="row">
-                <p class="fs-4">Waiting for the host to start the game...</p>
+                <div class="col mt-1">
-                <div class="spinner-border mt-1" role="status">
+                    <div class="text-center">
-                    <span class="visually-hidden">Loading...</span>
+                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </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'));
 </script>
--- a/knockoutwhistweb/app/views/login/login.scala.html
+++ b/knockoutwhistweb/app/views/login/login.scala.html
@@ -1,42 +1,41 @@
@()
 <div class="login-box">
    <div class="card login-card p-4">
        <div class="card-body">
            <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 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">
+@main("Login") {
-                    <label for="password" class="form-label text-body">Password</label>
+    <div class="login-box">
-                    <input type="password" class="form-control text-body" id="password" name="password" placeholder="Enter password" required>
+        <div class="card login-card p-4">
-                </div>
+            <div class="card-body">
                <h3 class="text-center mb-4">Login</h3>
-                <div class="d-flex justify-content-between align-items-center mb-3">
+                <form action="@routes.UserController.login_Post()" method="post">
-                    <a href="#" class="text-decoration-none">Forgot password?</a>
+                    <div class="mb-3">
-                </div>
+                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="Enter Username" required>
                    </div>
-                <div class="d-grid" >
+                    <div class="mb-3">
-                    <button type="submit" class="btn btn-primary">Login</button>
+                        <label for="password" class="form-label">Password</label>
-                </div>
+                        <input type="password" class="form-control" id="password" name="password" placeholder="Enter password" required>
-            </form>
+                    </div>
-            <p class="text-center mt-3">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
-                Don’t have an account?
+                        <a href="#" class="text-decoration-none">Forgot password?</a>
-                <a href="#" class="text-decoration-none">Sign up</a>
+                    </div>
-            </p>
+
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">Login</button>
                    </div>
                </form>
                <p class="text-center mt-3">
                    Don’t have an account?
                    <a href="#" class="text-decoration-none">Sign up</a>
                </p>
            </div>
        </div>
    </div>
-</div>
+    <script src="@routes.Assets.versioned("/javascripts/particles.js")"></script>
-<script src="@routes.Assets.versioned("/javascripts/particles.js")"></script>
+    <div id="particles-js" style="background-color: rgb(182, 25, 36);
-<script>
+        background-size: cover;
-        particlesJS.load('particles-js', 'assets/conf/particlesjs-config.json', function() {
+        background-repeat: no-repeat;
-            console.log('callback - particles.js config loaded');
+        background-position: 50% 50%;"></div>
-        });
+}
 </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
@@ -3,28 +3,26 @@
 * handles the rendering of the page header and body tags. It takes
 * two arguments, a `String` for the title of the page and an `Html`
 * object to insert into the body of the page.
-*@
+ *@
@(title: String)(content: Html)
 <!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 class="d-flex flex-column min-vh-100" id="main-body">
+    <body>
-            @* And here's where we render the `Html` object containing
+        @* And here's where we render the `Html` object containing
-             * the page content. *@
+         * the page content. *@
-            @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>
    <script src="@routes.JavaScriptRoutingController.javascriptRoutes()" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </html>
--- a/knockoutwhistweb/app/views/mainmenu/creategame.scala.html
+++ b/knockoutwhistweb/app/views/mainmenu/creategame.scala.html
@@ -1,8 +1,9 @@
@(user: Option[model.users.User])
@main("Create Game") {
@navbar(user)
-<main class="lobby-background flex-grow-1">
+<form action="@routes.MainMenuController.createGame()" method="post">
-    <div class="w-25 mx-auto">
+    <div class="w-50 mx-auto">
        <div class="mt-3">
            <label for="lobbyname" class="form-label">Lobby-Name</label>
            <input type="text" class="form-control" id="lobbyname" name="lobbyname" placeholder="Lobby 1" required>
@@ -13,7 +14,7 @@
        </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">
+                <input type="range" class="form-range" min="2" max="7" value="2" id="playeramount" name="playeramount">
                <div class="d-flex justify-content-between">
                    <span>2</span>
                    <span>3</span>
@@ -24,7 +25,8 @@
                </div>
            </div>
        <div class="mt-3 text-center">
-            <div class="btn btn-success" onclick="createGameJS()">Create Game</div>
+            <button type="submit" class="btn btn-success">Create Game</button>
        </div>
    </div>
-</main>
+</form>
 }
--- a/knockoutwhistweb/app/views/mainmenu/navbar.scala.html
+++ b/knockoutwhistweb/app/views/mainmenu/navbar.scala.html
@@ -1,30 +1,27 @@
@(user: Option[model.users.User])
-    <nav class="navbar navbar-expand-lg bg-body-tertiary navbar-drop-shadow">
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
-        <div class="container d-flex justify-content-start">
+        <div class="container-fluid">
            <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 justify-content-center" id="navBar">
+            <div class="collapse navbar-collapse" id="navBar">
-                <a class="navbar-brand ms-auto" href="@routes.MainMenuController.mainMenu()">
+                <a class="navbar-brand" href="@routes.MainMenuController.mainMenu()">KnockOutWhist</a>
                    <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" onclick="navSpa('0', 'Knockout Whist - Create Game'); return false;" href="@routes.MainMenuController.mainMenu()">Create Game</a>
+                                <a class="nav-link active" aria-current="page" href="#">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" onclick="navSpa('1', 'Knockout Whist - Rules'); return false;" href="@routes.MainMenuController.rules()">Rules</a>
+                            <a class="nav-link active" href="@routes.MainMenuController.rules()">Rules</a>
                        </li>
                    </ul>
-                    <form class="navbar-nav me-auto mb-2 mb-lg-0" onsubmit="joinGame(); return false;">
+                    <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" id="gameId" aria-label="Join Game"/>
+                        <input class="form-control me-2" type="text" placeholder="Enter GameCode" name="gameId" aria-label="Join Game"/>
                        <button class="btn btn-outline-success" type="submit">Join</button>
                    </form>
                </div>
--- a/knockoutwhistweb/app/views/mainmenu/rules.scala.html
+++ b/knockoutwhistweb/app/views/mainmenu/rules.scala.html
@@ -1,177 +1,63 @@
-@(user: Option[model.users.User])
+@()
    @navbar(user)
-    <main class="lobby-background flex-grow-1">
+@main("Rules") {
-        <div class="container my-4" style="max-width:980px;">
+<div id="rules" class="game-field game-field-background">
-            <div class="card rules-card shadow-sm rounded-3 overflow-hidden">
+    <table>
-                <div class="card-header text-center py-3 border-0">
+        <caption>Rules Overview and Equipment</caption>
-                    <h3 class="mb-0 rules-title">Game Rules Overview</h3>
+        <thead>
-                </div>
+        <tr>
-
+            <th>Section</th>
-                <div class="card-body p-0">
+            <th>Details</th>
-                    <style>
+        </tr>
-
+        </thead>
-                    </style>
+        <tbody>
-
+        <tr>
-                    <div class="accordion rules-accordion" id="rulesAccordion">
+            <td>Players</td>
-                        <div class="accordion-item">
+            <td>Two to seven players. The aim is to be the last player left in the game.</td>
-                            <h2 class="accordion-header" id="headingPlayers">
+        </tr>
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlayers" aria-expanded="true" aria-controls="collapsePlayers">
+        <tr>
-                                    Players
+            <td>Aim</td>
-                                </button>
+            <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>
-                            </h2>
+        </tr>
-                            <div id="collapsePlayers" class="accordion-collapse collapse show" aria-labelledby="headingPlayers" data-bs-parent="#rulesAccordion">
+        <tr>
-                                <div class="accordion-body">
+            <td>Equipment</td>
-                                    Two to seven players. The aim is to be the last player left in the game.
+            <td>A standard 52-card pack is used.</td>
-                                </div>
+        </tr>
-                            </div>
+        <tr>
-                        </div>
+            <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>
-                        <div class="accordion-item">
+        </tr>
-                            <h2 class="accordion-header" id="headingAim">
+        <tr>
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAim" aria-expanded="false" aria-controls="collapseAim">
+            <td>Deal (First Hand)</td>
-                                    Aim
+            <td>The dealer deals seven cards to each player. One card is turned up to determine the trump suit for the round.</td>
-                                </button>
+        </tr>
-                            </h2>
+        <tr>
-                            <div id="collapseAim" class="accordion-collapse collapse" aria-labelledby="headingAim" data-bs-parent="#rulesAccordion">
+            <td>Deal (Subsequent Hands)</td>
-                                <div class="accordion-body">
+            <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>
-                                    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.
+        </tr>
-                                </div>
+        <tr>
-                            </div>
+            <td>Play</td>
-                        </div>
+            <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>
-                        <div class="accordion-item">
+        <tr>
-                            <h2 class="accordion-header" id="headingEquipment">
+            <td>Winning a Trick</td>
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEquipment" aria-expanded="false" aria-controls="collapseEquipment">
+            <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>
-                                    Equipment
+        </tr>
-                                </button>
+        <tr>
-                            </h2>
+            <td>Leading Trumps</td>
-                            <div id="collapseEquipment" class="accordion-collapse collapse" aria-labelledby="headingEquipment" data-bs-parent="#rulesAccordion">
+            <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>
-                                <div class="accordion-body">
+        </tr>
-                                    A standard 52-card pack is used.
+        <tr>
-                                </div>
+            <td>Knockout</td>
-                            </div>
+            <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>
-                        </div>
+        </tr>
-
+        <tr>
-                        <div class="accordion-item">
+            <td>Winning the Game</td>
-                            <h2 class="accordion-header" id="headingRanks">
+            <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>
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRanks" aria-expanded="false" aria-controls="collapseRanks">
+        </tr>
-                                    Card Ranks
+        </tbody>
-                                </button>
+            <td>Dog Life</td>
-                            </h2>
+            <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>
-                            <div id="collapseRanks" class="accordion-collapse collapse" aria-labelledby="headingRanks" data-bs-parent="#rulesAccordion">
+    </table>
-                                <div class="accordion-body">
+</div>
-                                    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>
--- a/knockoutwhistweb/conf/application.conf
+++ b/knockoutwhistweb/conf/application.conf
@@ -1,15 +1,14 @@
 # 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"
-  privateKeyFile = ${?PRIVATE_KEY_FILE}
+   # ${?PUBLIC_KEY_FILE}
-  privateKeyPem  = ${?PRIVATE_KEY_PEM}
+  privateKeyFile = "D:\\Workspaces\\Gitops\\rsa512-private.pem"
-  publicKeyFile = ${?PUBLIC_KEY_FILE}
+  privateKeyPem  = ${?PUBLIC_KEY_PEM}
   #${?PUBLIC_KEY_FILE}
  publicKeyFile = "D:\\Workspaces\\Gitops\\rsa512-public.pem"
  publicKeyPem  = ${?PUBLIC_KEY_PEM}
 }
--- a/knockoutwhistweb/conf/routes
+++ b/knockoutwhistweb/conf/routes
@@ -3,39 +3,28 @@
 # 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     /                           controllers.MainMenuController.index()
-GET     /assets/*file                       controllers.Assets.versioned(path="/public", file: Asset)
+GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)
 # Main menu routes
-GET     /mainmenu                           controllers.MainMenuController.mainMenu()
+GET     /mainmenu                   controllers.MainMenuController.mainMenu()
-GET     /rules                              controllers.MainMenuController.rules()
+GET     /rules                      controllers.MainMenuController.rules()
 GET     /navSPA/:pType                      controllers.MainMenuController.navSPA(pType)
-POST    /createGame                         controllers.MainMenuController.createGame()
+POST    /createGame                 controllers.MainMenuController.createGame()
-POST    /joinGame                           controllers.MainMenuController.joinGame()
+POST    /joinGame                   controllers.MainMenuController.joinGame()
 # User authentication routes
-GET     /login                              controllers.UserController.login()
+GET     /login                      controllers.UserController.login()
-POST    /login                              controllers.UserController.login_Post()
+POST    /login                      controllers.UserController.login_Post()
-GET     /logout                             controllers.UserController.logout()
+GET     /logout                     controllers.UserController.logout()
 # In-game routes
-GET    /game/:id                            controllers.IngameController.game(id: String)
+GET    /game/:id                    controllers.IngameController.game(id: String)
-POST    /game/:id/start                      controllers.IngameController.startGame(id: String)
+GET    /game/:id/join               controllers.IngameController.joinGame(id: String)
-POST    /game/:id/kickPlayer/:playerToKick  controllers.IngameController.kickPlayer(id: String, playerToKick: String)
+GET    /game/:id/start              controllers.IngameController.startGame(id: String)
-
+POST    /game/:id/kickPlayer         controllers.IngameController.kickPlayer(id: String, playerId: java.util.UUID)
-POST    /game/:id/trump                     controllers.IngameController.playTrump(id: String)
+GET     /game/:id/leaveGame         controllers.IngameController.leaveGame(id: String)
-POST    /game/:id/tie                       controllers.IngameController.playTie(id: String)
+POST   /game/:id/playCard           controllers.IngameController.playCard(id: String)
 GET     /game/:id/leaveGame                 controllers.IngameController.leaveGame(id: String)
 POST   /game/:id/playCard                   controllers.IngameController.playCard(id: String)
 POST   /game/:id/dogPlayCard                controllers.IngameController.playDogCard(id: String)
 POST   /game/:id/returnToLobby              controllers.IngameController.returnToLobby(id: String)
 # Polling
 GET    /polling/:gameId                     controllers.PollingController.polling(gameId: String)
--- a/knockoutwhistweb/public/images/logo.png
+++ b/knockoutwhistweb/public/images/logo.png
--- a/knockoutwhistweb/public/javascripts/main.js
+++ b/knockoutwhistweb/public/javascripts/main.js
@@ -1,664 +1,3 @@
-/*!
+particlesJS.load('particles-js', 'assets/conf/particlesjs-config.json', function() {
- * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+    console.log('callback - particles.js config loaded');
- * 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 pollForUpdates(gameId) {
    console.log(`[DEBUG] Starting poll cycle for Game ID: ${gameId} at ${new Date().toISOString()}`);
    if (!gameId) {
        console.error("[DEBUG] Game ID is missing. Stopping poll.");
        return;
    }
    const $handElement = $('#card-slide');
    const $lobbyElement = $('#lobbybackground');
    const $mainmenuElement = $('#main-menu-screen')
    const $mainbody = $('#main-body')
    if (!$handElement.length && !$lobbyElement.length && !$mainmenuElement.length && !$mainbody.length) {
        setTimeout(() => pollForUpdates(gameId), 1000);
        return;
    }
    const route = jsRoutes.controllers.PollingController.polling(gameId);
    $.ajax({
        url: route.url,
        type: 'GET',
        dataType: 'json',
        success: (data => {
            if (!data) {
                console.log("[DEBUG] Received 204 No Content (Timeout). Restarting poll.");
                return;
            }
            if (data.status === "cardPlayed" && data.handData) {
                console.log("Event received: Card played. Redrawing hand.");
                const newHand = data.handData;
                let newHandHTML = '';
                $handElement.empty();
                if(data.animation) {
                        $handElement.addClass('ingame-cards-slide');
                } else {
                    $handElement.removeClass('ingame-cards-slide');
                }
                const dog = data.dog;
                newHand.forEach((cardId, index) => {
                    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="${index}" 
                                 style="border-radius: 6px" 
                                 onclick="handlePlayCard(this, '${gameId}', '${dog}')">
                                <img src="/assets/images/cards/${cardId}.png" width="120px" style="border-radius: 6px"/>
                            </div>
                        </div>
                    `;
                    newHandHTML += cardHtml;
                });
                if (dog) {
                    newHandHTML += `
                        <div class="mt-2">
                            <button class="btn btn-danger" onclick="handleSkipDogLife(this, '${gameId}')">Skip Dog Life</button>
                        </div>
                    `;
                }
                $handElement.html(newHandHTML);
                if (data.yourTurn) {
                    $handElement.removeClass('inactive');
                } else {
                    $handElement.addClass('inactive');
                }
                $('#current-player-name').text(data.currentPlayerName)
                if (data.nextPlayer) {
                    $('#next-player-name').text(data.nextPlayer);
                } else if (nextPlayerElement) {
                    $('#next-player-name').text("");
                } else {
                    console.warn("[DEBUG] 'current-player-name' element missing in DOM");
                }
                    $('#trump-suit').text(data.trumpSuit);
                if ($('#trick-cards-container').length) {
                    let trickHTML = '';
                    data.trickCards.forEach(trickCard => {
                        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/${trickCard.cardId}.png" width="100%"/>
                                    </div>
                                    <div class="card-body p-2 bg-transparent">
                                        <small class="fw-semibold text-secondary">${trickCard.player}</small>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    $('#trick-cards-container').html(trickHTML);
                }
                if ($('#score-table-body').length && data.scoreTable) {
                    let scoreHTML = '';
                    scoreHTML += `<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>`
                    data.scoreTable.forEach(score => {
                        scoreHTML += `
                            <div class="d-flex justify-content-between score-row pt-1">
                                <div style="width: 50%" class="text-truncate">${score.name}</div>
                                <div style="width: 50%">${score.tricks}</div>
                            </div>
                        `;
                    });
                    $('#score-table-body').html(scoreHTML);
                }
                const cardId = data.firstCardId;
                if ($('#first-card-container').length) {
                    let imageSrc = '';
                    let altText = 'First Card';
                    if (cardId === "BLANK") {
                        imageSrc = "/assets/images/cards/1B.png";
                        altText = "Blank Card";
                    } else {
                        imageSrc = `/assets/images/cards/${cardId}.png`;
                    }
                    const newImageHTML = `
                        <img src="${imageSrc}" alt="${altText}" width="80px" style="border-radius: 6px"/>
                    `;
                    $('#first-card-container').html(newImageHTML);
                }
            } else if (data.status === "reloadEvent") {
                console.log("[DEBUG] Reload event received. Redirecting...");
                exchangeBody(data.content, "Knockout Whist - Ingame", data.redirectUrl);
            }
            else if (data.status === "lobbyUpdate") {
                console.log("[DEBUG] Entering 'lobbyUpdate' logic.");
                let newHtml = ''
                if (data.host) {
                    data.users.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="removePlayer('${gameId}', '${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 {
                    data.users.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>`
                    })
                }
                $("#players").html(newHtml);
            } else {
                console.warn(`[DEBUG] Received unknown status: ${data.status}`);
            }
        }),
        error: ((jqXHR, textStatus, errorThrown) => {
            if (jqXHR.status >= 400) {
                console.error(`Server error: ${jqXHR.status}, ${errorThrown}`);
            }
            else {
                console.error(`Something unexpected happened while polling. ${jqXHR.status}, ${errorThrown}`)
            }
        }),
        complete: (() => {
            if (!window.location.href.includes("game")) {
                console.log("[DEBUG] Page URL changed. Stopping poll restart.");
                return;
            }
            setTimeout(() => pollForUpdates(gameId), 200);
        })
    })
 }
 function createGameJS() {
    let lobbyName = $('#lobbyname').val();
    if ($.trim(lobbyName) === "") {
        lobbyName = "DefaultLobby"
    }
    const jsonObj = {
        lobbyname: lobbyName,
        playeramount: $("#playeramount").val()
    }
    sendGameCreationRequest(jsonObj);
 }
 function backToLobby(gameId) {
    const route = jsRoutes.controllers.IngameController.returnToLobby(gameId);
    $.ajax({
        url: route.url,
        type: route.type,
        contentType: 'application/json',
        dataType: 'json',
        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 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 startGame(gameId) {
    sendGameStartRequest(gameId)
 }
 function sendGameStartRequest(gameId) {
    const route = jsRoutes.controllers.IngameController.startGame(gameId);
    $.ajax({
        url: route.url,
        type: route.type,
        dataType: 'json',
        success: (data => {
            if (data.status === 'success') {
                window.location.href = 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 removePlayer(gameid, playersessionId) {
    sendRemovePlayerRequest(gameid, playersessionId)
 }
 function sendRemovePlayerRequest(gameId, playersessionId) {
    const route = jsRoutes.controllers.IngameController.kickPlayer(gameId, playersessionId);
    $.ajax({
        url: route.url,
        type: route.type,
        contentType: 'application/json',
        dataType: 'json',
        success: (data => {
            if (data.status === 'success') {
                window.location.href = 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 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 && 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 && 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 && errorData.errorMessage) {
                alert(`${errorData.errorMessage}`);
            } else {
                alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
            }
        })
    });
    return false
 }
 function selectTie(gameId) {
    const route = jsRoutes.controllers.IngameController.playTie(gameId);
    const jsonObj = {
        tie: $('#tieNumber').val()
    };
    $.ajax({
        url: route.url,
        type: route.type,
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(jsonObj),
        error: (jqXHR => {
            let error;
            try {
                error = JSON.parse(jqXHR.responseText);
            } catch (e) {
                console.error("Failed to parse error response:", e);
            }
            if (error?.errorMessage) {
                alert(`${error.errorMessage}`);
            } else {
                alert('An unexpected error occurred. Please try again.');
            }
        })
    })
 }
 function leaveGame(gameId) {
    sendLeavePlayerRequest(gameId)
 }
 function sendLeavePlayerRequest(gameId) {
    const route = jsRoutes.controllers.IngameController.leaveGame(gameId);
    $.ajax({
        url: route.url,
        type: route.type,
        dataType: 'json',
        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 handleTrumpSelection(cardobject, gameId) {
    const trumpId = cardobject.dataset.trump;
    const jsonObj = {
        trump: trumpId
    }
    const route = jsRoutes.controllers.IngameController.playTrump(gameId);
    $.ajax({
        url: route.url,
        type: route.type,
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(jsonObj),
        error: (jqXHR => {
            let error;
            try {
                error = JSON.parse(jqXHR.responseText);
            } catch (e) {
                console.error("Failed to parse error response:", e);
            }
            if (error?.errorMessage) {
                alert(`${error.errorMessage}`);
            } else {
                alert('An unexpected error occurred. Please try again.');
            }
        })
    })
 }
 function handlePlayCard(cardobject, gameId, dog = false) {
    const cardId = cardobject.dataset.cardId;
    const jsonObj = {
        cardID: cardId
    }
    sendPlayCardRequest(jsonObj, gameId, cardobject, dog)
 }
 function handleSkipDogLife(cardobject, gameId) {
    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 route = jsRoutes.controllers.IngameController.playDogCard(gameId);
    $.ajax({
        url: route.url,
        type: route.type,
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify({
            cardID: 'skip'
        }),
        error: (jqXHR => {
            let error;
            try {
                error = JSON.parse(jqXHR.responseText);
            } catch (e) {
                console.error("Failed to parse error response:", e);
            }
            if (error?.errorMessage.includes("You can't skip this round!")) {
                cardobject.parentElement.animate(wiggleKeyframes, wiggleTiming);
            } else if (error?.errorMessage) {
                alert(`${error.errorMessage}`);
            } else {
                alert('An unexpected error occurred. Please try again.');
            }
        })
    })
 }
 function sendPlayCardRequest(jsonObj, gameId, cardobject, dog) {
    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 route = dog === "true" ? jsRoutes.controllers.IngameController.playDogCard(gameId) : jsRoutes.controllers.IngameController.playCard(gameId);
    $.ajax({
        url: route.url,
        type: route.type,
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(jsonObj),
        error: (jqXHR => {
            try {
                error = JSON.parse(jqXHR.responseText);
            } catch (e) {
                console.error("Failed to parse error response:", e);
            }
            if (error?.errorMessage.includes("You can't play this card!")) {
                cardobject.parentElement.animate(wiggleKeyframes, wiggleTiming);
            } else if (error?.errorMessage) {
                alert(`${error.errorMessage}`);
            } else {
                alert('An unexpected error occurred. Please try again.');
            }
        })
    })
 }
--- a/project/plugins.sbt
+++ b/project/plugins.sbt
@@ -6,5 +6,3 @@ 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")
Author	SHA1	Message	Date
LQ63	edfba93f83	feat(ui): added working ingame ui Added ingame ui with bootstrap. There were problems with the lock procedure	2025-11-05 11:39:50 +01:00
LQ63	4f7eed9ac4	feat(ui): add Lobby and Main Menu Body Added main Menu body and a Lobby with Bootstrap	2025-11-05 11:38:32 +01:00
LQ63	ee3f65efd9	feat(ui): added working ingame ui Added ingame ui with bootstrap. There were problems with the lock procedure which are now fixed.	2025-11-05 11:36:08 +01:00
LQ63	89d1626bb2	feat(ui): add Lobby and Main Menu Body Added main Menu body and a Lobby with Bootstrap	2025-11-05 11:32:26 +01:00
		`@@ -1,2 +0,0 @@`
			`-J--add-opens=java.base/java.util=ALL-UNNAMED`
			`-J--add-opens=java.base/java.lang=ALL-UNNAMED`