feat: Add cheat mode and game won detect

src/App.css

@@ -7,13 +7,6 @@
   height: 60px;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 10px;
-  color: white;
-}
-
 .App-title {
   font-size: 1.5em;
 }
@@ -22,15 +15,6 @@
   font-size: large;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .Column-card {
   position: relative;
   margin-top: -100%;

src/App.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import './App.css'
+import ActionsButtons from './components/ActionButtons'
 import Header from './components/Header'
 import Stock from './components/Stock'
 import Talon from './components/Talon'
@@ -16,57 +17,58 @@ const isTouchDevice =
 const backend = isTouchDevice ? TouchBackend : HTML5Backend
 console.log('is touch device : ', isTouchDevice)
 
-const renderStock = (stock) => {
-  return (
-    <Grid.Column floated="left" width="2">
-      <Stock cards={stock} />
-    </Grid.Column>
-  )
-}
-
-const renderTalon = (talon) => {
-  return (
-    <Grid.Column floated="left" width="2">
-      <Talon cards={talon} />
-    </Grid.Column>
-  )
-}
-
-const renderFoundation = (foundations) => {
-  return foundations.map((f, i) => {
+const App = ({ cards, game }) => {
+  const renderStock = () => {
     return (
-      <Grid.Column key={i} floated="right" width="2">
-        <Foundation id={i} cards={foundations[i]} />
+      <Grid.Column floated="left" width="2">
+        <Stock stock={cards.stock} />
       </Grid.Column>
     )
-  })
-}
+  }
 
-const renderColumns = (columns) => {
-  return columns.map((c, i) => {
+  const renderTalon = () => {
     return (
-      <Grid.Column key={i} floated="left" width="2">
-        <Column id={i} cards={columns[i]} />
+      <Grid.Column floated="left" width="2">
+        <Talon talon={cards.talon} />
       </Grid.Column>
     )
-  })
-}
+  }
+
+  const renderFoundation = () => {
+    return cards.foundations.map((f, i) => {
+      return (
+        <Grid.Column key={i} floated="right" width="2">
+          <Foundation id={i} foundation={cards.foundations[i]} game={game} />
+        </Grid.Column>
+      )
+    })
+  }
+
+  const renderColumns = () => {
+    return cards.columns.map((c, i) => {
+      return (
+        <Grid.Column key={i} floated="left" width="2">
+          <Column id={i} column={cards.columns[i]} game={game} />
+        </Grid.Column>
+      )
+    })
+  }
 
-const App = ({ cards }) => {
   //console.log('cards : ', cards)
   return (
     <div className="App">
+      <Header />
+      <ActionsButtons game={game} />
       <DndProvider backend={backend}>
-        <Header />
         <Container>
           <Grid columns="equal">
             <Grid.Row>
-              {renderStock(cards.stock)}
-              {renderTalon(cards.talon)}
+              {renderStock()}
+              {renderTalon()}
               <Grid.Column width="4" />
-              {renderFoundation(cards.foundations)}
+              {renderFoundation()}
             </Grid.Row>
-            <Grid.Row>{renderColumns(cards.columns)}</Grid.Row>
+            <Grid.Row>{renderColumns()}</Grid.Row>
           </Grid>
         </Container>
       </DndProvider>
@@ -75,8 +77,9 @@ const App = ({ cards }) => {
 }
 
 const mapStateToProps = (state) => {
-  const cards = state
-  return cards
+  console.log('state : ', state)
+  const { cards, game } = state
+  return { cards, game }
 }
 
 export default connect(mapStateToProps)(App)

src/components/Card.jsx

@@ -2,22 +2,22 @@ import React from 'react'
 import { Image, Segment } from 'semantic-ui-react'
 import { connect } from 'react-redux'
 import { useDrag } from 'react-dnd'
-import { Types } from '../lib/consts'
+import { Types } from '../game/consts'
 import { isLastContainerCard } from '../redux/helpers'
-import { findAutoMoveTarget } from '../redux/game'
-import {  moveCard } from '../redux/actions/actions'
+import { findAutoMoveTarget } from '../game/game'
+import { moveCard } from '../redux/actions/actions'
 
 const mapStateToProps = (state, ownProps) => {
-  const { cards } = state
-  return { 
+  const { cards, game } = state
+  return {
     isLastCard: isLastContainerCard(cards, ownProps),
     findTarget: () => {
-      return findAutoMoveTarget(cards, ownProps)
+      return findAutoMoveTarget(cards, game, ownProps)
     }
   }
 }
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch) => {
   return {
     autoMoveCard: (card, target) => {
       dispatch(moveCard(card, target))
@@ -39,7 +39,7 @@ const Card = ({
 }) => {
   const [{ isDragging }, drag] = useDrag({
     item: { type: Types.CARD, value, color, container },
-    collect: monitor => ({
+    collect: (monitor) => ({
       isDragging: !!monitor.isDragging()
     }),
     canDrag: () => {
@@ -50,13 +50,13 @@ const Card = ({
   const style = {
     backgroundColor: 'green'
   }
-  
+
   const cardPath = visible
     ? './assets/cards/' + color + '_' + value + '.png'
     : './assets/cards/card_back.png'
 
   const autoMove = () => {
-    const card = {value, color, container}
+    const card = { value, color, container }
     const target = findTarget(card)
     if (target) {
       autoMoveCard(card, target)
@@ -85,13 +85,10 @@ const Card = ({
       <Segment style={canDrop && isLastCard ? style : null}>
         <Image src={cardPath} alt="" onClick={fireOnClick} size="tiny" />
       </Segment>
-  
-      {children} 
+
+      {children}
     </div>
   )
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Card)
+export default connect(mapStateToProps, mapDispatchToProps)(Card)

src/components/Column.jsx

@@ -1,54 +1,64 @@
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
+import { useDrop } from 'react-dnd'
+import { Segment } from 'semantic-ui-react'
 import {
   moveCard,
-  revealLastColumnCard
+  revealLastColumnCard,
+  checkGameWon
 } from '../redux/actions/actions'
-import { canPlayInColumn } from '../redux/game'
+import { canPlayInColumn } from '../game/game'
 import Card from './Card'
 import Empty from './Empty'
-import { Types } from '../lib/consts'
-import { Segment } from 'semantic-ui-react'
-import { useDrop } from 'react-dnd'
+import { Types } from '../game/consts'
 
 const mapStateToProps = (state, ownProps) => {
-  const { cards } = state
-  return { 
-    canDropInColumn: (item) => canPlayInColumn(cards, item, ownProps)
+  const { cards, game } = state
+  return {
+    getAllColumnsCards: () => cards[Types.COLUMNS],
+    column: cards[Types.COLUMNS][ownProps.id],
+    canDropInColumn: (item) => canPlayInColumn(cards, game, item, ownProps)
   }
 }
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch) => {
   return {
     dropCard: (id, card) => {
       dispatch(moveCard(card, { type: Types.COLUMNS, id }))
     },
-    makeLastCardVisible: id => {
+    makeLastCardVisible: (id) => {
       dispatch(revealLastColumnCard(id))
+    },
+    checkGameWon: (columns) => {
+      console.log('checkgame columns : ', columns)
+      dispatch(checkGameWon(columns))
     }
   }
 }
 
 const Column = ({
   id,
-  cards,
+  column,
+  getAllColumnsCards,
   dropCard,
   makeLastCardVisible,
   canDropInColumn,
+  checkGameWon
 }) => {
   const [{ canDrop }, drop] = useDrop({
     accept: [Types.CARD],
-    drop: item => dropCard(id, item),
-    collect: monitor => ({
+    drop: (item) => dropCard(id, item),
+    collect: (monitor) => ({
       canDrop: !!monitor.canDrop()
     }),
-    canDrop: item => canDropInColumn(item)
+    canDrop: (item) => canDropInColumn(item)
   })
 
   useEffect(() => {
-    // Make last column cards visible
-    if (cards.length > 0 && !cards[cards.length - 1].visible) {
+    // Make last column card visible
+    if (column.length > 0 && !column[column.length - 1].visible) {
       makeLastCardVisible(id)
+      checkGameWon(getAllColumnsCards())
     }
   })
 
@@ -65,41 +75,38 @@ const Column = ({
           container={{ type: Types.COLUMNS, id, position }}
           canDrop={canDrop}
         >
-        {children}
+          {children}
         </Card>
       </div>
     )
   }
 
-  const buildColumn = (cards, children) => {
-    if (cards.length < 1) {
+  const buildColumn = (column, children) => {
+    if (column.length < 1) {
       return children
     }
-    const lastCard = cards[cards.length -1]
-    const newCardsTree = renderCard(lastCard, cards.length - 1, children)
-    cards.splice(cards.length - 1)
-    return buildColumn(cards, newCardsTree)
+    const lastCard = column[column.length - 1]
+    const newCardsTree = renderCard(lastCard, column.length - 1, children)
+    column.splice(column.length - 1)
+    return buildColumn(column, newCardsTree)
   }
 
   const renderColumn = () => {
-    if (cards.length < 1) {
+    if (column.length < 1) {
       return <Empty canDrop={canDrop} />
     }
-    const cardsToRender = [...cards]
-    const tree = buildColumn(cardsToRender, null)
+    const columnToRender = [...column]
+    const tree = buildColumn(columnToRender, null)
     return tree
   }
 
   return (
     <Segment.Group>
       <div ref={drop}>
-        <div>{renderColumn(id, cards, canDrop)}</div>
+        <div>{renderColumn(id, column, canDrop)}</div>
       </div>
     </Segment.Group>
   )
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Column)
+export default connect(mapStateToProps, mapDispatchToProps)(Column)

src/components/Empty.jsx

@@ -4,7 +4,11 @@ import { Segment } from 'semantic-ui-react'
 const Empty = ({ canDrop, onClick }) => {
   return (
     <Segment
-      style={{ height: 136, width: 116, backgroundColor: canDrop ? 'green' : 'white' }}
+      style={{
+        height: 136,
+        width: 116,
+        backgroundColor: canDrop ? 'green' : 'white'
+      }}
       onClick={onClick}
     />
   )