vitogit / vue-chessboard

Chessboard vue component to load positions, create positions and see threats
http://vitomd.com/vue-chessboard-examples/
GNU General Public License v3.0
165 stars 50 forks source link

isPromotion on extended component #25

Closed larskuerten closed 3 years ago

larskuerten commented 3 years ago

IsPromotion method isnt working in the extended component (newboard)

vitogit commented 3 years ago

@larskuerten Can you give me more details? If you are referring to the extended component example, in the aiNextMove you are probably right that I didn't implement the promotion logic because it's just a simple example to show how to extend the component.

      aiNextMove() {
        let moves = this.game.moves({verbose: true})
        let randomMove = moves[Math.floor(Math.random() * moves.length)]
        this.game.move(randomMove)

        this.board.set({
          fen: this.game.fen(),
          turnColor: this.toColor(),
          movable: {
            color: this.toColor(),
            dests: this.possibleMoves(),
            events: { after: this.userPlay()},
          }
        });
      },
larskuerten commented 3 years ago

In the userPlay method, but I managed to make promotion work with piece selection (quasar)

vitogit commented 3 years ago

Cool @larskuerten . Would be cool if you can share your solution

larskuerten commented 3 years ago

Of course, Quasar is the UI for the project, so the following code will call the dialog plugin from Quasar, I can provide more details if required.

userPlay() {
      let rolesColors = Object.assign({}, this.board.state.pieces);
      return (orig, dest) => {
        if (
          (orig.match(/\d/)[0] == 7 &&
            rolesColors[orig].role == 'pawn' &&
            dest.match(/\d/)[0] == 8) ||
          (orig.match(/\d/)[0] == 2 &&
            rolesColors[orig].role == 'pawn' &&
            dest.match(/\d/)[0] == 1)
        ) {
          let p = new Promise((resolve, reject) => {
            this.$q.dialog(this.options).onOk((data) => { //Quasar dialog plugin
              resolve(data);
            });
          });
          async function f() {
            let cas = await p;
            return cas;
          }
          f().then((res) => {
            this.move(orig, dest, res);
          });
        } else {
          this.move(orig, dest, 'q');
        }
      };
    }
vitogit commented 3 years ago

Thanks for sharing, I didn't know about Quasar.

larskuerten commented 3 years ago

Quasar is nice, and will update to Vue3 till end of february

larskuerten commented 3 years ago

Workaround to deal with promotions (Quasar UI)