feat(14): appearing message, new game request

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;
+}

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;
+}

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
+          <a
-            class="mt-6 w-9/12 h-12 tracking-widest uppercase bg-white rounded-xl text-radial-gradient-bottom"
+            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>