resources/js/components/tracker/Items.js

   1 import React from 'react';
   2
   3 import ToggleIcon from './ToggleIcon';
   4 import { BOTTLE_CONTENTS } from '../../helpers/tracker';
   5 import { useTracker } from '../../hooks/tracker';
   6
   7 const Items = () => {
   8         const { state } = useTracker();
   9
  10         return <div className="items">
  11                 <div className="item">
  12                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} />
  13                 </div>
  14                 <div className="item">
  15                         <ToggleIcon
  16                                 className="left"
  17                                 controller={ToggleIcon.simpleController}
  18                                 icons={['blue-boomerang']}
  19                         />
  20                         <ToggleIcon
  21                                 className="right"
  22                                 controller={ToggleIcon.simpleController}
  23                                 icons={['red-boomerang']}
  24                         />
  25                 </div>
  26                 <div className="item">
  27                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} />
  28                 </div>
  29                 <div className="item">
  30                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} />
  31                 </div>
  32                 <div className="item">
  33                         <ToggleIcon
  34                                 className="bottom-left"
  35                                 controller={ToggleIcon.simpleController}
  36                                 icons={['mushroom']}
  37                         />
  38                         <ToggleIcon
  39                                 className="top-right"
  40                                 controller={ToggleIcon.simpleController}
  41                                 icons={['powder']}
  42                         />
  43                 </div>
  44                 <div className="item">
  45                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} />
  46                 </div>
  47                 <div className="item">
  48                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} />
  49                 </div>
  50                 <div className="item">
  51                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} />
  52                         {state['mm-medallion'] === 'bombos' ?
  53                                 <span className="med-display bottom-left">MM</span>
  54                         : null}
  55                         {state['tr-medallion'] === 'bombos' ?
  56                                 <span className="med-display bottom-right">TR</span>
  57                         : null}
  58                 </div>
  59                 <div className="item">
  60                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} />
  61                         {state['mm-medallion'] === 'ether' ?
  62                                 <span className="med-display bottom-left">MM</span>
  63                         : null}
  64                         {state['tr-medallion'] === 'ether' ?
  65                                 <span className="med-display bottom-right">TR</span>
  66                         : null}
  67                 </div>
  68                 <div className="item">
  69                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} />
  70                         {state['mm-medallion'] === 'quake' ?
  71                                 <span className="med-display bottom-left">MM</span>
  72                         : null}
  73                         {state['tr-medallion'] === 'quake' ?
  74                                 <span className="med-display bottom-right">TR</span>
  75                         : null}
  76                 </div>
  77                 <div className="item">
  78                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} />
  79                 </div>
  80                 <div className="item">
  81                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} />
  82                 </div>
  83                 <div className="item">
  84                         <ToggleIcon
  85                                 className="bottom-left"
  86                                 controller={ToggleIcon.simpleController}
  87                                 icons={['shovel']}
  88                         />
  89                         <ToggleIcon
  90                                 className="top-right"
  91                                 controller={ToggleIcon.simpleController}
  92                                 icons={['flute', 'duck']}
  93                         />
  94                 </div>
  95                 <div className="item">
  96                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} />
  97                 </div>
  98                 <div className="item">
  99                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} />
 100                 </div>
 101                 <div className="item">
 102                         <ToggleIcon
 103                                 className="top-left"
 104                                 controller={ToggleIcon.bottleController('bottle-1')}
 105                                 icons={BOTTLE_CONTENTS}
 106                         />
 107                         <ToggleIcon
 108                                 className="top-right"
 109                                 controller={ToggleIcon.bottleController('bottle-2')}
 110                                 icons={BOTTLE_CONTENTS}
 111                         />
 112                         <ToggleIcon
 113                                 className="bottom-left"
 114                                 controller={ToggleIcon.bottleController('bottle-3')}
 115                                 icons={BOTTLE_CONTENTS}
 116                         />
 117                         <ToggleIcon
 118                                 className="bottom-right"
 119                                 controller={ToggleIcon.bottleController('bottle-4')}
 120                                 icons={BOTTLE_CONTENTS}
 121                         />
 122                 </div>
 123                 <div className="item">
 124                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} />
 125                 </div>
 126                 <div className="item">
 127                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} />
 128                 </div>
 129                 <div className="item">
 130                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} />
 131                 </div>
 132                 <div className="item">
 133                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} />
 134                 </div>
 135         </div>;
 136 };
 137
 138 export default Items;