games/features/c4game/components/board.templ

package components

import (
	"fmt"

	"github.com/ryanhamamura/games/connect4"
	"github.com/starfederation/datastar-go/datastar"
)

templ Board(g *connect4.Game, myColor int) {
	<div id="c4-board" class="board">
		for col := 0; col < 7; col++ {
			@column(g, col, myColor)
		}
	</div>
}

templ column(g *connect4.Game, colIdx int, myColor int) {
	if g.Status == connect4.StatusInProgress && myColor == g.CurrentTurn {
		<div
			class="column clickable"
			data-on:click={ datastar.PostSSE("/games/%s/drop?col=%d", g.ID, colIdx) }
		>
			for row := 0; row < 6; row++ {
				@cell(g, row, colIdx)
			}
		</div>
	} else {
		<div class="column">
			for row := 0; row < 6; row++ {
				@cell(g, row, colIdx)
			}
		</div>
	}
}

templ cell(g *connect4.Game, row int, col int) {
	<div class={ cellClass(g, row, col) }></div>
}

func cellClass(g *connect4.Game, row, col int) string {
	color := g.Board[row][col]
	activeTurn := 0
	if g.Status == connect4.StatusInProgress {
		activeTurn = g.CurrentTurn
	}

	class := "cell"
	switch color {
	case 1:
		class += " red"
	case 2:
		class += " yellow"
	}
	if g.IsWinningCell(row, col) {
		class += " winning"
	}
	if color != 0 && color == activeTurn {
		class += " active-turn"
	}
	return class
}

// suppress unused import
var _ = fmt.Sprintf