smoothly moving pieces - as done on chess.com

[bpalmer661]

I am would like to get my chess pieces to move like on chess.com which seems to be a bit better user experience.

as of now when I drag and drop a piece it goes back to the square it came from then is re-uploaded to the square I drop it on (on a legal move)

is there anyway to have the piece be hidden after drop it on a legal move? and then only appear on the square I dropped it on? and not appearing on the square it came from ?

import React, { useEffect, useState } from 'react'
import Square from './Square'
import Piece from './Piece'
import { useDrop } from 'react-dnd'
import { handleMove } from './Game'
import { gameSubject } from './Game'
import Promote from './Promote'

import { useSelector } from 'react-redux'

import { auth, db } from './firebase'

import firebase from "firebase/app";
import { useDispatch } from "react-redux";



export default function BoardSquare({ piece, black, position,isFromSquare,isToSquare}) {

  const dispatch = useDispatch();

  const [promotion, setPromotion] = useState(null)

var whiteTime = useSelector(state => state.user.whiteTime)

var blackTime = useSelector(state => state.user.blackTime)


const DateNowFireStoreServerTimeStamp = useSelector(state => state.user.DateNowFireStoreServerTimeStamp)



const FirestoreServerTimeStampForLastMove = useSelector(state => state.user.FirestoreServerTimeStampForLastMove)



var gameStarted = useSelector(state => state.user.status)

  
  const [, drop] = useDrop({
    
    accept: 'piece',
    drop: (item) => {

      if (gameStarted === "waiting"){
        return
      }

      const [fromPosition] = item.id.split('_')

      const pieceType = item.id.split('_')[1]

    var DateNowFireStoreServerTimeStamp;

var ref = db.collection("users").doc(auth.currentUser.email).collection("serverTimestampOnMove").doc("serverTimestampOnMove")
    
    ref.set({ serverTimestamp: firebase.firestore.FieldValue.serverTimestamp()}).then(()=>{


      ref.get() 
      .then(doc => {

        DateNowFireStoreServerTimeStamp = doc.data().serverTimestamp
                  
        if(DateNowFireStoreServerTimeStamp){

    var difference = DateNowFireStoreServerTimeStamp - FirestoreServerTimeStampForLastMove 

    var convertdifferenceToMatch1000perSecond = difference * 1000
    
        whiteTime = whiteTime - convertdifferenceToMatch1000perSecond          
        blackTime = blackTime - convertdifferenceToMatch1000perSecond

           handleMove(fromPosition, position,whiteTime,blackTime,DateNowFireStoreServerTimeStamp, pieceType)
      
        
        } 
       })                                                                                                                                              
    })

  

    }  
  })




  useEffect(() => {
    const subscribe = gameSubject.subscribe(
      ({ pendingPromotion }) =>
        pendingPromotion && pendingPromotion.to === position
          ? setPromotion(pendingPromotion)
          : setPromotion(null)

          
    )

    return () => subscribe.unsubscribe()

  }, [position])
  
  return (
    <div className="board-square" ref={drop}>
      <Square black={black} 
     isFromSquare={isFromSquare}
     isToSquare={isToSquare}

      
      >
        {promotion ? (
          <Promote promotion={promotion}
           fromPosition={null}
           position={position}
           //OLD CODING below - new coding will convert the time in the next function
          // whiteTime={whiteTime - (DateNowFireStoreServerTimeStamp - FirestoreServerTimeStampForLastMove)}
          // blackTime={blackTime - (DateNowFireStoreServerTimeStamp - FirestoreServerTimeStampForLastMove)}
          //NEW CODE 

        //  34r~) continue on below pass these values then do the timestamp calculations in a following func 

          whiteTime={whiteTime}
          blackTime={blackTime}

          DateNowFireStoreServerTimeStamp={DateNowFireStoreServerTimeStamp}
          pieceType={"q"}
          FirestoreServerTimeStampForLastMove={FirestoreServerTimeStampForLastMove}



           />
        ) : piece ? (
          <Piece piece={piece} position={position} />
        ) : null}
      </Square>
    </div>
  )
}

[SuspenseFallback]

Im not a contributor but chess.js is only the chess logic, not the board.

[anti-duhring]

You can do this using react-reanimated library.

Check my repo: https://github.com/anti-duhring/chess

[yahayaohinoyi]

I think what you want here is a change in the actual UI code. I guess you're using one like react-chessboard. You could add an animated 'prop' or create an animated to that wraps around their UI component