dkforest

commit b6e44f2fd967b9b9996e65a706fdecb2e2bc4ba9
parent cdceda38d98d26975f1115a2ebfce49449fd649f
Author: n0tr1v <n0tr1v@protonmail.com>
Date:   Fri,  8 Nov 2024 23:16:13 -0800

css animation

Diffstat:
M
pkg/web/handlers/chess.go
 | 
12
++++++------
M
pkg/web/handlers/interceptors/chess.go
 | 
6
++++++

2 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/pkg/web/handlers/chess.go b/pkg/web/handlers/chess.go
@@ -659,14 +659,14 @@ Loop:
 		// If we loaded the page and game was ongoing, we will stop the infinite loading page and display pgn
 		if game.Outcome() != chess.NoOutcome && !gameLoadedOver {
 			if game.Outcome() == chess.WhiteWon {
-				send(`<style>#piece_e1_winner { display: block !important; }</style>`)
-				send(`<style>#piece_e8_loser { display: block !important; }</style>`)
+				send(`<style>#piece_e1_winner, #piece_e8_loser { animation: 2s 0s forwards winner_anim }</style>`)
+				send(`<style>#piece_e1_winner, #piece_e8_loser { display: block !important; }</style>`)
 			} else if game.Outcome() == chess.BlackWon {
-				send(`<style>#piece_e8_winner { display: block !important; }</style>`)
-				send(`<style>#piece_e1_loser { display: block !important; }</style>`)
+				send(`<style>#piece_e8_winner, #piece_e1_loser { animation: 2s 0s forwards winner_anim }</style>`)
+				send(`<style>#piece_e8_winner, #piece_e1_loser { display: block !important; }</style>`)
 			} else if game.Outcome() == chess.Draw {
-				send(`<style>#piece_e8_draw { display: block !important; }</style>`)
-				send(`<style>#piece_e1_draw { display: block !important; }</style>`)
+				send(`<style>#piece_e8_draw, #piece_e1_draw { animation: 2s 0s forwards winner_anim }</style>`)
+				send(`<style>#piece_e8_draw, #piece_e1_draw { display: block !important; }</style>`)
 			}
 			send(`<style>#outcome:after { content: "` + game.Outcome().String() + `" }</style>`)
 			send(`<style>.gameover { display: none !important; }</style>`)
diff --git a/pkg/web/handlers/interceptors/chess.go b/pkg/web/handlers/interceptors/chess.go
@@ -475,6 +475,12 @@ func (g *ChessGame) drawPlayerCard(moveIdx int, key string, isBlack, isSpectator
 .winner { background-color: green; border: 1px solid darkgreen; }
 .loser  { background-color: red; border: 1px solid darkred; }
 .draw   { background-color: gray; border: 1px solid #222; }
+
+@keyframes winner_anim {
+	0% { border-radius: 0px; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0.5; }
+	75% { border-radius: 0px; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0.5; }
+	100% { border-radius: 10px; width: 18px; height: 15px; padding: 5px 0 0 2px; border: 1px; opacity: 1; }
+}
 </style>
 <table style="width: 100%; height: 100%;">
 	<tr>