refactor

cartridge-gg · Sep 9, 2023 · 2c8d0ab · 2c8d0ab
1 parent 90ec176
commit 2c8d0ab
Show file tree

Hide file tree

Showing 30 changed files with 380 additions and 393 deletions.
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
@@ -11,16 +11,15 @@ import {
   stopSound,
   initSoundStore,
 } from "@/hooks/sound";
-import { useUiStore, setIsConnected } from "@/hooks/ui";
 import HeaderButton from "@/components/HeaderButton";
 import MediaPlayer from "@/components/MediaPlayer";
 import MobileMenu from "@/components/MobileMenu";
 import { play } from "@/hooks/media";
 import { usePlayerEntityQuery, Entity } from "@/generated/graphql";
-import { usePlayerEntity } from "@/hooks/dojo/entities/usePlayerEntity";
-import { useGameEntity } from "@/hooks/dojo/entities/useGameEntity";
+import { usePlayerEntity } from "@/dojo/entities/usePlayerEntity";
+import { useGameEntity } from "@/dojo/entities/useGameEntity";
 import { formatCash } from "@/utils/ui";
-import { useDojo } from "@/hooks/dojo";
+import { useDojo } from "@/dojo";
 
 // TODO: constrain this on contract side
 const MAX_INVENTORY = 100;
@@ -35,18 +34,15 @@ const Header = ({ back }: HeaderProps) => {
   const [inventory, setInventory] = useState(0);
   const { account } = useDojo();
 
-  const { player: playerEntity, isFetched: isFetchedPlayer } = usePlayerEntity({
+  const { player: playerEntity } = usePlayerEntity({
     gameId,
     address: account?.address,
   });
-  const { game: gameEntity, isFetched: isFetchedGame } = useGameEntity({
+  const { game: gameEntity } = useGameEntity({
     gameId,
   });
 
   const isMobile = IsMobile();
-  const isMuted = useSoundStore((state) => state.isMuted);
-  const isConnected = useUiStore((state) => state.isConnected);
-  const hasNewMessages = true;
 
   useEffect(() => {
     const init = async () => {

diff --git a/web/src/components/Inventory.tsx b/web/src/components/Inventory.tsx
@@ -8,10 +8,10 @@ import {
 } from "@chakra-ui/react";
 
 import React from "react";
-import { usePlayerEntity } from "@/hooks/dojo/entities/usePlayerEntity";
+import { usePlayerEntity } from "@/dojo/entities/usePlayerEntity";
 import { useRouter } from "next/router";
-import { getDrugById } from "@/hooks/ui";
-import { useDojo } from "@/hooks/dojo";
+import { useDojo } from "@/dojo";
+import { getDrugById } from "@/dojo/helpers";
 
 export const Inventory = ({ ...props }: StyleProps) => {
   const router = useRouter();

diff --git a/web/src/components/Leaderboard.tsx b/web/src/components/Leaderboard.tsx
@@ -1,7 +1,6 @@
 import {
   StyleProps,
   Text,
-  VStack,
   HStack,
   UnorderedList,
   Box,
@@ -13,25 +12,20 @@ import {
   useDisclosure,
   ModalContent,
   ModalHeader,
-  ModalCloseButton,
   ModalBody,
   ModalFooter,
 } from "@chakra-ui/react";
 import Input from "@/components/Input";
-import { Bag, IconProps } from "./icons";
 
-import React, { ReactNode, useCallback, useEffect, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Avatar } from "./avatar/Avatar";
-import { AvatarName, avatars, genAvatarFromAddress } from "./avatar/avatars";
+import { genAvatarFromAddress } from "./avatar/avatars";
 import colors from "@/theme/colors";
-import {
-  Score,
-  useGlobalScores,
-} from "@/hooks/dojo/components/useGlobalScores";
-import { useDojo } from "@/hooks/dojo";
+import { Score, useGlobalScores } from "@/dojo/components/useGlobalScores";
+import { useDojo } from "@/dojo";
 import { useRouter } from "next/router";
 import { formatCash } from "@/utils/ui";
-import { useSystems } from "@/hooks/dojo/systems/useSystems";
+import { useSystems } from "@/dojo/systems/useSystems";
 
 const Leaderboard = ({
   nameEntry,

diff --git a/web/src/components/MakeItRain.tsx b/web/src/components/MakeItRain.tsx
@@ -1,5 +1,4 @@
 import { StyleProps, Box, keyframes } from "@chakra-ui/react";
-import { ReactNode } from "react";
 import {
   Acid,
   Cocaine,

diff --git a/web/src/components/map/Callout.tsx b/web/src/components/map/Callout.tsx
@@ -1,15 +1,15 @@
+import { Location } from "@/dojo/types";
 import { Icon } from "@chakra-ui/react";
-import { Locations } from "@/hooks/state";
 
-export const Callout = ({ location }: { location: Locations }) => {
+export const Callout = ({ location }: { location: Location }) => {
   return (
     <Icon
       layerStyle="fill"
       zIndex="overlay"
       viewBox="0 0 256 256"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g visibility={Locations.Central == location ? "visible" : "hidden"}>
+      <g visibility={Location.Central == location ? "visible" : "hidden"}>
         <path d="M125.01 115.997H124V117.007H125.01V115.997Z" fill="#0CA85D" />
         <path
           d="M120 109.997H124.01V110.997H125.01V115.007H124.01V116.007H123.01V118.007H121V116.007H120V115.007H119V110.997H120V109.997ZM123 114.997V114.007H121.01V114.997H123ZM124 113.997V112.007H123.01V113.997H124ZM120.01 113.997H121V112.007H120.01V113.997ZM123 111.007V111.997H121.01V111.007H123Z"
@@ -26,7 +26,7 @@ export const Callout = ({ location }: { location: Locations }) => {
           fill="#11ED83"
         />
       </g>
-      <g visibility={Locations.Brooklyn == location ? "visible" : "hidden"}>
+      <g visibility={Location.Brooklyn == location ? "visible" : "hidden"}>
         <path d="M122.01 181.995H121V183.005H122.01V181.995Z" fill="#0CA85D" />
         <path
           d="M117 175.995H121.01V176.995H122.01V181.005H121.01V182.005H120.01V184.005H118V182.005H117V181.005H116V176.995H117V175.995ZM120 180.995V180.005H118.01V180.995H120ZM121 179.995V178.005H120.01V179.995H121ZM117.01 179.995H118V178.005H117.01V179.995ZM120 177.005V177.995H118.01V177.005H120Z"
@@ -43,7 +43,7 @@ export const Callout = ({ location }: { location: Locations }) => {
           fill="#11ED83"
         />
       </g>
-      <g visibility={Locations.Coney == location ? "visible" : "hidden"}>
+      <g visibility={Location.Coney == location ? "visible" : "hidden"}>
         <path d="M196.019 203H195.009V204.01H196.019V203Z" fill="#0CA85D" />
         <path
           d="M191.009 197H195.019V198H196.019V202.01H195.019V203.01H194.019V205.01H192.009V203.01H191.009V202.01H190.009V198H191.009V197ZM194.009 202V201.01H192.019V202H194.009ZM195.009 201V199.01H194.019V201H195.009ZM191.019 201H192.009V199.01H191.019V201ZM194.009 198.01V199H192.019V198.01H194.009Z"
@@ -60,7 +60,7 @@ export const Callout = ({ location }: { location: Locations }) => {
           fill="#11ED83"
         />
       </g>
-      <g visibility={Locations.Queens == location ? "visible" : "hidden"}>
+      <g visibility={Location.Queens == location ? "visible" : "hidden"}>
         <path
           d="M193.014 134.994H192.004V136.004H193.014V134.994Z"
           fill="#0CA85D"
@@ -81,7 +81,7 @@ export const Callout = ({ location }: { location: Locations }) => {
         />
       </g>
 
-      <g visibility={Locations.Bronx == location ? "visible" : "hidden"}>
+      <g visibility={Location.Bronx == location ? "visible" : "hidden"}>
         <path d="M141.01 43.9948H140V45.0048H141.01V43.9948Z" fill="#0CA85D" />
         <path
           d="M136 37.9948H140.01V38.9948H141.01V43.0048H140.01V44.0048H139.01V46.0048H137V44.0048H136V43.0048H135V38.9948H136V37.9948ZM139 42.9948V42.0048H137.01V42.9948H139ZM140 41.9948V40.0048H139.01V41.9948H140ZM136.01 41.9948H137V40.0048H136.01V41.9948ZM139 39.0048V39.9948H137.01V39.0048H139Z"
@@ -98,7 +98,7 @@ export const Callout = ({ location }: { location: Locations }) => {
           fill="#11ED83"
         />
       </g>
-      <g visibility={Locations.Jersey == location ? "visible" : "hidden"}>
+      <g visibility={Location.Jersey == location ? "visible" : "hidden"}>
         <path d="M75.0161 96.99H74.0061V98H75.0161V96.99Z" fill="#0CA85D" />
         <path
           d="M70.0061 90.99H74.0161V91.99H75.0161V96H74.0161V97H73.0161V99H71.0061V97H70.0061V96H69.0061V91.99H70.0061V90.99ZM73.0061 95.99V95H71.0161V95.99H73.0061ZM74.0061 94.99V93H73.0161V94.99H74.0061ZM70.0161 94.99H71.0061V93H70.0161V94.99ZM73.0061 92V92.99H71.0161V92H73.0061Z"

diff --git a/web/src/components/map/HitBox.tsx b/web/src/components/map/HitBox.tsx
@@ -1,10 +1,10 @@
+import { Location } from "@/dojo/types";
 import { Icon } from "@chakra-ui/react";
-import { Locations } from "@/hooks/state";
 
 export const HitBox = ({
   onSelect,
 }: {
-  onSelect: (target: Locations) => void;
+  onSelect: (target: Location) => void;
 }) => (
   <Icon
     boxSize="full"
@@ -15,32 +15,32 @@ export const HitBox = ({
     fillOpacity="0"
   >
     <path
-      onClick={() => onSelect(Locations.Brooklyn)}
+      onClick={() => onSelect(Location.Brooklyn)}
       cursor="pointer"
       d="M74.5421 213.359H74.3667L74.2297 213.469L72.4986 214.853H65.5236L61.9527 206.998L60.3885 193.839L65.6573 179.881L74.8394 162.986H77.0794L79.286 163.692L85.6821 167.493L85.7308 167.522L85.7848 167.539L90.7352 169.127L90.8923 169.178L91.0485 169.125L112.532 161.839L112.551 161.832L112.571 161.824L155.569 143.105L164.752 153.962L171.846 165.577L171.861 165.601L171.878 165.623L176.619 171.727L172.86 172.745L172.767 172.77L172.69 172.828L160.663 181.872L143.873 191.853L143.629 191.998V192.282V193.31V193.741L144.055 193.804L150.541 194.769V197.104L149.575 198.86L149.439 199.107L149.58 199.352L150.541 201.01V202.596L149.65 203.973L147.34 205.513H144.129H143.88L143.73 205.711L141.395 208.793L141.294 208.927V209.095V215.755L139.178 218.753L135.628 221.859H132.766V219.09V218.766L132.47 218.633L125.372 215.457L125.274 215.414H125.168H120.684H120.184V215.914V217.489L115.345 222.597L113.665 223.353H107.589L102.836 221.891L84.3716 213.405L84.2722 213.359H84.1628H80.9966L79.8328 212.278L79.4797 211.95L79.139 212.291L78.0712 213.359H74.5421Z"
     />
     <path
-      onClick={() => onSelect(Locations.Queens)}
+      onClick={() => onSelect(Location.Queens)}
       cursor="pointer"
       d="M188.692 98.475L194.358 100.675L194.867 103.537L194.912 103.787L195.14 103.899L197.719 105.157V109.587V109.983L198.104 110.074L200.37 110.61V112.249L199.546 112.798L199.233 113.007L199.347 113.366L199.835 114.9L199.927 115.189L200.226 115.241L203.338 115.782L208.486 119.008L208.568 119.06L208.663 119.077L212.506 119.77V121.356L210.435 124.295L210.214 124.609L210.46 124.904L212.623 127.485L212.927 127.848L213.306 127.564L214.568 126.618H218.621L220.758 128.315L222.271 131.801V134.454L220.401 136.829L220.227 137.05L220.326 137.314L221.23 139.71L219.021 142.7L218.923 142.832V142.997V144.88V145.38H219.423H222.458L223.387 147.297V153.378H218.795H218.603L218.461 153.506L217.208 154.633H214.645L212.284 151.616L211.981 151.229L211.589 151.526L208.45 153.897L208.251 154.047V154.296V157.086V157.346L208.465 157.496L210.344 158.811V160.5L209.172 162.375H205.613H205.327L205.182 162.622L203.932 164.747H202.265H202.05L201.903 164.902L200.655 166.211H197.464V164.764L198 163.022L198.065 162.81L197.952 162.62L196.626 160.388L196.332 159.892L195.883 160.254L187.304 167.159L186.831 167.539L187.295 167.93L189.349 169.664V172.631L188.677 173.256H186.887L186.34 172.544L186.205 172.37L185.986 172.351L179.714 171.817L178.024 168.308L178.009 168.277L177.991 168.249L169.138 154.866L169.133 154.857L159.636 139.826L168.265 129.294L168.346 129.196L168.37 129.072L168.718 127.258L168.757 127.057L168.643 126.886L167.751 125.548V121.514V121.402L167.703 121.3L163.485 112.382L162.817 105.496L167.631 99.8683L167.751 99.728V99.5433V89.1508V88.9906L167.658 88.8602L166.705 87.5259V83.0826V82.5826H166.205H164.17L158.893 74.7004V71.5172L161.807 67.1798L161.892 67.0533V66.901V63.5133L167.369 60.7748H171.52L179.654 65.1086V67.6608L178.696 68.5589L178.538 68.7071V68.9237V72.4111V72.6127L178.678 72.7579L180.352 74.4959V77.0145V77.3378L180.647 77.4705L183.36 78.6916L185.443 80.6485V83.0826V83.3126L185.618 83.4623L188.059 85.5547L188.23 85.7009L188.452 85.6705L191.521 85.252L191.667 85.2321L191.779 85.1362L193.592 83.5826H196.735L198.277 85.3616V87.3375L194.629 88.6816L194.617 88.6861L194.605 88.6912L192.831 89.4514L190.644 88.6793L190.207 88.5253L190.02 88.9485C189.751 89.5553 189.349 90.4834 189.012 91.2963C188.845 91.7021 188.692 92.0834 188.58 92.3829C188.524 92.5321 188.477 92.6666 188.443 92.7762C188.426 92.8308 188.41 92.8848 188.398 92.9346C188.389 92.9745 188.373 93.0479 188.373 93.1265C188.373 93.3489 188.485 93.5491 188.554 93.6604C188.639 93.7972 188.748 93.9382 188.857 94.0679C189.016 94.257 189.196 94.445 189.349 94.5954V96.2645L188.446 97.7489L188.135 98.2589L188.692 98.475Z"
     />
     <path
-      onClick={() => onSelect(Locations.Central)}
+      onClick={() => onSelect(Location.Central)}
       cursor="pointer"
       d="M103.019 155.7L102.948 155.711L102.883 155.74L96.675 158.562H89.1351L78.0715 154.356L79.0064 150.532L83.2865 141.211L83.2907 141.201L83.2946 141.192L88.3529 128.88L94.5456 116.209L105.139 99.2217L105.161 99.1857L105.177 99.1464L112.249 81.8506L112.276 81.7822L112.283 81.7086L113.248 71.5359L116.541 74.1234L116.859 74.3727L117.169 74.1153L123.719 68.688H129.307L135.362 70.2019L135.422 70.2169H135.484H141.408H141.574L141.706 70.1182L144.918 67.7324H147.792L150.997 73.9591L151.009 73.9824L151.023 74.0043L160.049 87.7804L160.585 90.3724L159.467 98.1082L157.356 101.363L153.756 101.903L153.331 101.967V102.397V104.786V104.988L153.471 105.134L156.102 107.855V113.386V113.452L156.119 113.516L158.873 123.772V127.056L156.915 128.248L156.885 128.267L156.857 128.289L144.518 138.445L136.882 140.519L136.828 140.534L136.778 140.56C134.707 141.66 131.585 143.328 128.952 144.76C127.636 145.476 126.44 146.134 125.558 146.632C125.117 146.881 124.751 147.093 124.487 147.252C124.356 147.332 124.244 147.401 124.16 147.458C124.118 147.486 124.078 147.514 124.043 147.541L124.041 147.542C124.028 147.553 124 147.574 123.969 147.604C123.965 147.606 123.96 147.609 123.955 147.611C123.907 147.636 123.83 147.671 123.723 147.715C123.511 147.803 123.209 147.917 122.834 148.051C122.085 148.319 121.067 148.66 119.942 149.026C117.693 149.759 115.03 150.59 113.264 151.131L113.177 151.157L113.105 151.212L108.24 154.955L103.019 155.7Z"
     />
     <path
-      onClick={() => onSelect(Locations.Bronx)}
+      onClick={() => onSelect(Location.Bronx)}
       cursor="pointer"
       d="M142.29 24.7098V16.6864L142.794 15.463H146.035L146.833 15.9951V22.7031V23.0533L147.162 23.173L149.082 23.8714L149.948 25.516L150.033 25.6778L150.203 25.7465L153.738 27.1798L154.426 27.4587V26.7165V18.2831L155.323 17.0875H159.733V28.7232V28.9399L159.891 29.0881L165.911 34.726L165.982 34.7924L166.073 34.8275L171.2 36.8062V40.2855V40.3967L171.247 40.4975L173.302 44.8879V48.7678H171.7H171.304L171.213 49.1533L170.482 52.2602L167.101 55.5523H163.099H162.929L162.795 55.656L161.594 56.5797L152.316 61.0294L149.3 61.8777L149.231 61.897L149.171 61.9345L140.692 67.2102H135.744L130.078 65.6047L130.011 65.5857H129.941H123.252H123.105L122.982 65.6655L116.021 70.1533L111.808 66.8002V60.5435V60.4007L111.733 60.2795L109.61 56.8651V40.8588V40.6424L109.452 40.4943L104.928 36.2468V34.361V34.1398L104.764 33.991L102.826 32.2287V30.8555L104.764 29.0931L104.871 28.9961L104.91 28.857L105.763 25.7831H110.639H110.988L111.108 25.456L111.749 23.7165L113.459 21.5786H115.131L117.664 23.8405L117.885 24.038L118.164 23.9387L122.464 22.4098L122.797 22.2915V21.9387V20.432H125.852L126.436 20.8859L126.874 22.8139L126.931 23.0634L127.166 23.1634L130.319 24.5012L130.413 24.5409H130.515H132.426H132.926V24.0409V17.5881L133.799 12.7875H135.295L136.14 15.8286L136.708 19.9995L136.72 20.0851L136.76 20.1617L138.193 22.9328L138.255 23.0526L138.369 23.1249L141.522 25.1316L142.29 25.6207V24.7098Z"
     />
     <path
-      onClick={() => onSelect(Locations.Jersey)}
+      onClick={() => onSelect(Location.Jersey)}
       cursor="pointer"
       d="M56.1862 32.287L57.2874 30.1847H59.69L60.8412 30.8855L62.3429 29.3338L66.2971 28.6331L67.2982 26.2305H69.6007L70.5517 28.6331L73.5549 30.5351L78.8106 31.2359L79.4112 33.8387L81.3633 30.1847H83.7158L85.6679 31.6363H88.4209L89.1717 28.0825H91.6744L93.2261 29.3338V32.287L94.8779 33.0378L95.4284 35.8408H96.9801L98.3316 35.2401H101.785L102.937 39.4447L103.187 48.3542L103.988 49.3553V53.6099L103.187 57.8144L101.335 59.316L100.934 66.5738L101.785 67.3246V73.5814L100.934 74.182L101.785 75.4334V79.1874L102.636 80.4888V83.492L101.335 84.3429L100.934 88.6976L97.6809 94.8543L94.5275 95.4048L93.5264 97.6573L82.2142 114.175L74.2056 129.291L59.69 154.468L57.2374 160.024L47.3267 169.885L46.626 175.741H44.2734L43.2724 173.639L41.5705 174.94L38.3671 175.291L38.0668 178.494L36.6152 179.796H33.2616L32.711 173.639L30.2083 172.688V168.383L31.81 167.683V165.48L30.9591 164.579V161.626L31.81 160.525L30.2083 160.024L29.5076 158.523L26.6545 157.271L24.5022 158.873H22.3498L19.2465 155.77V153.417L20.2476 151.415L21.6491 150.514L20.2476 149.763L19.697 146.51L17.2444 145.859L17.5447 141.655L18.5458 139.302L19.2465 135.548L21.2487 133.246H23.7013L25.7035 135.148L26.9048 136.95L28.056 135.548L29.5076 134.897L30.2083 131.243L32.2605 130.843L33.2616 129.291H38.7174L41.5705 131.243L42.4715 130.242H45.3246L46.2756 131.243L54.2842 130.843L55.8859 129.291L55.4855 127.89L51.331 129.792H48.1276L48.9284 122.684L48.1276 115.276L49.2788 112.223L51.9317 111.622L50.9806 110.621L51.331 108.419L55.4855 107.868L55.8859 106.667L51.9317 101.361L51.6313 98.2079L50.6803 99.0087L46.2756 98.6083V95.4048L49.5791 94.4538L44.0232 93.7531V90.4996L45.3246 89.048L50.6803 88.6976L51.331 85.2439L56.4866 84.3429L54.9349 82.2907L47.2266 81.6901V79.1874L49.5791 78.5868L50.2799 76.1842L53.2331 75.133H59.1394L62.9435 73.9318L66.8978 71.9296L67.6986 65.4727L65.5463 61.4683L63.5942 62.9199H58.2384V60.3171L59.69 59.6664L60.8412 57.3639L59.69 55.5119L57.2874 54.7611V52.1083L59.69 51.7078L60.1405 50.4065L61.0915 49.3553L63.5942 48.6045L64.1948 44.1497L66.5974 43.7493L68.4995 42.548L68.95 39.4447L70.1513 38.3935H74.9064L75.457 40.3957H76.7083V35.2401H70.5517L69.6007 35.8408H58.2384L56.1862 34.6895V32.287Z"
     />
     <path
-      onClick={() => onSelect(Locations.Coney)}
+      onClick={() => onSelect(Location.Coney)}
       cursor="pointer"
       d="M201.505 223.521V227.182H199.568V224.99V224.521L199.1 224.491L194.794 224.215V219.91V219.41H194.294H190.071H189.762L189.624 219.687L189.212 220.512H187.793L187.238 218.948L187.187 218.805L187.066 218.714L182.721 215.471L182.588 215.371H182.422H180.831H180.57L180.421 215.584L179.285 217.207H177.853L177.562 214.497L178.331 213.873L178.732 213.546L178.392 213.156L176.74 211.259L176.545 211.035L176.255 211.099L174.656 211.455H168.929L168.076 209.321L167.854 208.766L167.347 209.083L166.549 209.581L164.579 209.076L163.767 207.603V203.264L164.696 199.487L165.608 198.624H172.537L173.429 199.569L173.865 200.03L174.211 199.498L175.129 198.091L175.205 197.975L175.21 197.837L175.632 186.63L176.591 185.527H180.221L182.397 188.275L182.547 188.465H182.789H184.38H184.694L184.83 188.183L185.611 186.568H190.071H190.571V186.068V179.591H197.364L197.956 193.555L197.974 193.968L198.383 194.029L202.354 194.613L207.801 201.196L208.1 201.558L208.48 201.282L209.695 200.398H214.121L214.791 204.808L214.829 205.059L215.054 205.177L216.378 205.865L216.817 207.84L216.887 208.158L217.207 208.222L219.268 208.634L221.272 209.795V211.587V211.846L221.484 211.996L222.313 212.581V215.305L221.409 216.262L221.256 216.424L221.274 216.646L221.58 220.44L221.6 220.687L221.809 220.821L223.108 221.653V223.308L221.877 224.49H218.284H218.086L217.942 224.625L217.146 225.371L215.383 225.05L211.413 224.195L211.413 224.195L211.399 224.192L205.283 223.053L203.362 221.482L202.924 221.123L202.622 221.602L201.582 223.255L201.505 223.377V223.521Z"
     />

diff --git a/web/src/components/map/Map.tsx b/web/src/components/map/Map.tsx
@@ -1,30 +1,30 @@
 import { Flex, Image, useBreakpointValue } from "@chakra-ui/react";
 import { motion, useAnimate } from "framer-motion";
 import { useEffect } from "react";
-import { Locations } from "@/hooks/state";
 import { HitBox } from "./HitBox";
 import { Outline } from "./Outline";
 import { Markers } from "./Markers";
+import { Location } from "@/dojo/types";
 
 type CoordinateType = {
-  [key in Locations]: { x: number; y: number };
+  [key in Location]: { x: number; y: number };
 };
 
 const coordinate: CoordinateType = {
-  [Locations.Queens]: { x: -150, y: 150 },
-  [Locations.Jersey]: { x: 150, y: 150 },
-  [Locations.Bronx]: { x: 0, y: 300 },
-  [Locations.Central]: { x: 0, y: 150 },
-  [Locations.Coney]: { x: -150, y: -0 },
-  [Locations.Brooklyn]: { x: 0, y: -0 },
+  [Location.Queens]: { x: -150, y: 150 },
+  [Location.Jersey]: { x: 150, y: 150 },
+  [Location.Bronx]: { x: 0, y: 300 },
+  [Location.Central]: { x: 0, y: 150 },
+  [Location.Coney]: { x: -150, y: -0 },
+  [Location.Brooklyn]: { x: 0, y: -0 },
 };
 
 export const Map = ({
   highlight,
   onSelect,
 }: {
-  highlight?: Locations;
-  onSelect: (selected: Locations) => void;
+  highlight?: Location;
+  onSelect: (selected: Location) => void;
 }) => {
   const [scope, animate] = useAnimate();
   const isMobile = useBreakpointValue([true, false]);