feat(14): end of game animation

couldn't make circles grow from the center, they still had shared top
point.
the templates are certainly not quite plesant to look at, with 2 states
being showed into same big template.

i suppose that animations for both hands in the showdow, and for single
hand in showdown would be better stored in separate files.

and maybe appended by the htmx replacements, but i'm feeling rushed

14-rock-paper-scissors/src/input.css

@@ -37,3 +37,17 @@
   animation-iteration-count: 3;
   transform-origin: center;
 }
+
+@keyframes quickly-appear {
+  0% {
+      opacity: 0;
+  }
+  100% {
+      opacity: 0.05;
+  }
+}
+
+.quickly-appear {
+  animation: quickly-appear 2s;
+  transform-origin: center;
+}

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

@@ -575,6 +575,10 @@ video {
   margin-right: 0.75rem;
 }
 
+.mt-16 {
+  margin-top: 4rem;
+}
+
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -615,6 +619,18 @@ video {
   height: 100px;
 }
 
+.h-\[150px\] {
+  height: 150px;
+}
+
+.h-\[200px\] {
+  height: 200px;
+}
+
+.h-\[260px\] {
+  height: 260px;
+}
+
 .h-\[300px\] {
   height: 300px;
 }
@@ -667,6 +683,18 @@ video {
   width: 100px;
 }
 
+.w-\[150px\] {
+  width: 150px;
+}
+
+.w-\[200px\] {
+  width: 200px;
+}
+
+.w-\[260px\] {
+  width: 260px;
+}
+
 .w-\[375px\] {
   width: 375px;
 }
@@ -928,6 +956,10 @@ video {
   opacity: 0.2;
 }
 
+.opacity-5 {
+  opacity: 0.05;
+}
+
 /* div, section, span, p { */
 
 /*     outline: 1px solid red; */
@@ -968,3 +1000,18 @@ video {
   animation-iteration-count: 3;
   transform-origin: center;
 }
+
+@keyframes quickly-appear {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0.05;
+  }
+}
+
+.quickly-appear {
+  animation: quickly-appear 2s;
+  transform-origin: center;
+}

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

@@ -67,6 +67,19 @@
             <div
               th:replace="index::choiceBadge (${showdownState.playersChoice})"
             ></div>
+            <!-- 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'"
+            ></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'"
+            ></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'"
+              ></div>
             <div
               th:remove="all"
               id="rock"