Chessboard.js not working with F7

Questions
1

I am trying to make Chessboard.js work with F7 (vanilla JS, bundle CSS & JS) on Cordova (Browser/Android), the following issues are driving me crazy:

  1. The piece disappear on click (solved with display: block !important; in the piece class.).
  2. The animation(fron Chessboard.js) doesnt work loading new positions.
  3. During drag and drop the piece disappear during the drag and show off on drop.

Commenting F7 CSS the animation + drag and drop works but the piece doesnt disappear from start position during drag.

Any help is very welcome.
I manage to make it work with Jquery Mobile, but F7 has many extra features and is under development.

https://chessboardjs.com/examples.html#4003

2

Would be good to see some more complete live example or maybe GitHub demo repo. But i tried to implement it in JSFiddle https://jsfiddle.net/tyn6j4zk/ and in general it works

3

This is an example with pieces, that shows the behaviour.

https://jsfiddle.net/s19knp7L/1/

With the hack to avoid piece disappearing on click.

.piece-417db {
display: block !important;
}

I saw in the developer tools at some point when start dragging thet display:none shows.

I suspect that some !important declaration is overwriting the chessboard.css behaviour.

4

This is actually the correct style that should be added:

.piece-417db {
  z-index: 10000!important;
}

Except this i can see everything works

5

This is the video:

6

Content of the Chess page:

<template>
<div class="page" data-name="about">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title">Chess</div>
      <div class="right">
        <a href="#" class="link" @click="doSomething">Shuffle</a>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div id="board"></div>
  </div>
</div>
</template>
<script>
export default {
  methods: {
    doSomething() {
      this.board.position({
        a4: 'bK',
        c4: 'wK',
        a7: 'wR'
      })
    }
  },
  on: {
    pageInit() {
      this.board = Chessboard('board', {
        draggable: true,
        dropOffBoard: 'trash',
        sparePieces: true,
        pieceTheme: 'static/chessboardjs/img/chesspieces/wikipedia/{piece}.png'
      })
    }
  }
};
</script>
7

Assuming you included Chessboard JS, CSS + jQuery

8

Oh my dear lord, it did the magic, very very happy to stick with F7 for this project. you make my day. no doubt about

1 Like