resources/js/components/pages/DoorsTracker.js

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