feat: sound effects, animated intro, dashboard solver, port config

- Game: staggered pop animation with Web Audio API sound, eased slide-in intro with day/date overlay, duplicate word rejection, prevMatchedCount for green tile transition
- PageLayout: mute/unmute toggle, logo links home
- Results: ScoreDistribution promoted above moves list (now collapsible)
- Dashboard: embed top5000.txt word list, recursive puzzle solver with histogram view after save, input validation
- Backend: duplicate word detection in results handler, PORT env var (default 2704)
- Infra: PORT configurable across Dockerfile, Makefile, compose.yaml, vite proxy
- Remove TutorialPage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: zhengkyl

CLAUDE.md

@@ -4,5 +4,6 @@
 - UnoCSS: ALWAYS group variants e.g. `md:(one two three)`
 - NO optional chaining (`?.`). Either the value is never null (access directly) or the type needs redesign (make impossible states unrepresentable)
 - Do not code defensively. Do not let bad inputs gracefully fail. Assert/enforce validity at the type level or throw
+- No IIFEs unless absolutely necessary. Use a named `const` or extract a function instead.
 - Do not run build or type checking commands. The user has a dev server running and can check manually.
 - The user may make changes to the code as you work. If the change is not simple formatting, assume it is an intentional change by the user.

Dockerfile

@@ -20,6 +20,8 @@ WORKDIR /app
 COPY --from=go-builder /bin/server /bin/server
 COPY --from=go-builder /bin/dashboard /bin/dashboard
 COPY --from=client-builder /app/dist ./client/dist
-EXPOSE 3000
+ARG PORT=2704
+ENV PORT=$PORT
+EXPOSE $PORT
 ENV ROOT=/app
 CMD ["/bin/server"]

Makefile

@@ -1,11 +1,14 @@
 .PHONY: dev dev-dash build install start start-dash addword addwords
 
+DEV_PORT ?= 3000
+PORT ?= 2704
+
 install:
 	cd client && pnpm install
 	cd backend && go mod download
 
 dev:
-	trap 'kill %1' EXIT; cd client && pnpm dev & cd backend && go run .
+	trap 'kill %1' EXIT; cd client && PORT=$(PORT) pnpm dev --port $(DEV_PORT) --host & cd backend && PORT=$(PORT) go run .
 
 dev-dash:
 	cd backend && go run cmd/dashboard/dashboard.go

README.md

@@ -19,6 +19,8 @@
 
 `dictionary.txt` is based on the [Letterpress word list](https://github.com/lorenbrichter/Words) (CC0). Changes after 7a08f2f are my own.
 
+`top5000.txt` is from [www.wordfrequency.info](https://www.wordfrequency.info). Top lemmas from the Corpus of Contemporary American English (COCA)
+
 ### Other word lists
 
 - https://github.com/dwyl/english-words
@@ -28,7 +30,7 @@
 
 ## Development
 
-Make sure to access development site via vite's port (probably localhost:5173). Api requests are proxied by vite to port 3000 (hardcoded in vite.config.ts and main.go)
+Make sure to access development site via vite's port (probably localhost:5173). Api requests are proxied by vite to a different port.
 
 ```sh
 make install
@@ -39,7 +41,7 @@ make dev
 
 ## Deploy
 
-The server listens at `localhost:3000`. It expects the `X-Real-IP` header for rate-limiting.
+The server listens at `localhost:2704`. It expects the `X-Real-IP` header for rate-limiting.
 
 ### Docker Compose
 

backend/cmd/dashboard/dashboard.go

@@ -1,19 +1,47 @@
 package main
 
 import (
+	_ "embed"
 	"database/sql"
+	"errors"
 	"fmt"
 	"os"
 	"path/filepath"
 	"strconv"
+	"strings"
 	"time"
+	"unicode"
 
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
 	_ "github.com/mattn/go-sqlite3"
 )
 
+//go:embed top5000.txt
+var dictFile string
+
+var dict [][]rune
+
+func init() {
+	for _, line := range strings.Split(strings.TrimSpace(dictFile), "\n") {
+		word := strings.TrimSpace(line)
+		if word == "" {
+			continue
+		}
+		valid := true
+		for _, r := range word {
+			if !unicode.IsLetter(r) || !unicode.IsLower(r) {
+				valid = false
+				break
+			}
+		}
+		if valid {
+			dict = append(dict, []rune(word))
+		}
+	}
+}
+
 var epoch = time.Date(2026, time.April, 26, 0, 0, 0, 0, time.UTC)
 
 func dayToDate(day int) time.Time {
@@ -30,20 +58,24 @@ type viewState int
 const (
 	viewList viewState = iota
 	viewEdit
+	viewResult
 )
 
 type model struct {
-	db      *sql.DB
-	puzzles []puzzle
-	cursor  int
-	view    viewState
-	input   textinput.Model
-	editDay int
-	err     error
+	db           *sql.DB
+	puzzles      []puzzle
+	cursor       int
+	view         viewState
+	input        textinput.Model
+	editDay      int
+	err          error
+	resultPuzzle string
+	histogram    *[maxWords + 1]int
 }
 
 type puzzlesMsg []puzzle
-type savedMsg struct{}
+type savedMsg struct{ puzzle string }
+type histogramMsg [maxWords + 1]int
 type errMsg error
 
 var (
@@ -82,14 +114,94 @@ func savePuzzle(db *sql.DB, day int, pz string) tea.Cmd {
 		if err != nil {
 			return errMsg(err)
 		}
-		return savedMsg{}
+		return savedMsg{puzzle: pz}
+	}
+}
+
+// matchedCount returns how many tiles from the front of puzzle are covered by word.
+func matchedCount(puzzle, word []rune) int {
+	var used []int
+	for _, pc := range puzzle {
+		found := false
+		for wi, wc := range word {
+			if wc != pc {
+				continue
+			}
+			inUsed := false
+			for _, u := range used {
+				if u == wi {
+					inUsed = true
+					break
+				}
+			}
+			if inUsed {
+				continue
+			}
+			used = append(used, wi)
+			found = true
+			break
+		}
+		if !found {
+			break
+		}
+	}
+	return len(used)
+}
+
+const (
+	maxWords    = 13
+	maxHistCount = 1_000_000
+)
+
+// solve returns hist where hist[n] = # of ways to complete remaining in exactly n words (1–13).
+func solve(remaining []rune, memo map[string][maxWords + 1]int) [maxWords + 1]int {
+	if len(remaining) == 0 {
+		return [maxWords + 1]int{1}
+	}
+	key := string(remaining)
+	if cached, ok := memo[key]; ok {
+		return cached
+	}
+	var result [maxWords + 1]int
+	for _, word := range dict {
+		n := matchedCount(remaining, word)
+		if n < 2 {
+			continue
+		}
+		sub := solve(remaining[n:], memo)
+		for i := 0; i < maxWords; i++ {
+			result[i+1] += sub[i]
+			if result[i+1] > maxHistCount {
+				result[i+1] = maxHistCount
+			}
+		}
+	}
+	memo[key] = result
+	return result
+}
+
+func computeHistogram(pz string) tea.Cmd {
+	return func() tea.Msg {
+		memo := map[string][maxWords + 1]int{}
+		hist := solve([]rune(pz), memo)
+		return histogramMsg(hist)
 	}
 }
 
+func onlyLowerAlpha(s string) error {
+	for _, r := range s {
+		if !unicode.IsLetter(r) || !unicode.IsLower(r) {
+			return errors.New("only lowercase letters allowed")
+		}
+	}
+	return nil
+}
+
 func newModel(db *sql.DB) model {
 	ti := textinput.New()
 	ti.Placeholder = "puzzle string"
 	ti.CharLimit = 256
+	ti.Validate = onlyLowerAlpha
 
 	return model{db: db, view: viewList, input: ti, editDay: -1}
 }
@@ -101,17 +213,25 @@ func (m model) Init() tea.Cmd {
 func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.KeyMsg:
-		if m.view == viewList {
+		switch m.view {
+		case viewList:
 			return m.updateList(msg)
+		case viewEdit:
+			return m.updateEdit(msg)
+		case viewResult:
+			return m.updateResult(msg)
 		}
-		return m.updateEdit(msg)
 	case puzzlesMsg:
 		m.puzzles = []puzzle(msg)
 		m.cursor = min(m.cursor, max(0, len(m.puzzles)-1))
 		m.err = nil
 		return m, nil
 	case savedMsg:
-		return m, loadPuzzles(m.db)
+		return m, tea.Batch(computeHistogram(msg.puzzle), loadPuzzles(m.db))
+	case histogramMsg:
+		h := [maxWords + 1]int(msg)
+		m.histogram = &h
+		return m, nil
 	case errMsg:
 		m.err = error(msg)
 		return m, nil
@@ -162,7 +282,9 @@ func (m model) updateEdit(msg tea.KeyMsg) (tea.Model, tea.Cmd) {
 		if val == "" {
 			return m, nil
 		}
-		m.view = viewList
+		m.view = viewResult
+		m.resultPuzzle = val
+		m.histogram = nil
 		m.input.Blur()
 		return m, savePuzzle(m.db, m.editDay, val)
 	}
@@ -171,9 +293,20 @@ func (m model) updateEdit(msg tea.KeyMsg) (tea.Model, tea.Cmd) {
 	return m, cmd
 }
 
+func (m model) updateResult(msg tea.KeyMsg) (tea.Model, tea.Cmd) {
+	if msg.String() == "ctrl+c" {
+		return m, tea.Quit
+	}
+	m.view = viewList
+	return m, nil
+}
+
 func (m model) View() string {
-	if m.view == viewEdit {
+	switch m.view {
+	case viewEdit:
 		return m.viewEdit()
+	case viewResult:
+		return m.viewResult()
 	}
 	return m.viewList()
 }
@@ -213,7 +346,8 @@ func (m model) viewEdit() string {
 	}
 
 	s := titleStyle.Render(title) + "\n\n"
-	s += "Puzzle: " + m.input.View() + "\n\n"
+	s += "Puzzle: " + m.input.View() + "\n"
+	s += dimStyle.Render(fmt.Sprintf("%d chars", len([]rune(m.input.Value())))) + "\n\n"
 	s += dimStyle.Render("[enter] save  [esc] cancel")
 
 	if m.err != nil {
@@ -223,6 +357,51 @@ func (m model) viewEdit() string {
 	return s
 }
 
+func (m model) viewResult() string {
+	var dayStr string
+	if m.editDay == -1 {
+		dayStr = "new"
+	} else {
+		date := dayToDate(m.editDay)
+		dayStr = fmt.Sprintf("Day %d, %s", m.editDay, date.Format("Jan 02"))
+	}
+	s := titleStyle.Render(fmt.Sprintf("%q (%s)", m.resultPuzzle, dayStr)) + "\n\n"
+
+	s += dimStyle.Render(fmt.Sprintf("dict: %d words", len(dict))) + "\n\n"
+
+	if m.histogram == nil {
+		s += dimStyle.Render("Computing...") + "\n"
+	} else {
+		hist := m.histogram
+
+		maxVal := 0
+		for i := 1; i <= maxWords; i++ {
+			if hist[i] > maxVal {
+				maxVal = hist[i]
+			}
+		}
+
+		const barWidth = 20
+		for i := 1; i <= maxWords; i++ {
+			label := fmt.Sprintf("%2d word", i)
+			if i != 1 {
+				label += "s"
+			} else {
+				label += " "
+			}
+			filled := 0
+			if maxVal > 0 {
+				filled = max(0, min(barWidth, hist[i]*barWidth/maxVal))
+			}
+			bar := strings.Repeat("█", filled) + strings.Repeat("░", barWidth-filled)
+			s += fmt.Sprintf("%s  %s  %d\n", label, bar, hist[i])
+		}
+	}
+
+	s += "\n" + dimStyle.Render("[any key] back")
+	return s
+}
+
 func main() {
 	root, ok := os.LookupEnv("ROOT")
 	if !ok {