import { BOTTLE_CONTENTS } from '../../helpers/tracker';
import { useTracker } from '../../hooks/tracker';
+const transform = (x, y, s) => `translate(${x} ${y}) scale(${s || 0.85})`;
+
const Items = () => {
const { state } = useTracker();
- return <div className="items">
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} />
- </div>
- <div className="item">
- <ToggleIcon
- className="left"
- controller={ToggleIcon.simpleController}
- icons={['blue-boomerang']}
- />
- <ToggleIcon
- className="right"
- controller={ToggleIcon.simpleController}
- icons={['red-boomerang']}
- />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} />
- </div>
- <div className="item">
- <ToggleIcon
- className="bottom-left"
- controller={ToggleIcon.simpleController}
- icons={['mushroom']}
- />
- <ToggleIcon
- className="top-right"
- controller={ToggleIcon.simpleController}
- icons={['powder']}
- />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} />
+ 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>
+ <g transform={transform(2.5, 1.5)}>
+ <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} svg />
{state['mm-medallion'] === 'bombos' ?
- <span className="med-display bottom-left">MM</span>
+ <text className="med-display bottom-left">MM</text>
: null}
{state['tr-medallion'] === 'bombos' ?
- <span className="med-display bottom-right">TR</span>
+ <text className="med-display bottom-right">TR</text>
: null}
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} />
+ </g>
+ <g transform={transform(3.5, 1.5)}>
+ <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} svg />
{state['mm-medallion'] === 'ether' ?
- <span className="med-display bottom-left">MM</span>
+ <text className="med-display bottom-left">MM</text>
: null}
{state['tr-medallion'] === 'ether' ?
- <span className="med-display bottom-right">TR</span>
+ <text className="med-display bottom-right">TR</text>
: null}
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} />
+ </g>
+ <g transform={transform(4.5, 1.5)}>
+ <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} svg />
{state['mm-medallion'] === 'quake' ?
- <span className="med-display bottom-left">MM</span>
+ <text className="med-display bottom-left">MM</text>
: null}
{state['tr-medallion'] === 'quake' ?
- <span className="med-display bottom-right">TR</span>
+ <text className="med-display bottom-right">TR</text>
: null}
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} />
- </div>
- <div className="item">
- <ToggleIcon
- className="bottom-left"
- controller={ToggleIcon.simpleController}
- icons={['shovel']}
- />
+ </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
- className="top-right"
- controller={ToggleIcon.simpleController}
- icons={['flute', 'duck']}
- />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} />
- </div>
- <div className="item">
- <ToggleIcon
- className="top-left"
controller={ToggleIcon.bottleController('bottle-1')}
icons={BOTTLE_CONTENTS}
+ svg
/>
+ </g>
+ <g transform={transform(1.5, 5)}>
<ToggleIcon
- className="top-right"
controller={ToggleIcon.bottleController('bottle-2')}
icons={BOTTLE_CONTENTS}
+ svg
/>
+ </g>
+ <g transform={transform(2.5, 5)}>
<ToggleIcon
- className="bottom-left"
controller={ToggleIcon.bottleController('bottle-3')}
icons={BOTTLE_CONTENTS}
+ svg
/>
+ </g>
+ <g transform={transform(3.5, 5)}>
<ToggleIcon
- className="bottom-right"
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
/>
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} />
- </div>
- <div className="item">
- <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} />
- </div>
- </div>;
+ </g>
+ </svg>;
};
export default Items;
projects / alttp.git / blobdiff