boom car

台科大多媒體導論期末專案

新鮮的肝

王正宏 B11015020
楊芷安 B11015033
林信佑 B11015034 (2023/06 換到其他組別)
吳丰荏 B11015051
許誠恩 B11030031
廖宣瑜 B11032001
簡呈翰 B11032007
李宇哲 B11033035

執行方法

第一次運行這個專案：

你必須先安裝 nodejs, 並且你電腦的命令列能夠吃到 npm 這個指令，推薦安裝穩定版即可。

npm run install

Run vite server in develop

npm run dev

Run socket server (Backend API)

npm run socket-server

Build to static web (Frontend part only)

npm run build

Kinect server

@TODO: 請 Kinect 負責人將資訊填入

重要連結

爆肝紀錄

Full TODO List (前方高能)

註記：

後方數字請參考上方新鮮的肝
做完後請發 PR 並找兩位組員當 Reviewer，請每次都找不一樣的，最後一位Reviewer 如果接受 PR，請合併並刪除 branch ，並請在下面的 TODO List 打勾

嚴禁躺分🙃
請有決心這東西可能每禮拜花掉你10小時以上的時間。

UI/UX(2, 5)

fullDrive Desktop Drive, ~~iPadOS~~, iOS Safari（螢幕方向為直）

mobile ~~iPadOS~~, iOS Safari，所有移動設備(除平板外)須包含橫、豎畫面設計。

Kinect suppport(8)

Coding

註記：

⎋	⇤	⇌	⌘
架構優化	底層程序	需配合美術	重要觀念

Networking & Deploy

Domain & SSL 證書
Socket Server 部署
Socket Load Balancer

Misc

起跑位置不同的公平性問題解決方案 (6)
遊戲規則定案 (All)
遊戲流程圖 (2)
i18n 多語系支援 config(1, 7)

boom-car Socket API Doc

event type: command | sync | result | error 注意：為了縮減資料傳輸量，請 client 端將非必要不要將自己的 player_id 加上去

function name	type	sender	broadcast
set-nickname	command	client -> server	all user
join-event	command	client -> server	all user
game-start	command	administer -> server	all user
game-ranking	sync	server->client	same group
game-rise	sync	server->client	all user
alert-client-amount	sync	server->client	all user
game-end	command	client->server	-
get-users	command	client->server	-
car-ranking	command	client->server	same group
car-straight	command	client->server	same group
car-straight-cancel	command	client->server	same group
car-left	command	client->server	same group
car-left-cancel	command	client->server	same group
car-right	command	client->server	same group
car-right-cancel	command	client->server	same group
car-turbo	command	client->server	same group
car-turbo-cancel	command	client->server	same group
car-collision	command	client->server	same group
car-collision-cancel	command	client->server	same group
car-collision-cancel	command	client->server	same group
-	error	server->client	one user

error response template （目前都是由 Server 端產生的）

{
    "type": "error",
    "data": {
        "reasonKey": "..."
    }
}

join-event 加入活動

預設活動名稱：花錢的凱子一條龍
代碼：pipeline-of-richer-pay

{
    "type": "command",
    "data": {
        "command": "join-event",
        "code": "pipeline-of-richer-pay"
    }
}

error 不存在的活動

{
    "type": "error",
    "data": {
        "reasonKey": "ERR_EVENT_NOT_FOUND"
    }
}

error 活動尚未開始

{
    "type": "error",
    "data": {
        "reasonKey": "ERR_EVENT_HAVE_NOT_START_YET"
    }
}

error 超過本次活動選手上線

{
    "type": "error",
    "data": {
      "reasonKey": "ERR_OVER_CLIENT_AMOUNT"
    }
}

set-nickname 設置暱稱

command client send:

{
    "type": "command",
    "data": {
        "command": "set-nickname",
        "nickname": "string"
    }
}

error 重複的暱稱

{
    "type": "error",
    "data": {
        "reasonKey": "ERR_DUPLICATED_NICKNAME"
    }
}

error 不合法的暱稱

{
    "type": "error",
    "data": {
        "reasonKey": "ERR_NICKNAME_NOT_VALID"
    }
}

alert-client-amount 同步當前用戶數

{
  "type": "sync",
  "data": {
    "command": "alert-client-amount",
    "clientAmount": 38
  }
}

game-start 遊戲開始

command administer send

{
    "type": "command",
    "data": {
        "command": "game-start"
    }
}

error The game has started

{
  "type": "error",
  "data": {
    "reasonKey": "ERR_GAME_HAS_STARTED"
  }
}

error 權限非法

{
    "type": "error",
    "data": {
      "reasonKey": "ERR_PERMISSION_DENY"
    }
}

sync server send to all client 註記：服務端會根據現在的人數與場次直接分配四組，兩組，一組。members需要根據用戶所在的組別提供對應的組別名單。 rank 在這邊是指你是跑道上的第幾台車。

{
    "type": "sync",
    "data": {
      "command": "game-start",
      "members":[
        {
          "nickname": "B11015020",
          "player_id": "blablablablabla",
          "rank": 0
        },
        {
          "nickname": "B11015033",
          "player_id": "ccccccccccccCat",
          "rank": 1
        }
      ]
    }
}

game-ranking 遊戲排名

註記：遊戲排名會在該組最後一位發送 `game-end` 後自動向客戶端發送本場遊戲的排名

sync server send to all client (group by userGroup) 註記：服務端會根據現在的人數與場次直接分配四組，兩組，一組。members需要根據用戶所在的組別提供對應的組別名單。

{
    "type": "sync",
    "data": {
      "command": "game-ranking",
      "members":[
        {
          "nickname": "B11015020",
          "player_id": "blablablablabla",
          "rank": 1,
          "rise": true
        },
        {
          "nickname": "B11015033",
          "player_id": "ccccccccccccCat",
          "rank": 1,
          "rise": false
        }
      ]
    }
}

game-rise 遊戲晉級

command administer send

{
    "type": "command",
    "data": {
        "command": "game-rise"
    }
}

error Previous haven't finish

{
  "type": "error",
  "data": {
    "reasonKey": "ERR_PREVIOUS_GAME_HAVE_NOT_END"
  }
}

sync server send to all client 註記：服務端會根據場次重新分組，並且移除未晉級的玩家連線，並將有晉級的玩家重新組隊。 rank 在這邊是指你是跑道上的第幾台車。

{
    "type": "sync",
    "data": {
      "command": "game-rise",
      "members":[
        {
          "nickname": "B11015020",
          "player_id": "blablablablabla",
          "rank": 0
        },
        {
          "nickname": "B11015033",
          "player_id": "ccccccccccccCat",
          "rank": 1
        }
      ]
    }
}

game-end 某玩家跑完了兩圈（結束了這回合）

command client send to server rank 在這邊是指你在這回合中的第幾名

{
    "type": "command",
    "data": {
      "command": "game-end",
      "position": {
        "x": 0,
        "y": 0,
        "z": 0
      },
      "rank": 1
    }
}

sync server 廣播給同組的 client

{
    "type": "sync",
    "data": {
      "command": "game-end",
      "player_id": ".......",
      "position": {
        "x": 0,
        "y": 0,
        "z": 0
      },
      "rank": 1
    }
}

car-* (car-ranking, car-straight, car-left, car-left-cancel...)

此指令包含：

car-ranking: 車輛變換名次時發出
- car-straight: 車輛直走
- car-straight-cancel：車輛取消直走
- car-left: 車輛左轉
- car-left-cancel: 車輛左轉取消
- car-right: 車輛右轉
- car-right-cancel: 車輛右轉取消
- car-turbo: 車輛加速
- car-turbo-cancel: 車輛加速取消
- car-collision: 車輛碰撞
- car-collision-cancel: 車輛碰撞取消

command client send to server

後端的，我都寫在這裡了，就求你先看完再開工，這些都是 Socket.io 內建的：

備註： socket.id = player_id

let socketClients = [
   "ojIckSD2jqNzOqIrAGzL",
   "blablablablabla"
];

// 取得現在所有連線的使用者(回傳 socket)
const allClientsID = await io.fetchSockets();

// 取得在 "groupX" 範圍的使用者（你想把他理解成房間還是組別都一樣）
const allClientsIdWhoInGroupX = await io.in("groupX").fetchSockets();

// 將 groupX 範圍的使用者都加到 groupY 群組
io.in("groupX").socketsJoin("groupY");

// 將 groupX 範圍的使用者都加到 groupY 與 groupZ 群組
io.in("groupX").socketsJoin(["groupY", "groupZ"]);

// 將 socketClients 陣列中的使用者都加到 groupY 群組
io.in(socketClients).socketsJoin("groupY");

// 將 socketClients 陣列中的使用者從連線中移除
io.in(socketClients).disconnectSockets(true);
// 切斷所有用戶的連線
io.disconnectSockets();

// 廣播一則訊息給除了指定範圍的用戶
io.except("groupX").emit("foo", "bar");
io.except(["groupX", "groupY"]).emit("foo", "bar");

ChengHung-Wang/boom-car