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;