knockoutwhistweb/app/controllers/IngameController.scala

@@ -33,7 +33,7 @@ class IngameController @Inject()(
           case InGame =>
             Ok(views.html.ingame.ingame(
               g.getPlayerByUser(request.user),
-              g.logic
+              g
             ))
           case SelectTrump =>
             Ok(views.html.ingame.selecttrump(

knockoutwhistweb/app/logic/game/GameLobby.scala

@@ -180,6 +180,10 @@ class GameLobby private(
     users.clone()
   }
 
+  def getLogic: GameLogic = {
+    logic
+  }
+
   private def getPlayerBySession(userSession: UserSession): AbstractPlayer = {
     val playerOption = getMatch.totalplayers.find(_.id == userSession.id)
     if (playerOption.isEmpty) {

knockoutwhistweb/app/views/ingame/ingame.scala.html

@@ -1,50 +1,51 @@
-@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.GameLogic)
+@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
 
 @main("Ingame") {
-<div id="ingame" class="game-field game-field-background">
-    <h1>Knockout Whist</h1>
-    <div id="nextPlayers">
-        <p>Next Player:</p>
-        <p>@logic.getPlayerQueue.get.duplicate().nextPlayer()</p>
+<div class="container">
+    <div class="row">
+        <div class="col-4 mt-5 text-start">
+            <p class="fs-4">Next Player</p>
+            <p class="fs-4">@gamelobby.getLogic.getPlayerQueue.get.duplicate().nextPlayer()</p>
         </div>
-    <div id="firstCard">
-        <div id="trumpsuit">
-            <p>Trumpsuit: </p>
-            <p>@logic.getCurrentRound.get.trumpSuit</p>
+        <div class="col-4 mt-5 text-center">
+            <p class="fs-3">Cards played</p>
         </div>
-        <div id="firstCardObject">
-            <p>First Card</p>
-            @if(logic.getCurrentTrick.get.firstCard.isDefined) {
-                @util.WebUIUtils.cardtoImage(logic.getCurrentTrick.get.firstCard.get)
+        <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")
+                @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="30%"/>
             }
         </div>
     </div>
-
-    <p>@logic.getCurrentPlayer.get has to play a card!</p>
-    @if(logic.getCurrentTrick.get.cards.nonEmpty) {
-        <p>Cards played</p>
-    } else {
-        <p id="invisible">Cards played</p>
-    }
-
-    <div id="cardsplayed">
-        @for((cardplayed, player) <- logic.getCurrentTrick.get.cards) {
-        <div id="playedcardplayer">
-            <p>@player</p>
-            @util.WebUIUtils.cardtoImage(cardplayed)
+    <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>
-
-    <p>Your cards</p>
-    <div id="playercards">
-        @for(card <- player.currentHand().get.cards) {
-            @util.WebUIUtils.cardtoImage(card)
+    </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>
 }

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

@@ -1,6 +1,7 @@
 @(user: Option[model.users.User])
-@navbar(user)
+
 @main("Create Game") {
+@navbar(user)
 <form action="@routes.MainMenuController.createGame()" method="post">
     <div class="w-50 mx-auto">
         <div class="mt-3">

knockoutwhistweb/app/views/render/card.scala.html

@@ -1,2 +1,2 @@
 @(src: String)(alt: String)
-<img src="@routes.Assets.versioned(src)" alt="@alt"/>
+<img src="@routes.Assets.versioned(src)" alt="@alt"