lobby; game table

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: {

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.<string,*>} 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.<string,*>} 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.<api.ILobbyTable>|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.<api.ILobbyTable>} 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.<string,*>} 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.<api.ILobbyPlayer>|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.<api.ILobbyPlayer>} 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.<string,*>} 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.<string,*>} 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.<string,*>} 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.<string,*>} 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.<string,*>} 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.<string,*>} 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.<string,*>} 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.<string,*>} 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() {
 
         /**

src/assets/card-back-1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="42" height="58" viewBox="0 0 42 58"><g style="mix-blend-mode:passthrough"><g style="mix-blend-mode:passthrough"><rect x="0" y="0" width="42" height="58" rx="5" fill="#FFFFFF" fill-opacity="1"/><rect x="0.5" y="0.5" width="41" height="57" rx="4.5" fill-opacity="0" stroke-opacity="1" stroke="#51AEFA" fill="none" stroke-width="1"/></g><g><path d="M6.2,6.2L15.8,6.2L15.8,15.8L6.2,15.8L6.2,6.2ZM6.2,3L7.8,3L7.8,5.4L6.2,5.4L6.2,3ZM6.2,16.6L7.8,16.6L7.8,19L6.2,19L6.2,16.6ZM3,6.2L5.4,6.2L5.4,7.8L3,7.8L3,6.2ZM3,14.2L5.4,14.2L5.4,15.8L3,15.8L3,14.2ZM16.6,6.2L19,6.2L19,7.8L16.6,7.8L16.6,6.2ZM16.6,14.2L19,14.2L19,15.8L16.6,15.8L16.6,14.2ZM14.2,3L15.8,3L15.8,5.4L14.2,5.4L14.2,3ZM14.2,16.6L15.8,16.6L15.8,19L14.2,19L14.2,16.6Z" fill="#51AEFA" fill-opacity="1"/></g><g><path d="M26.2,6.2L35.8,6.2L35.8,15.8L26.2,15.8L26.2,6.2ZM26.2,3L27.8,3L27.8,5.4L26.2,5.4L26.2,3ZM26.2,16.6L27.8,16.6L27.8,19L26.2,19L26.2,16.6ZM23,6.2L25.4,6.2L25.4,7.8L23,7.8L23,6.2ZM23,14.2L25.4,14.2L25.4,15.8L23,15.8L23,14.2ZM36.6,6.2L39,6.2L39,7.8L36.6,7.8L36.6,6.2ZM36.6,14.2L39,14.2L39,15.8L36.6,15.8L36.6,14.2ZM34.2,3L35.8,3L35.8,5.4L34.2,5.4L34.2,3ZM34.2,16.6L35.8,16.6L35.8,19L34.2,19L34.2,16.6Z" fill="#51AEFA" fill-opacity="1"/></g><g><path d="M26.2,24.2L35.8,24.2L35.8,33.8L26.2,33.8L26.2,24.2ZM26.2,21L27.8,21L27.8,23.4L26.2,23.4L26.2,21ZM26.2,34.6L27.8,34.6L27.8,37L26.2,37L26.2,34.6ZM23,24.2L25.4,24.2L25.4,25.8L23,25.8L23,24.2ZM23,32.2L25.4,32.2L25.4,33.8L23,33.8L23,32.2ZM36.6,24.2L39,24.2L39,25.8L36.6,25.8L36.6,24.2ZM36.6,32.2L39,32.2L39,33.8L36.6,33.8L36.6,32.2ZM34.2,21L35.8,21L35.8,23.4L34.2,23.4L34.2,21ZM34.2,34.6L35.8,34.6L35.8,37L34.2,37L34.2,34.6Z" fill="#51AEFA" fill-opacity="1"/></g><g><path d="M26.2,42.2L35.8,42.2L35.8,51.8L26.2,51.8L26.2,42.2ZM26.2,39L27.8,39L27.8,41.4L26.2,41.4L26.2,39ZM26.2,52.6L27.8,52.6L27.8,55L26.2,55L26.2,52.6ZM23,42.2L25.4,42.2L25.4,43.8L23,43.8L23,42.2ZM23,50.2L25.4,50.2L25.4,51.8L23,51.8L23,50.2ZM36.6,42.2L39,42.2L39,43.8L36.6,43.8L36.6,42.2ZM36.6,50.2L39,50.2L39,51.8L36.6,51.8L36.6,50.2ZM34.2,39L35.8,39L35.8,41.4L34.2,41.4L34.2,39ZM34.2,52.6L35.8,52.6L35.8,55L34.2,55L34.2,52.6Z" fill="#51AEFA" fill-opacity="1"/></g><g><path d="M6.2,42.2L15.8,42.2L15.8,51.8L6.2,51.8L6.2,42.2ZM6.2,39L7.8,39L7.8,41.4L6.2,41.4L6.2,39ZM6.2,52.6L7.8,52.6L7.8,55L6.2,55L6.2,52.6ZM3,42.2L5.4,42.2L5.4,43.8L3,43.8L3,42.2ZM3,50.2L5.4,50.2L5.4,51.8L3,51.8L3,50.2ZM16.6,42.2L19,42.2L19,43.8L16.6,43.8L16.6,42.2ZM16.6,50.2L19,50.2L19,51.8L16.6,51.8L16.6,50.2ZM14.2,39L15.8,39L15.8,41.4L14.2,41.4L14.2,39ZM14.2,52.6L15.8,52.6L15.8,55L14.2,55L14.2,52.6Z" fill="#51AEFA" fill-opacity="1"/></g><g><path d="M6.2,24.2L15.8,24.2L15.8,33.8L6.2,33.8L6.2,24.2ZM6.2,21L7.8,21L7.8,23.4L6.2,23.4L6.2,21ZM6.2,34.6L7.8,34.6L7.8,37L6.2,37L6.2,34.6ZM3,24.2L5.4,24.2L5.4,25.8L3,25.8L3,24.2ZM3,32.2L5.4,32.2L5.4,33.8L3,33.8L3,32.2ZM16.6,24.2L19,24.2L19,25.8L16.6,25.8L16.6,24.2ZM16.6,32.2L19,32.2L19,33.8L16.6,33.8L16.6,32.2ZM14.2,21L15.8,21L15.8,23.4L14.2,23.4L14.2,21ZM14.2,34.6L15.8,34.6L15.8,37L14.2,37L14.2,34.6Z" fill="#51AEFA" fill-opacity="1"/></g></g></svg>

src/assets/card-back-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="42" height="58" viewBox="0 0 42 58"><g style="mix-blend-mode:passthrough"><g style="mix-blend-mode:passthrough"><rect x="0" y="0" width="42" height="58" rx="5" fill="#FFFFFF" fill-opacity="1"/><rect x="0.5" y="0.5" width="41" height="57" rx="4.5" fill-opacity="0" stroke-opacity="1" stroke="#A8A29D" fill="none" stroke-width="1"/></g><g><path d="M6.2,6.2L15.8,6.2L15.8,15.8L6.2,15.8L6.2,6.2ZM6.2,3L7.8,3L7.8,5.4L6.2,5.4L6.2,3ZM6.2,16.6L7.8,16.6L7.8,19L6.2,19L6.2,16.6ZM3,6.2L5.4,6.2L5.4,7.8L3,7.8L3,6.2ZM3,14.2L5.4,14.2L5.4,15.8L3,15.8L3,14.2ZM16.6,6.2L19,6.2L19,7.8L16.6,7.8L16.6,6.2ZM16.6,14.2L19,14.2L19,15.8L16.6,15.8L16.6,14.2ZM14.2,3L15.8,3L15.8,5.4L14.2,5.4L14.2,3ZM14.2,16.6L15.8,16.6L15.8,19L14.2,19L14.2,16.6Z" fill="#A8A29D" fill-opacity="1"/></g><g><path d="M26.2,6.2L35.8,6.2L35.8,15.8L26.2,15.8L26.2,6.2ZM26.2,3L27.8,3L27.8,5.4L26.2,5.4L26.2,3ZM26.2,16.6L27.8,16.6L27.8,19L26.2,19L26.2,16.6ZM23,6.2L25.4,6.2L25.4,7.8L23,7.8L23,6.2ZM23,14.2L25.4,14.2L25.4,15.8L23,15.8L23,14.2ZM36.6,6.2L39,6.2L39,7.8L36.6,7.8L36.6,6.2ZM36.6,14.2L39,14.2L39,15.8L36.6,15.8L36.6,14.2ZM34.2,3L35.8,3L35.8,5.4L34.2,5.4L34.2,3ZM34.2,16.6L35.8,16.6L35.8,19L34.2,19L34.2,16.6Z" fill="#A8A29D" fill-opacity="1"/></g><g><path d="M26.2,24.2L35.8,24.2L35.8,33.8L26.2,33.8L26.2,24.2ZM26.2,21L27.8,21L27.8,23.4L26.2,23.4L26.2,21ZM26.2,34.6L27.8,34.6L27.8,37L26.2,37L26.2,34.6ZM23,24.2L25.4,24.2L25.4,25.8L23,25.8L23,24.2ZM23,32.2L25.4,32.2L25.4,33.8L23,33.8L23,32.2ZM36.6,24.2L39,24.2L39,25.8L36.6,25.8L36.6,24.2ZM36.6,32.2L39,32.2L39,33.8L36.6,33.8L36.6,32.2ZM34.2,21L35.8,21L35.8,23.4L34.2,23.4L34.2,21ZM34.2,34.6L35.8,34.6L35.8,37L34.2,37L34.2,34.6Z" fill="#A8A29D" fill-opacity="1"/></g><g><path d="M26.2,42.2L35.8,42.2L35.8,51.8L26.2,51.8L26.2,42.2ZM26.2,39L27.8,39L27.8,41.4L26.2,41.4L26.2,39ZM26.2,52.6L27.8,52.6L27.8,55L26.2,55L26.2,52.6ZM23,42.2L25.4,42.2L25.4,43.8L23,43.8L23,42.2ZM23,50.2L25.4,50.2L25.4,51.8L23,51.8L23,50.2ZM36.6,42.2L39,42.2L39,43.8L36.6,43.8L36.6,42.2ZM36.6,50.2L39,50.2L39,51.8L36.6,51.8L36.6,50.2ZM34.2,39L35.8,39L35.8,41.4L34.2,41.4L34.2,39ZM34.2,52.6L35.8,52.6L35.8,55L34.2,55L34.2,52.6Z" fill="#A8A29D" fill-opacity="1"/></g><g><path d="M6.2,42.2L15.8,42.2L15.8,51.8L6.2,51.8L6.2,42.2ZM6.2,39L7.8,39L7.8,41.4L6.2,41.4L6.2,39ZM6.2,52.6L7.8,52.6L7.8,55L6.2,55L6.2,52.6ZM3,42.2L5.4,42.2L5.4,43.8L3,43.8L3,42.2ZM3,50.2L5.4,50.2L5.4,51.8L3,51.8L3,50.2ZM16.6,42.2L19,42.2L19,43.8L16.6,43.8L16.6,42.2ZM16.6,50.2L19,50.2L19,51.8L16.6,51.8L16.6,50.2ZM14.2,39L15.8,39L15.8,41.4L14.2,41.4L14.2,39ZM14.2,52.6L15.8,52.6L15.8,55L14.2,55L14.2,52.6Z" fill="#A8A29D" fill-opacity="1"/></g><g><path d="M6.2,24.2L15.8,24.2L15.8,33.8L6.2,33.8L6.2,24.2ZM6.2,21L7.8,21L7.8,23.4L6.2,23.4L6.2,21ZM6.2,34.6L7.8,34.6L7.8,37L6.2,37L6.2,34.6ZM3,24.2L5.4,24.2L5.4,25.8L3,25.8L3,24.2ZM3,32.2L5.4,32.2L5.4,33.8L3,33.8L3,32.2ZM16.6,24.2L19,24.2L19,25.8L16.6,25.8L16.6,24.2ZM16.6,32.2L19,32.2L19,33.8L16.6,33.8L16.6,32.2ZM14.2,21L15.8,21L15.8,23.4L14.2,23.4L14.2,21ZM14.2,34.6L15.8,34.6L15.8,37L14.2,37L14.2,34.6Z" fill="#A8A29D" fill-opacity="1"/></g></g></svg>

src/assets/card-back-3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="42" height="58" viewBox="0 0 42 58"><g style="mix-blend-mode:passthrough"><g style="mix-blend-mode:passthrough"><rect x="0" y="0" width="42" height="58" rx="5" fill="#FFFFFF" fill-opacity="1"/><rect x="0.5" y="0.5" width="41" height="57" rx="4.5" fill-opacity="0" stroke-opacity="1" stroke="#EE914E" fill="none" stroke-width="1"/></g><g><path d="M6.2,6.2L15.8,6.2L15.8,15.8L6.2,15.8L6.2,6.2ZM6.2,3L7.8,3L7.8,5.4L6.2,5.4L6.2,3ZM6.2,16.6L7.8,16.6L7.8,19L6.2,19L6.2,16.6ZM3,6.2L5.4,6.2L5.4,7.8L3,7.8L3,6.2ZM3,14.2L5.4,14.2L5.4,15.8L3,15.8L3,14.2ZM16.6,6.2L19,6.2L19,7.8L16.6,7.8L16.6,6.2ZM16.6,14.2L19,14.2L19,15.8L16.6,15.8L16.6,14.2ZM14.2,3L15.8,3L15.8,5.4L14.2,5.4L14.2,3ZM14.2,16.6L15.8,16.6L15.8,19L14.2,19L14.2,16.6Z" fill="#EE914E" fill-opacity="1"/></g><g><path d="M26.2,6.2L35.8,6.2L35.8,15.8L26.2,15.8L26.2,6.2ZM26.2,3L27.8,3L27.8,5.4L26.2,5.4L26.2,3ZM26.2,16.6L27.8,16.6L27.8,19L26.2,19L26.2,16.6ZM23,6.2L25.4,6.2L25.4,7.8L23,7.8L23,6.2ZM23,14.2L25.4,14.2L25.4,15.8L23,15.8L23,14.2ZM36.6,6.2L39,6.2L39,7.8L36.6,7.8L36.6,6.2ZM36.6,14.2L39,14.2L39,15.8L36.6,15.8L36.6,14.2ZM34.2,3L35.8,3L35.8,5.4L34.2,5.4L34.2,3ZM34.2,16.6L35.8,16.6L35.8,19L34.2,19L34.2,16.6Z" fill="#EE914E" fill-opacity="1"/></g><g><path d="M26.2,24.2L35.8,24.2L35.8,33.8L26.2,33.8L26.2,24.2ZM26.2,21L27.8,21L27.8,23.4L26.2,23.4L26.2,21ZM26.2,34.6L27.8,34.6L27.8,37L26.2,37L26.2,34.6ZM23,24.2L25.4,24.2L25.4,25.8L23,25.8L23,24.2ZM23,32.2L25.4,32.2L25.4,33.8L23,33.8L23,32.2ZM36.6,24.2L39,24.2L39,25.8L36.6,25.8L36.6,24.2ZM36.6,32.2L39,32.2L39,33.8L36.6,33.8L36.6,32.2ZM34.2,21L35.8,21L35.8,23.4L34.2,23.4L34.2,21ZM34.2,34.6L35.8,34.6L35.8,37L34.2,37L34.2,34.6Z" fill="#EE914E" fill-opacity="1"/></g><g><path d="M26.2,42.2L35.8,42.2L35.8,51.8L26.2,51.8L26.2,42.2ZM26.2,39L27.8,39L27.8,41.4L26.2,41.4L26.2,39ZM26.2,52.6L27.8,52.6L27.8,55L26.2,55L26.2,52.6ZM23,42.2L25.4,42.2L25.4,43.8L23,43.8L23,42.2ZM23,50.2L25.4,50.2L25.4,51.8L23,51.8L23,50.2ZM36.6,42.2L39,42.2L39,43.8L36.6,43.8L36.6,42.2ZM36.6,50.2L39,50.2L39,51.8L36.6,51.8L36.6,50.2ZM34.2,39L35.8,39L35.8,41.4L34.2,41.4L34.2,39ZM34.2,52.6L35.8,52.6L35.8,55L34.2,55L34.2,52.6Z" fill="#EE914E" fill-opacity="1"/></g><g><path d="M6.2,42.2L15.8,42.2L15.8,51.8L6.2,51.8L6.2,42.2ZM6.2,39L7.8,39L7.8,41.4L6.2,41.4L6.2,39ZM6.2,52.6L7.8,52.6L7.8,55L6.2,55L6.2,52.6ZM3,42.2L5.4,42.2L5.4,43.8L3,43.8L3,42.2ZM3,50.2L5.4,50.2L5.4,51.8L3,51.8L3,50.2ZM16.6,42.2L19,42.2L19,43.8L16.6,43.8L16.6,42.2ZM16.6,50.2L19,50.2L19,51.8L16.6,51.8L16.6,50.2ZM14.2,39L15.8,39L15.8,41.4L14.2,41.4L14.2,39ZM14.2,52.6L15.8,52.6L15.8,55L14.2,55L14.2,52.6Z" fill="#EE914E" fill-opacity="1"/></g><g><path d="M6.2,24.2L15.8,24.2L15.8,33.8L6.2,33.8L6.2,24.2ZM6.2,21L7.8,21L7.8,23.4L6.2,23.4L6.2,21ZM6.2,34.6L7.8,34.6L7.8,37L6.2,37L6.2,34.6ZM3,24.2L5.4,24.2L5.4,25.8L3,25.8L3,24.2ZM3,32.2L5.4,32.2L5.4,33.8L3,33.8L3,32.2ZM16.6,24.2L19,24.2L19,25.8L16.6,25.8L16.6,24.2ZM16.6,32.2L19,32.2L19,33.8L16.6,33.8L16.6,32.2ZM14.2,21L15.8,21L15.8,23.4L14.2,23.4L14.2,21ZM14.2,34.6L15.8,34.6L15.8,37L14.2,37L14.2,34.6Z" fill="#EE914E" fill-opacity="1"/></g></g></svg>

src/assets/icon/plus-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="17" height="17" viewBox="0 0 17 17"><g><path d="M7.28571,7.28571L7.28571,0L9.71429,0L9.71429,7.28571L17,7.28571L17,9.71429L9.71429,9.71429L9.71429,17L7.28571,17L7.28571,9.71429L0,9.71429L0,7.28571L7.28571,7.28571Z" fill="#FFFFFF" fill-opacity="1"/></g></svg>

src/components/card.jsx

@@ -1,21 +1,30 @@
 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 (
-    <View className="card" style={{width: Taro.pxTransform(w || 42), height: h || 58}}>
+    <View className={cnames("card", {'card-border': dot >= 0})} style={{width, height}}>
+      {
+        dot < 0 ? <Image style={{width, height}} src={dot === -1 ? cardBack1 : dot === -2 ? cardBack2 : cardBack3} /> : (
+          <View>
             <View className="dot" style={{
               lineHeight: Taro.pxTransform(w / 3),
               left: Taro.pxTransform(w / 8),
@@ -32,5 +41,8 @@ function Card(props) {
           </View>
         )
       }
+    </View>
+  )
+}
 
 export default Card

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;
+}

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()
+    sendPromise(ReqLobbyView.create())
     .then(res => {
-        console.log('lobby', res)
-        this.setState({tables: res.data})
+      console.log('lobby res:', res)
+      this.setState({tables: res.tables})
     })
     .catch(err => {
-        console.error(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 {
               <View className="circle-wrap">
                 <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
                 {
-                  this.circleEle.map((_, idx) => (
-                    <View key={idx} className="circle-item" style={{
+                  table.players.map((player, j) => (
+                    <View key={j} className="circle-item" style={{
                       position: 'absolute',
-                      left: Taro.pxTransform(this.circleElePos[idx].x),
-                      top: Taro.pxTransform(this.circleElePos[idx].y)
+                      left: Taro.pxTransform(this.circleElePos[j].x),
+                      top: Taro.pxTransform(this.circleElePos[j].y)
                     }}>
-                      <Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : this.state.defaultAvatar} />
+                      <Image
+                        className={classNames("circle-avatar", {'circle-icon': player.robot || !player.id})}
+                        src={player.robot ? robotIcon : !player.id ? plusIcon : (player.avatar || this.state.defaultAvatar)}
+                      />
                     </View>
                   ))
                 }

src/pages/lobby/lobby.scss

@@ -30,13 +30,27 @@
     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;
   bottom: 0;

src/pages/new_table/new_table.jsx

@@ -86,7 +86,7 @@ function NewTable() {
       </View>
 
       <Picker
-        title='Player OR Robot'
+        title=''
         isVisible={choosingPlace > -1}
         listData={[{value: 1, text: 'Player'}, {value: 2, text: 'Robot'}]}
         onConfirm={(values) => {

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 (
+    <View>
+      <Text>+20</Text>
+    </View>
+  )
+}
 
 function Table() {
 
@@ -36,21 +43,29 @@ function Table() {
             {
               row.map((player, j) => (
                 <View key={j} className="player-wrap">
-                  <View className={cnames("player-no", { "player-no-running": player.index === 1 })}><Text>#{player.index}</Text></View>
-                  <View className="card1"><Card w={42} h={48} dot={12} suit={2} /></View>
-                  <View className="card2"><Card w={42} h={48} dot={12} suit={3} /></View>
-                  <View className="player">
+                  {
+                    j % 2 === 0 &&
+                    <View className={cnames('player-state-wrap', {'state-left': j % 2 === 0})}>
+                      <PlayerStatus action={1} />
+                    </View>
+                  }
+                  <View className="player-bar">
+                    <View className={cnames("player-no", { "player-no-running": player.index === 0 })}><Text>#{player.index}</Text></View>
+                    <View className="card1"><Card w={38} h={48} dot={-1} suit={2} /></View>
+                    <View className="card2"><Card w={38} h={48} dot={-1} suit={3} /></View>
+                    <View className={cnames("player", {'player-wait': player.index !== 0})}>
                       <View className="avatar-wrap"><Image className="avatar" src={avatar} /></View>
                       <View className="player-name"><Text>Player{player.item}</Text></View>
                     </View>
                     <View className="wallet-wrap">
-                    <View className="wallet">
+                      <View className={cnames("wallet", {'wallet-wait': player.index !== 0})}>
                         <View className="wallet-icon"><Image className="wallet-icon-img" src={coinIcon} /></View>
                         <View className="wallet-amount"><Text>3,000,000</Text></View>
                       </View>
                       <View className="pct"><Text>25%</Text></View>
                     </View>
                   </View>
+                </View>
               ))
             }
           </View>
@@ -60,8 +75,8 @@ function Table() {
         <View className="desktop-wrap">
           <View className="desktop-cards">
             {
-              [1, 2, 3, 4, 5].map((item, i) => (
-                <Card key={i} w={42} h={48} dot={12} suit={2} />
+              [1, 2, 3, -3, -3].map((item, i) => (
+                <Card key={i} w={38} h={48} dot={item} suit={2} />
               ))
             }
           </View>
@@ -73,7 +88,7 @@ function Table() {
             <View className="d-wallet-amount">22,088,000</View>
           </View>
         </View>
-        <View className="chatbox" style={{ display: 'none' }}>
+        {/* <View className="chatbox" style={{ display: 'none' }}>
           <View className='chat-window'>
             <View className="line">Kelly(#1)进入了游戏</View>
             <View className="line">Apollo(#2)进入了游戏</View>
@@ -82,17 +97,18 @@ function Table() {
             <View><Input name="chat" type="text" placeholder="" /></View>
             <View><Button>OK</Button></View>
           </View>
-        </View>
+        </View> */}
       </View>
 
       <View className="self-box">
         <View className="self-wrap">
-          <View className="hand-card1"><Card w={42} h={48} dot={12} suit={3} /></View>
-          <View className="hand-card2"><Card w={42} h={48} dot={12} suit={3} /></View>
+        <View className={cnames("player-no", { "player-no-running": true })}><Text>#7</Text></View>
+          <View className="hand-card1"><Card w={38} h={48} dot={12} suit={3} /></View>
+          <View className="hand-card2"><Card w={38} h={48} dot={12} suit={3} /></View>
           <View className="hand-five">
             {
               [1, 2, 3, 4, 5].map((_, i) => (
-                <View key={i} className="hand-five-item"><Card w={30} h={36} dot={12} suit={2} /></View>
+                <View key={i} className="hand-five-item"><Card w={28} h={36} dot={12} suit={2} /></View>
               ))
             }
           </View>
@@ -112,7 +128,7 @@ function Table() {
             </View>
             <View className="control">
               <View className="ctl-opt-wrap">
-                <View className="amount-input"><Input placeholder='stake' defaultValue={0} /></View>
+                <View className="amount-input"><Input placeholder='your chip' defaultValue={0} /></View>
                 <View className="amount-sub"><Image className="amount-sub-icon" src={sub1Icon} /></View>
                 <View className="amount-plus"><Image className="amount-plus-icon" src={plus1Icon} /></View>
               </View>

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;
   }