React beautifull dnd poker game need help...

hey I am trying to make a game like poker but stuck its a drag and drop and hen i drop a card in drop zone another same card comes up in drag zone and i ant to prevent it i am using react-beautifull-dnd the cards should be in the sequen ace,king,queen,jack,one,two,three,four,fivev,six,seven,eight,nine,ten for the check a condition is already implemented just cant figure out how to stop the same card which is dropped in dropzone

below is index.js component

import React from 'react'
import ReactDOM from 'react-dom'
import '@atlaskit/css-reset'
import { DragDropContext } from 'react-beautiful-dnd'
import styled from 'styled-components'

import initialData from './initial-data'
import Column from './column'

const Container = styled.div
display:flex;


class App extends React.Component {
state = initialData

onDragEnd = result => {
const { destination, source, draggableId } = result

if (!destination) {
  return
}

if (
  destination.droppableId === source.droppableId &&
  destination.index === source.index
) {
  return
}

console.log("src",source);

const start = this.state.columns[source.droppableId]
 console.log(start)
const finish = this.state.columns[destination.droppableId]
// console.log(finish)
//   console.log(start===finish)
if (start === finish) {
  const newTaskIds = Array.from(start.taskIds)
  newTaskIds.splice(source.index, 1)
  newTaskIds.splice(destination.index, 0, draggableId)

  const newColumn = {
    ...start,
    taskIds: newTaskIds
  }

  const newState = {
    ...this.state,
    columns: {
      ...this.state.columns,
      [newColumn.id]: newColumn
    }
  }

  this.setState(newState)
  return
}
const pattren = ['task-1', 'task-2', 'task-3', 'task-4','task-5','task-6','task-7','task-8','task-9','task-10','task-11','task-12','task-13'];
// Moving from one list to another
const startTaskIds = Array.from(start.taskIds)
console.log(Array.from(start.taskIds))
console.log("start",source.index)
startTaskIds.splice(source.index, 1)
// const pickeditem=startTaskIds[1];

const newStart = {
  ...start,
  taskIds: startTaskIds
}

console.log(startTaskIds)
const finishTaskIds = Array.from(finish.taskIds)
console.log(Array.from(finish.taskIds))
finishTaskIds.splice(destination.index, 0, draggableId)
const newFinish = {
...finish,
taskIds: finishTaskIds
}
console.log(finishTaskIds)
console.log("lastind",finishTaskIds[finishTaskIds.length-2])
console.log("dragable",draggableId)
// if(finishTaskIds[finishTaskIds.length-1<draggableId])
if(finishTaskIds.indexOf(draggableId)===pattren.indexOf(draggableId)){
console.log(finishTaskIds.length-1<draggableId)
console.log('check',(finishTaskIds.indexOf(draggableId)===pattren.indexOf(draggableId)));
const newState = {
...this.state,
columns: {
...this.state.columns,
[newStart.id]: newStart,
[newFinish.id]: newFinish
}
}

this.setState(newState)
// console.log("did",draggableId)
// console.log("state",this.state.tasks)
// const items =this.state.tasks;
// const valueToRemove = 'task-1';
// const filteredItems = items.filter(function(item) {
//     return item !== valueToRemove
//   })
// this.state.tasks=filteredItems;
// var array=this.state.tasks;
// var index=

}else{
return;
}
}

render() {
return (


{this.state.columnOrder.map(columnId => {
const column = this.state.columns[columnId]
const tasks = column.taskIds.map(
taskId => this.state.tasks[taskId]
)

        return (
          <Column key={column.id} column={column} tasks={tasks} />
        )
      })}
    </Container>
  </DragDropContext>
)

}
}

const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)

below is column.js component

import React from 'react'
import styled from 'styled-components'
import Task from './task'
import { Droppable } from 'react-beautiful-dnd'

const Container = styled.div`
margin: 8px;
border: 1px solid lightgrey;
border-radius: 2px;
width: 220px;

display: flex;
flex-direction: column;

const Title = styled.h3
padding: 8px;

const TaskList = styled.div
padding: 8px;
transition: background-color 0.2s ease;
background-color: ${props =>
props.isDraggingOver ? 'skyblue' : 'white'}
flex-grow: 1;
min-height: 100px;
`
// const getShuffledArr = arr => {
// if (arr.length === 1) {return arr};
// const rand = Math.floor(Math.random() * arr.length);
// return [arr[rand], ...getShuffledArr(arr.filter((_, i) => i != rand))];
// };

// function shuffleArray(array) {
// let i = array.length - 1;
// for (; i > 0; i--) {
// const j = Math.floor(Math.random() * (i ));
// const temp = array[i];
// array[i] = array[j];
// array[j] = temp;
// }
// return array;
// }

const shuffle =(arra1) => {
var ctr = arra1.length, temp, index;

// While there are elements in the array
while (ctr > 0) {
// Pick a random index
index = Math.floor(Math.random() * ctr);
// Decrease ctr by 1
ctr--;
// And swap the last element with it
temp = arra1[ctr];
arra1[ctr] = arra1[index];
arra1[index] = temp;
}
return arra1;
}
export default class Column extends React.Component {

componentWillMount() {

}
render() {
// const shuffledArr = getShuffledArr(this.props.tasks);

const shuffledArr = shuffle(this.props.tasks);
return (

  <Container>
    <Title>{this.props.column.title}</Title>
    <Droppable droppableId={this.props.column.id} type="TASK">
      {(provided, snapshot) => (
        <TaskList
          ref={provided.innerRef}
          {...provided.droppableProps}
          isDraggingOver={snapshot.isDraggingOver}
        >
          {shuffledArr.map((task, index) => (
            <Task key={task.id} task={task} index={index} />
          ))}
          {provided.placeholder}
        </TaskList>
      )}
    </Droppable>
  </Container>
)

}

}

below is task .js component

import React from 'react'
import styled from 'styled-components'
import { Draggable } from 'react-beautiful-dnd'

const Container = styled.div
border: 1px solid lightgrey;
border-radius: 2px;
padding: 8px;
margin-bottom: 8px;
transition: background-color 0.2s ease;
background-color: ${props =>
props.isDragDisabled
? 'lightgrey'
: props.isDragging
? 'lightgreen'
: 'white'};


export default class Task extends React.Component {
render() {
// const isDragDisabled = this.props.task.id === 'task-1'
return (
draggableId={this.props.task.id}
index={this.props.index}
// isDragDisabled={isDragDisabled}
>
{(provided, snapshot) => (
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
isDragging={snapshot.isDragging}
// isDragDisabled={isDragDisabled}
>
{this.props.task.content}

      </Container>
    )}
  </Draggable>
)

}
}

if any one can help it would be really help full I am on very basic level of learning react

Comments

[Sung M. Kim]

Thank you @Amish for the post.

Would you update the code formatting & syntax highlights to provide a better experience for readers?

You can check out the Editor Guide on how to format 🙂