h/oslstats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added match preview and analysis

Browse Source
This commit is contained in:
Haelnorr
2026-03-06 22:08:41 +11:00
parent 4783e21477
commit 8819977ebb
6 changed files with 1473 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
internal/db/match_preview.go Normal file
View File

@@ -0,0 +1,254 @@
package db
import (
"context"
"fmt"
"sort"
"strings"
"time"
"github.com/pkg/errors"
"github.com/uptrace/bun"
)
// Game outcome type constants.
const (
OutcomeWin = "W"
OutcomeLoss = "L"
OutcomeOTWin = "OTW"
OutcomeOTLoss = "OTL"
OutcomeDraw = "D"
OutcomeForfeit = "F"
)
// GameOutcome represents the result of a single game from a team's perspective.
type GameOutcome struct {
Type string // One of Outcome* constants: "W", "L", "OTW", "OTL", "D", "F"
Opponent *Team // The opposing team (may be nil if relation not loaded)
Score string // e.g. "3-1" or "" for forfeits
IsForfeit bool // Whether this game was decided by forfeit
Fixture *Fixture // The fixture itself
}
// MatchPreviewData holds all computed data needed for the match preview tab.
type MatchPreviewData struct {
HomeRecord *TeamRecord
AwayRecord *TeamRecord
HomePosition int
AwayPosition int
TotalTeams int
HomeRecentGames []*GameOutcome
AwayRecentGames []*GameOutcome
}
// ComputeRecentGames calculates the last N game outcomes for a given team.
// Fixtures should be all allocated fixtures for the season+league.
// Results should be finalized results mapped by fixture ID.
// Schedules should be accepted schedules mapped by fixture ID (for ordering by scheduled time).
// The returned outcomes are in chronological order (oldest first, newest last).
func ComputeRecentGames(
teamID int,
fixtures []*Fixture,
resultMap map[int]*FixtureResult,
scheduleMap map[int]*FixtureSchedule,
limit int,
) []*GameOutcome {
// Collect fixtures involving this team that have finalized results
type fixtureWithTime struct {
fixture *Fixture
result *FixtureResult
time time.Time
}
var played []fixtureWithTime
for _, f := range fixtures {
if f.HomeTeamID != teamID && f.AwayTeamID != teamID {
continue
}
res, ok := resultMap[f.ID]
if !ok {
continue
}
// Use schedule time for ordering, fall back to result creation time
t := time.Unix(res.CreatedAt, 0)
if scheduleMap != nil {
if sched, ok := scheduleMap[f.ID]; ok && sched.ScheduledTime != nil {
t = *sched.ScheduledTime
}
}
played = append(played, fixtureWithTime{fixture: f, result: res, time: t})
}
// Sort by time descending (most recent first)
sort.Slice(played, func(i, j int) bool {
return played[i].time.After(played[j].time)
})
// Take only the most recent N
if len(played) > limit {
played = played[:limit]
}
// Reverse to chronological order (oldest first)
for i, j := 0, len(played)-1; i < j; i, j = i+1, j-1 {
played[i], played[j] = played[j], played[i]
}
// Build outcome list
outcomes := make([]*GameOutcome, len(played))
for i, p := range played {
outcomes[i] = buildGameOutcome(teamID, p.fixture, p.result)
}
return outcomes
}
// buildGameOutcome determines the outcome type for a single game from a team's perspective.
// Note: fixtures must have their HomeTeam and AwayTeam relations loaded.
func buildGameOutcome(teamID int, fixture *Fixture, result *FixtureResult) *GameOutcome {
isHome := fixture.HomeTeamID == teamID
var opponent *Team
if isHome {
opponent = fixture.AwayTeam // may be nil if relation not loaded
} else {
opponent = fixture.HomeTeam // may be nil if relation not loaded
}
outcome := &GameOutcome{
Opponent: opponent,
Fixture: fixture,
}
// Handle forfeits
if result.IsForfeit {
outcome.IsForfeit = true
outcome.Type = OutcomeForfeit
if result.ForfeitType != nil && *result.ForfeitType == ForfeitTypeMutual {
outcome.Type = OutcomeOTLoss // mutual forfeit counts as OT loss for both
} else if result.ForfeitType != nil && *result.ForfeitType == ForfeitTypeOutright {
thisSide := "away"
if isHome {
thisSide = "home"
}
if result.ForfeitTeam != nil && *result.ForfeitTeam == thisSide {
outcome.Type = OutcomeLoss // this team forfeited
} else {
outcome.Type = OutcomeWin // opponent forfeited
}
}
return outcome
}
// Normal match - build score string from this team's perspective
if isHome {
outcome.Score = fmt.Sprintf("%d-%d", result.HomeScore, result.AwayScore)
} else {
outcome.Score = fmt.Sprintf("%d-%d", result.AwayScore, result.HomeScore)
}
won := (isHome && result.Winner == "home") || (!isHome && result.Winner == "away")
lost := (isHome && result.Winner == "away") || (!isHome && result.Winner == "home")
isOT := strings.EqualFold(result.EndReason, "Overtime")
switch {
case won && isOT:
outcome.Type = OutcomeOTWin
case won:
outcome.Type = OutcomeWin
case lost && isOT:
outcome.Type = OutcomeOTLoss
case lost:
outcome.Type = OutcomeLoss
default:
outcome.Type = OutcomeDraw
}
return outcome
}
// GetTeamsForSeasonLeague returns all teams participating in a given season+league.
func GetTeamsForSeasonLeague(ctx context.Context, tx bun.Tx, seasonID, leagueID int) ([]*Team, error) {
var teams []*Team
err := tx.NewSelect().
Model(&teams).
Join("INNER JOIN team_participations AS tp ON tp.team_id = t.id").
Where("tp.season_id = ? AND tp.league_id = ?", seasonID, leagueID).
Scan(ctx)
if err != nil {
return nil, errors.Wrap(err, "tx.NewSelect")
}
return teams, nil
}
// ComputeMatchPreview fetches all data needed for the match preview tab:
// team standings, positions, and recent game outcomes for both teams.
func ComputeMatchPreview(
ctx context.Context,
tx bun.Tx,
fixture *Fixture,
) (*MatchPreviewData, error) {
if fixture == nil {
return nil, errors.New("fixture cannot be nil")
}
// Get all teams in this season+league
allTeams, err := GetTeamsForSeasonLeague(ctx, tx, fixture.SeasonID, fixture.LeagueID)
if err != nil {
return nil, errors.Wrap(err, "GetTeamsForSeasonLeague")
}
// Get all allocated fixtures for the season+league
allFixtures, err := GetAllocatedFixtures(ctx, tx, fixture.SeasonID, fixture.LeagueID)
if err != nil {
return nil, errors.Wrap(err, "GetAllocatedFixtures")
}
// Get finalized results
allFixtureIDs := make([]int, len(allFixtures))
for i, f := range allFixtures {
allFixtureIDs[i] = f.ID
}
allResultMap, err := GetFinalizedResultsForFixtures(ctx, tx, allFixtureIDs)
if err != nil {
return nil, errors.Wrap(err, "GetFinalizedResultsForFixtures")
}
// Get accepted schedules for ordering recent games
allScheduleMap, err := GetAcceptedSchedulesForFixtures(ctx, tx, allFixtureIDs)
if err != nil {
return nil, errors.Wrap(err, "GetAcceptedSchedulesForFixtures")
}
// Compute leaderboard
leaderboard := ComputeLeaderboard(allTeams, allFixtures, allResultMap)
// Extract positions and records for both teams
preview := &MatchPreviewData{
TotalTeams: len(leaderboard),
}
for _, entry := range leaderboard {
if entry.Team.ID == fixture.HomeTeamID {
preview.HomePosition = entry.Position
preview.HomeRecord = entry.Record
}
if entry.Team.ID == fixture.AwayTeamID {
preview.AwayPosition = entry.Position
preview.AwayRecord = entry.Record
}
}
if preview.HomeRecord == nil {
preview.HomeRecord = &TeamRecord{}
}
if preview.AwayRecord == nil {
preview.AwayRecord = &TeamRecord{}
}
// Compute recent games (last 5) for each team
preview.HomeRecentGames = ComputeRecentGames(
fixture.HomeTeamID, allFixtures, allResultMap, allScheduleMap, 5,
)
preview.AwayRecentGames = ComputeRecentGames(
fixture.AwayTeamID, allFixtures, allResultMap, allScheduleMap, 5,
)
return preview, nil
}

138
internal/embedfs/web/css/output.css
View File

@@ -35,6 +35,8 @@
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-5xl: 3rem;
--text-5xl--line-height: 1;
--text-6xl: 3.75rem;
--text-6xl--line-height: 1;
--text-9xl: 8rem;
@@ -47,6 +49,7 @@
--tracking-tight: -0.025em;
--tracking-wider: 0.05em;
--leading-relaxed: 1.625;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
@@ -450,6 +453,9 @@
.h-3 {
height: calc(var(--spacing) * 3);
}
.h-3\.5 {
height: calc(var(--spacing) * 3.5);
}
.h-4 {
height: calc(var(--spacing) * 4);
}
@@ -459,9 +465,15 @@
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-9 {
height: calc(var(--spacing) * 9);
}
.h-12 {
height: calc(var(--spacing) * 12);
}
.h-14 {
height: calc(var(--spacing) * 14);
}
.h-16 {
height: calc(var(--spacing) * 16);
}
@@ -510,6 +522,9 @@
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-3\.5 {
width: calc(var(--spacing) * 3.5);
}
.w-4 {
width: calc(var(--spacing) * 4);
}
@@ -519,18 +534,30 @@
.w-6 {
width: calc(var(--spacing) * 6);
}
.w-8 {
width: calc(var(--spacing) * 8);
}
.w-9 {
width: calc(var(--spacing) * 9);
}
.w-10 {
width: calc(var(--spacing) * 10);
}
.w-12 {
width: calc(var(--spacing) * 12);
}
.w-14 {
width: calc(var(--spacing) * 14);
}
.w-20 {
width: calc(var(--spacing) * 20);
}
.w-26 {
width: calc(var(--spacing) * 26);
}
.w-28 {
width: calc(var(--spacing) * 28);
}
.w-48 {
width: calc(var(--spacing) * 48);
}
@@ -636,6 +663,9 @@
.animate-spin {
animation: var(--animate-spin);
}
.cursor-default {
cursor: default;
}
.cursor-grab {
cursor: grab;
}
@@ -729,6 +759,13 @@
.gap-8 {
gap: calc(var(--spacing) * 8);
}
.space-y-0 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-0\.5 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
@@ -743,6 +780,13 @@
margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-1\.5 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-2 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
@@ -867,6 +911,9 @@
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-md {
border-radius: var(--radius-md);
}
.rounded-xl {
border-radius: var(--radius-xl);
}
@@ -1012,6 +1059,12 @@
.bg-green {
background-color: var(--green);
}
.bg-green\/10 {
background-color: var(--green);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--green) 10%, transparent);
}
}
.bg-green\/20 {
background-color: var(--green);
@supports (color: color-mix(in lab, red, red)) {
@@ -1030,6 +1083,18 @@
.bg-mauve {
background-color: var(--mauve);
}
.bg-overlay0\/10 {
background-color: var(--overlay0);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--overlay0) 10%, transparent);
}
}
.bg-overlay0\/20 {
background-color: var(--overlay0);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--overlay0) 20%, transparent);
}
}
.bg-peach {
background-color: var(--peach);
}
@@ -1039,6 +1104,12 @@
background-color: color-mix(in oklab, var(--peach) 5%, transparent);
}
}
.bg-peach\/10 {
background-color: var(--peach);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--peach) 10%, transparent);
}
}
.bg-peach\/20 {
background-color: var(--peach);
@supports (color: color-mix(in lab, red, red)) {
@@ -1060,12 +1131,24 @@
background-color: color-mix(in oklab, var(--red) 10%, transparent);
}
}
.bg-red\/15 {
background-color: var(--red);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--red) 15%, transparent);
}
}
.bg-red\/20 {
background-color: var(--red);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--red) 20%, transparent);
}
}
.bg-red\/30 {
background-color: var(--red);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--red) 30%, transparent);
}
}
.bg-sapphire {
background-color: var(--sapphire);
}
@@ -1123,6 +1206,9 @@
.p-8 {
padding: calc(var(--spacing) * 8);
}
.px-1 {
padding-inline: calc(var(--spacing) * 1);
}
.px-1\.5 {
padding-inline: calc(var(--spacing) * 1.5);
}
@@ -1156,6 +1242,9 @@
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-2\.5 {
padding-block: calc(var(--spacing) * 2.5);
}
.py-3 {
padding-block: calc(var(--spacing) * 3);
}
@@ -1189,6 +1278,9 @@
.pr-2 {
padding-right: calc(var(--spacing) * 2);
}
.pr-4 {
padding-right: calc(var(--spacing) * 4);
}
.pr-10 {
padding-right: calc(var(--spacing) * 10);
}
@@ -1204,6 +1296,9 @@
.pl-3 {
padding-left: calc(var(--spacing) * 3);
}
.pl-4 {
padding-left: calc(var(--spacing) * 4);
}
.text-center {
text-align: center;
}
@@ -1228,6 +1323,10 @@
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-5xl {
font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height));
}
.text-9xl {
font-size: var(--text-9xl);
line-height: var(--tw-leading, var(--text-9xl--line-height));
@@ -1544,6 +1643,12 @@
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
}
.last\:border-b-0 {
&:last-child {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0px;
}
}
.hover\:-translate-y-0\.5 {
&:hover {
@media (hover: hover) {
@@ -2026,6 +2131,11 @@
width: calc(var(--spacing) * 10);
}
}
.sm\:w-36 {
@media (width >= 40rem) {
width: calc(var(--spacing) * 36);
}
}
.sm\:w-auto {
@media (width >= 40rem) {
width: auto;
@@ -2098,6 +2208,16 @@
gap: calc(var(--spacing) * 2);
}
}
.sm\:gap-8 {
@media (width >= 40rem) {
gap: calc(var(--spacing) * 8);
}
}
.sm\:gap-10 {
@media (width >= 40rem) {
gap: calc(var(--spacing) * 10);
}
}
.sm\:p-6 {
@media (width >= 40rem) {
padding: calc(var(--spacing) * 6);
@@ -2128,12 +2248,30 @@
text-align: left;
}
}
.sm\:text-2xl {
@media (width >= 40rem) {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
}
.sm\:text-4xl {
@media (width >= 40rem) {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
}
.sm\:text-6xl {
@media (width >= 40rem) {
font-size: var(--text-6xl);
line-height: var(--tw-leading, var(--text-6xl--line-height));
}
}
.sm\:text-xl {
@media (width >= 40rem) {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
}
.md\:col-span-2 {
@media (width >= 48rem) {
grid-column: span 2 / span 2;

11
internal/handlers/fixture_detail.go
View File

@@ -47,6 +47,7 @@ func FixtureDetailPage(
var rosters map[string][]*db.PlayerWithPlayStatus
var nominatedFreeAgents []*db.FixtureFreeAgent
var availableFreeAgents []*db.SeasonLeagueFreeAgent
var previewData *db.MatchPreviewData
if ok := conn.WithReadTx(s, w, r, func(ctx context.Context, tx bun.Tx) (bool, error) {
var err error
@@ -94,6 +95,15 @@ func FixtureDetailPage(
return false, errors.Wrap(err, "db.GetFreeAgentsForSeasonLeague")
}
}
// Fetch match preview data for preview and analysis tabs
if activeTab == "preview" || activeTab == "analysis" {
previewData, err = db.ComputeMatchPreview(ctx, tx, fixture)
if err != nil {
return false, errors.Wrap(err, "db.ComputeMatchPreview")
}
}
return true, nil
}); !ok {
return
@@ -102,6 +112,7 @@ func FixtureDetailPage(
renderSafely(seasonsview.FixtureDetailPage(
fixture, currentSchedule, history, canSchedule, userTeamID,
result, rosters, activeTab, nominatedFreeAgents, availableFreeAgents,
previewData,
), s, r, w)
})
}

32
internal/view/seasonsview/fixture_detail.templ
View File

@@ -20,6 +20,7 @@ templ FixtureDetailPage(
activeTab string,
nominatedFreeAgents []*db.FixtureFreeAgent,
availableFreeAgents []*db.SeasonLeagueFreeAgent,
previewData *db.MatchPreviewData,
) {
{{
permCache := contexts.Permissions(ctx)
@@ -33,6 +34,14 @@ templ FixtureDetailPage(
if isFinalized && activeTab == "schedule" {
activeTab = "overview"
}
// Redirect preview → analysis once finalized
if isFinalized && activeTab == "preview" {
activeTab = "analysis"
}
// Redirect analysis → preview if not finalized
if !isFinalized && activeTab == "analysis" {
activeTab = "preview"
}
}}
@baseview.Layout(fmt.Sprintf("%s vs %s", fixture.HomeTeam.Name, fixture.AwayTeam.Name)) {
<div class="max-w-screen-lg mx-auto px-4 py-8">
@@ -71,19 +80,26 @@ templ FixtureDetailPage(
</a>
</div>
</div>
<!-- Tab Navigation (hidden when only one tab) -->
if !isFinalized {
<nav class="bg-surface0 border-b border-surface1">
<ul class="flex flex-wrap">
@fixtureTabItem("overview", "Overview", activeTab, fixture)
<!-- Tab Navigation -->
<nav class="bg-surface0 border-b border-surface1">
<ul class="flex flex-wrap">
@fixtureTabItem("overview", "Overview", activeTab, fixture)
if isFinalized {
@fixtureTabItem("analysis", "Match Analysis", activeTab, fixture)
} else {
@fixtureTabItem("preview", "Match Preview", activeTab, fixture)
@fixtureTabItem("schedule", "Schedule", activeTab, fixture)
</ul>
</nav>
}
}
</ul>
</nav>
</div>
<!-- Tab Content -->
if activeTab == "overview" {
@fixtureOverviewTab(fixture, currentSchedule, result, rosters, canManage, canSchedule, userTeamID, nominatedFreeAgents, availableFreeAgents)
} else if activeTab == "preview" && previewData != nil {
@fixtureMatchPreviewTab(fixture, rosters, previewData)
} else if activeTab == "analysis" && result != nil && result.Finalized {
@fixtureMatchAnalysisTab(fixture, result, rosters, previewData)
} else if activeTab == "schedule" {
@fixtureScheduleTab(fixture, currentSchedule, history, canSchedule, canManage, userTeamID)
}

611
internal/view/seasonsview/fixture_match_analysis.templ Normal file
View File

@@ -0,0 +1,611 @@
package seasonsview
import "git.haelnorr.com/h/oslstats/internal/db"
import "git.haelnorr.com/h/oslstats/internal/view/component/links"
import "fmt"
import "sort"
import "strings"
// teamAggStats holds aggregated stats for a single team in a fixture.
type teamAggStats struct {
Goals int
Assists int
PrimaryAssists int
SecondaryAssists int
Saves int
Shots int
Blocks int
Passes int
Turnovers int
Takeaways int
FaceoffsWon int
FaceoffsLost int
PostHits int
PossessionSec int
PlayersUsed int
}
func aggregateTeamStats(players []*db.PlayerWithPlayStatus) *teamAggStats {
agg := &teamAggStats{}
for _, p := range players {
if !p.Played || p.Stats == nil {
continue
}
agg.PlayersUsed++
if p.Stats.Goals != nil {
agg.Goals += *p.Stats.Goals
}
if p.Stats.Assists != nil {
agg.Assists += *p.Stats.Assists
}
if p.Stats.PrimaryAssists != nil {
agg.PrimaryAssists += *p.Stats.PrimaryAssists
}
if p.Stats.SecondaryAssists != nil {
agg.SecondaryAssists += *p.Stats.SecondaryAssists
}
if p.Stats.Saves != nil {
agg.Saves += *p.Stats.Saves
}
if p.Stats.Shots != nil {
agg.Shots += *p.Stats.Shots
}
if p.Stats.Blocks != nil {
agg.Blocks += *p.Stats.Blocks
}
if p.Stats.Passes != nil {
agg.Passes += *p.Stats.Passes
}
if p.Stats.Turnovers != nil {
agg.Turnovers += *p.Stats.Turnovers
}
if p.Stats.Takeaways != nil {
agg.Takeaways += *p.Stats.Takeaways
}
if p.Stats.FaceoffsWon != nil {
agg.FaceoffsWon += *p.Stats.FaceoffsWon
}
if p.Stats.FaceoffsLost != nil {
agg.FaceoffsLost += *p.Stats.FaceoffsLost
}
if p.Stats.PostHits != nil {
agg.PostHits += *p.Stats.PostHits
}
if p.Stats.PossessionTimeSec != nil {
agg.PossessionSec += *p.Stats.PossessionTimeSec
}
}
return agg
}
func formatPossession(seconds int) string {
m := seconds / 60
s := seconds % 60
return fmt.Sprintf("%d:%02d", m, s)
}
func faceoffPct(won, lost int) string {
total := won + lost
if total == 0 {
return "0%"
}
pct := float64(won) / float64(total) * 100
return fmt.Sprintf("%.0f%%", pct)
}
// fixtureMatchAnalysisTab renders the full Match Analysis tab for completed fixtures.
// Shows score, team stats comparison, match details, and top performers.
templ fixtureMatchAnalysisTab(
fixture *db.Fixture,
result *db.FixtureResult,
rosters map[string][]*db.PlayerWithPlayStatus,
preview *db.MatchPreviewData,
) {
<div class="space-y-6">
<!-- Score Display -->
@analysisScoreHeader(fixture, result)
<!-- Team Stats Comparison -->
@analysisTeamStatsComparison(fixture, rosters)
<!-- Top Performers -->
@analysisTopPerformers(fixture, rosters)
<!-- Standings Context (from preview data) -->
if preview != nil {
@analysisStandingsContext(fixture, preview)
}
</div>
}
// analysisScoreHeader renders the final score in a prominent broadcast-style display.
templ analysisScoreHeader(fixture *db.Fixture, result *db.FixtureResult) {
{{
isOT := strings.EqualFold(result.EndReason, "Overtime")
homeWon := result.Winner == "home"
awayWon := result.Winner == "away"
isForfeit := result.IsForfeit
}}
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 border-b border-surface1 px-6 py-3">
<h2 class="text-lg font-bold text-text">Final Score</h2>
</div>
<div class="p-6">
if isForfeit {
@analysisForfeitDisplay(fixture, result)
} else {
<div class="flex items-center justify-center gap-6 sm:gap-10">
<!-- Home Team -->
<div class="flex flex-col items-center text-center flex-1">
if fixture.HomeTeam.Color != "" {
<div
class="w-12 h-12 rounded-full border-2 border-surface1 mb-2 shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.HomeTeam.Color) }
></div>
}
<h3 class="text-lg sm:text-xl font-bold text-text mb-1">
@links.TeamNameLinkInSeason(fixture.HomeTeam, fixture.Season, fixture.League)
</h3>
<span class={ "text-5xl sm:text-6xl font-bold", templ.KV("text-green", homeWon), templ.KV("text-text", !homeWon) }>
{ fmt.Sprint(result.HomeScore) }
</span>
if homeWon {
<span class="mt-2 px-3 py-1 bg-green/20 text-green rounded-full text-xs font-bold uppercase tracking-wider">Winner</span>
}
</div>
<!-- Divider -->
<div class="flex flex-col items-center shrink-0">
<span class="text-4xl text-subtext0 font-light">–</span>
if isOT {
<span class="mt-1 px-2 py-0.5 bg-peach/20 text-peach rounded text-xs font-bold">OT</span>
}
</div>
<!-- Away Team -->
<div class="flex flex-col items-center text-center flex-1">
if fixture.AwayTeam.Color != "" {
<div
class="w-12 h-12 rounded-full border-2 border-surface1 mb-2 shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.AwayTeam.Color) }
></div>
}
<h3 class="text-lg sm:text-xl font-bold text-text mb-1">
@links.TeamNameLinkInSeason(fixture.AwayTeam, fixture.Season, fixture.League)
</h3>
<span class={ "text-5xl sm:text-6xl font-bold", templ.KV("text-green", awayWon), templ.KV("text-text", !awayWon) }>
{ fmt.Sprint(result.AwayScore) }
</span>
if awayWon {
<span class="mt-2 px-3 py-1 bg-green/20 text-green rounded-full text-xs font-bold uppercase tracking-wider">Winner</span>
}
</div>
</div>
}
</div>
</div>
}
// analysisForfeitDisplay renders a forfeit result in the analysis header.
templ analysisForfeitDisplay(fixture *db.Fixture, result *db.FixtureResult) {
{{
isMutualForfeit := result.ForfeitType != nil && *result.ForfeitType == "mutual"
isOutrightForfeit := result.ForfeitType != nil && *result.ForfeitType == "outright"
forfeitTeamName := ""
winnerTeamName := ""
if isOutrightForfeit && result.ForfeitTeam != nil {
if *result.ForfeitTeam == "home" {
forfeitTeamName = fixture.HomeTeam.Name
winnerTeamName = fixture.AwayTeam.Name
} else {
forfeitTeamName = fixture.AwayTeam.Name
winnerTeamName = fixture.HomeTeam.Name
}
}
}}
<div class="flex flex-col items-center py-4 space-y-4">
if isMutualForfeit {
<span class="px-4 py-2 bg-peach/20 text-peach rounded-lg text-lg font-bold">MUTUAL FORFEIT</span>
<p class="text-sm text-subtext0">Both teams receive an overtime loss</p>
} else if isOutrightForfeit {
<span class="px-4 py-2 bg-red/20 text-red rounded-lg text-lg font-bold">FORFEIT</span>
<p class="text-sm text-subtext0">
{ forfeitTeamName } forfeited — { winnerTeamName } wins
</p>
}
if result.ForfeitReason != nil && *result.ForfeitReason != "" {
<div class="bg-surface0 border border-surface1 rounded-lg p-3 max-w-md w-full text-center">
<p class="text-xs text-subtext1 font-medium mb-1">Reason</p>
<p class="text-sm text-subtext0">{ *result.ForfeitReason }</p>
</div>
}
</div>
}
// analysisTeamStatsComparison renders aggregated team stats in the broadcast comparison layout.
templ analysisTeamStatsComparison(fixture *db.Fixture, rosters map[string][]*db.PlayerWithPlayStatus) {
{{
homeAgg := aggregateTeamStats(rosters["home"])
awayAgg := aggregateTeamStats(rosters["away"])
}}
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 border-b border-surface1 px-6 py-3">
<h2 class="text-lg font-bold text-text">Team Statistics</h2>
</div>
<div class="p-6">
<!-- Team Name Headers -->
<div class="flex items-center mb-4">
<div class="flex-1 text-right pr-4">
<div class="flex items-center justify-end gap-2">
if fixture.HomeTeam.Color != "" {
<span
class="w-3 h-3 rounded-full shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.HomeTeam.Color) }
></span>
}
<span class="text-sm font-bold text-text">{ fixture.HomeTeam.ShortName }</span>
</div>
</div>
<div class="w-28 sm:w-36 text-center shrink-0"></div>
<div class="flex-1 text-left pl-4">
<div class="flex items-center gap-2">
<span class="text-sm font-bold text-text">{ fixture.AwayTeam.ShortName }</span>
if fixture.AwayTeam.Color != "" {
<span
class="w-3 h-3 rounded-full shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.AwayTeam.Color) }
></span>
}
</div>
</div>
</div>
<!-- Stats Rows -->
<div class="space-y-0">
@previewStatRow(
fmt.Sprint(homeAgg.Goals),
"Goals",
fmt.Sprint(awayAgg.Goals),
homeAgg.Goals > awayAgg.Goals,
awayAgg.Goals > homeAgg.Goals,
)
@previewStatRow(
fmt.Sprint(homeAgg.Assists),
"Assists",
fmt.Sprint(awayAgg.Assists),
homeAgg.Assists > awayAgg.Assists,
awayAgg.Assists > homeAgg.Assists,
)
@previewStatRow(
fmt.Sprint(homeAgg.Shots),
"Shots",
fmt.Sprint(awayAgg.Shots),
homeAgg.Shots > awayAgg.Shots,
awayAgg.Shots > homeAgg.Shots,
)
@previewStatRow(
fmt.Sprint(homeAgg.Saves),
"Saves",
fmt.Sprint(awayAgg.Saves),
homeAgg.Saves > awayAgg.Saves,
awayAgg.Saves > homeAgg.Saves,
)
@previewStatRow(
fmt.Sprint(homeAgg.Blocks),
"Blocks",
fmt.Sprint(awayAgg.Blocks),
homeAgg.Blocks > awayAgg.Blocks,
awayAgg.Blocks > homeAgg.Blocks,
)
@previewStatRow(
fmt.Sprint(homeAgg.Passes),
"Passes",
fmt.Sprint(awayAgg.Passes),
homeAgg.Passes > awayAgg.Passes,
awayAgg.Passes > homeAgg.Passes,
)
@previewStatRow(
fmt.Sprint(homeAgg.Takeaways),
"Takeaways",
fmt.Sprint(awayAgg.Takeaways),
homeAgg.Takeaways > awayAgg.Takeaways,
awayAgg.Takeaways > homeAgg.Takeaways,
)
@previewStatRow(
fmt.Sprint(homeAgg.Turnovers),
"Turnovers",
fmt.Sprint(awayAgg.Turnovers),
homeAgg.Turnovers < awayAgg.Turnovers,
awayAgg.Turnovers < homeAgg.Turnovers,
)
<!-- Faceoffs -->
{{
homeFO := homeAgg.FaceoffsWon + homeAgg.FaceoffsLost
awayFO := awayAgg.FaceoffsWon + awayAgg.FaceoffsLost
homeFOStr := fmt.Sprintf("%d/%d", homeAgg.FaceoffsWon, homeFO)
awayFOStr := fmt.Sprintf("%d/%d", awayAgg.FaceoffsWon, awayFO)
}}
@previewStatRow(
homeFOStr,
"Faceoffs Won",
awayFOStr,
homeAgg.FaceoffsWon > awayAgg.FaceoffsWon,
awayAgg.FaceoffsWon > homeAgg.FaceoffsWon,
)
@previewStatRow(
faceoffPct(homeAgg.FaceoffsWon, homeAgg.FaceoffsLost),
"Faceoff %",
faceoffPct(awayAgg.FaceoffsWon, awayAgg.FaceoffsLost),
homeAgg.FaceoffsWon * (awayAgg.FaceoffsWon + awayAgg.FaceoffsLost) > awayAgg.FaceoffsWon * (homeAgg.FaceoffsWon + homeAgg.FaceoffsLost),
awayAgg.FaceoffsWon * (homeAgg.FaceoffsWon + homeAgg.FaceoffsLost) > homeAgg.FaceoffsWon * (awayAgg.FaceoffsWon + awayAgg.FaceoffsLost),
)
@previewStatRow(
fmt.Sprint(homeAgg.PostHits),
"Post Hits",
fmt.Sprint(awayAgg.PostHits),
homeAgg.PostHits > awayAgg.PostHits,
awayAgg.PostHits > homeAgg.PostHits,
)
@previewStatRow(
formatPossession(homeAgg.PossessionSec),
"Possession",
formatPossession(awayAgg.PossessionSec),
homeAgg.PossessionSec > awayAgg.PossessionSec,
awayAgg.PossessionSec > homeAgg.PossessionSec,
)
@previewStatRow(
fmt.Sprint(homeAgg.PlayersUsed),
"Players Used",
fmt.Sprint(awayAgg.PlayersUsed),
false,
false,
)
</div>
</div>
</div>
}
// analysisTopPerformers shows the top players from each team based on score.
templ analysisTopPerformers(fixture *db.Fixture, rosters map[string][]*db.PlayerWithPlayStatus) {
{{
// Collect players who played and have stats, sorted by score descending
type scoredPlayer struct {
Player *db.Player
Stats *db.FixtureResultPlayerStats
IsManager bool
IsFreeAgent bool
}
collectTop := func(players []*db.PlayerWithPlayStatus, limit int) []*scoredPlayer {
var scored []*scoredPlayer
for _, p := range players {
if !p.Played || p.Stats == nil || p.Player == nil {
continue
}
scored = append(scored, &scoredPlayer{
Player: p.Player,
Stats: p.Stats,
IsManager: p.IsManager,
IsFreeAgent: p.IsFreeAgent,
})
}
sort.Slice(scored, func(i, j int) bool {
si, sj := 0, 0
if scored[i].Stats.Score != nil {
si = *scored[i].Stats.Score
}
if scored[j].Stats.Score != nil {
sj = *scored[j].Stats.Score
}
return si > sj
})
if len(scored) > limit {
scored = scored[:limit]
}
return scored
}
homeTop := collectTop(rosters["home"], 3)
awayTop := collectTop(rosters["away"], 3)
}}
if len(homeTop) > 0 || len(awayTop) > 0 {
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 border-b border-surface1 px-6 py-3">
<h2 class="text-lg font-bold text-text">Top Performers</h2>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Home Top Performers -->
<div>
<div class="flex items-center gap-2 mb-3">
if fixture.HomeTeam.Color != "" {
<span
class="w-3 h-3 rounded-full shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.HomeTeam.Color) }
></span>
}
<h3 class="text-md font-bold text-text">{ fixture.HomeTeam.Name }</h3>
</div>
<div class="space-y-2">
for i, p := range homeTop {
@topPerformerCard(p.Player, p.Stats, p.IsManager, p.IsFreeAgent, i+1)
}
</div>
</div>
<!-- Away Top Performers -->
<div>
<div class="flex items-center gap-2 mb-3">
if fixture.AwayTeam.Color != "" {
<span
class="w-3 h-3 rounded-full shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.AwayTeam.Color) }
></span>
}
<h3 class="text-md font-bold text-text">{ fixture.AwayTeam.Name }</h3>
</div>
<div class="space-y-2">
for i, p := range awayTop {
@topPerformerCard(p.Player, p.Stats, p.IsManager, p.IsFreeAgent, i+1)
}
</div>
</div>
</div>
</div>
</div>
}
}
// topPerformerCard renders a single top performer card with key stats.
templ topPerformerCard(player *db.Player, stats *db.FixtureResultPlayerStats, isManager bool, isFreeAgent bool, rank int) {
{{
rankLabels := map[int]string{1: "🥇", 2: "🥈", 3: "🥉"}
rankLabel := rankLabels[rank]
}}
<div class="flex items-center gap-3 px-4 py-3 bg-surface0 border border-surface1 rounded-lg">
<span class="text-lg shrink-0">{ rankLabel }</span>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-1.5">
<span class="text-sm font-medium truncate">
@links.PlayerLink(player)
</span>
if isManager {
<span class="px-1 py-0.5 bg-yellow/20 text-yellow rounded text-xs font-medium shrink-0">
&#9733;
</span>
}
if isFreeAgent {
<span class="px-1 py-0.5 bg-peach/20 text-peach rounded text-xs font-medium shrink-0">
FA
</span>
}
</div>
<div class="flex items-center gap-3 mt-1 text-xs text-subtext0">
if stats.Score != nil {
<span title="Score"><span class="font-semibold text-text">{ fmt.Sprint(*stats.Score) }</span> SC</span>
}
if stats.Goals != nil {
<span title="Goals"><span class="font-semibold text-text">{ fmt.Sprint(*stats.Goals) }</span> G</span>
}
if stats.Assists != nil {
<span title="Assists"><span class="font-semibold text-text">{ fmt.Sprint(*stats.Assists) }</span> A</span>
}
if stats.Saves != nil {
<span title="Saves"><span class="font-semibold text-text">{ fmt.Sprint(*stats.Saves) }</span> SV</span>
}
if stats.Shots != nil {
<span title="Shots"><span class="font-semibold text-text">{ fmt.Sprint(*stats.Shots) }</span> SH</span>
}
</div>
</div>
</div>
}
// analysisStandingsContext shows how this result fits into the league standings.
templ analysisStandingsContext(fixture *db.Fixture, preview *db.MatchPreviewData) {
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 border-b border-surface1 px-6 py-3">
<h2 class="text-lg font-bold text-text">League Context</h2>
</div>
<div class="p-6">
<!-- Team Name Headers -->
<div class="flex items-center mb-4">
<div class="flex-1 text-right pr-4">
<div class="flex items-center justify-end gap-2">
if fixture.HomeTeam.Color != "" {
<span
class="w-3 h-3 rounded-full shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.HomeTeam.Color) }
></span>
}
<span class="text-sm font-bold text-text">{ fixture.HomeTeam.ShortName }</span>
</div>
</div>
<div class="w-28 sm:w-36 text-center shrink-0"></div>
<div class="flex-1 text-left pl-4">
<div class="flex items-center gap-2">
<span class="text-sm font-bold text-text">{ fixture.AwayTeam.ShortName }</span>
if fixture.AwayTeam.Color != "" {
<span
class="w-3 h-3 rounded-full shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.AwayTeam.Color) }
></span>
}
</div>
</div>
</div>
<div class="space-y-0">
{{
homePos := ordinal(preview.HomePosition)
awayPos := ordinal(preview.AwayPosition)
if preview.HomePosition == 0 {
homePos = "N/A"
}
if preview.AwayPosition == 0 {
awayPos = "N/A"
}
}}
@previewStatRow(
homePos,
"Position",
awayPos,
preview.HomePosition > 0 && preview.HomePosition < preview.AwayPosition,
preview.AwayPosition > 0 && preview.AwayPosition < preview.HomePosition,
)
@previewStatRow(
fmt.Sprint(preview.HomeRecord.Points),
"Points",
fmt.Sprint(preview.AwayRecord.Points),
preview.HomeRecord.Points > preview.AwayRecord.Points,
preview.AwayRecord.Points > preview.HomeRecord.Points,
)
@previewStatRow(
fmt.Sprintf("%d-%d-%d-%d",
preview.HomeRecord.Wins,
preview.HomeRecord.OvertimeWins,
preview.HomeRecord.OvertimeLosses,
preview.HomeRecord.Losses,
),
"Record",
fmt.Sprintf("%d-%d-%d-%d",
preview.AwayRecord.Wins,
preview.AwayRecord.OvertimeWins,
preview.AwayRecord.OvertimeLosses,
preview.AwayRecord.Losses,
),
false,
false,
)
{{
homeDiff := preview.HomeRecord.GoalsFor - preview.HomeRecord.GoalsAgainst
awayDiff := preview.AwayRecord.GoalsFor - preview.AwayRecord.GoalsAgainst
}}
@previewStatRow(
fmt.Sprintf("%+d", homeDiff),
"Goal Diff",
fmt.Sprintf("%+d", awayDiff),
homeDiff > awayDiff,
awayDiff > homeDiff,
)
<!-- Recent Form -->
if len(preview.HomeRecentGames) > 0 || len(preview.AwayRecentGames) > 0 {
<div class="flex items-center py-3 border-b border-surface1 last:border-b-0">
<div class="flex-1 flex justify-end pr-4">
<div class="flex items-center gap-1">
for _, g := range preview.HomeRecentGames {
@gameOutcomeIcon(g)
}
</div>
</div>
<div class="w-28 sm:w-36 text-center shrink-0">
<span class="text-xs font-semibold text-subtext0 uppercase tracking-wider">Form</span>
</div>
<div class="flex-1 flex pl-4">
<div class="flex items-center gap-1">
for _, g := range preview.AwayRecentGames {
@gameOutcomeIcon(g)
}
</div>
</div>
</div>
}
</div>
</div>
</div>
}

435
internal/view/seasonsview/fixture_match_preview.templ Normal file
View File

@@ -0,0 +1,435 @@
package seasonsview
import "git.haelnorr.com/h/oslstats/internal/db"
import "git.haelnorr.com/h/oslstats/internal/view/component/links"
import "fmt"
import "sort"
// fixtureMatchPreviewTab renders the full Match Preview tab content.
// Shows team standings comparison, recent form, and full rosters side-by-side.
templ fixtureMatchPreviewTab(
fixture *db.Fixture,
rosters map[string][]*db.PlayerWithPlayStatus,
preview *db.MatchPreviewData,
) {
<div class="space-y-6">
<!-- Team Comparison Header -->
@matchPreviewHeader(fixture, preview)
<!-- Form Guide (Last 5 Games) -->
@matchPreviewFormGuide(fixture, preview)
<!-- Team Rosters -->
@matchPreviewRosters(fixture, rosters)
</div>
}
// matchPreviewHeader renders the broadcast-style team comparison with standings.
templ matchPreviewHeader(fixture *db.Fixture, preview *db.MatchPreviewData) {
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 border-b border-surface1 px-6 py-3">
<h2 class="text-lg font-bold text-text">Team Comparison</h2>
</div>
<div class="p-6">
<!-- Team Names and VS -->
<div class="flex items-center justify-center gap-4 sm:gap-8 mb-8">
<!-- Home Team -->
<div class="flex flex-col items-center text-center flex-1">
if fixture.HomeTeam.Color != "" {
<div
class="w-14 h-14 rounded-full border-2 border-surface1 mb-3 shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.HomeTeam.Color) }
></div>
}
<h3 class="text-xl sm:text-2xl font-bold text-text">
@links.TeamNameLinkInSeason(fixture.HomeTeam, fixture.Season, fixture.League)
</h3>
<span class="text-subtext0 text-sm font-mono mt-1">{ fixture.HomeTeam.ShortName }</span>
</div>
<!-- VS Divider -->
<div class="flex flex-col items-center shrink-0">
<span class="text-3xl sm:text-4xl font-bold text-subtext0">VS</span>
</div>
<!-- Away Team -->
<div class="flex flex-col items-center text-center flex-1">
if fixture.AwayTeam.Color != "" {
<div
class="w-14 h-14 rounded-full border-2 border-surface1 mb-3 shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.AwayTeam.Color) }
></div>
}
<h3 class="text-xl sm:text-2xl font-bold text-text">
@links.TeamNameLinkInSeason(fixture.AwayTeam, fixture.Season, fixture.League)
</h3>
<span class="text-subtext0 text-sm font-mono mt-1">{ fixture.AwayTeam.ShortName }</span>
</div>
</div>
<!-- Stats Comparison Grid -->
{{
homePos := ordinal(preview.HomePosition)
awayPos := ordinal(preview.AwayPosition)
if preview.HomePosition == 0 {
homePos = "N/A"
}
if preview.AwayPosition == 0 {
awayPos = "N/A"
}
}}
<div class="space-y-0">
<!-- Position -->
@previewStatRow(
homePos,
"Position",
awayPos,
preview.HomePosition > 0 && preview.HomePosition < preview.AwayPosition,
preview.AwayPosition > 0 && preview.AwayPosition < preview.HomePosition,
)
<!-- Points -->
@previewStatRow(
fmt.Sprint(preview.HomeRecord.Points),
"Points",
fmt.Sprint(preview.AwayRecord.Points),
preview.HomeRecord.Points > preview.AwayRecord.Points,
preview.AwayRecord.Points > preview.HomeRecord.Points,
)
<!-- Played -->
@previewStatRow(
fmt.Sprint(preview.HomeRecord.Played),
"Played",
fmt.Sprint(preview.AwayRecord.Played),
false,
false,
)
<!-- Wins -->
@previewStatRow(
fmt.Sprint(preview.HomeRecord.Wins),
"Wins",
fmt.Sprint(preview.AwayRecord.Wins),
preview.HomeRecord.Wins > preview.AwayRecord.Wins,
preview.AwayRecord.Wins > preview.HomeRecord.Wins,
)
<!-- OT Wins -->
@previewStatRow(
fmt.Sprint(preview.HomeRecord.OvertimeWins),
"OT Wins",
fmt.Sprint(preview.AwayRecord.OvertimeWins),
preview.HomeRecord.OvertimeWins > preview.AwayRecord.OvertimeWins,
preview.AwayRecord.OvertimeWins > preview.HomeRecord.OvertimeWins,
)
<!-- OT Losses -->
@previewStatRow(
fmt.Sprint(preview.HomeRecord.OvertimeLosses),
"OT Losses",
fmt.Sprint(preview.AwayRecord.OvertimeLosses),
preview.HomeRecord.OvertimeLosses < preview.AwayRecord.OvertimeLosses,
preview.AwayRecord.OvertimeLosses < preview.HomeRecord.OvertimeLosses,
)
<!-- Losses -->
@previewStatRow(
fmt.Sprint(preview.HomeRecord.Losses),
"Losses",
fmt.Sprint(preview.AwayRecord.Losses),
preview.HomeRecord.Losses < preview.AwayRecord.Losses,
preview.AwayRecord.Losses < preview.HomeRecord.Losses,
)
<!-- Goals For -->
@previewStatRow(
fmt.Sprint(preview.HomeRecord.GoalsFor),
"Goals For",
fmt.Sprint(preview.AwayRecord.GoalsFor),
preview.HomeRecord.GoalsFor > preview.AwayRecord.GoalsFor,
preview.AwayRecord.GoalsFor > preview.HomeRecord.GoalsFor,
)
<!-- Goals Against -->
@previewStatRow(
fmt.Sprint(preview.HomeRecord.GoalsAgainst),
"Goals Against",
fmt.Sprint(preview.AwayRecord.GoalsAgainst),
preview.HomeRecord.GoalsAgainst < preview.AwayRecord.GoalsAgainst,
preview.AwayRecord.GoalsAgainst < preview.HomeRecord.GoalsAgainst,
)
<!-- Goal Difference -->
{{
homeDiff := preview.HomeRecord.GoalsFor - preview.HomeRecord.GoalsAgainst
awayDiff := preview.AwayRecord.GoalsFor - preview.AwayRecord.GoalsAgainst
homeDiffStr := fmt.Sprintf("%+d", homeDiff)
awayDiffStr := fmt.Sprintf("%+d", awayDiff)
}}
@previewStatRow(
homeDiffStr,
"Goal Diff",
awayDiffStr,
homeDiff > awayDiff,
awayDiff > homeDiff,
)
</div>
</div>
</div>
}
// previewStatRow renders a single comparison stat row in the broadcast-style layout.
// The stat label is centered, with home value on the left and away value on the right.
// homeHighlight/awayHighlight indicate which side has the better value.
templ previewStatRow(homeValue, label, awayValue string, homeHighlight, awayHighlight bool) {
<div class="flex items-center py-2.5 border-b border-surface1 last:border-b-0">
<!-- Home Value -->
<div class="flex-1 text-right pr-4">
<span class={ "text-lg font-bold", templ.KV("text-green", homeHighlight), templ.KV("text-text", !homeHighlight) }>
{ homeValue }
</span>
</div>
<!-- Label -->
<div class="w-28 sm:w-36 text-center shrink-0">
<span class="text-xs font-semibold text-subtext0 uppercase tracking-wider">{ label }</span>
</div>
<!-- Away Value -->
<div class="flex-1 text-left pl-4">
<span class={ "text-lg font-bold", templ.KV("text-green", awayHighlight), templ.KV("text-text", !awayHighlight) }>
{ awayValue }
</span>
</div>
</div>
}
// matchPreviewFormGuide renders the recent form section with last 5 game outcome icons.
templ matchPreviewFormGuide(fixture *db.Fixture, preview *db.MatchPreviewData) {
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 border-b border-surface1 px-6 py-3">
<h2 class="text-lg font-bold text-text">Recent Form</h2>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Home Team Form -->
<div>
<div class="flex items-center gap-2 mb-4">
if fixture.HomeTeam.Color != "" {
<span
class="w-3 h-3 rounded-full shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.HomeTeam.Color) }
></span>
}
<h3 class="text-md font-bold text-text">{ fixture.HomeTeam.Name }</h3>
</div>
if len(preview.HomeRecentGames) == 0 {
<p class="text-subtext1 text-sm">No recent matches played</p>
} else {
<!-- Outcome Icons: chronological (oldest → newest, left → right) -->
<div class="flex items-center gap-1.5 mb-4">
for _, g := range preview.HomeRecentGames {
@gameOutcomeIcon(g)
}
</div>
<!-- Recent Results List: most recent first -->
<div class="space-y-1.5">
for i := len(preview.HomeRecentGames) - 1; i >= 0; i-- {
@recentGameRow(preview.HomeRecentGames[i])
}
</div>
}
</div>
<!-- Away Team Form -->
<div>
<div class="flex items-center gap-2 mb-4">
if fixture.AwayTeam.Color != "" {
<span
class="w-3 h-3 rounded-full shrink-0"
style={ "background-color: " + templ.SafeCSS(fixture.AwayTeam.Color) }
></span>
}
<h3 class="text-md font-bold text-text">{ fixture.AwayTeam.Name }</h3>
</div>
if len(preview.AwayRecentGames) == 0 {
<p class="text-subtext1 text-sm">No recent matches played</p>
} else {
<!-- Outcome Icons: chronological (oldest → newest, left → right) -->
<div class="flex items-center gap-1.5 mb-4">
for _, g := range preview.AwayRecentGames {
@gameOutcomeIcon(g)
}
</div>
<!-- Recent Results List: most recent first -->
<div class="space-y-1.5">
for i := len(preview.AwayRecentGames) - 1; i >= 0; i-- {
@recentGameRow(preview.AwayRecentGames[i])
}
</div>
}
</div>
</div>
</div>
</div>
}
// outcomeStyle holds the styling info for a game outcome type.
type outcomeStyle struct {
iconBg string // Background class for the icon badge
rowBg string // Background class for the row
text string // Text color class
label string // Short label (W, L, OW, OL, D, F)
fullLabel string // Full label for row display (W, OTW, OTL, L, D, FF)
desc string // Human-readable description (Win, Loss, etc.)
}
func getOutcomeStyle(outcomeType string) outcomeStyle {
switch outcomeType {
case "W":
return outcomeStyle{"bg-green/20", "bg-green/10", "text-green", "W", "W", "Win"}
case "OTW":
return outcomeStyle{"bg-yellow/20", "bg-yellow/10", "text-yellow", "OW", "OTW", "OT Win"}
case "OTL":
return outcomeStyle{"bg-peach/20", "bg-peach/10", "text-peach", "OL", "OTL", "OT Loss"}
case "L":
return outcomeStyle{"bg-red/20", "bg-red/10", "text-red", "L", "L", "Loss"}
case "D":
return outcomeStyle{"bg-overlay0/20", "bg-overlay0/10", "text-overlay0", "D", "D", "Draw"}
case "F":
return outcomeStyle{"bg-red/30", "bg-red/15", "text-red", "F", "FF", "Forfeit"}
default:
return outcomeStyle{"bg-surface1", "bg-surface0", "text-subtext0", "?", "?", "Unknown"}
}
}
// gameOutcomeIcon renders a single game outcome as a colored badge.
templ gameOutcomeIcon(outcome *db.GameOutcome) {
{{
style := getOutcomeStyle(outcome.Type)
tooltip := ""
if outcome.Opponent != nil {
tooltip = fmt.Sprintf("%s vs %s", style.desc, outcome.Opponent.Name)
if outcome.IsForfeit {
tooltip += " (Forfeit)"
} else if outcome.Score != "" {
tooltip += fmt.Sprintf(" (%s)", outcome.Score)
}
}
}}
<span
class={ "inline-flex items-center justify-center w-9 h-9 rounded-md text-xs font-bold cursor-default", style.iconBg, style.text }
title={ tooltip }
>
{ style.label }
</span>
}
// recentGameRow renders a single recent game result as a compact row.
templ recentGameRow(outcome *db.GameOutcome) {
{{
style := getOutcomeStyle(outcome.Type)
opponentName := "Unknown"
if outcome.Opponent != nil {
opponentName = outcome.Opponent.Name
}
}}
<div class={ "flex items-center gap-3 px-3 py-2 rounded-lg", style.rowBg }>
<span class={ "text-xs font-bold w-8 text-center", style.text }>{ style.fullLabel }</span>
<span class="text-sm text-text">vs { opponentName }</span>
if outcome.IsForfeit {
<span class="text-xs text-red ml-auto font-medium">Forfeit</span>
} else if outcome.Score != "" {
<span class="text-sm text-subtext0 ml-auto font-mono">{ outcome.Score }</span>
}
</div>
}
// matchPreviewRosters renders team rosters side-by-side for the match preview.
templ matchPreviewRosters(
fixture *db.Fixture,
rosters map[string][]*db.PlayerWithPlayStatus,
) {
{{
homePlayers := rosters["home"]
awayPlayers := rosters["away"]
}}
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 border-b border-surface1 px-6 py-3">
<h2 class="text-lg font-bold text-text">Team Rosters</h2>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Home Team Roster -->
@previewRosterColumn(fixture.HomeTeam, homePlayers, fixture.Season, fixture.League)
<!-- Away Team Roster -->
@previewRosterColumn(fixture.AwayTeam, awayPlayers, fixture.Season, fixture.League)
</div>
</div>
</div>
}
// previewRosterColumn renders a single team's roster for the match preview.
templ previewRosterColumn(
team *db.Team,
players []*db.PlayerWithPlayStatus,
season *db.Season,
league *db.League,
) {
{{
// Separate managers and regular players
var managers []*db.PlayerWithPlayStatus
var roster []*db.PlayerWithPlayStatus
for _, p := range players {
if p.IsManager {
managers = append(managers, p)
} else {
roster = append(roster, p)
}
}
// Sort roster alphabetically by display name
sort.Slice(roster, func(i, j int) bool {
return roster[i].Player.DisplayName() < roster[j].Player.DisplayName()
})
}}
<div>
<!-- Team Header -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2">
if team.Color != "" {
<span
class="w-3.5 h-3.5 rounded-full shrink-0 border border-surface1"
style={ "background-color: " + templ.SafeCSS(team.Color) }
></span>
}
<h3 class="text-md font-bold">
@links.TeamNameLinkInSeason(team, season, league)
</h3>
</div>
<span class="text-xs text-subtext0">
{ fmt.Sprint(len(players)) } players
</span>
</div>
if len(players) == 0 {
<p class="text-subtext1 text-sm text-center py-4">No players on roster.</p>
} else {
<div class="space-y-1">
<!-- Manager(s) -->
for _, p := range managers {
<div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface0 border border-surface1">
<span class="px-1.5 py-0.5 bg-yellow/20 text-yellow rounded text-xs font-medium shrink-0">
&#9733;
</span>
<span class="text-sm font-medium">
@links.PlayerLink(p.Player)
</span>
if p.IsFreeAgent {
<span class="px-1.5 py-0.5 bg-peach/20 text-peach rounded text-xs font-medium">
FA
</span>
}
</div>
}
<!-- Regular Players -->
for _, p := range roster {
<div class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface0 transition">
<span class="text-sm">
@links.PlayerLink(p.Player)
</span>
if p.IsFreeAgent {
<span class="px-1.5 py-0.5 bg-peach/20 text-peach rounded text-xs font-medium">
FA
</span>
}
</div>
}
</div>
}
</div>
}