DEV Community

Amish
Amish

Posted on

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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=
Enter fullscreen mode Exit fullscreen mode

}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>
)
Enter fullscreen mode Exit fullscreen mode

}
}

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() {
Enter fullscreen mode Exit fullscreen mode

}
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>
)
Enter fullscreen mode Exit fullscreen mode

}

}

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>
)
Enter fullscreen mode Exit fullscreen mode

}
}

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

Top comments (2)

Collapse
 
dance2die profile image
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 🙂

Collapse
 
mark1654 profile image
Mark

Lately I have some free time and I wanted to try something new to relax. Friends recommended several online casino sites, but I liked one the most. I went to the site betandreas-aze.net and was pleasantly surprised by the choice of games and bonuses. The interface is convenient, and the bonuses turned out to be a great start for the game. Now I spend my free evenings here, and I can say - this is really worthwhile entertainment.