resources/js/components/tracker/Items.js

   1 import React from 'react';
   2
   3 import CountDisplay from './CountDisplay';
   4 import ToggleIcon from './ToggleIcon';
   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 controller={ToggleIcon.countController(4)} icons={['bottle']} />
 103                         <CountDisplay className="bottom-right" count={state.bottle || 0} />
 104                 </div>
 105                 <div className="item">
 106                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} />
 107                 </div>
 108                 <div className="item">
 109                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} />
 110                 </div>
 111                 <div className="item">
 112                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} />
 113                 </div>
 114                 <div className="item">
 115                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} />
 116                 </div>
 117         </div>;
 118 };
 119
 120 export default Items;