1 import React from 'react';
3 import ToggleIcon from './ToggleIcon';
4 import { BOTTLE_CONTENTS } from '../../helpers/tracker';
5 import { useTracker } from '../../hooks/tracker';
8 const { state } = useTracker();
10 return <div className="items">
11 <div className="item">
12 <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} />
14 <div className="item">
17 controller={ToggleIcon.simpleController}
18 icons={['blue-boomerang']}
22 controller={ToggleIcon.simpleController}
23 icons={['red-boomerang']}
26 <div className="item">
27 <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} />
29 <div className="item">
30 <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} />
32 <div className="item">
34 className="bottom-left"
35 controller={ToggleIcon.simpleController}
40 controller={ToggleIcon.simpleController}
44 <div className="item">
45 <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} />
47 <div className="item">
48 <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} />
50 <div className="item">
51 <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} />
52 {state['mm-medallion'] === 'bombos' ?
53 <span className="med-display bottom-left">MM</span>
55 {state['tr-medallion'] === 'bombos' ?
56 <span className="med-display bottom-right">TR</span>
59 <div className="item">
60 <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} />
61 {state['mm-medallion'] === 'ether' ?
62 <span className="med-display bottom-left">MM</span>
64 {state['tr-medallion'] === 'ether' ?
65 <span className="med-display bottom-right">TR</span>
68 <div className="item">
69 <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} />
70 {state['mm-medallion'] === 'quake' ?
71 <span className="med-display bottom-left">MM</span>
73 {state['tr-medallion'] === 'quake' ?
74 <span className="med-display bottom-right">TR</span>
77 <div className="item">
78 <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} />
80 <div className="item">
81 <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} />
83 <div className="item">
85 className="bottom-left"
86 controller={ToggleIcon.simpleController}
91 controller={ToggleIcon.simpleController}
92 icons={['flute', 'duck']}
95 <div className="item">
96 <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} />
98 <div className="item">
99 <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} />
101 <div className="item">
104 controller={ToggleIcon.bottleController('bottle-1')}
105 icons={BOTTLE_CONTENTS}
108 className="top-right"
109 controller={ToggleIcon.bottleController('bottle-2')}
110 icons={BOTTLE_CONTENTS}
113 className="bottom-left"
114 controller={ToggleIcon.bottleController('bottle-3')}
115 icons={BOTTLE_CONTENTS}
118 className="bottom-right"
119 controller={ToggleIcon.bottleController('bottle-4')}
120 icons={BOTTLE_CONTENTS}
123 <div className="item">
124 <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} />
126 <div className="item">
127 <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} />
129 <div className="item">
130 <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} />
132 <div className="item">
133 <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} />
138 export default Items;