import React , { Component } from "react" ; import RACES from "../icons/races" ; import CLASSES from "../constants/classes" ; import { IAllRaces } from "../constants/interfaces" ; interface MyProps { onClick : ( e : React . MouseEvent < HTMLButtonElement , MouseEvent > , race : IAllRaces ) => void ; } export default class RaceSelection extends Component < MyProps > { /**
     * If a race was selected, clear BOArea and BuildOrder and reset everything
     * Then load the right race in ActionSelection
     */ onClick = ( e , race ) : void => { this . props . onClick ( e , race ) ; } ; render ( ) { const classString = `${ CLASSES . raceIcon }` ; const allRaces = [ "protoss" , "terran" , "zerg" ] ; const races = allRaces . map ( ( race , _index ) => { const item = RACES [ race ] ; return ( < button id = { race } key = { item . name } className = { classString } onClick = { ( e ) => this . onClick ( e , race ) } > < img src = { require ( "../icons/png/" + item . path ) . default } alt = { item . name } / > < /button>); } ) ; return < div className = { "flex flex-col" } > { races } < /div>; } }