React beautifull dnd  poker game need help...
Tags: react, javascript
Published: 2019-07-29 16:07:35

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 (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Container>
          {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(<App />, 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 (
      <Draggable
        draggableId={this.props.task.id}
        index={this.props.index}
       // isDragDisabled={isDragDisabled}
      >
        {(provided, snapshot) => (
          <Container
            {...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