tile

import React, { Component } from 'react'

class Tile extends Component {
  render() {
    const { type, colors } = this.props
    switch (type) {
      case '1':
        return (
          <div style={{
            width: 0,
            height: 0,
            padding: 0,
            borderTop: `40px solid ${colors[0]}`,
            borderRight: `40px solid ${colors[1]}`,
            borderBottom: `40px solid ${colors[2]}`,
            borderLeft: `40px solid ${colors[3]}`,
          }} />
        )
      case '2':
        return (
          <div style={{
            width: 0,
            height: 0,
            padding: 0,
            borderTop: `80px solid ${colors[0]}`,
            borderLeft: `80px solid ${colors[1]}`,
          }} />
        )
      case '3':
        return (
          <div style={{
            width: 0,
            height: 0,
            padding: 0,
            borderBottom: `80px solid ${colors[0]}`,
            borderLeft: `80px solid ${colors[1]}`,
          }} />
        )
      case '4':
        return (
          <div style={{
            width: 0,
            height: 0,
            padding: 0,
            border: `40px solid ${colors[0]}`
          }} />
        )
    }
  }
}

class Tiles extends Component {
  render() {
    return (
      (new Array(24)).fill(0).map((_, idx) => (
        <Tile
          key={`tile-${idx}`}
          type={(1 + Math.floor(Math.random() * 4)) + ''}
          colors={this.get4RandomColors()}
        />
      ))
    )
  }
}

class App extends Component {
  get4RandomColors = () => {
    const colors = [
      'Blue',
      'Darkturquoise',
      'LimeGreen',
      '#B76FDB',
      'DarkGoldenRod',
      'Yellow',
    ]
    return [
      colors[Math.floor(Math.random() * colors.length)],
      colors[Math.floor(Math.random() * colors.length)],
      colors[Math.floor(Math.random() * colors.length)],
      colors[Math.floor(Math.random() * colors.length)],
    ]
  }

  render() {
    const tiles = (new Array(24)).fill(0).map((_, idx) => (
      <Tile
        key={`tile-${idx}`}
        type={(1 + Math.floor(Math.random() * 4)) + ''}
        colors={this.get4RandomColors()}
      />
    ))
    return (
      <div>
        <button type="button" onClick={() => this.setState({})}>
          Randomize
        </button>
        {tiles}
      </div>
    )
  }
}

export default App