]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/tracker/Items.js
9ec71e00223f6dbc5d670c357009144b1f32b78f
[alttp.git] / 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;