Frontend/create room

packages/frontend/.eslintignore

@@ -1,3 +1,2 @@
 build
 node_modules
-Cypress

packages/frontend/.eslintrc.json

@@ -1,45 +1,46 @@
 {
   "env": {
-      "browser": true,
-      "es2020": true
+    "browser": true,
+    "es2020": true
   },
   "extends": [
-      "plugin:react/recommended",
-      "standard",
-      "prettier",
-      "plugin:prettier/recommended"
+    "plugin:react/recommended",
+    "standard",
+    "prettier",
+    "plugin:prettier/recommended",
+    "plugin:cypress/recommended"
   ],
   "parserOptions": {
-      "ecmaFeatures": {
-          "jsx": true
-      },
-      "ecmaVersion": 11,
-      "sourceType": "module"
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 11,
+    "sourceType": "module"
   },
-  "plugins": [
-      "react",
-      "prettier"
-  ],
+  "plugins": ["react", "prettier"],
   "settings": {
     "react": {
       "version": "detect"
     }
   },
   "rules": {
-      "react/react-in-jsx-scope": "off",
-      "no-case-declarations": "off",
-      "no-extend-native": "off",
-      "no-prototype-builtins": "off",
-      "no-useless-escape": "off",
-      "space-before-function-paren": ["error",  {"anonymous": "always", "named": "never", "asyncArrow": "always"}],
-      "no-multi-spaces": ["error", { "ignoreEOLComments": true }],
-      "prefer-promise-reject-errors": ["error", {"allowEmptyReject": true}],
-      "prettier/prettier": [ "warn", {"endOfLine": "auto"}],
-      "no-unused-vars": "off"
+    "react/react-in-jsx-scope": "off",
+    "no-case-declarations": "off",
+    "no-extend-native": "off",
+    "no-prototype-builtins": "off",
+    "no-useless-escape": "off",
+    "space-before-function-paren": [
+      "error",
+      { "anonymous": "always", "named": "never", "asyncArrow": "always" }
+    ],
+    "no-multi-spaces": ["error", { "ignoreEOLComments": true }],
+    "prefer-promise-reject-errors": ["error", { "allowEmptyReject": true }],
+    "prettier/prettier": ["warn", { "endOfLine": "auto" }],
+    "no-unused-vars": "off"
   },
   "globals": {
-      "PropTypes": "readonly",
-      "ReactDom": "readonly",
-      "React": "readonly"
+    "PropTypes": "readonly",
+    "ReactDom": "readonly",
+    "React": "readonly"
   }
 }

packages/frontend/.prettierignore

@@ -11,3 +11,4 @@ postcss.config.js
 .vscode
 .eslintrc.json
 .eslintignore
+cypress

packages/frontend/cypress/e2e/spec.cy.js

@@ -1,8 +1,11 @@
-// eslint-disable-next-line no-undef
-describe('My First Test', () => {
-  // eslint-disable-next-line no-undef
-  it('Visits the Kitchen Sink', () => {
-    // eslint-disable-next-line no-undef
-    cy.visit('http://localhost:3001/')
+describe('Main Page Test', () => {
+  it('Display game lobby', () => {
+    cy.viewport(1920, 1080)
+    cy.intercept('GET', '**/games', {
+      success: true,
+      fixture: 'roomList.json'
+    }).as('getRooms')
+    cy.visit('http://localhost:3001/rooms')
+    cy.get('.room-list')
   })
 })

packages/frontend/cypress/fixtures/roomList.json

@@ -0,0 +1,189 @@
+{
+  "searchTime": "2023-07-04T20:29:54.001Z",
+  "totalRooms": 13,
+  "status": "OK",
+  "msg": "",
+  "rooms": [
+    {
+      "roomId": "sxsxs111",
+      "gameName": "一起玩富饒之城",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "陳XX",
+      "holderId": "player1",
+      "totalPlayers": 3,
+      "users": [
+        { "playerId": "player1", "playerName": "陳XX" },
+        { "playerId": "player2", "playerName": "黃XX" },
+        { "playerId": "player3", "playerName": "陳XX" }
+      ]
+    },
+    {
+      "roomId": "sxsxs222",
+      "gameName": "一起玩玩玩玩富饒之城",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "王XX",
+      "holderId": "player1",
+      "totalPlayers": 5,
+      "users": [
+        { "playerId": "player1", "playerName": "王XX" },
+        { "playerId": "player2", "playerName": "黃XX" },
+        { "playerId": "player3", "playerName": "陳XX" },
+        { "playerId": "player4", "playerName": "葉XX" },
+        { "playerId": "player5", "playerName": "林XX" }
+      ]
+    },
+    {
+      "roomId": "sxsxs333",
+      "gameName": "一起玩 citadels-game",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "黃XX",
+      "holderId": "player1",
+      "totalPlayers": 1,
+      "users": [{ "playerId": "player1", "playerName": "黃XX" }]
+    },
+    {
+      "roomId": "sxsxs444",
+      "gameName": "一起玩 $#*&(%%",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "王XX",
+      "holderId": "player1",
+      "totalPlayers": 7,
+      "users": [
+        { "playerId": "player1", "playerName": "王XX" },
+        { "playerId": "player2", "playerName": "黃XX" },
+        { "playerId": "player3", "playerName": "陳XX" },
+        { "playerId": "player4", "playerName": "葉XX" },
+        { "playerId": "player5", "playerName": "林XX" },
+        { "playerId": "player6", "playerName": "王XX" },
+        { "playerId": "player7", "playerName": "謝XX" }
+      ]
+    },
+    {
+      "roomId": "sxsxs555",
+      "gameName": "一緒にお城ゲームをする城",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "王XX",
+      "holderId": "player1",
+      "totalPlayers": 5,
+      "users": [
+        { "playerId": "player1", "playerName": "王XX" },
+        { "playerId": "player2", "playerName": "黃XX" },
+        { "playerId": "player3", "playerName": "陳XX" },
+        { "playerId": "player4", "playerName": "葉XX" },
+        { "playerId": "player5", "playerName": "林XX" }
+      ]
+    },
+    {
+      "roomId": "sxsxs666",
+      "gameName": "一起玩富饒之城1234",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "黃XX",
+      "holderId": "player1",
+      "totalPlayers": 4,
+      "users": [
+        { "playerId": "player1", "playerName": "黃XX" },
+        { "playerId": "player2", "playerName": "黃XX" },
+        { "playerId": "player3", "playerName": "陳XX" },
+        { "playerId": "player4", "playerName": "葉XX" }
+      ]
+    },
+    {
+      "roomId": "sxsxs777",
+      "gameName": "一起玩富饒之城1234",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "葉XX",
+      "holderId": "player1",
+      "totalPlayers": 2,
+      "users": [
+        { "playerId": "player1", "playerName": "葉XX" },
+        { "playerId": "player2", "playerName": "黃XX" }
+      ]
+    },
+    {
+      "roomId": "sxsxs888",
+      "gameName": "一起玩富饒之城1234",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "張XX",
+      "holderId": "player1",
+      "totalPlayers": 2,
+      "users": [
+        { "playerId": "player1", "playerName": "張XX" },
+        { "playerId": "player2", "playerName": "黃XX" }
+      ]
+    },
+    {
+      "roomId": "sxsxs999",
+      "gameName": "一起玩富饒之城1234",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "吳XX",
+      "holderId": "player1",
+      "totalPlayers": 2,
+      "users": [
+        { "playerId": "player1", "playerName": "吳XX" },
+        { "playerId": "player2", "playerName": "黃XX" }
+      ]
+    },
+    {
+      "roomId": "sxsxs010",
+      "gameName": "一起玩富饒之城1234",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "黃XX",
+      "holderId": "player1",
+      "totalPlayers": 2,
+      "users": [
+        { "playerId": "player1", "playerName": "黃XX" },
+        { "playerId": "player2", "playerName": "黃XX" }
+      ]
+    },
+    {
+      "roomId": "sxsxs011",
+      "gameName": "一起玩富饒之城1234",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "黃XX",
+      "holderId": "player1",
+      "totalPlayers": 2,
+      "users": [
+        { "playerId": "player1", "playerName": "黃XX" },
+        { "playerId": "player2", "playerName": "黃XX" }
+      ]
+    },
+    {
+      "roomId": "sxsxs012",
+      "gameName": "一起玩富饒之城1234",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "黃XX",
+      "holderId": "player1",
+      "totalPlayers": 3,
+      "users": [
+        { "playerId": "player1", "playerName": "黃XX" },
+        { "playerId": "player2", "playerName": "黃XX" },
+        { "playerId": "player2", "playerName": "黃XX" }
+      ]
+    },
+    {
+      "roomId": "sxsxs013",
+      "gameName": "一起玩富饒之城1234",
+      "createTime": "2023-07-04T19:29:54.001Z",
+      "status": "OPEN",
+      "holderName": "洪XX",
+      "holderId": "player1",
+      "totalPlayers": 2,
+      "users": [
+        { "playerId": "player1", "playerName": "洪XX" },
+        { "playerId": "player2", "playerName": "黃XX" }
+      ]
+    }
+  ]
+}

packages/frontend/js/api/index.ts

@@ -0,0 +1,89 @@
+import axiosInstance from '../common/axiosInstance'
+
+const url =
+  process.env.NODE_ENV === 'development'
+    ? 'https://001f08b9-acb7-4c3a-a54f-a9254b7e8e55.mock.pstmn.io'
+    : ''
+const axios = axiosInstance(url)
+
+export type RoomList = {
+  totalRooms: number
+  status: string
+  msg: string
+  rooms: Array<RoomInfo>
+}
+
+type RoomInfo = {
+  roomId: string
+  gameName: string
+  createTime: string
+  status: string
+  holderName: string
+  holderId: string
+  totalPlayers: number
+  users: Array<player>
+}
+
+type player = {
+  playerId: string
+  playerName: string
+}
+
+export const getRoomList = () => {
+  return axios.get<RoomList>('/rooms')
+}
+
+type CreateRoom = {
+  createTime: string
+  status: string
+  msg: string
+  rooms: Record<string, create_room>
+}
+
+type create_room = {
+  roomId: string
+  roomName: string
+  holderId: string
+  holderName: string
+  users: Array<{
+    userId: string
+    userName: string
+    userImage: string
+  }>
+  status: string
+  totalUsers: number
+}
+
+export const createRoom = (payload: Object) => {
+  return axios.post<CreateRoom>('/api/citadels/room', payload)
+}
+
+type SpecificRoom = {
+  searchTime: string
+  status: string
+  msg: string
+  rooms: Record<string, specific_room>
+}
+
+type specific_room = {
+  roomId: string
+  roomName: string
+  createTime: string
+  status: string
+  holderName: string
+  holderId: string
+  totalUsers: number
+  users: Array<{
+    userId: string
+    userName: string
+    userImage: string
+  }>
+}
+
+export const getSpecificRoom = (payload: String) => {
+  return axios.get<SpecificRoom>(`/api/citadels/rooms/${payload}`)
+}
+
+export const leaveRoom = (payload: Object, roomId: string) => {
+  return axios.post(`/rooms/${roomId}:leave`, payload)
+}