fix(14): halo should be around winning hand

14-rock-paper-scissors/src/main/resources/public/output.css

@@ -1032,3 +1032,90 @@ video {
   animation: quickly-appear 2s;
   transform-origin: center;
 }
+
+@media (min-width: 768px) {
+  .md\:absolute {
+    position: absolute;
+  }
+
+  .md\:end-5 {
+    inset-inline-end: 1.25rem;
+  }
+
+  .md\:top-5 {
+    top: 1.25rem;
+  }
+
+  .md\:mr-5 {
+    margin-right: 1.25rem;
+  }
+
+  .md\:h-12 {
+    height: 3rem;
+  }
+
+  .md\:h-36 {
+    height: 9rem;
+  }
+
+  .md\:h-4\/5 {
+    height: 80%;
+  }
+
+  .md\:h-\[400px\] {
+    height: 400px;
+  }
+
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
+  .md\:w-12 {
+    width: 3rem;
+  }
+
+  .md\:w-40 {
+    width: 10rem;
+  }
+
+  .md\:w-\[400px\] {
+    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;
+  }
+
+  .md\:rounded-xl {
+    border-radius: 0.75rem;
+  }
+
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
+  .md\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .md\:leading-\[2\.2rem\] {
+    line-height: 2.2rem;
+  }
+
+  .md\:leading-none {
+    line-height: 1;
+  }
+}

14-rock-paper-scissors/src/main/resources/templates/index.html

@@ -41,19 +41,19 @@
     >
       <section
         id="heading"
-        class="flex flex-row items-center w-10/12 rounded-md border-[3px] border-header-outline h-[100px]"
+        class="flex flex-row items-center w-10/12 rounded-md md:w-1/2 md:h-36 md:rounded-xl border-[3px] border-header-outline h-[100px]"
       >
         <h1
-          class="pl-4 text-xl font-bold leading-none text-white uppercase grow"
+          class="pl-4 text-xl font-bold leading-none text-white uppercase md:text-5xl grow md:leading-[2.2rem]"
         >
           <span class="block">rock</span> <span class="block">paper</span>
           <span class="block">scissors</span>
         </h1>
         <h2
-          class="flex flex-col justify-around items-center py-2 mr-3 bg-white rounded-md w-[80px] h-[70px] text-score-text rouned-md"
+          class="flex flex-col justify-around items-center py-2 mr-3 bg-white rounded-md md:mr-5 md:w-40 md:h-4/5 md:rounded-lg w-[80px] h-[70px] text-score-text rouned-md"
         >
-          <span class="text-xs uppercase">Score</span>
+          <span class="text-xs uppercase md:text-xl md:leading-none">Score</span>
-          <span id="the-score-number" class="text-4xl font-extrabold">12</span>
+          <span id="the-score-number" class="text-4xl font-extrabold md:text-6xl">12</span>
           <script type="text/javascript">
             document.body.addEventListener("updateScore", function (evt) {
               let scoreElement = document.querySelector("#the-score-number");
@@ -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
@@ -178,22 +178,28 @@
       <!-- This is rules overlay modal window -->
       <dialog
         id="rules-dialog"
-        class="w-screen h-screen"
+        class="w-screen h-screen md:rounded-lg md:w-[400px] md:h-[400px]"
-      >
-        <div
-        class="flex flex-col justify-between w-full h-full"
       >
+        <div class="flex flex-col justify-between w-full h-full">
           <h1
-            class="grid place-content-center h-1/4 text-3xl font-bold tracking-wide uppercase"
+            class="grid place-content-center h-1/4 text-3xl font-bold tracking-wide uppercase md:h-12"
-          >Rules</h1>
+          >
+            Rules
+          </h1>
           <div class="grid place-content-center grow">
-            <img src="../public/images/image-rules.svg" alt="Rules of the game: rock beats scissors, scissors beat paper, paper beats rock." />
+            <img
+              src="../public/images/image-rules.svg"
+              alt="Rules of the game: rock beats scissors, scissors beat paper, paper beats rock."
+            />
           </div>
           <button
             id="close-dialog-button"
-            class="grid place-content-center h-32"
+            class="grid place-content-center h-32 md:absolute md:top-5 md:w-12 md:h-12 md:end-5"
           >
-            <img src="../public/images/icon-close.svg" alt="Close rules display" />
+            <img
+              src="../public/images/icon-close.svg"
+              alt="Close rules display"
+            />
           </button>
         </div>
       </dialog>
@@ -209,10 +215,10 @@
           const dialog = document.getElementById("rules-dialog");
           const openButton = document.getElementById("rules-button");
           const closeButton = document.getElementById("close-dialog-button");
-         openButton.addEventListener("click", function() {
+          openButton.addEventListener("click", function () {
             dialog.showModal();
           });
-         closeButton.addEventListener("click", function() {
+          closeButton.addEventListener("click", function () {
             dialog.close();
           });
         </script>

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

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