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