resources/js/components/rounds/SeedCodeInput.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Form } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   6 import i18n from '../../i18n';
   7
   8 const ALTTPR_CODES = [
   9         'big-key',
  10         'blue-boomerang',
  11         'bomb',
  12         'bombos',
  13         'book',
  14         'boots',
  15         'bottle',
  16         'bow',
  17         'bugnet',
  18         'cape',
  19         'compass',
  20         'ether',
  21         'flippers',
  22         'flute',
  23         'glove',
  24         'green-mail',
  25         'green-pendant',
  26         'green-potion',
  27         'hammer',
  28         'heart-container',
  29         'hookshot',
  30         'ice-rod',
  31         'lamp',
  32         'map',
  33         'mirror',
  34         'mirror-shield',
  35         'moonpearl',
  36         'mushroom',
  37         'powder',
  38         'quake',
  39         'shovel',
  40 ];
  41
  42 const SMR_CODES = [
  43         'ALCOON',
  44         'ATOMIC',
  45         'BEETOM',
  46         'BOYON',
  47         'BULL',
  48         'CHOOT',
  49         'COVERN',
  50         'EVIR',
  51         'FUNE',
  52         'GAMET',
  53         'GEEMER',
  54         'GERUTA',
  55         'HOLTZ',
  56         'KAGO',
  57         'NAMIHE',
  58         'OUM',
  59         'OWTCH',
  60         'POWAMP',
  61         'PUROMI',
  62         'PUYO',
  63         'RINKA',
  64         'RIPPER',
  65         'SCISER',
  66         'SKREE',
  67         'SOVA',
  68         'TATORI',
  69         'VIOLA',
  70         'WAVER',
  71         'YARD',
  72         'ZEBBO',
  73         'ZEELA',
  74         'ZOA',
  75 ];
  76
  77 const SeedCodeInput = ({
  78         className,
  79         game,
  80         name,
  81         onBlur,
  82         onChange,
  83         value,
  84 }) => {
  85         if (game === 'alttpr') {
  86                 const code_trans = ALTTPR_CODES
  87                         .map(code => ({ code, label: i18n.t(`icon.zelda.${code}`)}))
  88                         .sort((a, b) => a.label.localeCompare(b.label));
  89                 return <div
  90                         className={`${className} seed-code-input game-alttpr`}
  91                 >
  92                         {[0, 1, 2, 3, 4].map(num =>
  93                                 <Form.Select
  94                                         key={num}
  95                                         onBlur={onBlur}
  96                                         onChange={onChange}
  97                                         name={`${name}[${num}]`}
  98                                         value={(value && value[num]) || ''}
  99                                 >
 100                                         <option value=""></option>
 101                                         {code_trans.map(({ code, label }) =>
 102                                                 <option key={code} value={code}>{label}</option>
 103                                         )}
 104                                 </Form.Select>
 105                         )}
 106                 </div>;
 107         }
 108         if (game === 'smr') {
 109                 return <div
 110                         className={`${className} seed-code-input game-smr`}
 111                 >
 112                         {[0, 1, 2, 3].map(num =>
 113                                 <Form.Select
 114                                         key={num}
 115                                         onBlur={onBlur}
 116                                         onChange={onChange}
 117                                         name={`${name}[${num}]`}
 118                                         value={(value && value[num]) || ''}
 119                                 >
 120                                         <option value=""></option>
 121                                         {SMR_CODES.sort((a, b) => a.localeCompare(b)).map(code =>
 122                                                 <option key={code} value={code}>{code}</option>
 123                                         )}
 124                                 </Form.Select>
 125                         )}
 126                 </div>;
 127         }
 128         return <div
 129                 className={`${className} seed-code-input`}
 130         >
 131                 {[0, 1, 2, 3, 4].map(num =>
 132                         <Form.Control
 133                                 key={num}
 134                                 onBlur={onBlur}
 135                                 onChange={onChange}
 136                                 name={`${name}[${num}]`}
 137                                 value={(value && value[num]) || ''}
 138                         />
 139                 )}
 140         </div>;
 141 };
 142
 143 SeedCodeInput.propTypes = {
 144         className: PropTypes.string,
 145         game: PropTypes.string,
 146         name: PropTypes.string,
 147         onBlur: PropTypes.func,
 148         onChange: PropTypes.func,
 149         value: PropTypes.arrayOf(PropTypes.string),
 150 };
 151
 152 SeedCodeInput.defaultProps = {
 153         className: '',
 154         game: '',
 155         name: '',
 156         onBlur: null,
 157         onChange: null,
 158         value: [],
 159 };
 160
 161 export default withTranslation()(SeedCodeInput);