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         'somaria',
  41 ];
  42
  43 const SMR_CODES = [
  44         'ALCOON',
  45         'ATOMIC',
  46         'BEETOM',
  47         'BOYON',
  48         'BULL',
  49         'CHOOT',
  50         'COVERN',
  51         'EVIR',
  52         'FUNE',
  53         'GAMET',
  54         'GEEMER',
  55         'GERUTA',
  56         'HOLTZ',
  57         'KAGO',
  58         'NAMIHE',
  59         'OUM',
  60         'OWTCH',
  61         'POWAMP',
  62         'PUROMI',
  63         'PUYO',
  64         'RINKA',
  65         'RIPPER',
  66         'SCISER',
  67         'SKREE',
  68         'SOVA',
  69         'TATORI',
  70         'VIOLA',
  71         'WAVER',
  72         'YARD',
  73         'ZEBBO',
  74         'ZEELA',
  75         'ZOA',
  76 ];
  77
  78 const SeedCodeInput = ({
  79         className,
  80         game,
  81         name,
  82         onBlur,
  83         onChange,
  84         value,
  85 }) => {
  86         if (game === 'alttpr') {
  87                 const code_trans = ALTTPR_CODES
  88                         .map(code => ({ code, label: i18n.t(`icon.zelda.${code}`)}))
  89                         .sort((a, b) => a.label.localeCompare(b.label));
  90                 return <div
  91                         className={`${className} seed-code-input game-alttpr`}
  92                 >
  93                         {[0, 1, 2, 3, 4].map(num =>
  94                                 <Form.Select
  95                                         key={num}
  96                                         onBlur={onBlur}
  97                                         onChange={onChange}
  98                                         name={`${name}[${num}]`}
  99                                         value={(value && value[num]) || ''}
 100                                 >
 101                                         <option value=""></option>
 102                                         {code_trans.map(({ code, label }) =>
 103                                                 <option key={code} value={code}>{label}</option>
 104                                         )}
 105                                 </Form.Select>
 106                         )}
 107                 </div>;
 108         }
 109         if (game === 'smr') {
 110                 return <div
 111                         className={`${className} seed-code-input game-smr`}
 112                 >
 113                         {[0, 1, 2, 3].map(num =>
 114                                 <Form.Select
 115                                         key={num}
 116                                         onBlur={onBlur}
 117                                         onChange={onChange}
 118                                         name={`${name}[${num}]`}
 119                                         value={(value && value[num]) || ''}
 120                                 >
 121                                         <option value=""></option>
 122                                         {SMR_CODES.sort((a, b) => a.localeCompare(b)).map(code =>
 123                                                 <option key={code} value={code}>{code}</option>
 124                                         )}
 125                                 </Form.Select>
 126                         )}
 127                 </div>;
 128         }
 129         return <div
 130                 className={`${className} seed-code-input`}
 131         >
 132                 {[0, 1, 2, 3, 4].map(num =>
 133                         <Form.Control
 134                                 key={num}
 135                                 onBlur={onBlur}
 136                                 onChange={onChange}
 137                                 name={`${name}[${num}]`}
 138                                 value={(value && value[num]) || ''}
 139                         />
 140                 )}
 141         </div>;
 142 };
 143
 144 SeedCodeInput.propTypes = {
 145         className: PropTypes.string,
 146         game: PropTypes.string,
 147         name: PropTypes.string,
 148         onBlur: PropTypes.func,
 149         onChange: PropTypes.func,
 150         value: PropTypes.arrayOf(PropTypes.string),
 151 };
 152
 153 SeedCodeInput.defaultProps = {
 154         className: '',
 155         game: '',
 156         name: '',
 157         onBlur: null,
 158         onChange: null,
 159         value: [],
 160 };
 161
 162 export default withTranslation()(SeedCodeInput);