Feature/game hall (#123)

Game-as-a-Service · Oct 26, 2023 · 9d7687c · 9d7687c
1 parent 03cb79d
commit 9d7687c
Show file tree

Hide file tree

Showing 25 changed files with 12,036 additions and 6,721 deletions.
diff --git a/packages/frontend/.eslintignore b/packages/frontend/.eslintignore
@@ -1,3 +1,2 @@
 build
 node_modules
-Cypress
diff --git a/packages/frontend/.eslintrc.json b/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"
   }
 }
diff --git a/packages/frontend/.prettierignore b/packages/frontend/.prettierignore
@@ -11,3 +11,4 @@ postcss.config.js
 .vscode
 .eslintrc.json
 .eslintignore
+cypress
diff --git a/packages/frontend/cypress/e2e/spec.cy.js b/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')
   })
 })
diff --git a/packages/frontend/cypress/fixtures/roomList.json b/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" }
+      ]
+    }
+  ]
+}
diff --git a/packages/frontend/js/api/index.js b/packages/frontend/js/api/index.js
diff --git a/packages/frontend/js/api/index.ts b/packages/frontend/js/api/index.ts
@@ -0,0 +1,34 @@
+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')
+}
diff --git a/packages/frontend/js/common/axiosInstance.js b/packages/frontend/js/common/axiosInstance.js
@@ -0,0 +1,26 @@
+import axios from 'axios'
+
+export default (baseUrl) => {
+  const instance = axios.create({
+    baseURL: baseUrl
+  })
+  instance.interceptors.response.use(
+    (res) => {
+      if (res && res.status === 200) {
+        return res.data
+      }
+    },
+    (error) => {
+      if (error.response) {
+        switch (error.response.status) {
+          case 404:
+            break
+          default:
+            console.log(error.message)
+        }
+      }
+      return Promise.reject(error)
+    }
+  )
+  return instance
+}
diff --git a/packages/frontend/js/components/App.jsx b/packages/frontend/js/components/App.jsx
@@ -1,12 +1,19 @@
+import { Routes, Route, Navigate } from 'react-router-dom'
+import RoomList from './RoomList'
+import Game from './Game'
+
 import getAPI from '../api/getAPI'
-import Hello from './Hello'
 
 const App = () => {
   const { data } = getAPI()
   return (
     <>
-      <Hello></Hello>
-      <div>title:{data.msg}</div>
+      {/* <div>title:{data.msg}</div> */}
+      <Routes>
+        <Route path='/' element={<Navigate to='/rooms' />} />
+        <Route path='/rooms' element={<RoomList />} />
+        <Route path='/game' element={<Game />} />
+      </Routes>
     </>
   )
 }