Keep track of any enhancements that should be done in the future here.

• Enumerate client phase, maintain it as a single state
• Apply RoleType in client, replace all magic number/string
• Add more log about game process to user chat(game start/end, wins)
• Dot color before player in RoomPage player list should depends on player role
• Record gamers correctly even if they already leave room
• Record color
• status in room list
• Add border at gamer card on its turn

Server calls Game

• start()
• interact({ position: ? }), server needs to check player is at correct side

Game calls Server

• request_interact(side: PlayerSideType)
• notify_winner(side: PlayerSideType)

Login with username, password.
Supports changing password, delete account, email verification (?!).

• Show start, end msg
• Check win/lost
  • upon game ends, sends event to players. (remember to call Game.end())
  • also save records in db
  • (future) Support restart. Let's just kick their butt out of the table.
• Handle player leave game after game starts
  • auto surrender
• Use BlinkRed, BlinkBlue material on lastPiece
• Send gameState on joinRoom

Add Application of the following structure

• Application
  • PlayerList
    • Player
  • RoomList
    • Room
      • RoomPlayerList
      • GameBoard
      • Chat
  • Lobby
    • RoomPlayerList
    • Chat

Three phases

Login

• In the middle of view, show login(disabled) & play as guest(with name input) buttons
  • when guest button is clicked, check name input(randomly assign one if it is empty) and send request to server
    • if valid, go to Lobby phase
    • otherwise, prompt error message to user

Lobby

• fetch and show room data
  • allow user to join room, go to Room phase
• fetch and show player data
  • advanced: allow user invite others, to make this, still need to design the protocol
• chat room

Room

• right: control panel
  • join game button
  • chat room
  • game record
  • player list(show name and status)
  • advanced: game time limit
• left: game board
  • just put a canvas for now

Login

There are two ways to login

As guest

• Server will randomly generate a name
• Expires after window closed

Login with name

• User should input a name manually and server will generate a corresponding token and save them into DB.
• Client should save the token to localStorage
• When user launch the app, try to login with token in localStorage if it exists.

Logout

• If user ask to logout, destroy the token both in localStorage and db

1. Room should be removed when there is no player in the room.
2. Room should not be removed when there is still any player in the room or in the game.
3. Chats should not across rooms and lobby.

It will be better if we can pass all tests by repeatedly joining and leaving rooms.

Develop the following API

Client

Events

• login(future work)

• send_invitation({ playerId }) requires player.isInRoom()

• join_room({ roomId })

• leave_room() requires player.isInRoom()

• leave_game() requires player.isInRoom() room.playerInGame(player.id)

• send_chat({ msg })

• join_game({ player: PlayerSideType }) requires player.isInRoom()

• game_place

Requests

• get_room_list()

• get_player_list()

• create_room({ name }) returns { id }

Server

Events

• update_room_list({ type, room: { id, name } })

• update_player_list({ type, id, name })

• notify_invitation({ playerId, roomId })

• notify_chat({ name, msg, time })

• announce

• notify_chat({ name, msg, time })

• notify_player_join_room({ playerId }) (deprecated)

• notify_player_side({ type, id, side: PlayerSideType })

• game_notify_placed

• notify_win

• notify_kicked

Requests

• confirm_start

Wrap them into a SocketWrapper & add the above event names to knect-common

• Example

const SocketEvents = {
  GetRoomList: 'get_room_list'
}

• Usage

const server = new SocketWrapper();
await server.request(SocketEvents.GetRoomList);

const server = new SocketWrapper();
server.on(SocketEvents.NotifyWin, handleWin);

function handleWin({ winner }) {
  // code here...
}