initial commit

35 files changed, 1371 insertions, 0 deletions

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..cea460a
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,23 @@
+FROM golang:1.22.3 AS backend-builder
+
+WORKDIR /build
+COPY ./backend /build
+RUN go build -o /build/server .
+
+################################################################################
+FROM node:18.20.2 AS frontend-builder
+
+WORKDIR /build
+COPY ./frontend /build
+RUN npm install
+RUN npm run build
+
+################################################################################
+FROM golang:1.22.3
+
+WORKDIR /app
+COPY --from=backend-builder /build/server /app/server
+COPY ./frontend/public /app/public
+COPY --from=frontend-builder /build/dist/js /app/public/js
+
+CMD ["/app/server"]
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..6cd9091
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,11 @@
+.PHONY: build
+build:
+	docker compose build
+
+.PHONY: up
+up:
+	docker compose up -d
+
+.PHONY: down
+down:
+	docker compose down
diff --git a/backend/game.go b/backend/game.go
new file mode 100644
index 0000000..bc2069a
--- /dev/null
+++ b/backend/game.go
@@ -0,0 +1,328 @@
+package main
+
+import (
+	"log"
+	"net/http"
+	"time"
+
+	"github.com/gorilla/websocket"
+)
+
+type GameHub struct {
+	game              *Game
+	clients           map[*GameClient]bool
+	receive           chan *MessageWithClient
+	register          chan *GameClient
+	unregister        chan *GameClient
+	watchers          map[*GameWatcher]bool
+	registerWatcher   chan *GameWatcher
+	unregisterWatcher chan *GameWatcher
+	state             int
+	finishTime        time.Time
+}
+
+func NewGameHub(game *Game) *GameHub {
+	return &GameHub{
+		game:              game,
+		clients:           make(map[*GameClient]bool),
+		receive:           make(chan *MessageWithClient),
+		register:          make(chan *GameClient),
+		unregister:        make(chan *GameClient),
+		watchers:          make(map[*GameWatcher]bool),
+		registerWatcher:   make(chan *GameWatcher),
+		unregisterWatcher: make(chan *GameWatcher),
+		state:             0,
+	}
+}
+
+func (h *GameHub) Run() {
+	ticker := time.NewTicker(10 * time.Second)
+	defer func() {
+		ticker.Stop()
+	}()
+
+	for {
+		select {
+		case client := <-h.register:
+			h.clients[client] = true
+			log.Printf("client registered: %d", len(h.clients))
+		case client := <-h.unregister:
+			if _, ok := h.clients[client]; ok {
+				h.closeClient(client)
+			}
+			log.Printf("client unregistered: %d", len(h.clients))
+			if len(h.clients) == 0 {
+				h.Close()
+				return
+			}
+		case watcher := <-h.registerWatcher:
+			h.watchers[watcher] = true
+			log.Printf("watcher registered: %d", len(h.watchers))
+		case watcher := <-h.unregisterWatcher:
+			if _, ok := h.watchers[watcher]; ok {
+				h.closeWatcher(watcher)
+			}
+			log.Printf("watcher unregistered: %d", len(h.watchers))
+		case message := <-h.receive:
+			log.Printf("received message: %s", message.Message.Type)
+			switch message.Message.Type {
+			case "connect":
+				if h.state == 0 {
+					h.state = 1
+				} else if h.state == 1 {
+					h.state = 2
+					for client := range h.clients {
+						client.send <- &Message{Type: "prepare", Data: MessageDataPrepare{Problem: "1 から 100 までの FizzBuzz を実装せよ (終端を含む)。"}}
+					}
+				} else {
+					log.Printf("invalid state: %d", h.state)
+					h.closeClient(message.Client)
+				}
+			case "ready":
+				if h.state == 2 {
+					h.state = 3
+				} else if h.state == 3 {
+					h.state = 4
+					for client := range h.clients {
+						client.send <- &Message{Type: "start", Data: MessageDataStart{StartTime: time.Now().Add(10 * time.Second).UTC().Format(time.RFC3339)}}
+					}
+					h.finishTime = time.Now().Add(3 * time.Minute)
+				} else {
+					log.Printf("invalid state: %d", h.state)
+					h.closeClient(message.Client)
+				}
+			case "code":
+				if h.state == 4 {
+					code := message.Message.Data.(MessageDataCode).Code
+					message.Client.code = code
+					message.Client.send <- &Message{Type: "score", Data: MessageDataScore{Score: 100}}
+					if message.Client.score == nil {
+						message.Client.score = new(int)
+					}
+					*message.Client.score = 100
+
+					var scoreA, scoreB *int
+					var codeA, codeB string
+					for client := range h.clients {
+						if client.team == "a" {
+							scoreA = client.score
+							codeA = client.code
+						} else {
+							scoreB = client.score
+							codeB = client.code
+						}
+					}
+					for watcher := range h.watchers {
+						watcher.send <- &Message{
+							Type: "watch",
+							Data: MessageDataWatch{
+								Problem: "1 から 100 までの FizzBuzz を実装せよ (終端を含む)。",
+								ScoreA:  scoreA,
+								CodeA:   codeA,
+								ScoreB:  scoreB,
+								CodeB:   codeB,
+							},
+						}
+					}
+				} else {
+					log.Printf("invalid state: %d", h.state)
+					h.closeClient(message.Client)
+				}
+			default:
+				log.Printf("unknown message type: %s", message.Message.Type)
+				h.closeClient(message.Client)
+			}
+		case <-ticker.C:
+			log.Printf("state: %d", h.state)
+			if h.state == 4 {
+				if time.Now().After(h.finishTime) {
+					h.state = 5
+					clientAndScores := make(map[*GameClient]*int)
+					for client := range h.clients {
+						clientAndScores[client] = client.score
+					}
+					for client, score := range clientAndScores {
+						var opponentScore *int
+						for c2, s2 := range clientAndScores {
+							if c2 != client {
+								opponentScore = s2
+								break
+							}
+						}
+						client.send <- &Message{Type: "finish", Data: MessageDataFinish{YourScore: score, OpponentScore: opponentScore}}
+					}
+				}
+			}
+		}
+	}
+}
+
+func (h *GameHub) Close() {
+	for client := range h.clients {
+		h.closeClient(client)
+	}
+	close(h.receive)
+	close(h.register)
+	close(h.unregister)
+	for watcher := range h.watchers {
+		h.closeWatcher(watcher)
+	}
+	close(h.registerWatcher)
+	close(h.unregisterWatcher)
+}
+
+func (h *GameHub) closeClient(client *GameClient) {
+	delete(h.clients, client)
+	close(client.send)
+}
+
+func (h *GameHub) closeWatcher(watcher *GameWatcher) {
+	delete(h.watchers, watcher)
+	close(watcher.send)
+}
+
+const (
+	writeWait      = 10 * time.Second
+	pongWait       = 60 * time.Second
+	pingPeriod     = (pongWait * 9) / 10
+	maxMessageSize = 512
+)
+
+var (
+	newline = []byte{'\n'}
+	space   = []byte{' '}
+)
+
+var upgrader = websocket.Upgrader{
+	ReadBufferSize:  1024,
+	WriteBufferSize: 1024,
+}
+
+type GameClient struct {
+	hub   *GameHub
+	conn  *websocket.Conn
+	send  chan *Message
+	score *int
+	code  string
+	team  string
+}
+
+type GameWatcher struct {
+	hub  *GameHub
+	conn *websocket.Conn
+	send chan *Message
+}
+
+// Receives messages from the client and sends them to the hub.
+func (c *GameClient) readPump() {
+	defer func() {
+		log.Printf("closing client")
+		c.hub.unregister <- c
+		c.conn.Close()
+	}()
+	c.conn.SetReadLimit(maxMessageSize)
+	c.conn.SetReadDeadline(time.Now().Add(pongWait))
+	c.conn.SetPongHandler(func(string) error { c.conn.SetReadDeadline(time.Now().Add(pongWait)); return nil })
+	for {
+		var message Message
+		err := c.conn.ReadJSON(&message)
+		if err != nil {
+			log.Printf("error: %v", err)
+			return
+		}
+		c.hub.receive <- &MessageWithClient{c, &message}
+	}
+}
+
+// Receives messages from the hub and sends them to the client.
+func (c *GameClient) writePump() {
+	ticker := time.NewTicker(pingPeriod)
+	defer func() {
+		ticker.Stop()
+		c.conn.Close()
+	}()
+	for {
+		select {
+		case message, ok := <-c.send:
+			c.conn.SetWriteDeadline(time.Now().Add(writeWait))
+			if !ok {
+				c.conn.WriteMessage(websocket.CloseMessage, []byte{})
+				return
+			}
+
+			err := c.conn.WriteJSON(message)
+			if err != nil {
+				return
+			}
+		case <-ticker.C:
+			c.conn.SetWriteDeadline(time.Now().Add(writeWait))
+			if err := c.conn.WriteMessage(websocket.PingMessage, nil); err != nil {
+				return
+			}
+		}
+	}
+}
+
+func serveWs(hub *GameHub, w http.ResponseWriter, r *http.Request, team string) {
+	conn, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		log.Println(err)
+		return
+	}
+	client := &GameClient{hub: hub, conn: conn, send: make(chan *Message), team: team}
+	client.hub.register <- client
+
+	go client.writePump()
+	go client.readPump()
+}
+
+func serveWsWatcher(hub *GameHub, w http.ResponseWriter, r *http.Request) {
+	conn, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		log.Println(err)
+		return
+	}
+	watcher := &GameWatcher{hub: hub, conn: conn, send: make(chan *Message)}
+	watcher.hub.registerWatcher <- watcher
+
+	go watcher.writePump()
+	go watcher.readPump()
+}
+
+// Receives messages from the client and sends them to the hub.
+func (c *GameWatcher) readPump() {
+	c.conn.SetReadLimit(maxMessageSize)
+	c.conn.SetReadDeadline(time.Now().Add(pongWait))
+	c.conn.SetPongHandler(func(string) error { c.conn.SetReadDeadline(time.Now().Add(pongWait)); return nil })
+}
+
+// Receives messages from the hub and sends them to the client.
+func (c *GameWatcher) writePump() {
+	ticker := time.NewTicker(pingPeriod)
+	defer func() {
+		ticker.Stop()
+		c.conn.Close()
+		log.Printf("closing watcher")
+		c.hub.unregisterWatcher <- c
+	}()
+	for {
+		select {
+		case message, ok := <-c.send:
+			c.conn.SetWriteDeadline(time.Now().Add(writeWait))
+			if !ok {
+				c.conn.WriteMessage(websocket.CloseMessage, []byte{})
+				return
+			}
+
+			err := c.conn.WriteJSON(message)
+			if err != nil {
+				return
+			}
+		case <-ticker.C:
+			c.conn.SetWriteDeadline(time.Now().Add(writeWait))
+			if err := c.conn.WriteMessage(websocket.PingMessage, nil); err != nil {
+				return
+			}
+		}
+	}
+}
diff --git a/backend/go.mod b/backend/go.mod
new file mode 100644
index 0000000..63e750f
--- /dev/null
+++ b/backend/go.mod
@@ -0,0 +1,9 @@
+module iosdc-code-battle-poc
+
+go 1.22.3
+
+require (
+	github.com/gorilla/websocket v1.5.3
+	github.com/jmoiron/sqlx v1.4.0
+	github.com/lib/pq v1.10.9
+)
diff --git a/backend/go.sum b/backend/go.sum
new file mode 100644
index 0000000..b60655d
--- /dev/null
+++ b/backend/go.sum
@@ -0,0 +1,12 @@
+filippo.io/edwards25519 v1.1.0 h1:FNf4tywRC1HmFuKW5xopWpigGjJKiJSV0Cqo0cJWDaA=
+filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4VDT4=
+github.com/go-sql-driver/mysql v1.8.1 h1:LedoTUt/eveggdHS9qUFC1EFSa8bU2+1pZjSRpvNJ1Y=
+github.com/go-sql-driver/mysql v1.8.1/go.mod h1:wEBSXgmK//2ZFJyE+qWnIsVGmvmEKlqwuVSjsCm7DZg=
+github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
+github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/jmoiron/sqlx v1.4.0 h1:1PLqN7S1UYp5t4SrVVnt4nUVNemrDAtxlulVe+Qgm3o=
+github.com/jmoiron/sqlx v1.4.0/go.mod h1:ZrZ7UsYB/weZdl2Bxg6jCRO9c3YHl8r3ahlKmRT4JLY=
+github.com/lib/pq v1.10.9 h1:YXG7RB+JIjhP29X+OtkiDnYaXQwpS4JEWq7dtCCRUEw=
+github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
+github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
+github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
diff --git a/backend/main.go b/backend/main.go
new file mode 100644
index 0000000..68df25b
--- /dev/null
+++ b/backend/main.go
@@ -0,0 +1,259 @@
+package main
+
+import (
+	"fmt"
+	"log"
+	"net/http"
+	"os"
+	"strconv"
+	"time"
+
+	"github.com/jmoiron/sqlx"
+	_ "github.com/lib/pq"
+)
+
+type Config struct {
+	dbHost     string
+	dbPort     string
+	dbUser     string
+	dbPassword string
+	dbName     string
+}
+
+var config *Config
+
+var db *sqlx.DB
+
+func loadEnv() (*Config, error) {
+	dbHost, exists := os.LookupEnv("ALBATROSS_DB_HOST")
+	if !exists {
+		return nil, fmt.Errorf("ALBATROSS_DB_HOST not set")
+	}
+	dbPort, exists := os.LookupEnv("ALBATROSS_DB_PORT")
+	if !exists {
+		return nil, fmt.Errorf("ALBATROSS_DB_PORT not set")
+	}
+	dbUser, exists := os.LookupEnv("ALBATROSS_DB_USER")
+	if !exists {
+		return nil, fmt.Errorf("ALBATROSS_DB_USER not set")
+	}
+	dbPassword, exists := os.LookupEnv("ALBATROSS_DB_PASSWORD")
+	if !exists {
+		return nil, fmt.Errorf("ALBATROSS_DB_PASSWORD not set")
+	}
+	dbName, exists := os.LookupEnv("ALBATROSS_DB_NAME")
+	if !exists {
+		return nil, fmt.Errorf("ALBATROSS_DB_NAME not set")
+	}
+	return &Config{
+		dbHost:     dbHost,
+		dbPort:     dbPort,
+		dbUser:     dbUser,
+		dbPassword: dbPassword,
+		dbName:     dbName,
+	}, nil
+}
+
+const (
+	gameTypeGolf = "golf"
+	gameTypeRace = "race"
+)
+
+const (
+	gameStateWaiting  = "waiting"
+	gameStateReady    = "ready"
+	gameStatePlaying  = "playing"
+	gameStateFinished = "finished"
+)
+
+type Game struct {
+	GameID int `db:"game_id"`
+	// "golf" or "race"
+	Type      string `db:"type"`
+	CreatedAt string `db:"created_at"`
+	State     string `db:"state"`
+}
+
+func initDB() error {
+	_, err := db.Exec(`
+		CREATE TABLE IF NOT EXISTS games (
+			game_id SERIAL PRIMARY KEY,
+			type VARCHAR(255) NOT NULL,
+			created_at TIMESTAMP NOT NULL DEFAULT NOW(),
+			state VARCHAR(255) NOT NULL
+		);
+	`)
+	return err
+}
+
+var gameHubs = map[int]*GameHub{}
+
+func startGame(game *Game) {
+	if gameHubs[game.GameID] != nil {
+		return
+	}
+	gameHubs[game.GameID] = NewGameHub(game)
+	go gameHubs[game.GameID].Run()
+}
+
+func handleGolfPost(w http.ResponseWriter, r *http.Request) {
+	var yourTeam string
+	waitingGolfGames := []Game{}
+	err := db.Select(&waitingGolfGames, "SELECT * FROM games WHERE type = $1 AND state = $2 ORDER BY created_at", gameTypeGolf, gameStateWaiting)
+	if err != nil {
+		http.Error(w, "Error getting games", http.StatusInternalServerError)
+		return
+	}
+	if len(waitingGolfGames) == 0 {
+		_, err = db.Exec("INSERT INTO games (type, state) VALUES ($1, $2)", gameTypeGolf, gameStateWaiting)
+		if err != nil {
+			http.Error(w, "Error creating game", http.StatusInternalServerError)
+			return
+		}
+		waitingGolfGames = []Game{}
+		err = db.Select(&waitingGolfGames, "SELECT * FROM games WHERE type = $1 AND state = $2 ORDER BY created_at", gameTypeGolf, gameStateWaiting)
+		if err != nil {
+			http.Error(w, "Error getting games", http.StatusInternalServerError)
+			return
+		}
+		yourTeam = "a"
+		startGame(&waitingGolfGames[0])
+	} else {
+		yourTeam = "b"
+		db.Exec("UPDATE games SET state = $1 WHERE game_id = $2", gameStateReady, waitingGolfGames[0].GameID)
+	}
+	waitingGame := waitingGolfGames[0]
+
+	http.Redirect(w, r, fmt.Sprintf("/golf/%d/%s/", waitingGame.GameID, yourTeam), http.StatusSeeOther)
+}
+
+func handleRacePost(w http.ResponseWriter, r *http.Request) {
+	http.Redirect(w, r, "/race/1/a/", http.StatusSeeOther)
+}
+
+func main() {
+	var err error
+	config, err = loadEnv()
+	if err != nil {
+		fmt.Printf("Error loading env %v", err)
+		return
+	}
+
+	for i := 0; i < 5; i++ {
+		db, err = sqlx.Connect("postgres", fmt.Sprintf("host=%s port=%s user=%s password=%s dbname=%s sslmode=disable", config.dbHost, config.dbPort, config.dbUser, config.dbPassword, config.dbName))
+		if err == nil {
+			break
+		}
+		time.Sleep(5 * time.Second)
+	}
+	if err != nil {
+		log.Fatalf("Error connecting to db %v", err)
+	}
+	defer db.Close()
+
+	err = initDB()
+	if err != nil {
+		log.Fatalf("Error initializing db %v", err)
+	}
+
+	server := http.NewServeMux()
+
+	server.HandleFunc("GET /js/", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "./public"+r.URL.Path)
+	})
+
+	server.HandleFunc("GET /{$}", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "./public/index.html")
+	})
+
+	server.HandleFunc("GET /golf/{$}", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "./public/golf/index.html")
+	})
+
+	server.HandleFunc("POST /golf/{$}", func(w http.ResponseWriter, r *http.Request) {
+		handleGolfPost(w, r)
+	})
+
+	server.HandleFunc("GET /golf/{gameId}/watch/{$}", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "./public/golf/watch.html")
+	})
+
+	server.HandleFunc("GET /sock/golf/{gameId}/watch/{$}", func(w http.ResponseWriter, r *http.Request) {
+		gameId := r.PathValue("gameId")
+		gameIdInt, err := strconv.Atoi(gameId)
+		if err != nil {
+			http.Error(w, "Invalid game id", http.StatusBadRequest)
+			return
+		}
+		var hub *GameHub
+		for _, h := range gameHubs {
+			if h.game.GameID == gameIdInt {
+				hub = h
+				break
+			}
+		}
+		if hub == nil {
+			http.Error(w, "Game not found", http.StatusNotFound)
+			return
+		}
+		serveWsWatcher(hub, w, r)
+	})
+
+	server.HandleFunc("GET /golf/{gameId}/{team}/{$}", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "./public/golf/game.html")
+	})
+
+	server.HandleFunc("GET /sock/golf/{gameId}/{team}/{$}", func(w http.ResponseWriter, r *http.Request) {
+		gameId := r.PathValue("gameId")
+		gameIdInt, err := strconv.Atoi(gameId)
+		if err != nil {
+			http.Error(w, "Invalid game id", http.StatusBadRequest)
+			return
+		}
+		var hub *GameHub
+		for _, h := range gameHubs {
+			if h.game.GameID == gameIdInt {
+				hub = h
+				break
+			}
+		}
+		if hub == nil {
+			http.Error(w, "Game not found", http.StatusNotFound)
+			return
+		}
+		team := r.PathValue("team")
+		serveWs(hub, w, r, team)
+	})
+
+	server.HandleFunc("GET /race/{$}", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "./public/race/index.html")
+	})
+
+	server.HandleFunc("POST /race/{$}", func(w http.ResponseWriter, r *http.Request) {
+		handleRacePost(w, r)
+	})
+
+	server.HandleFunc("GET /race/{gameId}/watch/{$}", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "./public/race/watch.html")
+	})
+
+	server.HandleFunc("GET /sock/race/{gameId}/watch/{$}", func(w http.ResponseWriter, r *http.Request) {
+		// TODO
+	})
+
+	server.HandleFunc("GET /race/{gameId}/{team}/{$}", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "./public/race/game.html")
+	})
+
+	server.HandleFunc("GET /sock/race/{gameId}/{team}/{$}", func(w http.ResponseWriter, r *http.Request) {
+		// TODO
+	})
+
+	defer func() {
+		for _, hub := range gameHubs {
+			hub.Close()
+		}
+	}()
+
+	http.ListenAndServe(":80", server)
+}
diff --git a/backend/message.go b/backend/message.go
new file mode 100644
index 0000000..f466a8f
--- /dev/null
+++ b/backend/message.go
@@ -0,0 +1,104 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+)
+
+type MessageWithClient struct {
+	Client  *GameClient
+	Message *Message
+}
+
+type Message struct {
+	Type string      `json:"type"`
+	Data MessageData `json:"data"`
+}
+
+type MessageData interface{}
+
+type MessageDataConnect struct {
+}
+
+type MessageDataPrepare struct {
+	Problem string `json:"problem"`
+}
+
+type MessageDataReady struct {
+}
+
+type MessageDataStart struct {
+	StartTime string `json:"startTime"`
+}
+
+type MessageDataCode struct {
+	Code string `json:"code"`
+}
+
+type MessageDataScore struct {
+	Score int `json:"score"`
+}
+
+type MessageDataFinish struct {
+	YourScore     *int `json:"yourScore"`
+	OpponentScore *int `json:"opponentScore"`
+}
+
+type MessageDataWatch struct {
+	Problem string `json:"problem"`
+	ScoreA  *int   `json:"scoreA"`
+	CodeA   string `json:"codeA"`
+	ScoreB  *int   `json:"scoreB"`
+	CodeB   string `json:"codeB"`
+}
+
+func (m *Message) UnmarshalJSON(data []byte) error {
+	var raw map[string]json.RawMessage
+	if err := json.Unmarshal(data, &raw); err != nil {
+		return err
+	}
+
+	if err := json.Unmarshal(raw["type"], &m.Type); err != nil {
+		return err
+	}
+
+	var err error
+	switch m.Type {
+	case "connect":
+		var data MessageDataConnect
+		err = json.Unmarshal(raw["data"], &data)
+		m.Data = data
+	case "prepare":
+		var data MessageDataPrepare
+		err = json.Unmarshal(raw["data"], &data)
+		m.Data = data
+	case "ready":
+		var data MessageDataReady
+		err = json.Unmarshal(raw["data"], &data)
+		m.Data = data
+	case "start":
+		var data MessageDataStart
+		err = json.Unmarshal(raw["data"], &data)
+		m.Data = data
+	case "code":
+		var data MessageDataCode
+		err = json.Unmarshal(raw["data"], &data)
+		m.Data = data
+	case "score":
+		var data MessageDataScore
+		err = json.Unmarshal(raw["data"], &data)
+		m.Data = data
+	case "finish":
+		var data MessageDataFinish
+		err = json.Unmarshal(raw["data"], &data)
+		m.Data = data
+	case "watch":
+		var data MessageDataWatch
+		err = json.Unmarshal(raw["data"], &data)
+		m.Data = data
+	default:
+		err = fmt.Errorf("unknown message type: %s", m.Type)
+	}
+
+	return err
+}
diff --git a/compose.yaml b/compose.yaml
new file mode 100644
index 0000000..c708494
--- /dev/null
+++ b/compose.yaml
@@ -0,0 +1,29 @@
+services:
+  server:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - '8002:80'
+    depends_on:
+      - db
+    environment:
+      ALBATROSS_DB_HOST: db
+      ALBATROSS_DB_PORT: 5432
+      ALBATROSS_DB_USER: postgres
+      ALBATROSS_DB_PASSWORD: eepei5reesoo0ov2ceelahd4Emi0au8ahJa6oochohheiquahweihoovahsee1oo
+      ALBATROSS_DB_NAME: albatross
+
+  db:
+    image: postgres:16.3
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: eepei5reesoo0ov2ceelahd4Emi0au8ahJa6oochohheiquahweihoovahsee1oo
+      POSTGRES_DB: albatross
+    expose:
+      - 5432
+    volumes:
+      - db-data:/var/lib/postgresql/data
+
+volumes:
+  db-data:
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..8225baa
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+/dist
diff --git a/frontend/build.mjs b/frontend/build.mjs
new file mode 100644
index 0000000..d48c546
--- /dev/null
+++ b/frontend/build.mjs
@@ -0,0 +1,13 @@
+import esbuild from 'esbuild';
+
+await esbuild.build({
+  entryPoints: ['src/game.jsx', 'src/watch.jsx'],
+  outdir: 'dist/js',
+  bundle: true,
+  // minify: true,
+  minify: false,
+  sourcemap: true,
+  platform: 'browser',
+  format: 'esm',
+  jsx: 'automatic',
+});
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
new file mode 100644
index 0000000..7ed1aea
--- /dev/null
+++ b/frontend/package-lock.json
@@ -0,0 +1,143 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "frontend",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-use-websocket": "^4.8.1",
+        "use-debounce": "^10.0.1"
+      },
+      "devDependencies": {
+        "esbuild": "^0.21.4"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.4.tgz",
+      "integrity": "sha512-Td9jv782UMAFsuLZINfUpoF5mZIbAj+jv1YVtE58rFtfvoKRiKSkRGQfHTgKamLVT/fO7203bHa3wU122V/Bdg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.4.tgz",
+      "integrity": "sha512-sFMcNNrj+Q0ZDolrp5pDhH0nRPN9hLIM3fRPwgbLYJeSHHgnXSnbV3xYgSVuOeLWH9c73VwmEverVzupIv5xuA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.4",
+        "@esbuild/android-arm": "0.21.4",
+        "@esbuild/android-arm64": "0.21.4",
+        "@esbuild/android-x64": "0.21.4",
+        "@esbuild/darwin-arm64": "0.21.4",
+        "@esbuild/darwin-x64": "0.21.4",
+        "@esbuild/freebsd-arm64": "0.21.4",
+        "@esbuild/freebsd-x64": "0.21.4",
+        "@esbuild/linux-arm": "0.21.4",
+        "@esbuild/linux-arm64": "0.21.4",
+        "@esbuild/linux-ia32": "0.21.4",
+        "@esbuild/linux-loong64": "0.21.4",
+        "@esbuild/linux-mips64el": "0.21.4",
+        "@esbuild/linux-ppc64": "0.21.4",
+        "@esbuild/linux-riscv64": "0.21.4",
+        "@esbuild/linux-s390x": "0.21.4",
+        "@esbuild/linux-x64": "0.21.4",
+        "@esbuild/netbsd-x64": "0.21.4",
+        "@esbuild/openbsd-x64": "0.21.4",
+        "@esbuild/sunos-x64": "0.21.4",
+        "@esbuild/win32-arm64": "0.21.4",
+        "@esbuild/win32-ia32": "0.21.4",
+        "@esbuild/win32-x64": "0.21.4"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-use-websocket": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/react-use-websocket/-/react-use-websocket-4.8.1.tgz",
+      "integrity": "sha512-FTXuG5O+LFozmu1BRfrzl7UIQngECvGJmL7BHsK4TYXuVt+mCizVA8lT0hGSIF0Z0TedF7bOo1nRzOUdginhDw==",
+      "peerDependencies": {
+        "react": ">= 18.0.0",
+        "react-dom": ">= 18.0.0"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/use-debounce": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.1.tgz",
+      "integrity": "sha512-0uUXjOfm44e6z4LZ/woZvkM8FwV1wiuoB6xnrrOmeAEjRDDzTLQNRFtYHvqUsJdrz1X37j0rVGIVp144GLHGKg==",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    }
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..dd13aac
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "build": "node build.mjs",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-use-websocket": "^4.8.1",
+    "use-debounce": "^10.0.1"
+  },
+  "devDependencies": {
+    "esbuild": "^0.21.4"
+  }
+}
diff --git a/frontend/public/golf/game.html b/frontend/public/golf/game.html
new file mode 100644
index 0000000..bbe949f
--- /dev/null
+++ b/frontend/public/golf/game.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Golf | Albatross.swift</title>
+  </head>
+  <body>
+    <h1>Golf</h1>
+    <div id="app"></div>
+    <script type="module" src="/js/game.js"></script>
+  </body>
+</html>
diff --git a/frontend/public/golf/index.html b/frontend/public/golf/index.html
new file mode 100644
index 0000000..1d5bc9d
--- /dev/null
+++ b/frontend/public/golf/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Golf | Albatross.swift</title>
+  </head>
+  <body>
+    <h1>Golf</h1>
+    <form method="post">
+      <div>
+        <label for="name">名前</label>
+        <input type="text" name="name" required>
+      </div>
+      <div>
+        <button type="submit">開始</button>
+      </div>
+    </form>
+  </body>
+</html>
diff --git a/frontend/public/golf/watch.html b/frontend/public/golf/watch.html
new file mode 100644
index 0000000..6ab7699
--- /dev/null
+++ b/frontend/public/golf/watch.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Golf | Albatross.swift</title>
+  </head>
+  <body>
+    <h1>Golf</h1>
+    <div id="app"></div>
+    <script type="module" src="/js/watch.js"></script>
+  </body>
+</html>
diff --git a/frontend/public/index.html b/frontend/public/index.html
new file mode 100644
index 0000000..8101332
--- /dev/null
+++ b/frontend/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Albatross.swift</title>
+  </head>
+  <body>
+    <h1>Albatross.swift</h1>
+    <div>
+      <div>
+        <a href="/golf/">ゴルフ</a>
+      </div>
+      <div>
+        <a href="/race/">レース</a>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/frontend/public/race/game.html b/frontend/public/race/game.html
new file mode 100644
index 0000000..08810cc
--- /dev/null
+++ b/frontend/public/race/game.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Race | Albatross.swift</title>
+  </head>
+  <body>
+    <h1>Race</h1>
+    <div>
+    </div>
+  </body>
+</html>
diff --git a/frontend/public/race/index.html b/frontend/public/race/index.html
new file mode 100644
index 0000000..930f2e7
--- /dev/null
+++ b/frontend/public/race/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Race | Albatross.swift</title>
+  </head>
+  <body>
+    <h1>Race</h1>
+    <form>
+      <label for="name">名前</label>
+      <input type="text" name="name">
+      <button type="submit">開始</button>
+    </form>
+  </body>
+</html>
diff --git a/frontend/public/race/watch.html b/frontend/public/race/watch.html
new file mode 100644
index 0000000..08810cc
--- /dev/null
+++ b/frontend/public/race/watch.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Race | Albatross.swift</title>
+  </head>
+  <body>
+    <h1>Race</h1>
+    <div>
+    </div>
+  </body>
+</html>
diff --git a/frontend/src/game.jsx b/frontend/src/game.jsx
new file mode 100644
index 0000000..8b31d54
--- /dev/null
+++ b/frontend/src/game.jsx
@@ -0,0 +1,12 @@
+import { createRoot } from 'react-dom/client';
+import App from './game/App.jsx';
+
+const url = new URL(window.location.href);
+const path = url.pathname;
+const match = path.match(/\/golf\/(\d+)\/(a|b)\/$/);
+if (match) {
+  const gameId = match[1];
+  const team = match[2];
+
+  createRoot(document.getElementById('app')).render(<App gameId={gameId} team={team} />);
+}
diff --git a/frontend/src/game/App.jsx b/frontend/src/game/App.jsx
new file mode 100644
index 0000000..9a41ea4
--- /dev/null
+++ b/frontend/src/game/App.jsx
@@ -0,0 +1,99 @@
+import { useState, useEffect } from 'react';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
+import { useDebouncedCallback } from 'use-debounce';
+import Connecting from './apps/Connecting.jsx';
+import Waiting from './apps/Waiting.jsx';
+import Starting from './apps/Starting.jsx';
+import Gaming from './apps/Gaming.jsx';
+import Finished from './apps/Finished.jsx';
+import Failed from './apps/Failed.jsx';
+import { GAME_STATE_CONNECTING, GAME_STATE_WAITING, GAME_STATE_STARTING, GAME_STATE_GAMING, GAME_STATE_FINISHED, GAME_STATE_FAILED } from './GameState.js';
+
+export default ({ gameId, team }) => {
+  // const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/${team}/`;
+  const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/${team}/`;
+
+  const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket(socketUrl);
+
+  const [gameState, setGameState] = useState(GAME_STATE_CONNECTING);
+
+  const [problem, setProblem] = useState(null);
+
+  // in seconds
+  const [timeLeft, setTimeLeft] = useState(null);
+  useEffect(() => {
+    if (gameState === GAME_STATE_STARTING && timeLeft !== null) {
+      const timer = setInterval(() => {
+        setTimeLeft(prevTime => {
+          if (prevTime <= 1) {
+            clearInterval(timer);
+            setGameState(GAME_STATE_GAMING);
+            return 0;
+          }
+          return prevTime - 1;
+        });
+      }, 1000);
+
+      return () => clearInterval(timer);
+    }
+  }, [gameState]);
+
+  const [score, setScore] = useState(null);
+
+  const [result, setResult] = useState(null);
+
+  const onCodeChange = useDebouncedCallback((data) => {
+    sendJsonMessage({ type: 'code', data });
+  }, 1000);
+
+  useEffect(() => {
+    if (readyState === ReadyState.UNINSTANTIATED) {
+      setGameState(GAME_STATE_FAILED);
+    } else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) {
+      if (gameState !== GAME_STATE_FINISHED) {
+        setGameState(GAME_STATE_FAILED);
+      }
+    } else if (readyState === ReadyState.CONNECTING) {
+      setGameState(GAME_STATE_CONNECTING);
+    } else if (readyState === ReadyState.OPEN) {
+      if (lastJsonMessage !== null) {
+        if (lastJsonMessage.type === 'prepare') {
+          const { problem } = lastJsonMessage.data;
+          setProblem(problem);
+          sendJsonMessage({ type: 'ready', data: {} });
+        } else if (lastJsonMessage.type === 'start') {
+          const { startTime } = lastJsonMessage.data;
+          const startTimeMs = Date.parse(startTime);
+          setTimeLeft(Math.max(0, Math.floor((startTimeMs - Date.now()) / 1000)));
+          setGameState(GAME_STATE_STARTING);
+        } else if (lastJsonMessage.type === 'finish') {
+          const result = lastJsonMessage.data;
+          setResult(result);
+          setGameState(GAME_STATE_FINISHED);
+        } else if (lastJsonMessage.type === 'score') {
+          const { score } = lastJsonMessage.data;
+          setScore(score);
+        } else {
+          setGameState(GAME_STATE_FAILED);
+        }
+      } else {
+        setGameState(GAME_STATE_WAITING);
+        sendJsonMessage({ type: 'connect', data: {} });
+      }
+    }
+  }, [readyState, lastJsonMessage]);
+
+  return (
+    <div>
+      <h1>Game #{gameId} (team #{team})</h1>
+      <div>
+        { gameState === GAME_STATE_CONNECTING ? (<Connecting gameId={gameId} team={team} />)
+          : gameState === GAME_STATE_WAITING ? (<Waiting gameId={gameId} team={team} />)
+          : gameState === GAME_STATE_STARTING ? (<Starting gameId={gameId} team={team} timeLeft={timeLeft} />)
+          : gameState === GAME_STATE_GAMING ? (<Gaming gameId={gameId} team={team} problem={problem} score={score} onCodeChange={onCodeChange} />)
+          : gameState === GAME_STATE_FINISHED ? (<Finished gameId={gameId} team={team} result={result} />)
+          : (<Failed />) }
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/game/GameState.js b/frontend/src/game/GameState.js
new file mode 100644
index 0000000..0e733af
--- /dev/null
+++ b/frontend/src/game/GameState.js
@@ -0,0 +1,6 @@
+export const GAME_STATE_CONNECTING = 'connecting';
+export const GAME_STATE_WAITING = 'waiting';
+export const GAME_STATE_STARTING = 'starting';
+export const GAME_STATE_GAMING = 'gaming';
+export const GAME_STATE_FINISHED = 'finished';
+export const GAME_STATE_FAILED = 'failed';
diff --git a/frontend/src/game/apps/Connecting.jsx b/frontend/src/game/apps/Connecting.jsx
new file mode 100644
index 0000000..464af23
--- /dev/null
+++ b/frontend/src/game/apps/Connecting.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      接続中です......
+    </div>
+  );
+}
diff --git a/frontend/src/game/apps/Failed.jsx b/frontend/src/game/apps/Failed.jsx
new file mode 100644
index 0000000..f96e999
--- /dev/null
+++ b/frontend/src/game/apps/Failed.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      エラー
+    </div>
+  );
+}
diff --git a/frontend/src/game/apps/Finished.jsx b/frontend/src/game/apps/Finished.jsx
new file mode 100644
index 0000000..efd4e81
--- /dev/null
+++ b/frontend/src/game/apps/Finished.jsx
@@ -0,0 +1,24 @@
+export default ({ result }) => {
+  const { yourScore, opponentScore } = result;
+  const yourScoreToCompare = yourScore ?? Infinity;
+  const opponentScoreToCompare = opponentScore ?? Infinity;
+  const resultText = yourScoreToCompare === opponentScoreToCompare ? '引き分け' : (yourScoreToCompare < opponentScoreToCompare ? 'あなたの勝ち' : 'あなたの負け');
+  return (
+    <>
+      <div>
+        対戦終了
+      </div>
+      <div>
+        <div>
+          {resultText}
+        </div>
+        <div>
+          あなたのスコア: {yourScore ?? 'なし'}
+        </div>
+        <div>
+          相手のスコア: {opponentScore ?? 'なし'}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/game/apps/Gaming.jsx b/frontend/src/game/apps/Gaming.jsx
new file mode 100644
index 0000000..bf47860
--- /dev/null
+++ b/frontend/src/game/apps/Gaming.jsx
@@ -0,0 +1,24 @@
+export default ({ problem, onCodeChange, score }) => {
+  const handleTextChange = (e) => {
+    onCodeChange({ code: e.target.value });
+  };
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <div style={{ flex: 1, padding: '10px', borderRight: '1px solid #ccc' }}>
+        <div>
+          {problem}
+        </div>
+        <div>
+          {score == null ? 'Score: -' : `Score: ${score} byte`}
+        </div>
+      </div>
+      <div style={{ flex: 1, padding: '10px' }}>
+        <textarea
+          style={{ width: '100%', height: '100%' }}
+          onChange={handleTextChange}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/game/apps/Starting.jsx b/frontend/src/game/apps/Starting.jsx
new file mode 100644
index 0000000..e66aa34
--- /dev/null
+++ b/frontend/src/game/apps/Starting.jsx
@@ -0,0 +1,9 @@
+export default ({ timeLeft }) => {
+  return (
+    <>
+      <div>
+        対戦相手が見つかりました。{timeLeft} 秒後にゲームを開始します。
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/game/apps/Waiting.jsx b/frontend/src/game/apps/Waiting.jsx
new file mode 100644
index 0000000..27fdd76
--- /dev/null
+++ b/frontend/src/game/apps/Waiting.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      対戦相手が現れるのを待っています......
+    </div>
+  );
+}
diff --git a/frontend/src/watch.jsx b/frontend/src/watch.jsx
new file mode 100644
index 0000000..c8dcda1
--- /dev/null
+++ b/frontend/src/watch.jsx
@@ -0,0 +1,11 @@
+import { createRoot } from 'react-dom/client';
+import App from './watch/App.jsx';
+
+const url = new URL(window.location.href);
+const path = url.pathname;
+const match = path.match(/\/golf\/(\d+)\/watch\/$/);
+if (match) {
+  const gameId = match[1];
+
+  createRoot(document.getElementById('app')).render(<App gameId={gameId} />);
+}
diff --git a/frontend/src/watch/App.jsx b/frontend/src/watch/App.jsx
new file mode 100644
index 0000000..fe415bf
--- /dev/null
+++ b/frontend/src/watch/App.jsx
@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
+import Connecting from './apps/Connecting.jsx';
+import Waiting from './apps/Waiting.jsx';
+import Gaming from './apps/Gaming.jsx';
+import Failed from './apps/Failed.jsx';
+import { WATCH_STATE_CONNECTING, WATCH_STATE_WAITING, WATCH_STATE_GAMING, WATCH_STATE_FINISHED, WATCH_STATE_FAILED } from './WatchState.js';
+
+export default ({ gameId }) => {
+  // const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/watch/`;
+  const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/watch/`;
+
+  const { lastJsonMessage, readyState } = useWebSocket(socketUrl);
+
+  const [watchState, setWatchState] = useState(WATCH_STATE_CONNECTING);
+
+  const [problem, setProblem] = useState(null);
+
+  const [scoreA, setScoreA] = useState(null);
+  const [codeA, setCodeA] = useState(null);
+  const [scoreB, setScoreB] = useState(null);
+  const [codeB, setCodeB] = useState(null);
+
+  useEffect(() => {
+    if (readyState === ReadyState.UNINSTANTIATED) {
+      setWatchState(WATCH_STATE_FAILED);
+    } else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) {
+      if (watchState !== WATCH_STATE_FINISHED) {
+        setWatchState(WATCH_STATE_FAILED);
+      }
+    } else if (readyState === ReadyState.CONNECTING) {
+      setWatchState(WATCH_STATE_CONNECTING);
+    } else if (readyState === ReadyState.OPEN) {
+      if (lastJsonMessage !== null) {
+        if (lastJsonMessage.type === 'watch') {
+          const { problem, scoreA: scoreA_, codeA: codeA_, scoreB: scoreB_, codeB: codeB_ } = lastJsonMessage.data;
+          setProblem(problem);
+          setScoreA(scoreA_);
+          setCodeA(codeA_);
+          setScoreB(scoreB_);
+          setCodeB(codeB_);
+          setWatchState(WATCH_STATE_GAMING);
+        } else {
+          setWatchState(WATCH_STATE_FAILED);
+        }
+      } else {
+        setWatchState(WATCH_STATE_WAITING);
+      }
+    }
+  }, [readyState, lastJsonMessage]);
+
+  return (
+    <div>
+      <h1>Game #{gameId} watching</h1>
+      <div>
+        { watchState === WATCH_STATE_CONNECTING ? (<Connecting gameId={gameId} />)
+          : watchState === WATCH_STATE_WAITING ? (<Waiting gameId={gameId} />)
+          : watchState === WATCH_STATE_GAMING || watchState === WATCH_STATE_FINISHED ? (<Gaming gameId={gameId} problem={problem} scoreA={scoreA} codeA={codeA} scoreB={scoreB} codeB={codeB} />)
+          : (<Failed />) }
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/watch/WatchState.js b/frontend/src/watch/WatchState.js
new file mode 100644
index 0000000..71f0ba6
--- /dev/null
+++ b/frontend/src/watch/WatchState.js
@@ -0,0 +1,6 @@
+export const WATCH_STATE_CONNECTING = 'connecting';
+export const WATCH_STATE_WAITING = 'waiting';
+export const WATCH_STATE_STARTING = 'starting';
+export const WATCH_STATE_GAMING = 'gaming';
+export const WATCH_STATE_FINISHED = 'finished';
+export const WATCH_STATE_FAILED = 'failed';
diff --git a/frontend/src/watch/apps/Connecting.jsx b/frontend/src/watch/apps/Connecting.jsx
new file mode 100644
index 0000000..464af23
--- /dev/null
+++ b/frontend/src/watch/apps/Connecting.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      接続中です......
+    </div>
+  );
+}
diff --git a/frontend/src/watch/apps/Failed.jsx b/frontend/src/watch/apps/Failed.jsx
new file mode 100644
index 0000000..f96e999
--- /dev/null
+++ b/frontend/src/watch/apps/Failed.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      エラー
+    </div>
+  );
+}
diff --git a/frontend/src/watch/apps/Gaming.jsx b/frontend/src/watch/apps/Gaming.jsx
new file mode 100644
index 0000000..c844c46
--- /dev/null
+++ b/frontend/src/watch/apps/Gaming.jsx
@@ -0,0 +1,29 @@
+export default ({ problem, scoreA, codeA, scoreB, codeB }) => {
+  return (
+    <>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div style={{ display: 'flex', flex: 1, justifyContent: 'center' }}>
+          {problem}
+        </div>
+        <div style={{ display: 'flex', flex: 3 }}>
+          <div style={{ display: 'flex', flex: 3, flexDirection: 'column' }}>
+            <div style={{ flex: 1, justifyContent: 'center' }}>
+              {scoreA}
+            </div>
+            <div style={{ flex: 3 }}>
+              <pre><code>{codeA}</code></pre>
+            </div>
+          </div>
+          <div style={{ display: 'flex', flex: 3, flexDirection: 'column' }}>
+            <div style={{ flex: 1, justifyContent: 'center' }}>
+              {scoreB}
+            </div>
+            <div style={{ flex: 3 }}>
+              <pre><code>{codeB}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/frontend/src/watch/apps/Waiting.jsx b/frontend/src/watch/apps/Waiting.jsx
new file mode 100644
index 0000000..27fdd76
--- /dev/null
+++ b/frontend/src/watch/apps/Waiting.jsx
@@ -0,0 +1,7 @@
+export default () => {
+  return (
+    <div>
+      対戦相手が現れるのを待っています......
+    </div>
+  );
+}