🎲 5x5 Tic-Tac-Toe
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

83 lines
1.6 KiB

5 years ago
  1. import React, { PropTypes } from 'react'
  2. import Tile from '../tile/Tile'
  3. import { connect } from 'react-redux'
  4. import { chooseMove } from '../../actions'
  5. import './board.scss'
  6. const tilesData = [
  7. { col: 0, row: 0 },
  8. { col: 1, row: 0 },
  9. { col: 2, row: 0 },
  10. { col: 3, row: 0 },
  11. { col: 4, row: 0 },
  12. { col: 0, row: 1 },
  13. { col: 1, row: 1 },
  14. { col: 2, row: 1 },
  15. { col: 3, row: 1 },
  16. { col: 4, row: 1 },
  17. { col: 0, row: 2 },
  18. { col: 1, row: 2 },
  19. { col: 2, row: 2 },
  20. { col: 3, row: 2 },
  21. { col: 4, row: 2 },
  22. { col: 0, row: 3 },
  23. { col: 1, row: 3 },
  24. { col: 2, row: 3 },
  25. { col: 3, row: 3 },
  26. { col: 4, row: 3 },
  27. { col: 0, row: 4 },
  28. { col: 1, row: 4 },
  29. { col: 2, row: 4 },
  30. { col: 3, row: 4 },
  31. { col: 4, row: 4 },
  32. ]
  33. function Board({
  34. onTileClick,
  35. boardData,
  36. }) {
  37. return (
  38. <div className="grid">
  39. <div className="gridList">
  40. {tilesData.map((tile) => (
  41. <Tile
  42. key={[tile.col, tile.row]}
  43. onClick={onTileClick}
  44. owner={(() => {
  45. return boardData[tile.row][tile.col]
  46. ? boardData[tile.row][tile.col]
  47. : null
  48. })()}
  49. {...tile}
  50. />
  51. ))}
  52. </div>
  53. </div>
  54. )
  55. }
  56. Board.propTypes = {
  57. onTileClick: PropTypes.func.isRequired,
  58. boardData: PropTypes.array.isRequired,
  59. }
  60. function mapStateToProps(state) {
  61. return {
  62. boardData: state.board.boardData,
  63. }
  64. }
  65. function mapDispatchToProps(dispatch) {
  66. return {
  67. onTileClick: (player, tile) => {
  68. dispatch(chooseMove(player, tile))
  69. },
  70. }
  71. }
  72. export default connect(
  73. mapStateToProps,
  74. mapDispatchToProps
  75. )(Board)