diff --git a/assets/css/input.css b/assets/css/input.css index 0c453fe..a821ae0 100644 --- a/assets/css/input.css +++ b/assets/css/input.css @@ -53,7 +53,17 @@ .cell { width: 48px; height: 48px; border-radius: 50%; background: #556; transition: background 0.2s; } .cell.red { background: #4a2a3a; } .cell.yellow { background: #2a4545; } +.cell.red.active-turn { animation: glow-red 1.5s ease-in-out infinite alternate; } +.cell.yellow.active-turn { animation: glow-yellow 1.5s ease-in-out infinite alternate; } .cell.winning { animation: pulse 0.5s ease-in-out infinite alternate; } +@keyframes glow-red { + from { box-shadow: 0 0 4px rgba(74, 42, 58, 0.3); } + to { box-shadow: 0 0 12px rgba(74, 42, 58, 0.7); } +} +@keyframes glow-yellow { + from { box-shadow: 0 0 4px rgba(42, 69, 69, 0.3); } + to { box-shadow: 0 0 12px rgba(42, 69, 69, 0.7); } +} @keyframes pulse { from { transform: scale(1); box-shadow: 0 0 4px rgba(0,0,0,0.15); } to { transform: scale(1.03); box-shadow: 0 0 8px rgba(0,0,0,0.25); } diff --git a/assets/css/output.css b/assets/css/output.css index ec5f46d..d84d77b 100644 --- a/assets/css/output.css +++ b/assets/css/output.css @@ -1560,9 +1560,31 @@ .cell.yellow { background: #2a4545; } +.cell.red.active-turn { + animation: glow-red 1.5s ease-in-out infinite alternate; +} +.cell.yellow.active-turn { + animation: glow-yellow 1.5s ease-in-out infinite alternate; +} .cell.winning { animation: pulse 0.5s ease-in-out infinite alternate; } +@keyframes glow-red { + from { + box-shadow: 0 0 4px rgba(74, 42, 58, 0.3); + } + to { + box-shadow: 0 0 12px rgba(74, 42, 58, 0.7); + } +} +@keyframes glow-yellow { + from { + box-shadow: 0 0 4px rgba(42, 69, 69, 0.3); + } + to { + box-shadow: 0 0 12px rgba(42, 69, 69, 0.7); + } +} @keyframes pulse { from { transform: scale(1); diff --git a/ui/board.go b/ui/board.go index 316e72b..c99b018 100644 --- a/ui/board.go +++ b/ui/board.go @@ -11,12 +11,18 @@ type ColumnClickFn func(col int) h.H func BoardComponent(g *game.Game, columnClick ColumnClickFn, myColor int) h.H { var cols []h.H + activeTurn := 0 + if g.Status == game.StatusInProgress { + activeTurn = g.CurrentTurn + } + for col := 0; col < 7; col++ { var cells []h.H for row := 0; row < 6; row++ { cellColor := g.Board[row][col] isWinning := g.IsWinningCell(row, col) - cells = append(cells, Cell(cellColor, isWinning)) + isActiveTurn := cellColor != 0 && cellColor == activeTurn + cells = append(cells, Cell(cellColor, isWinning, isActiveTurn)) } // Column is clickable only if it's player's turn and game is in progress @@ -45,7 +51,7 @@ func Column(colIdx int, cells []h.H, columnClick ColumnClickFn, canClick bool) h return h.Div(attrs...) } -func Cell(color int, isWinning bool) h.H { +func Cell(color int, isWinning, isActiveTurn bool) h.H { class := "cell" switch color { case 1: @@ -56,5 +62,8 @@ func Cell(color int, isWinning bool) h.H { if isWinning { class += " winning" } + if isActiveTurn { + class += " active-turn" + } return h.Div(h.Class(class)) }