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 transform = (x, y, s) => `translate(${x * 0.2} ${y * 0.2}) scale(${(s || 0.85) * 0.2})`;
   8
   9 const Items = () => {
  10         const { state } = useTracker();
  11
  12         return <>
  13                 <g transform={transform(0.5, 0.5)}>
  14                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} svg />
  15                 </g>
  16                 <g transform={transform(1.35, 0.5)}>
  17                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['blue-boomerang']} svg />
  18                 </g>
  19                 <g transform={transform(1.85, 0.5)}>
  20                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['red-boomerang']} svg />
  21                 </g>
  22                 <g transform={transform(2.5, 0.5)}>
  23                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} svg />
  24                 </g>
  25                 <g transform={transform(3.5, 0.5)}>
  26                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} svg />
  27                 </g>
  28                 <g transform={transform(4.5, 0.5)}>
  29                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['powder']} svg />
  30                 </g>
  31                 <g transform={transform(0.5, 1.5)}>
  32                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} svg />
  33                 </g>
  34                 <g transform={transform(1.5, 1.5)}>
  35                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} svg />
  36                 </g>
  37                 <g transform={transform(2.5, 1.5)}>
  38                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} svg />
  39                         {state['mm-medallion'] === 'bombos' ?
  40                                 <text className="med-display bottom-left">MM</text>
  41                         : null}
  42                         {state['tr-medallion'] === 'bombos' ?
  43                                 <text className="med-display bottom-right">TR</text>
  44                         : null}
  45                 </g>
  46                 <g transform={transform(3.5, 1.5)}>
  47                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} svg />
  48                         {state['mm-medallion'] === 'ether' ?
  49                                 <text className="med-display bottom-left">MM</text>
  50                         : null}
  51                         {state['tr-medallion'] === 'ether' ?
  52                                 <text className="med-display bottom-right">TR</text>
  53                         : null}
  54                 </g>
  55                 <g transform={transform(4.5, 1.5)}>
  56                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} svg />
  57                         {state['mm-medallion'] === 'quake' ?
  58                                 <text className="med-display bottom-left">MM</text>
  59                         : null}
  60                         {state['tr-medallion'] === 'quake' ?
  61                                 <text className="med-display bottom-right">TR</text>
  62                         : null}
  63                 </g>
  64                 <g transform={transform(0.5, 2.5)}>
  65                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} svg />
  66                 </g>
  67                 <g transform={transform(1.5, 2.5)}>
  68                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} svg />
  69                 </g>
  70                 <g transform={transform(2.5, 2.5)}>
  71                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['flute']} svg />
  72                 </g>
  73                 <g transform={transform(2.75, 2.75, 0.5)}>
  74                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['duck']} svg />
  75                 </g>
  76                 <g transform={transform(3.5, 2.5)}>
  77                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} svg />
  78                 </g>
  79                 <g transform={transform(4.5, 2.5)}>
  80                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} svg />
  81                 </g>
  82                 <g transform={transform(0.5, 3.5)}>
  83                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['shovel']} svg />
  84                 </g>
  85                 <g transform={transform(1.5, 3.5)}>
  86                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} svg />
  87                 </g>
  88                 <g transform={transform(2.5, 3.5)}>
  89                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} svg />
  90                 </g>
  91                 <g transform={transform(3.5, 3.5)}>
  92                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} svg />
  93                 </g>
  94                 <g transform={transform(4.5, 3.5)}>
  95                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} svg />
  96                 </g>
  97                 <g transform={transform(0.5, 5)}>
  98                         <ToggleIcon
  99                                 controller={ToggleIcon.bottleController('bottle-1')}
 100                                 icons={BOTTLE_CONTENTS}
 101                                 svg
 102                         />
 103                 </g>
 104                 <g transform={transform(1.5, 5)}>
 105                         <ToggleIcon
 106                                 controller={ToggleIcon.bottleController('bottle-2')}
 107                                 icons={BOTTLE_CONTENTS}
 108                                 svg
 109                         />
 110                 </g>
 111                 <g transform={transform(2.5, 5)}>
 112                         <ToggleIcon
 113                                 controller={ToggleIcon.bottleController('bottle-3')}
 114                                 icons={BOTTLE_CONTENTS}
 115                                 svg
 116                         />
 117                 </g>
 118                 <g transform={transform(3.5, 5)}>
 119                         <ToggleIcon
 120                                 controller={ToggleIcon.bottleController('bottle-4')}
 121                                 icons={BOTTLE_CONTENTS}
 122                                 svg
 123                         />
 124                 </g>
 125                 <g transform={transform(4.5, 5)}>
 126                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['mushroom']} svg />
 127                 </g>
 128                 <g transform={transform(0.5, 6.5)}>
 129                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['boots']} svg />
 130                 </g>
 131                 <g transform={transform(1.5, 6.5)}>
 132                         <ToggleIcon
 133                                 controller={ToggleIcon.progressiveController('lift', 0, 2)}
 134                                 icons={['glove', 'mitts']}
 135                                 svg
 136                         />
 137                 </g>
 138                 <g transform={transform(2.5, 6.5)}>
 139                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['flippers']} svg />
 140                 </g>
 141                 <g transform={transform(3.5, 6.5)}>
 142                         <ToggleIcon controller={ToggleIcon.simpleController} icons={['moonpearl']} svg />
 143                 </g>
 144                 <g transform={transform(4.5, 6.5)}>
 145                         <ToggleIcon
 146                                 controller={ToggleIcon.simpleController}
 147                                 icons={['half-magic', 'quarter-magic']}
 148                                 svg
 149                         />
 150                 </g>
 151                 <g transform={transform(0.5, 7.5)}>
 152                         <ToggleIcon
 153                                 controller={ToggleIcon.progressiveController('sword', 0, 4)}
 154                                 icons={['sword-1', 'sword-2', 'sword-3', 'sword-4']}
 155                                 svg
 156                         />
 157                 </g>
 158                 <g transform={transform(1.5, 7.5)}>
 159                         <ToggleIcon
 160                                 controller={ToggleIcon.progressiveController('shield', 0, 3)}
 161                                 icons={['fighter-shield', 'fire-shield', 'mirror-shield']}
 162                                 svg
 163                         />
 164                 </g>
 165                 <g transform={transform(2.5, 7.5)}>
 166                         <ToggleIcon
 167                                 controller={ToggleIcon.progressiveController('mail', 1, 3)}
 168                                 icons={['green-mail', 'blue-mail', 'red-mail']}
 169                                 svg
 170                         />
 171                 </g>
 172                 <g transform={transform(3.5, 7.5)}>
 173                         <ToggleIcon
 174                                 controller={ToggleIcon.modulusController('heart-piece')}
 175                                 icons={['heart-0', 'heart-1', 'heart-2', 'heart-3']}
 176                                 svg
 177                         />
 178                 </g>
 179         </>;
 180 };
 181
 182 export default Items;