From 372fb5a6ad0c170cbfbd57622560252172596635 Mon Sep 17 00:00:00 2001
From: efim <efim.nefedov@nordigy.ru>
Date: Sun, 2 Jul 2023 10:11:10 +0000
Subject: [PATCH] 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          | 14 ++++++
 .../src/main/resources/public/output.css      | 47 +++++++++++++++++++
 .../main/resources/templates/showdown.html    | 13 +++++
 3 files changed, 74 insertions(+)

diff --git a/14-rock-paper-scissors/src/input.css b/14-rock-paper-scissors/src/input.css
index 8b554d9..9fe06b7 100644
--- a/14-rock-paper-scissors/src/input.css
+++ b/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;
+}
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 796d720..4c28541 100644
--- a/14-rock-paper-scissors/src/main/resources/public/output.css
+++ b/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;
+}
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 72b41ef..eae4cdb 100644
--- a/14-rock-paper-scissors/src/main/resources/templates/showdown.html
+++ b/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"