From b486738ea8d95ce1623ea0ff93608ac0a24c738d Mon Sep 17 00:00:00 2001
From: Andrio Celos <AndrioCelos@users.noreply.github.com>
Date: Thu, 13 Jul 2023 10:31:54 +1000
Subject: [PATCH] Animate special points

---
 TableturfBattleClient/tableturf.css | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/TableturfBattleClient/tableturf.css b/TableturfBattleClient/tableturf.css
index 9429734..93fbdcd 100644
--- a/TableturfBattleClient/tableturf.css
+++ b/TableturfBattleClient/tableturf.css
@@ -932,7 +932,7 @@ dialog::backdrop {
 .playerBar .specialPoint {
 	position: relative;
 	color: transparent;
-	background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour);
+  background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour);
 }
 .playerBar .specialPoint.specialAnimation {
 	background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour) 25%, var(--special-colour) 75%);
@@ -950,6 +950,25 @@ dialog::backdrop {
 	margin-right: 0.5em;
 }
 
+.playerBar .specialPoint:after {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	border-radius: 100%;
+	outline: 2px solid var(--special-accent-colour);
+	animation: 333ms linear forwards specialPointRing;
+}
+
+@keyframes specialPointRing {
+	from { outline-offset: 1em; }
+	66% { outline-offset: -0.5em; background: transparent; }
+	67% { left: 0; top: 0; right: 0; bottom: 0; background: var(--special-accent-colour); }
+	to { left: 50%; top: 50%; right: 50%; bottom: 50%; background: var(--special-accent-colour); visibility: hidden; }
+}
+
 .result {
 	font-family: 'Splatoon 1';
 	color: var(--colour);