Merge branch 'feat/player_name' into 'main'

Feat/player name

See merge request mycard/Neos!206

src/service/duel/start.ts

 import { v4 as v4uuid } from "uuid";
 
 import { ygopro } from "@/api";
-import { store } from "@/stores";
+import { playerStore, store } from "@/stores";
 const { matStore } = store;
 
 export default (start: ygopro.StocGameMessage.MsgStart) => {
@@ -11,13 +11,18 @@ export default (start: ygopro.StocGameMessage.MsgStart) => {
       ? 1
       : 0;
 
+  const meName = playerStore.getMePlayer().name;
+  const opName = playerStore.getOpPlayer().name;
+
   matStore.initInfo.set(0, {
     life: start.life1,
+    name: opponent == 0 ? opName : meName,
     deckSize: start.deckSize1,
     extraSize: start.extraSize1,
   });
   matStore.initInfo.set(1, {
     life: start.life2,
+    name: opponent == 1 ? opName : meName,
     deckSize: start.deckSize2,
     extraSize: start.extraSize2,
   });

src/service/room/typeChange.ts

@@ -8,6 +8,7 @@ export default function handleTypeChange(pb: ygopro.YgoStocMsg) {
   const assertHost = pb.stoc_type_change.is_host;
 
   playerStore.isHost = assertHost;
+  playerStore.selfType = selfType;
 
   if (assertHost) {
     switch (selfType) {

src/stores/matStore/store.ts

@@ -177,6 +177,7 @@ const genBlock = (zone: ygopro.CardZone, n: number) =>
 const initInfo: MatState["initInfo"] = (() => {
   const defaultInitInfo = {
     masterRule: "UNKNOWN",
+    name: "?",
     life: -1, // 特地设置一个不可能的值
     deckSize: 0,
     extraSize: 0,

src/stores/matStore/types.ts

@@ -116,6 +116,7 @@ export interface MatState {
 
 export interface InitInfo {
   masterRule?: string;
+  name: string;
   life: number;
   deckSize: number;
   extraSize: number;

src/stores/playerStore.ts

 import { proxy } from "valtio";
 
+import { ygopro } from "@/api";
+import SelfType = ygopro.StocTypeChange.SelfType;
+
 export interface Player {
   name?: string;
   state?: string;
@@ -18,6 +21,9 @@ export interface PlayerState {
   player1: Player;
   observerCount: number;
   isHost: boolean;
+  selfType: SelfType;
+  getMePlayer: () => Player;
+  getOpPlayer: () => Player;
 }
 
 export const playerStore = proxy<PlayerState>({
@@ -25,4 +31,13 @@ export const playerStore = proxy<PlayerState>({
   player1: {},
   observerCount: 0,
   isHost: false,
+  selfType: SelfType.UNKNOWN,
+  getMePlayer() {
+    if (this.selfType == SelfType.PLAYER1) return this.player0;
+    return this.player1;
+  },
+  getOpPlayer() {
+    if (this.selfType == SelfType.PLAYER1) return this.player1;
+    return this.player0;
+  },
 });

src/styles/mat.css

@@ -64,6 +64,7 @@ button:focus-visible {
   padding: 0.8em 1.6em;
   background-color: #A9A9A9;
   border-radius: 8px;
+  text-align: left;
   border: 1px solid transparent;
   color: black;
   opacity: .4;

src/ui/Duel/PlayMat/Mat.tsx

@@ -64,8 +64,8 @@ export const Mat = () => {
     <>
       <Menu />
       <div id="life-bar-container">
-        <div id="life-bar">{snap.initInfo.me.life}</div>
-        <div id="life-bar">{snap.initInfo.op.life}</div>
+        <div id="life-bar">{`${snap.initInfo.me.name}: ${snap.initInfo.me.life}`}</div>
+        <div id="life-bar">{`${snap.initInfo.op.name}: ${snap.initInfo.op.life}`}</div>
       </div>
       <div id="camera">
         <div id="board">