The method of the class of the application that I am creating in Typescript does not work as I expected.

Asked 1 years ago, Updated 1 years ago, 488 views

For learning, I am creating a chess application that works with a browser using React+Typescript.The movement of a piece was able to move as I expected, but the method I made when I tried to implement the movement of the casting (the two pieces move at the same time, King and Luke) didn't work as I expected.

//--snip--
export abstract class Piece {
  position —OptionalPosition;
  absolute readonly type —PieceKind;
  everMoved=false;
  constructor(readonly player:player, file:file,rank:rank){
    This.position = new Position (file, rank);
  }
  equal (piece:piece): boolean {
    return(
      !!piece.position &
      !! This.position &
      piece.type===this.type&&
      piece.position.equal (this.position)
    );
  }

  moveTo(position:Position, gameState:GameState){
    This.position=position;
    if(!this.everMoved){
      This.everMoved=true;
    }
  }

  removed() {
    this.position = null;
  }

  abstract canMoveTo (gameState:GameState): Position[];
}

export type GameState=Piece[];
// --snip--

export class King extensions Piece {
  readonly type = "king";
  moveTo(position:Position, gameState:GameState){    
    if(!this.everMoved&&(position.file==="C"||position.file==="G")}
      constrank=this.position?.rank;
      if(!rank){
        return;
      }
      constrookPosition=
        position.file==="C"
          ? new Position ("A", rank)
          : new Position("H",rank);
      constrook=gameState.find(piece)=>
        piece.position?equal(rookPosition)
      );
      if(!rook){
        return;
      }
      rook.position=
        position.file==="C"
          ? new Position ("D", rank)
          : new Position("F",rank);
    }
    super.moveTo(position, gameState);
  }
 // --snip--
}
// --snip--
constuseGame=()=>{
  const [gameState, setGameState] = useState<GameState> (defaultGameState);
  // --snip--
  commandClick=useCallback(
    (
      position: Position,
      gameState —GameState,
      player: Player,
      select —Select
    ) = > {
     // --snip--
              select.moveTo(position, gameState);
              setGameState(gameState);
 
// --snip--

If you cast with this code, only the Luke moves and the King does not move.super.moveTo(position, gameState); If you place console.log(this.position) under this code, you will see the exact location of the king.console.log(gameState)Also

rook.position=
        position.file==="C"
          ? new Position ("D", rank)
          : new Position("F",rank);

If you comment out this code and execute it, King will behave as expected.Based on the above, I think there is a lack of understanding about the arrangement and the operation of objects, but I couldn't solve the problem by myself.I would appreciate it if you could tell me the problems and solutions.Thank you for your cooperation.

This is a postscript.Casling is implemented using the moveTo method in class King.

javascript reactjs typescript class

2022-09-30 22:04

1 Answers

Self-resolved while creating a short reproducible sample code
—— From Comments

That's right.Generally speaking, during the process of creating short reproducible sample code, the problem is clarified and debugging proceeds.


2022-09-30 22:04

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.