dkforest

commit d13d2fcd1070778c29d36b15ba584c00895c5968
parent abdc41db7a41873c15c8c1b6ab5a1ba8ebd68999
Author: n0tr1v <n0tr1v@protonmail.com>
Date:   Thu, 15 Jun 2023 04:38:50 -0700

arrow stuff

Diffstat:
M
pkg/web/handlers/chess.go
 | 
20
++++++++++++++++++++
M
pkg/web/handlers/interceptors/chess.go
 | 
26
++++++++++++++++++++++++++

2 files changed, 46 insertions(+), 0 deletions(-)
diff --git a/pkg/web/handlers/chess.go b/pkg/web/handlers/chess.go
@@ -789,8 +789,28 @@ func renderHideAllPieces(styles *StylesBuilder) {
 	styles.Appendf(`%s { display: none !important; }`, strings.Join(ids, ", "))
 }
 
+//func distance(p1, p2 iPoint) float64 {
+//	return math.Sqrt(math.Pow(p2.GetX()-p1.GetX(), 2) + math.Pow(p2.GetY()-p1.GetY(), 2))
+//}
+
 func renderBestMove(styles *StylesBuilder, bestMove *chess.Move) {
 	if bestMove != nil {
+		styles.Append("#arrow { display: block !important; }")
+		//s1 := bestMove.S1()
+		//s2 := bestMove.S2()
+		//cx1, cy1 := squareCoord(s1, false)
+		//cx2, cy2 := squareCoord(s2, false)
+		//a := math.Atan2(float64(cy1-cy2), float64(cx1-cx2)) + math.Pi/2 + math.Pi
+		//styles.Appendf("#arrow { "+
+		//	"transform-origin: top center !important; "+
+		//	"transform: rotate(%.9frad) !important; "+
+		//	"top: calc(%d*12.5%% + (12.5%%/2)) !important; "+
+		//	"left: calc(%d*12.5%% + (12.5%%/2) - 25px) !important; "+
+		//	"}", a, cy2, cx2)
+		//// 12.5%
+		////
+		//styles.Append("#arrow .rectangle { height: calc(4*5.5%) !important; }")
+
 		styles.Appendf(`.square_%d, .square_%d { background-color: rgba(0, 0, 255, 0.2) !important; }`,
 			int(bestMove.S1()), int(bestMove.S2()))
 	}
diff --git a/pkg/web/handlers/interceptors/chess.go b/pkg/web/handlers/interceptors/chess.go
@@ -135,6 +135,31 @@ func GetID(row, col int, isFlipped bool) (id int) {
 
 var ChessCSS = `
 <style>
+#arrow {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 12.5%;
+	height: 100%;
+	z-index: 999999;
+}
+#arrow .triangle-up {
+	position: absolute;
+	width: 40%;
+	height: 7%;
+	left: 30%;
+	background: rgba(0, 0, 255, 0.6);
+	clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+}
+#arrow .rectangle {
+	position: absolute;
+	top: 7%;
+	left: 42.5%;
+	width: 15%;
+	height: 5.5%;
+	background-color: rgba(0, 0, 255, 0.6);
+}
 .newBoard {
 	position: relative;
 	aspect-ratio: 1 / 1;
@@ -207,6 +232,7 @@ func (g *ChessGame) renderBoardHTML1(moveIdx int, position *chess.Position, isFl
 				{{ $p := PieceFromSq $sq }}
 				<td class="square square_{{ $id }}" style="background-color: {{ if IsBestMove $sq }}rgba(0, 0, 255, 0.2){{ else if IsLastMove $sq }}{{ $.LastMoveColor | css }}{{ else }}transparent{{ end }};">
 					{{ if and (eq $col 0) (eq $row 0) }}
+						<div id="arrow"><div class="triangle-up"></div><div class="rectangle"></div></div>
 						{{ range $.Dead }}
 							{{ $p1 := DeadPieceFromSq . }}
 							<div id="piece_{{ . }}" class="img" style="