From c5e1f5bf26122ee66f9395c7973ed4b3bfb8f0c3 Mon Sep 17 00:00:00 2001 From: tangmingyou <234767776@qq.com> Date: Mon, 30 Jan 2023 16:49:07 +0800 Subject: [PATCH] lobby; game table --- config/dev.js | 2 +- src/api/proto.js | 733 +++++++++++++++++++++++++++++- src/assets/card-back-1.svg | 1 + src/assets/card-back-2.svg | 1 + src/assets/card-back-3.svg | 1 + src/assets/icon/plus-2.svg | 1 + src/components/card.jsx | 42 +- src/components/style/card.scss | 4 +- src/pages/lobby/lobby.jsx | 47 +- src/pages/lobby/lobby.scss | 14 + src/pages/new_table/new_table.jsx | 2 +- src/pages/table/table.jsx | 56 ++- src/pages/table/table.scss | 31 +- 13 files changed, 871 insertions(+), 64 deletions(-) create mode 100644 src/assets/card-back-1.svg create mode 100644 src/assets/card-back-2.svg create mode 100644 src/assets/card-back-3.svg create mode 100644 src/assets/icon/plus-2.svg diff --git a/config/dev.js b/config/dev.js index 4515cb8..b17dff9 100644 --- a/config/dev.js +++ b/config/dev.js @@ -10,7 +10,7 @@ module.exports = { h5: { devServer: { //host: '0.0.0.0', - host: '192.168.3.102', + host: '192.168.110.53', port: 10086, // 设置代理来解决 H5 请求的跨域问题 proxy: { diff --git a/src/api/proto.js b/src/api/proto.js index 8d287f4..e9b96bb 100644 --- a/src/api/proto.js +++ b/src/api/proto.js @@ -327,6 +327,7 @@ export const api = $root.api = (() => { * Properties of a Ping. * @memberof api * @interface IPing + * @property {number|Long|null} [timeMs] Ping timeMs */ /** @@ -344,6 +345,14 @@ export const api = $root.api = (() => { this[keys[i]] = properties[keys[i]]; } + /** + * Ping timeMs. + * @member {number|Long} timeMs + * @memberof api.Ping + * @instance + */ + Ping.prototype.timeMs = $util.Long ? $util.Long.fromBits(0,0,true) : 0; + /** * Creates a new Ping instance using the specified properties. * @function create @@ -368,6 +377,8 @@ export const api = $root.api = (() => { Ping.encode = function encode(message, writer) { if (!writer) writer = $Writer.create(); + if (message.timeMs != null && Object.hasOwnProperty.call(message, "timeMs")) + writer.uint32(/* id 1, wireType 0 =*/8).uint64(message.timeMs); return writer; }; @@ -402,6 +413,10 @@ export const api = $root.api = (() => { while (reader.pos < end) { let tag = reader.uint32(); switch (tag >>> 3) { + case 1: { + message.timeMs = reader.uint64(); + break; + } default: reader.skipType(tag & 7); break; @@ -437,6 +452,9 @@ export const api = $root.api = (() => { Ping.verify = function verify(message) { if (typeof message !== "object" || message === null) return "object expected"; + if (message.timeMs != null && message.hasOwnProperty("timeMs")) + if (!$util.isInteger(message.timeMs) && !(message.timeMs && $util.isInteger(message.timeMs.low) && $util.isInteger(message.timeMs.high))) + return "timeMs: integer|Long expected"; return null; }; @@ -451,7 +469,17 @@ export const api = $root.api = (() => { Ping.fromObject = function fromObject(object) { if (object instanceof $root.api.Ping) return object; - return new $root.api.Ping(); + let message = new $root.api.Ping(); + if (object.timeMs != null) + if ($util.Long) + (message.timeMs = $util.Long.fromValue(object.timeMs)).unsigned = true; + else if (typeof object.timeMs === "string") + message.timeMs = parseInt(object.timeMs, 10); + else if (typeof object.timeMs === "number") + message.timeMs = object.timeMs; + else if (typeof object.timeMs === "object") + message.timeMs = new $util.LongBits(object.timeMs.low >>> 0, object.timeMs.high >>> 0).toNumber(true); + return message; }; /** @@ -463,8 +491,22 @@ export const api = $root.api = (() => { * @param {$protobuf.IConversionOptions} [options] Conversion options * @returns {Object.} Plain object */ - Ping.toObject = function toObject() { - return {}; + Ping.toObject = function toObject(message, options) { + if (!options) + options = {}; + let object = {}; + if (options.defaults) + if ($util.Long) { + let long = new $util.Long(0, 0, true); + object.timeMs = options.longs === String ? long.toString() : options.longs === Number ? long.toNumber() : long; + } else + object.timeMs = options.longs === String ? "0" : 0; + if (message.timeMs != null && message.hasOwnProperty("timeMs")) + if (typeof message.timeMs === "number") + object.timeMs = options.longs === String ? String(message.timeMs) : message.timeMs; + else + object.timeMs = options.longs === String ? $util.Long.prototype.toString.call(message.timeMs) : options.longs === Number ? new $util.LongBits(message.timeMs.low >>> 0, message.timeMs.high >>> 0).toNumber(true) : message.timeMs; + return object; }; /** @@ -502,6 +544,7 @@ export const api = $root.api = (() => { * Properties of a Pong. * @memberof api * @interface IPong + * @property {number|Long|null} [timeMs] Pong timeMs */ /** @@ -519,6 +562,14 @@ export const api = $root.api = (() => { this[keys[i]] = properties[keys[i]]; } + /** + * Pong timeMs. + * @member {number|Long} timeMs + * @memberof api.Pong + * @instance + */ + Pong.prototype.timeMs = $util.Long ? $util.Long.fromBits(0,0,true) : 0; + /** * Creates a new Pong instance using the specified properties. * @function create @@ -543,6 +594,8 @@ export const api = $root.api = (() => { Pong.encode = function encode(message, writer) { if (!writer) writer = $Writer.create(); + if (message.timeMs != null && Object.hasOwnProperty.call(message, "timeMs")) + writer.uint32(/* id 1, wireType 0 =*/8).uint64(message.timeMs); return writer; }; @@ -577,6 +630,10 @@ export const api = $root.api = (() => { while (reader.pos < end) { let tag = reader.uint32(); switch (tag >>> 3) { + case 1: { + message.timeMs = reader.uint64(); + break; + } default: reader.skipType(tag & 7); break; @@ -612,6 +669,9 @@ export const api = $root.api = (() => { Pong.verify = function verify(message) { if (typeof message !== "object" || message === null) return "object expected"; + if (message.timeMs != null && message.hasOwnProperty("timeMs")) + if (!$util.isInteger(message.timeMs) && !(message.timeMs && $util.isInteger(message.timeMs.low) && $util.isInteger(message.timeMs.high))) + return "timeMs: integer|Long expected"; return null; }; @@ -626,7 +686,17 @@ export const api = $root.api = (() => { Pong.fromObject = function fromObject(object) { if (object instanceof $root.api.Pong) return object; - return new $root.api.Pong(); + let message = new $root.api.Pong(); + if (object.timeMs != null) + if ($util.Long) + (message.timeMs = $util.Long.fromValue(object.timeMs)).unsigned = true; + else if (typeof object.timeMs === "string") + message.timeMs = parseInt(object.timeMs, 10); + else if (typeof object.timeMs === "number") + message.timeMs = object.timeMs; + else if (typeof object.timeMs === "object") + message.timeMs = new $util.LongBits(object.timeMs.low >>> 0, object.timeMs.high >>> 0).toNumber(true); + return message; }; /** @@ -638,8 +708,22 @@ export const api = $root.api = (() => { * @param {$protobuf.IConversionOptions} [options] Conversion options * @returns {Object.} Plain object */ - Pong.toObject = function toObject() { - return {}; + Pong.toObject = function toObject(message, options) { + if (!options) + options = {}; + let object = {}; + if (options.defaults) + if ($util.Long) { + let long = new $util.Long(0, 0, true); + object.timeMs = options.longs === String ? long.toString() : options.longs === Number ? long.toNumber() : long; + } else + object.timeMs = options.longs === String ? "0" : 0; + if (message.timeMs != null && message.hasOwnProperty("timeMs")) + if (typeof message.timeMs === "number") + object.timeMs = options.longs === String ? String(message.timeMs) : message.timeMs; + else + object.timeMs = options.longs === String ? $util.Long.prototype.toString.call(message.timeMs) : options.longs === Number ? new $util.LongBits(message.timeMs.low >>> 0, message.timeMs.high >>> 0).toNumber(true) : message.timeMs; + return object; }; /** @@ -1660,6 +1744,7 @@ export const api = $root.api = (() => { * Properties of a ResLobbyView. * @memberof api * @interface IResLobbyView + * @property {Array.|null} [tables] ResLobbyView tables */ /** @@ -1671,12 +1756,21 @@ export const api = $root.api = (() => { * @param {api.IResLobbyView=} [properties] Properties to set */ function ResLobbyView(properties) { + this.tables = []; if (properties) for (let keys = Object.keys(properties), i = 0; i < keys.length; ++i) if (properties[keys[i]] != null) this[keys[i]] = properties[keys[i]]; } + /** + * ResLobbyView tables. + * @member {Array.} tables + * @memberof api.ResLobbyView + * @instance + */ + ResLobbyView.prototype.tables = $util.emptyArray; + /** * Creates a new ResLobbyView instance using the specified properties. * @function create @@ -1701,6 +1795,9 @@ export const api = $root.api = (() => { ResLobbyView.encode = function encode(message, writer) { if (!writer) writer = $Writer.create(); + if (message.tables != null && message.tables.length) + for (let i = 0; i < message.tables.length; ++i) + $root.api.LobbyTable.encode(message.tables[i], writer.uint32(/* id 3, wireType 2 =*/26).fork()).ldelim(); return writer; }; @@ -1735,6 +1832,12 @@ export const api = $root.api = (() => { while (reader.pos < end) { let tag = reader.uint32(); switch (tag >>> 3) { + case 3: { + if (!(message.tables && message.tables.length)) + message.tables = []; + message.tables.push($root.api.LobbyTable.decode(reader, reader.uint32())); + break; + } default: reader.skipType(tag & 7); break; @@ -1770,6 +1873,15 @@ export const api = $root.api = (() => { ResLobbyView.verify = function verify(message) { if (typeof message !== "object" || message === null) return "object expected"; + if (message.tables != null && message.hasOwnProperty("tables")) { + if (!Array.isArray(message.tables)) + return "tables: array expected"; + for (let i = 0; i < message.tables.length; ++i) { + let error = $root.api.LobbyTable.verify(message.tables[i]); + if (error) + return "tables." + error; + } + } return null; }; @@ -1784,7 +1896,18 @@ export const api = $root.api = (() => { ResLobbyView.fromObject = function fromObject(object) { if (object instanceof $root.api.ResLobbyView) return object; - return new $root.api.ResLobbyView(); + let message = new $root.api.ResLobbyView(); + if (object.tables) { + if (!Array.isArray(object.tables)) + throw TypeError(".api.ResLobbyView.tables: array expected"); + message.tables = []; + for (let i = 0; i < object.tables.length; ++i) { + if (typeof object.tables[i] !== "object") + throw TypeError(".api.ResLobbyView.tables: object expected"); + message.tables[i] = $root.api.LobbyTable.fromObject(object.tables[i]); + } + } + return message; }; /** @@ -1796,8 +1919,18 @@ export const api = $root.api = (() => { * @param {$protobuf.IConversionOptions} [options] Conversion options * @returns {Object.} Plain object */ - ResLobbyView.toObject = function toObject() { - return {}; + ResLobbyView.toObject = function toObject(message, options) { + if (!options) + options = {}; + let object = {}; + if (options.arrays || options.defaults) + object.tables = []; + if (message.tables && message.tables.length) { + object.tables = []; + for (let j = 0; j < message.tables.length; ++j) + object.tables[j] = $root.api.LobbyTable.toObject(message.tables[j], options); + } + return object; }; /** @@ -1829,6 +1962,588 @@ export const api = $root.api = (() => { return ResLobbyView; })(); + api.LobbyTable = (function() { + + /** + * Properties of a LobbyTable. + * @memberof api + * @interface ILobbyTable + * @property {number|null} [tableNo] LobbyTable tableNo + * @property {number|null} [playerNum] LobbyTable playerNum + * @property {number|null} [robotNum] LobbyTable robotNum + * @property {Array.|null} [players] LobbyTable players + */ + + /** + * Constructs a new LobbyTable. + * @memberof api + * @classdesc Represents a LobbyTable. + * @implements ILobbyTable + * @constructor + * @param {api.ILobbyTable=} [properties] Properties to set + */ + function LobbyTable(properties) { + this.players = []; + if (properties) + for (let keys = Object.keys(properties), i = 0; i < keys.length; ++i) + if (properties[keys[i]] != null) + this[keys[i]] = properties[keys[i]]; + } + + /** + * LobbyTable tableNo. + * @member {number} tableNo + * @memberof api.LobbyTable + * @instance + */ + LobbyTable.prototype.tableNo = 0; + + /** + * LobbyTable playerNum. + * @member {number} playerNum + * @memberof api.LobbyTable + * @instance + */ + LobbyTable.prototype.playerNum = 0; + + /** + * LobbyTable robotNum. + * @member {number} robotNum + * @memberof api.LobbyTable + * @instance + */ + LobbyTable.prototype.robotNum = 0; + + /** + * LobbyTable players. + * @member {Array.} players + * @memberof api.LobbyTable + * @instance + */ + LobbyTable.prototype.players = $util.emptyArray; + + /** + * Creates a new LobbyTable instance using the specified properties. + * @function create + * @memberof api.LobbyTable + * @static + * @param {api.ILobbyTable=} [properties] Properties to set + * @returns {api.LobbyTable} LobbyTable instance + */ + LobbyTable.create = function create(properties) { + return new LobbyTable(properties); + }; + + /** + * Encodes the specified LobbyTable message. Does not implicitly {@link api.LobbyTable.verify|verify} messages. + * @function encode + * @memberof api.LobbyTable + * @static + * @param {api.ILobbyTable} message LobbyTable message or plain object to encode + * @param {$protobuf.Writer} [writer] Writer to encode to + * @returns {$protobuf.Writer} Writer + */ + LobbyTable.encode = function encode(message, writer) { + if (!writer) + writer = $Writer.create(); + if (message.tableNo != null && Object.hasOwnProperty.call(message, "tableNo")) + writer.uint32(/* id 1, wireType 0 =*/8).int32(message.tableNo); + if (message.playerNum != null && Object.hasOwnProperty.call(message, "playerNum")) + writer.uint32(/* id 2, wireType 0 =*/16).int32(message.playerNum); + if (message.robotNum != null && Object.hasOwnProperty.call(message, "robotNum")) + writer.uint32(/* id 3, wireType 0 =*/24).int32(message.robotNum); + if (message.players != null && message.players.length) + for (let i = 0; i < message.players.length; ++i) + $root.api.LobbyPlayer.encode(message.players[i], writer.uint32(/* id 4, wireType 2 =*/34).fork()).ldelim(); + return writer; + }; + + /** + * Encodes the specified LobbyTable message, length delimited. Does not implicitly {@link api.LobbyTable.verify|verify} messages. + * @function encodeDelimited + * @memberof api.LobbyTable + * @static + * @param {api.ILobbyTable} message LobbyTable message or plain object to encode + * @param {$protobuf.Writer} [writer] Writer to encode to + * @returns {$protobuf.Writer} Writer + */ + LobbyTable.encodeDelimited = function encodeDelimited(message, writer) { + return this.encode(message, writer).ldelim(); + }; + + /** + * Decodes a LobbyTable message from the specified reader or buffer. + * @function decode + * @memberof api.LobbyTable + * @static + * @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from + * @param {number} [length] Message length if known beforehand + * @returns {api.LobbyTable} LobbyTable + * @throws {Error} If the payload is not a reader or valid buffer + * @throws {$protobuf.util.ProtocolError} If required fields are missing + */ + LobbyTable.decode = function decode(reader, length) { + if (!(reader instanceof $Reader)) + reader = $Reader.create(reader); + let end = length === undefined ? reader.len : reader.pos + length, message = new $root.api.LobbyTable(); + while (reader.pos < end) { + let tag = reader.uint32(); + switch (tag >>> 3) { + case 1: { + message.tableNo = reader.int32(); + break; + } + case 2: { + message.playerNum = reader.int32(); + break; + } + case 3: { + message.robotNum = reader.int32(); + break; + } + case 4: { + if (!(message.players && message.players.length)) + message.players = []; + message.players.push($root.api.LobbyPlayer.decode(reader, reader.uint32())); + break; + } + default: + reader.skipType(tag & 7); + break; + } + } + return message; + }; + + /** + * Decodes a LobbyTable message from the specified reader or buffer, length delimited. + * @function decodeDelimited + * @memberof api.LobbyTable + * @static + * @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from + * @returns {api.LobbyTable} LobbyTable + * @throws {Error} If the payload is not a reader or valid buffer + * @throws {$protobuf.util.ProtocolError} If required fields are missing + */ + LobbyTable.decodeDelimited = function decodeDelimited(reader) { + if (!(reader instanceof $Reader)) + reader = new $Reader(reader); + return this.decode(reader, reader.uint32()); + }; + + /** + * Verifies a LobbyTable message. + * @function verify + * @memberof api.LobbyTable + * @static + * @param {Object.} message Plain object to verify + * @returns {string|null} `null` if valid, otherwise the reason why it is not + */ + LobbyTable.verify = function verify(message) { + if (typeof message !== "object" || message === null) + return "object expected"; + if (message.tableNo != null && message.hasOwnProperty("tableNo")) + if (!$util.isInteger(message.tableNo)) + return "tableNo: integer expected"; + if (message.playerNum != null && message.hasOwnProperty("playerNum")) + if (!$util.isInteger(message.playerNum)) + return "playerNum: integer expected"; + if (message.robotNum != null && message.hasOwnProperty("robotNum")) + if (!$util.isInteger(message.robotNum)) + return "robotNum: integer expected"; + if (message.players != null && message.hasOwnProperty("players")) { + if (!Array.isArray(message.players)) + return "players: array expected"; + for (let i = 0; i < message.players.length; ++i) { + let error = $root.api.LobbyPlayer.verify(message.players[i]); + if (error) + return "players." + error; + } + } + return null; + }; + + /** + * Creates a LobbyTable message from a plain object. Also converts values to their respective internal types. + * @function fromObject + * @memberof api.LobbyTable + * @static + * @param {Object.} object Plain object + * @returns {api.LobbyTable} LobbyTable + */ + LobbyTable.fromObject = function fromObject(object) { + if (object instanceof $root.api.LobbyTable) + return object; + let message = new $root.api.LobbyTable(); + if (object.tableNo != null) + message.tableNo = object.tableNo | 0; + if (object.playerNum != null) + message.playerNum = object.playerNum | 0; + if (object.robotNum != null) + message.robotNum = object.robotNum | 0; + if (object.players) { + if (!Array.isArray(object.players)) + throw TypeError(".api.LobbyTable.players: array expected"); + message.players = []; + for (let i = 0; i < object.players.length; ++i) { + if (typeof object.players[i] !== "object") + throw TypeError(".api.LobbyTable.players: object expected"); + message.players[i] = $root.api.LobbyPlayer.fromObject(object.players[i]); + } + } + return message; + }; + + /** + * Creates a plain object from a LobbyTable message. Also converts values to other types if specified. + * @function toObject + * @memberof api.LobbyTable + * @static + * @param {api.LobbyTable} message LobbyTable + * @param {$protobuf.IConversionOptions} [options] Conversion options + * @returns {Object.} Plain object + */ + LobbyTable.toObject = function toObject(message, options) { + if (!options) + options = {}; + let object = {}; + if (options.arrays || options.defaults) + object.players = []; + if (options.defaults) { + object.tableNo = 0; + object.playerNum = 0; + object.robotNum = 0; + } + if (message.tableNo != null && message.hasOwnProperty("tableNo")) + object.tableNo = message.tableNo; + if (message.playerNum != null && message.hasOwnProperty("playerNum")) + object.playerNum = message.playerNum; + if (message.robotNum != null && message.hasOwnProperty("robotNum")) + object.robotNum = message.robotNum; + if (message.players && message.players.length) { + object.players = []; + for (let j = 0; j < message.players.length; ++j) + object.players[j] = $root.api.LobbyPlayer.toObject(message.players[j], options); + } + return object; + }; + + /** + * Converts this LobbyTable to JSON. + * @function toJSON + * @memberof api.LobbyTable + * @instance + * @returns {Object.} JSON object + */ + LobbyTable.prototype.toJSON = function toJSON() { + return this.constructor.toObject(this, $protobuf.util.toJSONOptions); + }; + + /** + * Gets the default type url for LobbyTable + * @function getTypeUrl + * @memberof api.LobbyTable + * @static + * @param {string} [typeUrlPrefix] your custom typeUrlPrefix(default "type.googleapis.com") + * @returns {string} The default type url + */ + LobbyTable.getTypeUrl = function getTypeUrl(typeUrlPrefix) { + if (typeUrlPrefix === undefined) { + typeUrlPrefix = "type.googleapis.com"; + } + return typeUrlPrefix + "/api.LobbyTable"; + }; + + return LobbyTable; + })(); + + api.LobbyPlayer = (function() { + + /** + * Properties of a LobbyPlayer. + * @memberof api + * @interface ILobbyPlayer + * @property {boolean|null} [robot] LobbyPlayer robot + * @property {number|Long|null} [id] LobbyPlayer id + * @property {string|null} [username] LobbyPlayer username + * @property {string|null} [avatar] LobbyPlayer avatar + */ + + /** + * Constructs a new LobbyPlayer. + * @memberof api + * @classdesc Represents a LobbyPlayer. + * @implements ILobbyPlayer + * @constructor + * @param {api.ILobbyPlayer=} [properties] Properties to set + */ + function LobbyPlayer(properties) { + if (properties) + for (let keys = Object.keys(properties), i = 0; i < keys.length; ++i) + if (properties[keys[i]] != null) + this[keys[i]] = properties[keys[i]]; + } + + /** + * LobbyPlayer robot. + * @member {boolean} robot + * @memberof api.LobbyPlayer + * @instance + */ + LobbyPlayer.prototype.robot = false; + + /** + * LobbyPlayer id. + * @member {number|Long} id + * @memberof api.LobbyPlayer + * @instance + */ + LobbyPlayer.prototype.id = $util.Long ? $util.Long.fromBits(0,0,false) : 0; + + /** + * LobbyPlayer username. + * @member {string} username + * @memberof api.LobbyPlayer + * @instance + */ + LobbyPlayer.prototype.username = ""; + + /** + * LobbyPlayer avatar. + * @member {string} avatar + * @memberof api.LobbyPlayer + * @instance + */ + LobbyPlayer.prototype.avatar = ""; + + /** + * Creates a new LobbyPlayer instance using the specified properties. + * @function create + * @memberof api.LobbyPlayer + * @static + * @param {api.ILobbyPlayer=} [properties] Properties to set + * @returns {api.LobbyPlayer} LobbyPlayer instance + */ + LobbyPlayer.create = function create(properties) { + return new LobbyPlayer(properties); + }; + + /** + * Encodes the specified LobbyPlayer message. Does not implicitly {@link api.LobbyPlayer.verify|verify} messages. + * @function encode + * @memberof api.LobbyPlayer + * @static + * @param {api.ILobbyPlayer} message LobbyPlayer message or plain object to encode + * @param {$protobuf.Writer} [writer] Writer to encode to + * @returns {$protobuf.Writer} Writer + */ + LobbyPlayer.encode = function encode(message, writer) { + if (!writer) + writer = $Writer.create(); + if (message.robot != null && Object.hasOwnProperty.call(message, "robot")) + writer.uint32(/* id 1, wireType 0 =*/8).bool(message.robot); + if (message.id != null && Object.hasOwnProperty.call(message, "id")) + writer.uint32(/* id 2, wireType 0 =*/16).int64(message.id); + if (message.username != null && Object.hasOwnProperty.call(message, "username")) + writer.uint32(/* id 3, wireType 2 =*/26).string(message.username); + if (message.avatar != null && Object.hasOwnProperty.call(message, "avatar")) + writer.uint32(/* id 4, wireType 2 =*/34).string(message.avatar); + return writer; + }; + + /** + * Encodes the specified LobbyPlayer message, length delimited. Does not implicitly {@link api.LobbyPlayer.verify|verify} messages. + * @function encodeDelimited + * @memberof api.LobbyPlayer + * @static + * @param {api.ILobbyPlayer} message LobbyPlayer message or plain object to encode + * @param {$protobuf.Writer} [writer] Writer to encode to + * @returns {$protobuf.Writer} Writer + */ + LobbyPlayer.encodeDelimited = function encodeDelimited(message, writer) { + return this.encode(message, writer).ldelim(); + }; + + /** + * Decodes a LobbyPlayer message from the specified reader or buffer. + * @function decode + * @memberof api.LobbyPlayer + * @static + * @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from + * @param {number} [length] Message length if known beforehand + * @returns {api.LobbyPlayer} LobbyPlayer + * @throws {Error} If the payload is not a reader or valid buffer + * @throws {$protobuf.util.ProtocolError} If required fields are missing + */ + LobbyPlayer.decode = function decode(reader, length) { + if (!(reader instanceof $Reader)) + reader = $Reader.create(reader); + let end = length === undefined ? reader.len : reader.pos + length, message = new $root.api.LobbyPlayer(); + while (reader.pos < end) { + let tag = reader.uint32(); + switch (tag >>> 3) { + case 1: { + message.robot = reader.bool(); + break; + } + case 2: { + message.id = reader.int64(); + break; + } + case 3: { + message.username = reader.string(); + break; + } + case 4: { + message.avatar = reader.string(); + break; + } + default: + reader.skipType(tag & 7); + break; + } + } + return message; + }; + + /** + * Decodes a LobbyPlayer message from the specified reader or buffer, length delimited. + * @function decodeDelimited + * @memberof api.LobbyPlayer + * @static + * @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from + * @returns {api.LobbyPlayer} LobbyPlayer + * @throws {Error} If the payload is not a reader or valid buffer + * @throws {$protobuf.util.ProtocolError} If required fields are missing + */ + LobbyPlayer.decodeDelimited = function decodeDelimited(reader) { + if (!(reader instanceof $Reader)) + reader = new $Reader(reader); + return this.decode(reader, reader.uint32()); + }; + + /** + * Verifies a LobbyPlayer message. + * @function verify + * @memberof api.LobbyPlayer + * @static + * @param {Object.} message Plain object to verify + * @returns {string|null} `null` if valid, otherwise the reason why it is not + */ + LobbyPlayer.verify = function verify(message) { + if (typeof message !== "object" || message === null) + return "object expected"; + if (message.robot != null && message.hasOwnProperty("robot")) + if (typeof message.robot !== "boolean") + return "robot: boolean expected"; + if (message.id != null && message.hasOwnProperty("id")) + if (!$util.isInteger(message.id) && !(message.id && $util.isInteger(message.id.low) && $util.isInteger(message.id.high))) + return "id: integer|Long expected"; + if (message.username != null && message.hasOwnProperty("username")) + if (!$util.isString(message.username)) + return "username: string expected"; + if (message.avatar != null && message.hasOwnProperty("avatar")) + if (!$util.isString(message.avatar)) + return "avatar: string expected"; + return null; + }; + + /** + * Creates a LobbyPlayer message from a plain object. Also converts values to their respective internal types. + * @function fromObject + * @memberof api.LobbyPlayer + * @static + * @param {Object.} object Plain object + * @returns {api.LobbyPlayer} LobbyPlayer + */ + LobbyPlayer.fromObject = function fromObject(object) { + if (object instanceof $root.api.LobbyPlayer) + return object; + let message = new $root.api.LobbyPlayer(); + if (object.robot != null) + message.robot = Boolean(object.robot); + if (object.id != null) + if ($util.Long) + (message.id = $util.Long.fromValue(object.id)).unsigned = false; + else if (typeof object.id === "string") + message.id = parseInt(object.id, 10); + else if (typeof object.id === "number") + message.id = object.id; + else if (typeof object.id === "object") + message.id = new $util.LongBits(object.id.low >>> 0, object.id.high >>> 0).toNumber(); + if (object.username != null) + message.username = String(object.username); + if (object.avatar != null) + message.avatar = String(object.avatar); + return message; + }; + + /** + * Creates a plain object from a LobbyPlayer message. Also converts values to other types if specified. + * @function toObject + * @memberof api.LobbyPlayer + * @static + * @param {api.LobbyPlayer} message LobbyPlayer + * @param {$protobuf.IConversionOptions} [options] Conversion options + * @returns {Object.} Plain object + */ + LobbyPlayer.toObject = function toObject(message, options) { + if (!options) + options = {}; + let object = {}; + if (options.defaults) { + object.robot = false; + if ($util.Long) { + let long = new $util.Long(0, 0, false); + object.id = options.longs === String ? long.toString() : options.longs === Number ? long.toNumber() : long; + } else + object.id = options.longs === String ? "0" : 0; + object.username = ""; + object.avatar = ""; + } + if (message.robot != null && message.hasOwnProperty("robot")) + object.robot = message.robot; + if (message.id != null && message.hasOwnProperty("id")) + if (typeof message.id === "number") + object.id = options.longs === String ? String(message.id) : message.id; + else + object.id = options.longs === String ? $util.Long.prototype.toString.call(message.id) : options.longs === Number ? new $util.LongBits(message.id.low >>> 0, message.id.high >>> 0).toNumber() : message.id; + if (message.username != null && message.hasOwnProperty("username")) + object.username = message.username; + if (message.avatar != null && message.hasOwnProperty("avatar")) + object.avatar = message.avatar; + return object; + }; + + /** + * Converts this LobbyPlayer to JSON. + * @function toJSON + * @memberof api.LobbyPlayer + * @instance + * @returns {Object.} JSON object + */ + LobbyPlayer.prototype.toJSON = function toJSON() { + return this.constructor.toObject(this, $protobuf.util.toJSONOptions); + }; + + /** + * Gets the default type url for LobbyPlayer + * @function getTypeUrl + * @memberof api.LobbyPlayer + * @static + * @param {string} [typeUrlPrefix] your custom typeUrlPrefix(default "type.googleapis.com") + * @returns {string} The default type url + */ + LobbyPlayer.getTypeUrl = function getTypeUrl(typeUrlPrefix) { + if (typeUrlPrefix === undefined) { + typeUrlPrefix = "type.googleapis.com"; + } + return typeUrlPrefix + "/api.LobbyPlayer"; + }; + + return LobbyPlayer; + })(); + api.ReqCreateTable = (function() { /** diff --git a/src/assets/card-back-1.svg b/src/assets/card-back-1.svg new file mode 100644 index 0000000..58a37e8 --- /dev/null +++ b/src/assets/card-back-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/card-back-2.svg b/src/assets/card-back-2.svg new file mode 100644 index 0000000..ad0795e --- /dev/null +++ b/src/assets/card-back-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/card-back-3.svg b/src/assets/card-back-3.svg new file mode 100644 index 0000000..08efc54 --- /dev/null +++ b/src/assets/card-back-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon/plus-2.svg b/src/assets/icon/plus-2.svg new file mode 100644 index 0000000..72e582f --- /dev/null +++ b/src/assets/icon/plus-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/card.jsx b/src/components/card.jsx index 35e6abe..79ac232 100644 --- a/src/components/card.jsx +++ b/src/components/card.jsx @@ -1,34 +1,46 @@ import React from 'react' import { View, Text, Image } from '@tarojs/components' import Taro from '@tarojs/taro' +import cnames from 'classnames' import './style/card.scss' import suit0Icon from '@/assets/icon/suit-0.svg' import suit1Icon from '@/assets/icon/suit-1.svg' import suit2Icon from '@/assets/icon/suit-2.svg' import suit3Icon from '@/assets/icon/suit-3.svg' +import cardBack1 from '@/assets/card-back-1.svg' +import cardBack2 from '@/assets/card-back-2.svg' +import cardBack3 from '@/assets/card-back-3.svg' const suits = [suit0Icon, suit1Icon, suit2Icon, suit3Icon]; const dots = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"]; function Card(props) { const {w, h, dot, suit} = props; - + // dot == -1 牌背面 dot == -2 弃牌背面 + const width = Taro.pxTransform(w || 42); + const height = Taro.pxTransform(h || 58); return ( - - - {dots[dot || 0]} - - - - + = 0})} style={{width, height}}> + { + dot < 0 ? : ( + + + {dots[dot || 0]} + + + + + + ) + } ) } diff --git a/src/components/style/card.scss b/src/components/style/card.scss index 80d75cc..eb23fa1 100644 --- a/src/components/style/card.scss +++ b/src/components/style/card.scss @@ -1,6 +1,5 @@ .card { border-radius: 5px; - border: 1px solid #000; position: relative; display: flex; justify-content: center; @@ -22,3 +21,6 @@ width: auto; } } +.card-border { + border: 1px solid #000; +} diff --git a/src/pages/lobby/lobby.jsx b/src/pages/lobby/lobby.jsx index 03ab39c..4aefaf5 100644 --- a/src/pages/lobby/lobby.jsx +++ b/src/pages/lobby/lobby.jsx @@ -8,10 +8,15 @@ import './lobby.scss' import { navigateTo } from '@/utils/application' import { increment } from '@/store/index' import { fetchOpMap, fetchLobbyView } from '@/api/api' +import { sendPromise } from '@/api/websocket' +import proto from '@/api/proto' import Title from '@/components/title' import coin1 from '@/assets/coin-1.png' -import tabQuestion from '@/assets/tab-question.svg' -import tabX from '@/assets/tab-x.svg' +import robotIcon from '@/assets/icon/robot-1.svg' +import plusIcon from '@/assets/icon/plus-2.svg'; +import classNames from 'classnames'; + +const {ReqLobbyView} = proto.api; class Lobby extends Component { constructor(props) { @@ -25,14 +30,23 @@ class Lobby extends Component { } componentDidMount() { - fetchLobbyView() - .then(res => { - console.log('lobby', res) - this.setState({tables: res.data}) - }) - .catch(err => { - console.error(err) - }) + sendPromise(ReqLobbyView.create()) + .then(res => { + console.log('lobby res:', res) + this.setState({tables: res.tables}) + }) + .catch(err => { + console.log('lobby err:', err) + }) + + // fetchLobbyView() + // .then(res => { + // console.log('lobby', res) + // this.setState({tables: res.data}) + // }) + // .catch(err => { + // console.error(err) + // }) } render() { @@ -51,13 +65,16 @@ class Lobby extends Component { { - this.circleEle.map((_, idx) => ( - ( + - + )) } diff --git a/src/pages/lobby/lobby.scss b/src/pages/lobby/lobby.scss index 5767053..d08fe35 100644 --- a/src/pages/lobby/lobby.scss +++ b/src/pages/lobby/lobby.scss @@ -30,12 +30,26 @@ width: 80px; border-radius: 50%; } + .circle-item { + background-color: #E8E8E8; + height: 29px; + width: 29px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + } + .circle-avatar { height: 29px; width: 29px; border-radius: 50%; } + .circle-icon { + height: 20px; + width: 20px; + } } .bottom-btn-wrap { position: fixed; diff --git a/src/pages/new_table/new_table.jsx b/src/pages/new_table/new_table.jsx index 7c2070b..6dabd8a 100644 --- a/src/pages/new_table/new_table.jsx +++ b/src/pages/new_table/new_table.jsx @@ -86,7 +86,7 @@ function NewTable() { -1} listData={[{value: 1, text: 'Player'}, {value: 2, text: 'Robot'}]} onConfirm={(values) => { diff --git a/src/pages/table/table.jsx b/src/pages/table/table.jsx index 6090a0c..6862838 100644 --- a/src/pages/table/table.jsx +++ b/src/pages/table/table.jsx @@ -12,6 +12,13 @@ import plus1Icon from '@/assets/icon/plus-1.svg' import sub1Icon from '@/assets/icon/sub-1.svg' import Taro from '@tarojs/taro' +function PlayerStatus() { + return ( + + +20 + + ) +} function Table() { @@ -36,19 +43,27 @@ function Table() { { row.map((player, j) => ( - #{player.index} - - - - - Player{player.item} - - - - - 3,000,000 + { + j % 2 === 0 && + + + + } + + #{player.index} + + + + + Player{player.item} + + + + + 3,000,000 + + 25% - 25% )) @@ -60,8 +75,8 @@ function Table() { { - [1, 2, 3, 4, 5].map((item, i) => ( - + [1, 2, 3, -3, -3].map((item, i) => ( + )) } @@ -73,7 +88,7 @@ function Table() { 22,088,000 - + {/* Kelly(#1)进入了游戏 Apollo(#2)进入了游戏 @@ -82,17 +97,18 @@ function Table() { - + */} - - + #7 + + { [1, 2, 3, 4, 5].map((_, i) => ( - + )) } @@ -112,7 +128,7 @@ function Table() { - + diff --git a/src/pages/table/table.scss b/src/pages/table/table.scss index 0961ecb..8ac54a3 100644 --- a/src/pages/table/table.scss +++ b/src/pages/table/table.scss @@ -11,6 +11,26 @@ .player-wrap { // flex: 0 0 50%; position: relative; + display: flex; + } + + .player-state-wrap { + height: 53px; + width: 39px; + // background-color: #F1D09F; + position: absolute; + left: -40px; + top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .state-left { + position: absolute; + left: 157px; + top: 10px; } .player-no { @@ -36,7 +56,7 @@ .card2 { position: absolute; z-index: 999; - top: -27px; + top: -20px; } .card1 { @@ -59,6 +79,10 @@ border-radius: 5px; } + .player-wait { + background-color: #A8A29D; + } + .avatar-wrap { margin: 10px 0 10px 4px; } @@ -96,6 +120,9 @@ box-sizing: border-box; padding: 0 4px; } + .wallet-wait { + background-color: #A8A29D; + } .wallet-icon { //margin: 2px 0 2px 4px; @@ -126,7 +153,7 @@ .desktop-box { display: flex; - justify-content: space-between; + justify-content: center; flex-wrap: nowrap; margin: 33px 26px 0 26px; }