🎲 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.

64 lines
1.4 KiB

5 years ago
  1. import React, { PropTypes } from 'react'
  2. import FlatButton from 'material-ui/FlatButton'
  3. import SvgIcon from 'material-ui/SvgIcon'
  4. /* eslint-disable max-len */
  5. const CircleIcon = (props) => (
  6. <SvgIcon {...props}>
  7. <path d="M0 0h24v24H0z" fill="none" />
  8. <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
  9. </SvgIcon>
  10. )
  11. const CloseIcon = (props) => (
  12. <SvgIcon {...props}>
  13. <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
  14. <path d="M0 0h24v24H0z" fill="none" />
  15. </SvgIcon>
  16. )
  17. const EmptyIcon = (props) => (
  18. <SvgIcon {...props}>
  19. <path d="M0 0h24v24H0z" fill="none" />
  20. </SvgIcon>
  21. )
  22. /* eslint-enable max-len */
  23. function plotIcon(owner) {
  24. return owner === 'player'
  25. ? <CircleIcon />
  26. : <CloseIcon />
  27. }
  28. function Tile({
  29. onClick,
  30. owner,
  31. col,
  32. row,
  33. }) {
  34. return (
  35. <FlatButton
  36. backgroundColor="#cee5fb"
  37. className="gridTile"
  38. icon={owner ? plotIcon(owner) : <EmptyIcon />}
  39. onTouchTap={() => {
  40. onClick('player', { row, col })
  41. }}
  42. rippleColor="#288feb"
  43. style={{
  44. height: '50px',
  45. minWidth: '50px',
  46. margin: '2px',
  47. }}
  48. />
  49. )
  50. }
  51. Tile.propTypes = {
  52. onClick: PropTypes.func.isRequired,
  53. col: PropTypes.number.isRequired,
  54. row: PropTypes.number.isRequired,
  55. owner: PropTypes.string,
  56. }
  57. export default Tile