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                 <ToggleIcon
  14                         controller={ToggleIcon.simpleController}
  15                         icons={['bow', 'silvers']}
  16                         svg
  17                         transform={transform(0.5, 0.5)}
  18                 />
  19                 <ToggleIcon
  20                         controller={ToggleIcon.simpleController}
  21                         icons={['blue-boomerang']}
  22                         svg
  23                         transform={transform(1.35, 0.5)}
  24                 />
  25                 <ToggleIcon
  26                         controller={ToggleIcon.simpleController}
  27                         icons={['red-boomerang']}
  28                         svg
  29                         transform={transform(1.85, 0.5)}
  30                 />
  31                 <ToggleIcon
  32                         controller={ToggleIcon.simpleController}
  33                         icons={['hookshot']}
  34                         svg
  35                         transform={transform(2.5, 0.5)}
  36                 />
  37                 <ToggleIcon
  38                         controller={ToggleIcon.simpleController}
  39                         icons={['bomb']}
  40                         svg
  41                         transform={transform(3.5, 0.5)}
  42                 />
  43                 <ToggleIcon
  44                         controller={ToggleIcon.simpleController}
  45                         icons={['powder']}
  46                         svg
  47                         transform={transform(4.5, 0.5)}
  48                 />
  49                 <ToggleIcon
  50                         controller={ToggleIcon.simpleController}
  51                         icons={['fire-rod']}
  52                         svg
  53                         transform={transform(0.5, 1.5)}
  54                 />
  55                 <ToggleIcon
  56                         controller={ToggleIcon.simpleController}
  57                         icons={['ice-rod']}
  58                         svg
  59                         transform={transform(1.5, 1.5)}
  60                 />
  61                 <g transform={transform(2.5, 1.5)}>
  62                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} svg />
  63                         {state['mm-medallion'] === 'bombos' ?
  64                                 <text className="med-display bottom-left">MM</text>
  65                         : null}
  66                         {state['tr-medallion'] === 'bombos' ?
  67                                 <text className="med-display bottom-right">TR</text>
  68                         : null}
  69                 </g>
  70                 <g transform={transform(3.5, 1.5)}>
  71                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} svg />
  72                         {state['mm-medallion'] === 'ether' ?
  73                                 <text className="med-display bottom-left">MM</text>
  74                         : null}
  75                         {state['tr-medallion'] === 'ether' ?
  76                                 <text className="med-display bottom-right">TR</text>
  77                         : null}
  78                 </g>
  79                 <g transform={transform(4.5, 1.5)}>
  80                         <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} svg />
  81                         {state['mm-medallion'] === 'quake' ?
  82                                 <text className="med-display bottom-left">MM</text>
  83                         : null}
  84                         {state['tr-medallion'] === 'quake' ?
  85                                 <text className="med-display bottom-right">TR</text>
  86                         : null}
  87                 </g>
  88                 <ToggleIcon
  89                         controller={ToggleIcon.simpleController}
  90                         icons={['lamp']}
  91                         svg
  92                         transform={transform(0.5, 2.5)}
  93                 />
  94                 <ToggleIcon
  95                         controller={ToggleIcon.simpleController}
  96                         icons={['hammer']}
  97                         svg
  98                         transform={transform(1.5, 2.5)}
  99                 />
 100                 <ToggleIcon
 101                         controller={ToggleIcon.simpleController}
 102                         icons={['flute']}
 103                         svg
 104                         transform={transform(2.5, 2.5)}
 105                 />
 106                 <ToggleIcon
 107                         controller={ToggleIcon.simpleController}
 108                         icons={['duck']}
 109                         svg
 110                         transform={transform(2.75, 2.75, 0.5)}
 111                 />
 112                 <ToggleIcon
 113                         controller={ToggleIcon.simpleController}
 114                         icons={['bugnet']}
 115                         svg
 116                         transform={transform(3.5, 2.5)}
 117                 />
 118                 <ToggleIcon
 119                         controller={ToggleIcon.simpleController}
 120                         icons={['book']}
 121                         svg
 122                         transform={transform(4.5, 2.5)}
 123                 />
 124                 <ToggleIcon
 125                         controller={ToggleIcon.simpleController}
 126                         icons={['shovel']}
 127                         svg
 128                         transform={transform(0.5, 3.5)}
 129                 />
 130                 <ToggleIcon
 131                         controller={ToggleIcon.simpleController}
 132                         icons={['somaria']}
 133                         svg
 134                         transform={transform(1.5, 3.5)}
 135                 />
 136                 <ToggleIcon
 137                         controller={ToggleIcon.simpleController}
 138                         icons={['byrna']}
 139                         svg
 140                         transform={transform(2.5, 3.5)}
 141                 />
 142                 <ToggleIcon
 143                         controller={ToggleIcon.simpleController}
 144                         icons={['cape']}
 145                         svg
 146                         transform={transform(3.5, 3.5)}
 147                 />
 148                 <ToggleIcon
 149                         controller={ToggleIcon.simpleController}
 150                         icons={['mirror']}
 151                         svg
 152                         transform={transform(4.5, 3.5)}
 153                 />
 154                 <ToggleIcon
 155                         controller={ToggleIcon.bottleController('bottle-1')}
 156                         icons={BOTTLE_CONTENTS}
 157                         svg
 158                         transform={transform(0.5, 5)}
 159                 />
 160                 <ToggleIcon
 161                         controller={ToggleIcon.bottleController('bottle-2')}
 162                         icons={BOTTLE_CONTENTS}
 163                         svg
 164                         transform={transform(1.5, 5)}
 165                 />
 166                 <ToggleIcon
 167                         controller={ToggleIcon.bottleController('bottle-3')}
 168                         icons={BOTTLE_CONTENTS}
 169                         svg
 170                         transform={transform(2.5, 5)}
 171                 />
 172                 <ToggleIcon
 173                         controller={ToggleIcon.bottleController('bottle-4')}
 174                         icons={BOTTLE_CONTENTS}
 175                         svg
 176                         transform={transform(3.5, 5)}
 177                 />
 178                 <ToggleIcon
 179                         controller={ToggleIcon.simpleController}
 180                         icons={['mushroom']}
 181                         svg
 182                         transform={transform(4.5, 5)}
 183                 />
 184                 <ToggleIcon
 185                         controller={ToggleIcon.simpleController}
 186                         icons={['boots']}
 187                         svg
 188                         transform={transform(0.5, 6.5)}
 189                 />
 190                 <ToggleIcon
 191                         controller={ToggleIcon.progressiveController('lift', 0, 2)}
 192                         icons={['glove', 'mitts']}
 193                         svg
 194                         transform={transform(1.5, 6.5)}
 195                 />
 196                 <ToggleIcon
 197                         controller={ToggleIcon.simpleController}
 198                         icons={['flippers']}
 199                         svg
 200                         transform={transform(2.5, 6.5)}
 201                 />
 202                 <ToggleIcon
 203                         controller={ToggleIcon.simpleController}
 204                         icons={['moonpearl']}
 205                         svg
 206                         transform={transform(3.5, 6.5)}
 207                 />
 208                 <ToggleIcon
 209                         controller={ToggleIcon.simpleController}
 210                         icons={['half-magic', 'quarter-magic']}
 211                         svg
 212                         transform={transform(4.5, 6.5)}
 213                 />
 214                 <ToggleIcon
 215                         controller={ToggleIcon.progressiveController('sword', 0, 4)}
 216                         icons={['sword-1', 'sword-2', 'sword-3', 'sword-4']}
 217                         svg
 218                         transform={transform(0.5, 7.5)}
 219                 />
 220                 <ToggleIcon
 221                         controller={ToggleIcon.progressiveController('shield', 0, 3)}
 222                         icons={['fighter-shield', 'fire-shield', 'mirror-shield']}
 223                         svg
 224                         transform={transform(1.5, 7.5)}
 225                 />
 226                 <ToggleIcon
 227                         controller={ToggleIcon.progressiveController('mail', 1, 3)}
 228                         icons={['green-mail', 'blue-mail', 'red-mail']}
 229                         svg
 230                         transform={transform(2.5, 7.5)}
 231                 />
 232                 <ToggleIcon
 233                         controller={ToggleIcon.modulusController('heart-piece')}
 234                         icons={['heart-0', 'heart-1', 'heart-2', 'heart-3']}
 235                         svg
 236                         transform={transform(3.5, 7.5)}
 237                 />
 238         </>;
 239 };
 240
 241 export default Items;