Merge branch 'feat/sort_card' into 'main'

Feat/sort card See merge request mycard/Neos!160

Merge branch 'feat/sort_card' into 'main'
Feat/sort card See merge request mycard/Neos!160
2ce5bffb · Chunchi Che · 1bac6c95 · f83338e9 · e477dc8a · 2ce5bffb
Commit 2ce5bffb authored Apr 01, 2023 by Chunchi Che
17 changed files
--- a/neos-protobuf @ e477dc8a
+++ b/neos-protobuf @ e477dc8a
-Subproject commit ff89698e6fb11829a7170fdf38de646e720bd96d
+Subproject commit e477dc8ab6cc6ef898b34499f3e6ecd3b0d99481
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
      "version": "0.1.0",
      "dependencies": {
        "@ant-design/pro-components": "^2.3.49",
+        "@dnd-kit/core": "^6.0.8",
+        "@dnd-kit/sortable": "^7.0.2",
        "@react-spring/shared": "^9.6.1",
        "@react-spring/types": "^9.6.1",
        "@react-spring/web": "^9.6.1",
@@ -2328,6 +2330,75 @@
        "node": ">=10"
      }
    },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.0.1.tgz",
+      "integrity": "sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/accessibility/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.0.8.tgz",
+      "integrity": "sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.0.0",
+        "@dnd-kit/utilities": "^3.2.1",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.2.tgz",
+      "integrity": "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.0",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.0.7",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.1.tgz",
+      "integrity": "sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
    "node_modules/@emotion/hash": {
      "version": "0.8.0",
      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -28814,6 +28885,69 @@
      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz",
      "integrity": "sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ=="
    },
+    "@dnd-kit/accessibility": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.0.1.tgz",
+      "integrity": "sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+        }
+      }
+    },
+    "@dnd-kit/core": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.0.8.tgz",
+      "integrity": "sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==",
+      "requires": {
+        "@dnd-kit/accessibility": "^3.0.0",
+        "@dnd-kit/utilities": "^3.2.1",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+        }
+      }
+    },
+    "@dnd-kit/sortable": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.2.tgz",
+      "integrity": "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==",
+      "requires": {
+        "@dnd-kit/utilities": "^3.2.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+        }
+      }
+    },
+    "@dnd-kit/utilities": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.1.tgz",
+      "integrity": "sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+        }
+      }
+    },
    "@emotion/hash": {
      "version": "0.8.0",
      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
--- a/package.json
+++ b/package.json
@@ -4,6 +4,8 @@
  "private": true,
  "dependencies": {
    "@ant-design/pro-components": "^2.3.49",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
    "@react-spring/shared": "^9.6.1",
    "@react-spring/types": "^9.6.1",
    "@react-spring/web": "^9.6.1",

--- a/src/api/ocgcore/idl/ocgcore.ts
+++ b/src/api/ocgcore/idl/ocgcore.ts
@@ -2668,7 +2668,7 @@ export namespace ygopro {
    }
  }
  export class CtosGameMsgResponse extends pb_1.Message {
-    #one_of_decls: number[][] = [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]];
+    #one_of_decls: number[][] = [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]];
    constructor(
      data?:
        | any[]
@@ -2684,6 +2684,7 @@ export namespace ygopro {
                select_battle_cmd?: never;
                select_unselect_card?: never;
                select_counter_response?: never;
+                sort_card?: never;
              }
            | {
                select_idle_cmd?: never;
@@ -2696,6 +2697,7 @@ export namespace ygopro {
                select_battle_cmd?: never;
                select_unselect_card?: never;
                select_counter_response?: never;
+                sort_card?: never;
              }
            | {
                select_idle_cmd?: never;
@@ -2708,6 +2710,7 @@ export namespace ygopro {
                select_battle_cmd?: never;
                select_unselect_card?: never;
                select_counter_response?: never;
+                sort_card?: never;
              }
            | {
                select_idle_cmd?: never;
@@ -2720,6 +2723,7 @@ export namespace ygopro {
                select_battle_cmd?: never;
                select_unselect_card?: never;
                select_counter_response?: never;
+                sort_card?: never;
              }
            | {
                select_idle_cmd?: never;
@@ -2732,6 +2736,7 @@ export namespace ygopro {
                select_battle_cmd?: never;
                select_unselect_card?: never;
                select_counter_response?: never;
+                sort_card?: never;
              }
            | {
                select_idle_cmd?: never;
@@ -2744,6 +2749,7 @@ export namespace ygopro {
                select_battle_cmd?: never;
                select_unselect_card?: never;
                select_counter_response?: never;
+                sort_card?: never;
              }
            | {
                select_idle_cmd?: never;
@@ -2756,6 +2762,7 @@ export namespace ygopro {
                select_battle_cmd?: never;
                select_unselect_card?: never;
                select_counter_response?: never;
+                sort_card?: never;
              }
            | {
                select_idle_cmd?: never;
@@ -2768,6 +2775,7 @@ export namespace ygopro {
                select_battle_cmd?: CtosGameMsgResponse.SelectBattleCmdResponse;
                select_unselect_card?: never;
                select_counter_response?: never;
+                sort_card?: never;
              }
            | {
                select_idle_cmd?: never;
@@ -2780,6 +2788,7 @@ export namespace ygopro {
                select_battle_cmd?: never;
                select_unselect_card?: CtosGameMsgResponse.SelectUnselectCardResponse;
                select_counter_response?: never;
+                sort_card?: never;
              }
            | {
                select_idle_cmd?: never;
@@ -2792,6 +2801,20 @@ export namespace ygopro {
                select_battle_cmd?: never;
                select_unselect_card?: never;
                select_counter_response?: CtosGameMsgResponse.SelectCounterResponse;
+                sort_card?: never;
+              }
+            | {
+                select_idle_cmd?: never;
+                select_place?: never;
+                select_card?: never;
+                select_chain?: never;
+                select_effect_yn?: never;
+                select_position?: never;
+                select_option?: never;
+                select_battle_cmd?: never;
+                select_unselect_card?: never;
+                select_counter_response?: never;
+                sort_card?: CtosGameMsgResponse.SortCardResponse;
              }
          ))
    ) {
@@ -2844,6 +2867,9 @@ export namespace ygopro {
        ) {
          this.select_counter_response = data.select_counter_response;
        }
+        if ("sort_card" in data && data.sort_card != undefined) {
+          this.sort_card = data.sort_card;
+        }
      }
    }
    get select_idle_cmd() {
@@ -2980,6 +3006,19 @@ export namespace ygopro {
    get has_select_counter_response() {
      return pb_1.Message.getField(this, 10) != null;
    }
+    get sort_card() {
+      return pb_1.Message.getWrapperField(
+        this,
+        CtosGameMsgResponse.SortCardResponse,
+        11
+      ) as CtosGameMsgResponse.SortCardResponse;
+    }
+    set sort_card(value: CtosGameMsgResponse.SortCardResponse) {
+      pb_1.Message.setOneofWrapperField(this, 11, this.#one_of_decls[0], value);
+    }
+    get has_sort_card() {
+      return pb_1.Message.getField(this, 11) != null;
+    }
    get gameMsgResponse() {
      const cases: {
        [index: number]:
@@ -2993,7 +3032,8 @@ export namespace ygopro {
          | "select_option"
          | "select_battle_cmd"
          | "select_unselect_card"
-          | "select_counter_response";
+          | "select_counter_response"
+          | "sort_card";
      } = {
        0: "none",
        1: "select_idle_cmd",
@@ -3006,9 +3046,10 @@ export namespace ygopro {
        8: "select_battle_cmd",
        9: "select_unselect_card",
        10: "select_counter_response",
+        11: "sort_card",
      };
      return cases[
-        pb_1.Message.computeOneofCase(this, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+        pb_1.Message.computeOneofCase(this, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])
      ];
    }
    static fromObject(data: {
@@ -3042,6 +3083,9 @@ export namespace ygopro {
      select_counter_response?: ReturnType<
        typeof CtosGameMsgResponse.SelectCounterResponse.prototype.toObject
      >;
+      sort_card?: ReturnType<
+        typeof CtosGameMsgResponse.SortCardResponse.prototype.toObject
+      >;
    }): CtosGameMsgResponse {
      const message = new CtosGameMsgResponse({});
      if (data.select_idle_cmd != null) {
@@ -3099,6 +3143,11 @@ export namespace ygopro {
            data.select_counter_response
          );
      }
+      if (data.sort_card != null) {
+        message.sort_card = CtosGameMsgResponse.SortCardResponse.fromObject(
+          data.sort_card
+        );
+      }
      return message;
    }
    toObject() {
@@ -3133,6 +3182,9 @@ export namespace ygopro {
        select_counter_response?: ReturnType<
          typeof CtosGameMsgResponse.SelectCounterResponse.prototype.toObject
        >;
+        sort_card?: ReturnType<
+          typeof CtosGameMsgResponse.SortCardResponse.prototype.toObject
+        >;
      } = {};
      if (this.select_idle_cmd != null) {
        data.select_idle_cmd = this.select_idle_cmd.toObject();
@@ -3164,6 +3216,9 @@ export namespace ygopro {
      if (this.select_counter_response != null) {
        data.select_counter_response = this.select_counter_response.toObject();
      }
+      if (this.sort_card != null) {
+        data.sort_card = this.sort_card.toObject();
+      }
      return data;
    }
    serialize(): Uint8Array;
@@ -3210,6 +3265,10 @@ export namespace ygopro {
        writer.writeMessage(10, this.select_counter_response, () =>
          this.select_counter_response.serialize(writer)
        );
+      if (this.has_sort_card)
+        writer.writeMessage(11, this.sort_card, () =>
+          this.sort_card.serialize(writer)
+        );
      if (!w) return writer.getResultBuffer();
    }
    static deserialize(
@@ -3311,6 +3370,14 @@ export namespace ygopro {
                  CtosGameMsgResponse.SelectCounterResponse.deserialize(reader))
            );
            break;
+          case 11:
+            reader.readMessage(
+              message.sort_card,
+              () =>
+                (message.sort_card =
+                  CtosGameMsgResponse.SortCardResponse.deserialize(reader))
+            );
+            break;
          default:
            reader.skipField();
        }
@@ -4218,6 +4285,87 @@ export namespace ygopro {
        return SelectCounterResponse.deserialize(bytes);
      }
    }
+    export class SortCardResponse extends pb_1.Message {
+      #one_of_decls: number[][] = [];
+      constructor(
+        data?:
+          | any[]
+          | {
+              sorted_index?: number[];
+            }
+      ) {
+        super();
+        pb_1.Message.initialize(
+          this,
+          Array.isArray(data) ? data : [],
+          0,
+          -1,
+          [1],
+          this.#one_of_decls
+        );
+        if (!Array.isArray(data) && typeof data == "object") {
+          if ("sorted_index" in data && data.sorted_index != undefined) {
+            this.sorted_index = data.sorted_index;
+          }
+        }
+      }
+      get sorted_index() {
+        return pb_1.Message.getFieldWithDefault(this, 1, []) as number[];
+      }
+      set sorted_index(value: number[]) {
+        pb_1.Message.setField(this, 1, value);
+      }
+      static fromObject(data: { sorted_index?: number[] }): SortCardResponse {
+        const message = new SortCardResponse({});
+        if (data.sorted_index != null) {
+          message.sorted_index = data.sorted_index;
+        }
+        return message;
+      }
+      toObject() {
+        const data: {
+          sorted_index?: number[];
+        } = {};
+        if (this.sorted_index != null) {
+          data.sorted_index = this.sorted_index;
+        }
+        return data;
+      }
+      serialize(): Uint8Array;
+      serialize(w: pb_1.BinaryWriter): void;
+      serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+        const writer = w || new pb_1.BinaryWriter();
+        if (this.sorted_index.length)
+          writer.writePackedInt32(1, this.sorted_index);
+        if (!w) return writer.getResultBuffer();
+      }
+      static deserialize(
+        bytes: Uint8Array | pb_1.BinaryReader
+      ): SortCardResponse {
+        const reader =
+            bytes instanceof pb_1.BinaryReader
+              ? bytes
+              : new pb_1.BinaryReader(bytes),
+          message = new SortCardResponse();
+        while (reader.nextField()) {
+          if (reader.isEndGroup()) break;
+          switch (reader.getFieldNumber()) {
+            case 1:
+              message.sorted_index = reader.readPackedInt32();
+              break;
+            default:
+              reader.skipField();
+          }
+        }
+        return message;
+      }
+      serializeBinary(): Uint8Array {
+        return this.serialize();
+      }
+      static deserializeBinary(bytes: Uint8Array): SortCardResponse {
+        return SortCardResponse.deserialize(bytes);
+      }
+    }
  }
  export class StocJoinGame extends pb_1.Message {
    #one_of_decls: number[][] = [];
@@ -5600,7 +5748,7 @@ export namespace ygopro {
    #one_of_decls: number[][] = [
      [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
-        21, 22, 23, 24, 25, 26, 27, 28,
+        21, 22, 23, 24, 25, 26, 27, 28, 29,
      ],
    ];
    constructor(
@@ -5636,6 +5784,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5666,6 +5815,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5696,6 +5846,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5726,6 +5877,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5756,6 +5908,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5786,6 +5939,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5816,6 +5970,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5846,6 +6001,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5876,6 +6032,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5906,6 +6063,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5936,6 +6094,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5966,6 +6125,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -5996,6 +6156,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6026,6 +6187,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6056,6 +6218,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6086,6 +6249,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6116,6 +6280,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6146,6 +6311,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6176,6 +6342,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6206,6 +6373,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6236,6 +6404,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6266,6 +6435,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6296,6 +6466,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6326,6 +6497,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6356,6 +6528,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6386,6 +6559,7 @@ export namespace ygopro {
                select_tribute?: StocGameMessage.MsgSelectTribute;
                update_counter?: never;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6416,6 +6590,7 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: StocGameMessage.MsgUpdateCounter;
                select_counter?: never;
+                sort_card?: never;
              }
            | {
                start?: never;
@@ -6446,6 +6621,38 @@ export namespace ygopro {
                select_tribute?: never;
                update_counter?: never;
                select_counter?: StocGameMessage.MsgSelectCounter;
+                sort_card?: never;
+              }
+            | {
+                start?: never;
+                draw?: never;
+                new_turn?: never;
+                new_phase?: never;
+                hint?: never;
+                select_idle_cmd?: never;
+                select_place?: never;
+                move?: never;
+                select_card?: never;
+                select_chain?: never;
+                select_effect_yn?: never;
+                select_position?: never;
+                select_option?: never;
+                shuffle_hand?: never;
+                select_battle_cmd?: never;
+                pos_change?: never;
+                select_unselect_card?: never;
+                select_yes_no?: never;
+                update_hp?: never;
+                win?: never;
+                wait?: never;
+                unimplemented?: never;
+                update_data?: never;
+                reload_field?: never;
+                select_sum?: never;
+                select_tribute?: never;
+                update_counter?: never;
+                select_counter?: never;
+                sort_card?: StocGameMessage.MsgSortCard;
              }
          ))
    ) {
@@ -6549,6 +6756,9 @@ export namespace ygopro {
        if ("select_counter" in data && data.select_counter != undefined) {
          this.select_counter = data.select_counter;
        }
+        if ("sort_card" in data && data.sort_card != undefined) {
+          this.sort_card = data.sort_card;
+        }
      }
    }
    get start() {
@@ -6915,6 +7125,19 @@ export namespace ygopro {
    get has_select_counter() {
      return pb_1.Message.getField(this, 28) != null;
    }
+    get sort_card() {
+      return pb_1.Message.getWrapperField(
+        this,
+        StocGameMessage.MsgSortCard,
+        29
+      ) as StocGameMessage.MsgSortCard;
+    }
+    set sort_card(value: StocGameMessage.MsgSortCard) {
+      pb_1.Message.setOneofWrapperField(this, 29, this.#one_of_decls[0], value);
+    }
+    get has_sort_card() {
+      return pb_1.Message.getField(this, 29) != null;
+    }
    get gameMsg() {
      const cases: {
        [index: number]:
@@ -6946,7 +7169,8 @@ export namespace ygopro {
          | "select_sum"
          | "select_tribute"
          | "update_counter"
-          | "select_counter";
+          | "select_counter"
+          | "sort_card";
      } = {
        0: "none",
        1: "start",
@@ -6977,13 +7201,14 @@ export namespace ygopro {
        26: "select_tribute",
        27: "update_counter",
        28: "select_counter",
+        29: "sort_card",
      };
      return cases[
        pb_1.Message.computeOneofCase(
          this,
          [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
-            20, 21, 22, 23, 24, 25, 26, 27, 28,
+            20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
          ]
        )
      ];
@@ -7061,6 +7286,9 @@ export namespace ygopro {
      select_counter?: ReturnType<
        typeof StocGameMessage.MsgSelectCounter.prototype.toObject
      >;
+      sort_card?: ReturnType<
+        typeof StocGameMessage.MsgSortCard.prototype.toObject
+      >;
    }): StocGameMessage {
      const message = new StocGameMessage({});
      if (data.start != null) {
@@ -7189,6 +7417,11 @@ export namespace ygopro {
          data.select_counter
        );
      }
+      if (data.sort_card != null) {
+        message.sort_card = StocGameMessage.MsgSortCard.fromObject(
+          data.sort_card
+        );
+      }
      return message;
    }
    toObject() {
@@ -7265,6 +7498,9 @@ export namespace ygopro {
        select_counter?: ReturnType<
          typeof StocGameMessage.MsgSelectCounter.prototype.toObject
        >;
+        sort_card?: ReturnType<
+          typeof StocGameMessage.MsgSortCard.prototype.toObject
+        >;
      } = {};
      if (this.start != null) {
        data.start = this.start.toObject();
@@ -7350,6 +7586,9 @@ export namespace ygopro {
      if (this.select_counter != null) {
        data.select_counter = this.select_counter.toObject();
      }
+      if (this.sort_card != null) {
+        data.sort_card = this.sort_card.toObject();
+      }
      return data;
    }
    serialize(): Uint8Array;
@@ -7456,6 +7695,10 @@ export namespace ygopro {
        writer.writeMessage(28, this.select_counter, () =>
          this.select_counter.serialize(writer)
        );
+      if (this.has_sort_card)
+        writer.writeMessage(29, this.sort_card, () =>
+          this.sort_card.serialize(writer)
+        );
      if (!w) return writer.getResultBuffer();
    }
    static deserialize(bytes: Uint8Array | pb_1.BinaryReader): StocGameMessage {
@@ -7680,6 +7923,14 @@ export namespace ygopro {
                  StocGameMessage.MsgSelectCounter.deserialize(reader))
            );
            break;
+          case 29:
+            reader.readMessage(
+              message.sort_card,
+              () =>
+                (message.sort_card =
+                  StocGameMessage.MsgSortCard.deserialize(reader))
+            );
+            break;
          default:
            reader.skipField();
        }
@@ -14454,6 +14705,271 @@ export namespace ygopro {
        }
      }
    }
+    export class MsgSortCard extends pb_1.Message {
+      #one_of_decls: number[][] = [];
+      constructor(
+        data?:
+          | any[]
+          | {
+              player?: number;
+              options?: StocGameMessage.MsgSortCard.Info[];
+            }
+      ) {
+        super();
+        pb_1.Message.initialize(
+          this,
+          Array.isArray(data) ? data : [],
+          0,
+          -1,
+          [2],
+          this.#one_of_decls
+        );
+        if (!Array.isArray(data) && typeof data == "object") {
+          if ("player" in data && data.player != undefined) {
+            this.player = data.player;
+          }
+          if ("options" in data && data.options != undefined) {
+            this.options = data.options;
+          }
+        }
+      }
+      get player() {
+        return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
+      }
+      set player(value: number) {
+        pb_1.Message.setField(this, 1, value);
+      }
+      get options() {
+        return pb_1.Message.getRepeatedWrapperField(
+          this,
+          StocGameMessage.MsgSortCard.Info,
+          2
+        ) as StocGameMessage.MsgSortCard.Info[];
+      }
+      set options(value: StocGameMessage.MsgSortCard.Info[]) {
+        pb_1.Message.setRepeatedWrapperField(this, 2, value);
+      }
+      static fromObject(data: {
+        player?: number;
+        options?: ReturnType<
+          typeof StocGameMessage.MsgSortCard.Info.prototype.toObject
+        >[];
+      }): MsgSortCard {
+        const message = new MsgSortCard({});
+        if (data.player != null) {
+          message.player = data.player;
+        }
+        if (data.options != null) {
+          message.options = data.options.map((item) =>
+            StocGameMessage.MsgSortCard.Info.fromObject(item)
+          );
+        }
+        return message;
+      }
+      toObject() {
+        const data: {
+          player?: number;
+          options?: ReturnType<
+            typeof StocGameMessage.MsgSortCard.Info.prototype.toObject
+          >[];
+        } = {};
+        if (this.player != null) {
+          data.player = this.player;
+        }
+        if (this.options != null) {
+          data.options = this.options.map(
+            (item: StocGameMessage.MsgSortCard.Info) => item.toObject()
+          );
+        }
+        return data;
+      }
+      serialize(): Uint8Array;
+      serialize(w: pb_1.BinaryWriter): void;
+      serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+        const writer = w || new pb_1.BinaryWriter();
+        if (this.player != 0) writer.writeInt32(1, this.player);
+        if (this.options.length)
+          writer.writeRepeatedMessage(
+            2,
+            this.options,
+            (item: StocGameMessage.MsgSortCard.Info) => item.serialize(writer)
+          );
+        if (!w) return writer.getResultBuffer();
+      }
+      static deserialize(bytes: Uint8Array | pb_1.BinaryReader): MsgSortCard {
+        const reader =
+            bytes instanceof pb_1.BinaryReader
+              ? bytes
+              : new pb_1.BinaryReader(bytes),
+          message = new MsgSortCard();
+        while (reader.nextField()) {
+          if (reader.isEndGroup()) break;
+          switch (reader.getFieldNumber()) {
+            case 1:
+              message.player = reader.readInt32();
+              break;
+            case 2:
+              reader.readMessage(message.options, () =>
+                pb_1.Message.addToRepeatedWrapperField(
+                  message,
+                  2,
+                  StocGameMessage.MsgSortCard.Info.deserialize(reader),
+                  StocGameMessage.MsgSortCard.Info
+                )
+              );
+              break;
+            default:
+              reader.skipField();
+          }
+        }
+        return message;
+      }
+      serializeBinary(): Uint8Array {
+        return this.serialize();
+      }
+      static deserializeBinary(bytes: Uint8Array): MsgSortCard {
+        return MsgSortCard.deserialize(bytes);
+      }
+    }
+    export namespace MsgSortCard {
+      export class Info extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(
+          data?:
+            | any[]
+            | {
+                code?: number;
+                location?: CardLocation;
+                response?: number;
+              }
+        ) {
+          super();
+          pb_1.Message.initialize(
+            this,
+            Array.isArray(data) ? data : [],
+            0,
+            -1,
+            [],
+            this.#one_of_decls
+          );
+          if (!Array.isArray(data) && typeof data == "object") {
+            if ("code" in data && data.code != undefined) {
+              this.code = data.code;
+            }
+            if ("location" in data && data.location != undefined) {
+              this.location = data.location;
+            }
+            if ("response" in data && data.response != undefined) {
+              this.response = data.response;
+            }
+          }
+        }
+        get code() {
+          return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
+        }
+        set code(value: number) {
+          pb_1.Message.setField(this, 1, value);
+        }
+        get location() {
+          return pb_1.Message.getWrapperField(
+            this,
+            CardLocation,
+            2
+          ) as CardLocation;
+        }
+        set location(value: CardLocation) {
+          pb_1.Message.setWrapperField(this, 2, value);
+        }
+        get has_location() {
+          return pb_1.Message.getField(this, 2) != null;
+        }
+        get response() {
+          return pb_1.Message.getFieldWithDefault(this, 3, 0) as number;
+        }
+        set response(value: number) {
+          pb_1.Message.setField(this, 3, value);
+        }
+        static fromObject(data: {
+          code?: number;
+          location?: ReturnType<typeof CardLocation.prototype.toObject>;
+          response?: number;
+        }): Info {
+          const message = new Info({});
+          if (data.code != null) {
+            message.code = data.code;
+          }
+          if (data.location != null) {
+            message.location = CardLocation.fromObject(data.location);
+          }
+          if (data.response != null) {
+            message.response = data.response;
+          }
+          return message;
+        }
+        toObject() {
+          const data: {
+            code?: number;
+            location?: ReturnType<typeof CardLocation.prototype.toObject>;
+            response?: number;
+          } = {};
+          if (this.code != null) {
+            data.code = this.code;
+          }
+          if (this.location != null) {
+            data.location = this.location.toObject();
+          }
+          if (this.response != null) {
+            data.response = this.response;
+          }
+          return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+          const writer = w || new pb_1.BinaryWriter();
+          if (this.code != 0) writer.writeInt32(1, this.code);
+          if (this.has_location)
+            writer.writeMessage(2, this.location, () =>
+              this.location.serialize(writer)
+            );
+          if (this.response != 0) writer.writeInt32(3, this.response);
+          if (!w) return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Info {
+          const reader =
+              bytes instanceof pb_1.BinaryReader
+                ? bytes
+                : new pb_1.BinaryReader(bytes),
+            message = new Info();
+          while (reader.nextField()) {
+            if (reader.isEndGroup()) break;
+            switch (reader.getFieldNumber()) {
+              case 1:
+                message.code = reader.readInt32();
+                break;
+              case 2:
+                reader.readMessage(
+                  message.location,
+                  () => (message.location = CardLocation.deserialize(reader))
+                );
+                break;
+              case 3:
+                message.response = reader.readInt32();
+                break;
+              default:
+                reader.skipField();
+            }
+          }
+          return message;
+        }
+        serializeBinary(): Uint8Array {
+          return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Info {
+          return Info.deserialize(bytes);
+        }
+      }
+    }
    export class MsgReloadField extends pb_1.Message {
      #one_of_decls: number[][] = [];
      constructor(

--- a/src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/mod.ts
+++ b/src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/mod.ts
@@ -11,6 +11,7 @@ import adaptSelectOptionResponse from "./selectOption";
 import adaptSelectBattleCmdResponse from "./selectBattleCmd";
 import adaptSelectUnselectCardResponse from "./selectUnselectCard";
 import adaptSelectCounterResponse from "./selectCounter";
+import adaptSortCardResponse from "./sortCard";

 /*
 * CTOS CTOS_RESPONSE
@@ -80,6 +81,11 @@ export default class CtosResponsePacket extends YgoProPacket {

        break;
      }
+      case "sort_card": {
+        extraData = adaptSortCardResponse(response.sort_card);
+
+        break;
+      }
      default: {
        break;
      }

--- a/src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/sortCard.ts
+++ b/src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/sortCard.ts
+import { ygopro } from "../../../idl/ocgcore";
+// @ts-ignore
+import { BufferWriter } from "rust-src";
+
+export default (response: ygopro.CtosGameMsgResponse.SortCardResponse) => {
+  const writer = new BufferWriter();
+
+  for (const index of response.sorted_index) {
+    writer.writeUint8(index);
+  }
+
+  return writer.toArray();
+};
--- a/src/api/ocgcore/ocgAdapter/protoDecl.ts
+++ b/src/api/ocgcore/ocgAdapter/protoDecl.ts
@@ -55,3 +55,4 @@ export const MSG_SELECT_SUM = 23;
 export const MSG_ADD_COUNTER = 101;
 export const MSG_REMOVE_COUNTER = 102;
 export const MSG_SELECT_COUNTER = 22;
+export const MSG_SORT_CARD = 25;
--- a/src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/mod.ts
+++ b/src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/mod.ts
@@ -31,6 +31,7 @@ import MsgSelectSum from "./selectSum";
 import MsgAddCounter from "./addCounter";
 import MsgRemoveCounter from "./removeCounter";
 import MsgSelectCounter from "./selectCounter";
+import MsgSortCard from "./sortCard";
 import PENETRATE from "./penetrate";

 /*
@@ -184,6 +185,11 @@ export default class GameMsgAdapter implements StocAdapter {

          break;
        }
+        case GAME_MSG.MSG_SORT_CARD: {
+          gameMsg.sort_card = MsgSortCard(gameData);
+
+          break;
+        }
        default: {
          gameMsg.unimplemented = new ygopro.StocGameMessage.MsgUnimplemented({
            command: func,

--- a/src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/sortCard.ts
+++ b/src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/sortCard.ts
+import { ygopro } from "../../../idl/ocgcore";
+import { BufferReaderExt } from "../../bufferIO";
+import MsgSortCard = ygopro.StocGameMessage.MsgSortCard;
+
+/*
+ *
+ * Msg Sort Card
+ *
+ * @param - TODO
+ * @usage - TODO
+ * */
+export default (data: Uint8Array) => {
+  const reader = new BufferReaderExt(data);
+
+  const player = reader.inner.readUint8();
+
+  const msg = new MsgSortCard({
+    player,
+    options: [],
+  });
+
+  const count = reader.inner.readUint8();
+  for (let i = 0; i < count; i++) {
+    const code = reader.inner.readUint32();
+    const location = reader.readCardShortLocation();
+
+    msg.options.push(
+      new MsgSortCard.Info({
+        code,
+        location,
+        response: i,
+      })
+    );
+  }
+
+  return msg;
+};
--- a/src/api/ocgcore/ocgHelper.ts
+++ b/src/api/ocgcore/ocgHelper.ts
@@ -282,3 +282,16 @@ export function sendSelectCounterResponse(counts: number[]) {

  socketMiddleWare({ cmd: socketCmd.SEND, payload });
 }
+
+export function sendSortCardResponse(sortedIndexes: number[]) {
+  const response = new ygopro.YgoCtosMsg({
+    ctos_response: new ygopro.CtosGameMsgResponse({
+      sort_card: new ygopro.CtosGameMsgResponse.SortCardResponse({
+        sorted_index: sortedIndexes,
+      }),
+    }),
+  });
+  const payload = new GameMsgResponse(response).serialize();
+
+  socketMiddleWare({ cmd: socketCmd.SEND, payload });
+}
--- a/src/reducers/duel/mod.ts
+++ b/src/reducers/duel/mod.ts
@@ -63,6 +63,9 @@ import {
  setCardModalCountersImpl,
  setCheckCounterImpl,
  clearCheckCounterImpl,
+  setSortCardModalIsOpenImpl,
+  resetSortCardModalImpl,
+  sortCardModalCase,
 } from "./modal/mod";
 import {
  MonsterState,
@@ -190,6 +193,10 @@ const initialState: DuelState = {
      isOpen: false,
      options: [],
    },
+    sortCardModal: {
+      isOpen: false,
+      options: [],
+    },
  },
 };

@@ -286,6 +293,8 @@ const duelSlice = createSlice({
    setCardModalCounters: setCardModalCountersImpl,
    setCheckCounter: setCheckCounterImpl,
    clearCheckCounter: clearCheckCounterImpl,
+    setSortCardModalIsOpen: setSortCardModalIsOpenImpl,
+    resetSortCardModal: resetSortCardModalImpl,

    // 通用的`Reducer`
    clearAllIdleInteractivities: clearAllIdleInteractivitiesImpl,
@@ -321,6 +330,7 @@ const duelSlice = createSlice({
    optionModalCase(builder);
    checkCardModalV2Case(builder);
    checkCardModalV3Case(builder);
+    sortCardModalCase(builder);
  },
 });

@@ -401,6 +411,8 @@ export const {
  setCardModalCounters,
  setCheckCounter,
  clearCheckCounter,
+  setSortCardModalIsOpen,
+  resetSortCardModal,
 } = duelSlice.actions;
 export const selectDuelHsStart = (state: RootState) => {
  return state.duel.meInitInfo != null;

--- a/src/reducers/duel/modal/mod.ts
+++ b/src/reducers/duel/modal/mod.ts
@@ -103,6 +103,14 @@ export interface ModalState {
      max: number;
    }[];
  };
+  // 卡牌排序弹窗
+  sortCardModal: {
+    isOpen: boolean;
+    options: {
+      meta: CardMeta;
+      response: number;
+    }[];
+  };
 }

 export * from "./cardModalSlice";
@@ -114,3 +122,4 @@ export * from "./optionModalSlice";
 export * from "./checkCardModalV2Slice";
 export * from "./checkCardModalV3Slice";
 export * from "./checkCounterModalSlice";
+export * from "./sortCardModalSlice";
--- a/src/reducers/duel/modal/sortCardModalSlice.ts
+++ b/src/reducers/duel/modal/sortCardModalSlice.ts
+import {
+  ActionReducerMapBuilder,
+  CaseReducer,
+  createAsyncThunk,
+} from "@reduxjs/toolkit";
+import { fetchCard } from "../../../api/cards";
+import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
+import { RootState } from "../../../store";
+import { DuelReducer } from "../generic";
+import { DuelState } from "../mod";
+type SortCard = ReturnType<
+  typeof ygopro.StocGameMessage.MsgSortCard.Info.prototype.toObject
+>;
+
+export const setSortCardModalIsOpenImpl: DuelReducer<boolean> = (
+  state,
+  action
+) => {
+  state.modalState.sortCardModal.isOpen = action.payload;
+};
+
+export const resetSortCardModalImpl: CaseReducer<DuelState> = (state) => {
+  state.modalState.sortCardModal.isOpen = false;
+  state.modalState.sortCardModal.options = [];
+};
+
+export const fetchSortCardMeta = createAsyncThunk(
+  "duel/fetchSortCardMeta",
+  async (param: SortCard) => {
+    const meta = await fetchCard(param.code!, true);
+    return {
+      meta,
+      response: param.response!,
+    };
+  }
+);
+
+export const sortCardModalCase = (
+  builder: ActionReducerMapBuilder<DuelState>
+) => {
+  // 这里更合理的做法是`pending`的时候先更新`options`，等`meta`数据返回后再异步更新`meta`
+  builder.addCase(fetchSortCardMeta.fulfilled, (state, action) => {
+    state.modalState.sortCardModal.options.push(action.payload);
+  });
+};
+
+export const selectSortCardModal = (state: RootState) =>
+  state.duel.modalState.sortCardModal;
--- a/src/service/duel/gameMsg.ts
+++ b/src/service/duel/gameMsg.ts
@@ -28,6 +28,7 @@ import onMsgSelectSum from "./selectSum";
 import onMsgSelectTribute from "./selectTribute";
 import onMsgUpdateCounter from "./updateCounter";
 import onMsgSelectCounter from "./selectCounter";
+import onMsgSortCard from "./sortCard";
 import { setWaiting } from "../../reducers/duel/mod";

 const ActiveList = [
@@ -187,6 +188,11 @@ export default function handleGameMsg(pb: ygopro.YgoStocMsg) {

      break;
    }
+    case "sort_card": {
+      onMsgSortCard(msg.sort_card, dispatch);
+
+      break;
+    }
    case "unimplemented": {
      onUnimplemented(msg.unimplemented, dispatch);


--- a/src/service/duel/sortCard.ts
+++ b/src/service/duel/sortCard.ts
+import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { setSortCardModalIsOpen } from "../../reducers/duel/mod";
+import { fetchSortCardMeta } from "../../reducers/duel/modal/sortCardModalSlice";
+import { AppDispatch } from "../../store";
+import MsgSortCard = ygopro.StocGameMessage.MsgSortCard;
+
+export default (sortCard: MsgSortCard, dispatch: AppDispatch) => {
+  for (const option of sortCard.options) {
+    dispatch(fetchSortCardMeta(option.toObject()));
+  }
+  dispatch(setSortCardModalIsOpen(true));
+};
--- a/src/ui/Duel/main.tsx
+++ b/src/ui/Duel/main.tsx
@@ -28,6 +28,7 @@ import PlayerStatus from "./status";
 import Alert from "./alert";
 import CheckCardModalV3 from "./checkCardModalV3";
 import CheckCounterModal from "./checkCounterModal";
+import SortCardModal from "./sortCardModal";

 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
@@ -50,6 +51,7 @@ const NeosDuel = () => {
      <CheckCardModalV2 />
      <CheckCardModalV3 />
      <CheckCounterModal />
+      <SortCardModal />
    </>
  );
 };

--- a/src/ui/Duel/sortCardModal.tsx
+++ b/src/ui/Duel/sortCardModal.tsx
+import React, { useEffect, useRef, useState } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useAppSelector } from "../../hook";
+import { selectSortCardModal } from "../../reducers/duel/modal/sortCardModalSlice";
+import { sendSortCardResponse } from "../../api/ocgcore/ocgHelper";
+import { store } from "../../store";
+import { resetSortCardModal } from "../../reducers/duel/mod";
+import DragModal from "./dragModal";
+import { Button, Card } from "antd";
+import { CardMeta } from "../../api/cards";
+import NeosConfig from "../../../neos.config.json";
+
+const SortCardModal = () => {
+  const dispatch = store.dispatch;
+  const state = useAppSelector(selectSortCardModal);
+  const isOpen = state.isOpen;
+  const options = state.options;
+  const [items, setItems] = useState(options);
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+  const draggleRef = useRef<HTMLDivElement>(null);
+
+  const onFinish = () => {
+    sendSortCardResponse(items.map((item) => item.response));
+    dispatch(resetSortCardModal());
+  };
+  const onDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (active.id !== over?.id) {
+      setItems((items) => {
+        const oldIndex = items.findIndex((item) => item.response == active.id);
+        const newIndex = items.findIndex((item) => item.response === over?.id);
+
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+  };
+
+  useEffect(() => {
+    setItems(options);
+  }, [options]);
+
+  return (
+    <DragModal
+      modalProps={{
+        title: "请为下列卡牌排序",
+        open: isOpen,
+        closable: false,
+        footer: <Button onClick={onFinish}>finish</Button>,
+      }}
+      dragRef={draggleRef}
+      draggable={false}
+    >
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={onDragEnd}
+      >
+        <SortableContext
+          items={items.map((item) => item.response)}
+          strategy={verticalListSortingStrategy}
+        >
+          {items.map((item) => (
+            <SortableItem
+              key={item.response}
+              id={item.response}
+              meta={item.meta}
+            />
+          ))}
+        </SortableContext>
+      </DndContext>
+    </DragModal>
+  );
+};
+
+const SortableItem = (props: { id: number; meta: CardMeta }) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: props.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <Card
+        style={{ width: 100 }}
+        cover={
+          <img
+            alt={props.meta.id.toString()}
+            src={`${NeosConfig.cardImgUrl}/${props.meta.id}.jpg`}
+          />
+        }
+      />
+    </div>
+  );
+};
+
+export default SortCardModal;