From 9ddd9d39439732edb0fa07a45cb5fe97e40c22c1 Mon Sep 17 00:00:00 2001
From: efim <efim.nefedov@nordigy.ru>
Date: Sun, 2 Jul 2023 12:31:18 +0000
Subject: [PATCH] fix(14): halo should be around winning hand

---
 .../src/main/resources/public/output.css      |  6 ++++++
 .../src/main/resources/templates/index.html   |  2 +-
 .../main/resources/templates/showdown.html    | 21 +++++++++++++++----
 .../main/scala/rockpaperscissors/Models.scala |  2 ++
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/14-rock-paper-scissors/src/main/resources/public/output.css b/14-rock-paper-scissors/src/main/resources/public/output.css
index c1fa4d4..ee87ab1 100644
--- a/14-rock-paper-scissors/src/main/resources/public/output.css
+++ b/14-rock-paper-scissors/src/main/resources/public/output.css
@@ -1082,6 +1082,12 @@ video {
     width: 400px;
   }
 
+  .md\:scale-150 {
+    --tw-scale-x: 1.5;
+    --tw-scale-y: 1.5;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
   .md\:rounded-lg {
     border-radius: 0.5rem;
   }
diff --git a/14-rock-paper-scissors/src/main/resources/templates/index.html b/14-rock-paper-scissors/src/main/resources/templates/index.html
index 8c635f0..ad02991 100644
--- a/14-rock-paper-scissors/src/main/resources/templates/index.html
+++ b/14-rock-paper-scissors/src/main/resources/templates/index.html
@@ -83,7 +83,7 @@
 
       <section
         id="controls"
-        class="bg-center bg-no-repeat bg-60% bg-triangle-pattern w-[375px] h-[375px] relative"
+        class="bg-center bg-no-repeat bg-60% bg-triangle-pattern w-[375px] h-[375px] relative md:scale-150"
       >
         <!-- This control will be repeated 3 times, with different htmx requests -->
         <div
diff --git a/14-rock-paper-scissors/src/main/resources/templates/showdown.html b/14-rock-paper-scissors/src/main/resources/templates/showdown.html
index eae4cdb..8a71de2 100644
--- a/14-rock-paper-scissors/src/main/resources/templates/showdown.html
+++ b/14-rock-paper-scissors/src/main/resources/templates/showdown.html
@@ -56,7 +56,7 @@
         </h2>
       </section>
 
-      <div id="showdown-table" th:fragment="showdown-table (showdownState)">
+      <div id="showdown-table" th:fragment="showdown-table (showdownState)" class="md:scale-150">
         <section class="grid grid-cols-2 w-[375px] h-[300px]">
           <div
             id="players-choice"
@@ -70,15 +70,15 @@
             <!-- This is end of the game animated halo -->
             <div
               class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[150px] h-[150px]"
-          th:classappend="${showdownState.gameResult.isEmpty} ? 'invisible' : 'quickly-appear'"
+          th:classappend="${showdownState.isPlayerWin} ? 'quickly-appear' : 'invisible' "
             ></div>
             <div
               class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[200px] h-[200px]"
-          th:classappend="${showdownState.gameResult.isEmpty} ? 'invisible' : 'quickly-appear'"
+          th:classappend="${showdownState.isPlayerWin} ? 'quickly-appear' : 'invisible' "
             ></div>
             <div
                 class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[260px] h-[260px]"
-          th:classappend="${showdownState.gameResult.isEmpty} ? 'invisible' : 'quickly-appear'"
+          th:classappend="${showdownState.isPlayerWin} ? 'quickly-appear' : 'invisible' "
               ></div>
             <div
               th:remove="all"
@@ -123,6 +123,19 @@
             >
               ...
             </div>
+            <!-- This is end of the game animated halo for house choice -->
+            <div
+              class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[150px] h-[150px]"
+          th:classappend="${showdownState.isHouseWin} ? 'quickly-appear' : 'invisible' "
+            ></div>
+            <div
+              class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[200px] h-[200px]"
+          th:classappend="${showdownState.isHouseWin} ? 'quickly-appear' : 'invisible' "
+            ></div>
+            <div
+                class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[260px] h-[260px]"
+          th:classappend="${showdownState.isHouseWin} ? 'quickly-appear' : 'invisible' "
+              ></div>
             <!-- This will be shown before the house made the choice, this will trigger timed request for house choice -->
             <div class="w-full h-full" th:remove="all">
               <div
diff --git a/14-rock-paper-scissors/src/main/scala/rockpaperscissors/Models.scala b/14-rock-paper-scissors/src/main/scala/rockpaperscissors/Models.scala
index d55ad5b..358f5b9 100644
--- a/14-rock-paper-scissors/src/main/scala/rockpaperscissors/Models.scala
+++ b/14-rock-paper-scissors/src/main/scala/rockpaperscissors/Models.scala
@@ -124,6 +124,8 @@ position: absolute;
         } else "lose"
       })
     }
+    def isHouseWin: Boolean = gameResult.contains("lose")
+    def isPlayerWin: Boolean = gameResult.contains("win")
     def scoreChange: Int = {
       houseChoice.map(houseSelectedChoice => {
         val player = playersChoice.c