import React from 'react';
-import CountDisplay from './CountDisplay';
import ToggleIcon from './ToggleIcon';
+import { BOTTLE_CONTENTS } from '../../helpers/tracker';
import { useTracker } from '../../hooks/tracker';
+const transform = (x, y, s) => `translate(${x * 0.2} ${y * 0.2}) scale(${(s || 0.85) * 0.2})`;
+
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 <>
+ <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' ?
- <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']}
- />
- <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 controller={ToggleIcon.countController(4)} icons={['bottle']} />
- <CountDisplay className="bottom-right" count={state.bottle || 0} />
- </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>
+ <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;
projects / alttp.git / blobdiff