import { BOTTLE_CONTENTS } from '../../helpers/tracker';
import { useTracker } from '../../hooks/tracker';
-const transform = (x, y, s) => `translate(${x} ${y}) scale(${s || 0.85})`;
+const transform = (x, y, s) => `translate(${x * 0.2} ${y * 0.2}) scale(${(s || 0.85) * 0.2})`;
const Items = () => {
const { state } = useTracker();
- return <svg
- xmlns="http://www.w3.org/2000/svg"
- className="items"
- width="5"
- height="8"
- viewBox="0 0 5 8"
- onContextMenu={(e) => {
- e.preventDefault();
- e.stopPropagation();
- }}
- >
- <g transform={transform(0.5, 0.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} svg />
- </g>
- <g transform={transform(1.35, 0.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['blue-boomerang']} svg />
- </g>
- <g transform={transform(1.85, 0.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['red-boomerang']} svg />
- </g>
- <g transform={transform(2.5, 0.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} svg />
- </g>
- <g transform={transform(3.5, 0.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} svg />
- </g>
- <g transform={transform(4.5, 0.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['powder']} svg />
- </g>
- <g transform={transform(0.5, 1.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} svg />
- </g>
- <g transform={transform(1.5, 1.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} svg />
- </g>
+ return <>
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['bow', 'silvers']}
+ svg
+ transform={transform(0.5, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['blue-boomerang']}
+ svg
+ transform={transform(1.35, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['red-boomerang']}
+ svg
+ transform={transform(1.85, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['hookshot']}
+ svg
+ transform={transform(2.5, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['bomb']}
+ svg
+ transform={transform(3.5, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['powder']}
+ svg
+ transform={transform(4.5, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['fire-rod']}
+ svg
+ transform={transform(0.5, 1.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['ice-rod']}
+ svg
+ transform={transform(1.5, 1.5)}
+ />
<g transform={transform(2.5, 1.5)}>
<ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} svg />
{state['mm-medallion'] === 'bombos' ?
<text className="med-display bottom-right">TR</text>
: null}
</g>
- <g transform={transform(0.5, 2.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} svg />
- </g>
- <g transform={transform(1.5, 2.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} svg />
- </g>
- <g transform={transform(2.5, 2.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['flute']} svg />
- </g>
- <g transform={transform(2.75, 2.75, 0.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['duck']} svg />
- </g>
- <g transform={transform(3.5, 2.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} svg />
- </g>
- <g transform={transform(4.5, 2.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} svg />
- </g>
- <g transform={transform(0.5, 3.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['shovel']} svg />
- </g>
- <g transform={transform(1.5, 3.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} svg />
- </g>
- <g transform={transform(2.5, 3.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} svg />
- </g>
- <g transform={transform(3.5, 3.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} svg />
- </g>
- <g transform={transform(4.5, 3.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} svg />
- </g>
- <g transform={transform(0.5, 5)}>
- <ToggleIcon
- controller={ToggleIcon.bottleController('bottle-1')}
- icons={BOTTLE_CONTENTS}
- svg
- />
- </g>
- <g transform={transform(1.5, 5)}>
- <ToggleIcon
- controller={ToggleIcon.bottleController('bottle-2')}
- icons={BOTTLE_CONTENTS}
- svg
- />
- </g>
- <g transform={transform(2.5, 5)}>
- <ToggleIcon
- controller={ToggleIcon.bottleController('bottle-3')}
- icons={BOTTLE_CONTENTS}
- svg
- />
- </g>
- <g transform={transform(3.5, 5)}>
- <ToggleIcon
- controller={ToggleIcon.bottleController('bottle-4')}
- icons={BOTTLE_CONTENTS}
- svg
- />
- </g>
- <g transform={transform(4.5, 5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['mushroom']} svg />
- </g>
- <g transform={transform(0.5, 6.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['boots']} svg />
- </g>
- <g transform={transform(1.5, 6.5)}>
- <ToggleIcon
- controller={ToggleIcon.progressiveController('lift', 0, 2)}
- icons={['glove', 'mitts']}
- svg
- />
- </g>
- <g transform={transform(2.5, 6.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['flippers']} svg />
- </g>
- <g transform={transform(3.5, 6.5)}>
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['moonpearl']} svg />
- </g>
- <g transform={transform(4.5, 6.5)}>
- <ToggleIcon
- controller={ToggleIcon.simpleController}
- icons={['half-magic', 'quarter-magic']}
- svg
- />
- </g>
- <g transform={transform(0.5, 7.5)}>
- <ToggleIcon
- controller={ToggleIcon.progressiveController('sword', 0, 4)}
- icons={['sword-1', 'sword-2', 'sword-3', 'sword-4']}
- svg
- />
- </g>
- <g transform={transform(1.5, 7.5)}>
- <ToggleIcon
- controller={ToggleIcon.progressiveController('shield', 0, 3)}
- icons={['fighter-shield', 'fire-shield', 'mirror-shield']}
- svg
- />
- </g>
- <g transform={transform(2.5, 7.5)}>
- <ToggleIcon
- controller={ToggleIcon.progressiveController('mail', 1, 3)}
- icons={['green-mail', 'blue-mail', 'red-mail']}
- svg
- />
- </g>
- <g transform={transform(3.5, 7.5)}>
- <ToggleIcon
- controller={ToggleIcon.modulusController('heart-piece')}
- icons={['heart-0', 'heart-1', 'heart-2', 'heart-3']}
- svg
- />
- </g>
- </svg>;
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['lamp']}
+ svg
+ transform={transform(0.5, 2.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['hammer']}
+ svg
+ transform={transform(1.5, 2.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['flute']}
+ svg
+ transform={transform(2.5, 2.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['duck']}
+ svg
+ transform={transform(2.75, 2.75, 0.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['bugnet']}
+ svg
+ transform={transform(3.5, 2.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['book']}
+ svg
+ transform={transform(4.5, 2.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['shovel']}
+ svg
+ transform={transform(0.5, 3.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['somaria']}
+ svg
+ transform={transform(1.5, 3.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['byrna']}
+ svg
+ transform={transform(2.5, 3.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['cape']}
+ svg
+ transform={transform(3.5, 3.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['mirror']}
+ svg
+ transform={transform(4.5, 3.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.bottleController('bottle-1')}
+ icons={BOTTLE_CONTENTS}
+ svg
+ transform={transform(0.5, 5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.bottleController('bottle-2')}
+ icons={BOTTLE_CONTENTS}
+ svg
+ transform={transform(1.5, 5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.bottleController('bottle-3')}
+ icons={BOTTLE_CONTENTS}
+ svg
+ transform={transform(2.5, 5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.bottleController('bottle-4')}
+ icons={BOTTLE_CONTENTS}
+ svg
+ transform={transform(3.5, 5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['mushroom']}
+ svg
+ transform={transform(4.5, 5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['boots']}
+ svg
+ transform={transform(0.5, 6.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.progressiveController('lift', 0, 2)}
+ icons={['glove', 'mitts']}
+ svg
+ transform={transform(1.5, 6.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['flippers']}
+ svg
+ transform={transform(2.5, 6.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['moonpearl']}
+ svg
+ transform={transform(3.5, 6.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.simpleController}
+ icons={['half-magic', 'quarter-magic']}
+ svg
+ transform={transform(4.5, 6.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.progressiveController('sword', 0, 4)}
+ icons={['sword-1', 'sword-2', 'sword-3', 'sword-4']}
+ svg
+ transform={transform(0.5, 7.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.progressiveController('shield', 0, 3)}
+ icons={['fighter-shield', 'fire-shield', 'mirror-shield']}
+ svg
+ transform={transform(1.5, 7.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.progressiveController('mail', 1, 3)}
+ icons={['green-mail', 'blue-mail', 'red-mail']}
+ svg
+ transform={transform(2.5, 7.5)}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.modulusController('heart-piece')}
+ icons={['heart-0', 'heart-1', 'heart-2', 'heart-3']}
+ svg
+ transform={transform(3.5, 7.5)}
+ />
+ </>;
};
export default Items;