feat(ui): LESS Integration

Added less integration + light mode

knockoutwhistweb/app/assets/stylesheets/dark-mode.less

@@ -1,6 +0,0 @@
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background-image: url('/assets/images/background.png');
-    --color: white;
-  }
-}

knockoutwhistweb/app/assets/stylesheets/light-mode.less

@@ -1,4 +0,0 @@
-:root {
-  --background-image: url('/assets/images/img.png');
-  --color: black;
-}

knockoutwhistweb/app/assets/stylesheets/main.less

@@ -1,12 +1,4 @@
 @import "light-mode.less";
-@import "dark-mode.less";
-
-@background-image: var(--background-image);
-@color: var(--color);
-@keyframes slideIn {
-  0% { transform: translateX(-100vw); }
-  100% { transform: translateX(0); }
-}
 body {
     background-image: @background-image;
     background-size: 100vw 100vh;
@@ -22,20 +14,12 @@ html, body {
     justify-content: flex-start;
     align-items: center;
     text-align: center;
-    h1 {
-        animation: slideIn 0.5s ease-out forwards;
-        animation-fill-mode: backwards;
-    }
-}
-#textanimation {
-        animation: slideIn 0.5s ease-out forwards;
-        animation-fill-mode: backwards;
-        animation-delay: 1s;
 }
+
 #sessions a, h1, p {
     color: @color;
     font-size: 40px;
-    font-family: Arial, serif;
+    font-family: Arial;
 }
 #ingame {
     display: flex;
@@ -48,21 +32,8 @@ html, body {
     display: flex;
     flex-direction: row;
     justify-content: center;
-    height: 20%;
+    height: 20%
-    img {
-        animation: slideIn 0.5s ease-out forwards;
-        animation-fill-mode: backwards;
-        &:nth-child(1) { animation-delay: 0.5s; }
-        &:nth-child(2) { animation-delay: 1s; }
-        &:nth-child(3) { animation-delay: 1.5s; }
-        &:nth-child(4) { animation-delay: 2s; }
-        &:nth-child(5) { animation-delay: 2.5s; }
-        &:nth-child(6) { animation-delay: 3s; }
-        &:nth-child(7) { animation-delay: 3.5s; }
 }
-}
-
-
 #cardsplayed {
     display: flex;
     flex-direction: row;
@@ -111,10 +82,10 @@ html, body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 0;
+    height: 0%;
     p {
-        margin-top: 0;
+        margin-top: 0px;
-        margin-bottom: 0;
+        margin-bottom: 0px;
     }
 }
 #invisible {
@@ -127,7 +98,7 @@ html, body {
     height: 100%;
 }
 #rules {
-    color: @color;
+    color: white;
     font-size: 1.5em;
-    font-family: Arial, serif;
+    font-family: Arial;
 }

knockoutwhistweb/app/components/WebApplicationConfiguration.scala

@@ -1,7 +1,7 @@
 package components
 
-import controllers.WebUI
 import de.knockoutwhist.components.DefaultConfiguration
+import controllers.WebUI
 import de.knockoutwhist.ui.UI
 import de.knockoutwhist.utils.events.EventListener
 

knockoutwhistweb/app/controllers/HomeController.scala

@@ -1,14 +1,14 @@
 package controllers
 
-import com.google.inject.{Guice, Injector}
 import controllers.sessions.AdvancedSession
+import com.google.inject.{Guice, Injector}
 import de.knockoutwhist.KnockOutWhist
 import de.knockoutwhist.components.Configuration
 import de.knockoutwhist.control.GameState.{InGame, Lobby, SelectTrump, TieBreak}
 import de.knockoutwhist.control.controllerBaseImpl.BaseGameLogic
 import di.KnockOutWebConfigurationModule
+import play.api.{controllers, *}
 import play.api.mvc.*
-import play.api.*
 import play.twirl.api.Html
 
 import java.util.UUID

knockoutwhistweb/app/util/WebUIUtils.scala

@@ -1,7 +1,7 @@
 package util
 
 import de.knockoutwhist.cards.Card
-import de.knockoutwhist.cards.CardValue.*
+import de.knockoutwhist.cards.CardValue.{Ace, Eight, Five, Four, Jack, King, Nine, Queen, Seven, Six, Ten, Three, Two}
 import de.knockoutwhist.cards.Suit.{Clubs, Diamonds, Hearts, Spades}
 import play.twirl.api.Html
 import scalafx.scene.image.Image

knockoutwhistweb/app/views/sessions.scala.html

@@ -3,9 +3,9 @@
 @main("Sessions") {
     <div id="sessions">
         <h1>Knockout Whist sessions</h1>
-        <p id="textanimation">Please select your session to jump inside the game!</p>
+        <p>Please select your session to jump inside the game!</p>
         @for(session <- sessions) {
-            <a id="textanimation" href="@routes.HomeController.ingame(session.id.toString)">@session.name</a><br>
+            <a href="@routes.HomeController.ingame(session.id.toString)">@session.name</a><br>
         }
     </div>
 }

knockoutwhistweb/test/controllers/HomeControllerSpec.scala

@@ -1,9 +1,9 @@
 package controllers
 
-import org.scalatestplus.play.*
+import org.scalatestplus.play._
-import org.scalatestplus.play.guice.*
+import org.scalatestplus.play.guice._
-import play.api.test.*
+import play.api.test._
-import play.api.test.Helpers.*
+import play.api.test.Helpers._
 
 /**
  * Add your spec here.