diff options
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> + ); +} |