]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/pages/DoorsTracker.js
a6c6acefac93032d00c22c79e9c0ab7310a0bf50
[alttp.git] / resources / js / components / pages / DoorsTracker.js
1 import React from 'react';
2
3 import ZeldaIcon from '../common/ZeldaIcon';
4
5 const DUNGEONS = [
6         'hc',
7         'ct',
8         'ep',
9         'dp',
10         'th',
11         'pd',
12         'sp',
13         'sw',
14         'tt',
15         'ip',
16         'mm',
17         'tr',
18         'gt',
19 ];
20
21 const ITEMS = [
22         'compass',
23         'map',
24         'big-key',
25         'bow',
26         'hookshot',
27         'fire-rod',
28         'lamp',
29         'hammer',
30         'somaria',
31         'fighter-sword',
32         'boots',
33         'glove',
34         'flippers',
35 ];
36
37 const ITEM_CLASSES = {
38         'compass': 'dungeon-item',
39         'map': 'dungeon-item',
40         'big-key': 'dungeon-item',
41         'bow': 'item',
42         'hookshot': 'item',
43         'fire-rod': 'item',
44         'lamp': 'item',
45         'hammer': 'item',
46         'somaria': 'item',
47         'fighter-sword': 'item',
48         'boots': 'item',
49         'glove': 'item',
50         'flippers': 'item',
51 };
52
53 const DoorsTracker = () => {
54         const [state, setState] = React.useState(DUNGEONS.reduce((state, dungeon) => ({
55                 ...state,
56                 [dungeon]: ITEMS.reduce((items, item) => ({
57                         ...items,
58                         [item]: false,
59                 }), {
60                         boss: true,
61                         keys: 1,
62                 }),
63         }), {}));
64
65         const handleItemClick = React.useCallback((dungeon, item) => e => {
66                 setState(state => ({
67                         ...state,
68                         [dungeon]: {
69                                 ...state[dungeon],
70                                 [item]: !state[dungeon][item],
71                         },
72                 }));
73                 e.preventDefault();
74                 e.stopPropagation();
75         });
76
77         const handleKeysClick = React.useCallback(dungeon => e => {
78                 setState(state => ({
79                         ...state,
80                         [dungeon]: {
81                                 ...state[dungeon],
82                                 keys: state[dungeon].keys + 1,
83                         },
84                 }));
85                 e.preventDefault();
86                 e.stopPropagation();
87         });
88
89         const handleKeysRightClick = React.useCallback(dungeon => e => {
90                 setState(state => ({
91                         ...state,
92                         [dungeon]: {
93                                 ...state[dungeon],
94                                 keys: Math.max(state[dungeon].keys - 1, 0),
95                         },
96                 }));
97                 e.preventDefault();
98                 e.stopPropagation();
99         });
100
101         return <div className="doors-tracker d-flex flex-column">
102                 {DUNGEONS.map(dungeon =>
103                         <div className="d-flex flex-row" key={dungeon}>
104                                 <div
105                                         className={`cell ${state[dungeon].boss ? 'on' : 'off'} dungeon`}
106                                         onClick={handleItemClick(dungeon, 'boss')}
107                                 >
108                                         <ZeldaIcon name={`dungeon-${dungeon}`} />
109                                 </div>
110                                 <div
111                                         className={`cell ${state[dungeon].keys ? 'on' : 'off'} keys`}
112                                         onClick={handleKeysClick(dungeon)}
113                                         onContextMenu={handleKeysRightClick(dungeon)}
114                                 >
115                                         {state[dungeon].keys}
116                                 </div>
117                                 {ITEMS.map(item =>
118                                         <div
119                                                 className={
120                                                         `cell ${state[dungeon][item] ? 'on' : 'off'} ${ITEM_CLASSES[item]}`
121                                                 }
122                                                 key={item}
123                                                 onClick={handleItemClick(dungeon, item)}
124                                         >
125                                                 <ZeldaIcon name={item} />
126                                         </div>
127                                 )}
128                         </div>
129                 )}
130         </div>;
131 };
132
133 export default DoorsTracker;