From 697985a4800967d13a92b96b6b0bacd1199c85fd Mon Sep 17 00:00:00 2001
From: efim <efim.nefedov@nordigy.ru>
Date: Sun, 2 Jul 2023 06:15:11 +0000
Subject: [PATCH] feat(14): appearing message, new game request

---
 14-rock-paper-scissors/src/input.css          | 16 ++++++++++++++
 .../src/main/resources/public/output.css      | 22 +++++++++++++++++++
 .../main/resources/templates/showdown.html    |  9 ++++----
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/14-rock-paper-scissors/src/input.css b/14-rock-paper-scissors/src/input.css
index f771aa0..d2d531f 100644
--- a/14-rock-paper-scissors/src/input.css
+++ b/14-rock-paper-scissors/src/input.css
@@ -5,3 +5,19 @@
 /* div, section, span, p { */
 /*     outline: 1px solid red; */
 /* } */
+
+@keyframes slowly-appear {
+  0% {
+      opacity: 0;
+  }
+  30% {
+      opacity: 0;
+  }
+  100% {
+      opacity: 1;
+  }
+}
+
+.slowly-appear {
+  animation: slowly-appear 3s;
+}
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 d44375b..af9918b 100644
--- a/14-rock-paper-scissors/src/main/resources/public/output.css
+++ b/14-rock-paper-scissors/src/main/resources/public/output.css
@@ -723,6 +723,10 @@ video {
   flex-direction: column;
 }
 
+.place-content-center {
+  place-content: center;
+}
+
 .items-center {
   align-items: center;
 }
@@ -929,3 +933,21 @@ video {
 /*     outline: 1px solid red; */
 
 /* } */
+
+@keyframes slowly-appear {
+  0% {
+    opacity: 0;
+  }
+
+  30% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.slowly-appear {
+  animation: slowly-appear 3s;
+}
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 c7684a8..65bb34b 100644
--- a/14-rock-paper-scissors/src/main/resources/templates/showdown.html
+++ b/14-rock-paper-scissors/src/main/resources/templates/showdown.html
@@ -137,7 +137,7 @@
         <!-- FRAGMENT : showdown result -->
         <section
           id="message"
-          class="flex flex-col items-center text-white"
+          class="flex flex-col items-center text-white slowly-appear"
           th:classappend="${showdownState.gameResult.nonEmpty} ? '' : 'invisible'"
         >
           <p
@@ -146,11 +146,12 @@
           >
             You lose
           </p>
-          <button
-            class="mt-6 w-9/12 h-12 tracking-widest uppercase bg-white rounded-xl text-radial-gradient-bottom"
+          <a
+            class="grid place-content-center mt-6 w-9/12 h-12 tracking-widest uppercase bg-white rounded-xl text-radial-gradient-bottom"
+            href="/"
           >
             Play again
-          </button>
+          </a>
         </section>
       </div>