✨ add ability to teleport

src/components/MapChangeHandler.tsx

@@ -1,8 +1,13 @@
 import styled from "styled-components";
 import { useDispatch, useSelector } from "react-redux";
-import { exitMap, selectPos, selectMap, setMap } from "../state/gameSlice";
+import {
+  exitMap,
+  selectPos,
+  selectMap,
+  setMap,
+  setMapWithPos,
+} from "../state/gameSlice";
 import { useEffect } from "react";
-import { MapId } from "../maps/map-types";
 import emitter, { Event } from "../app/emitter";
 import { isExit } from "../app/map-helper";
 import { selectBlackScreen, setBlackScreen } from "../state/uiSlice";
@@ -32,19 +37,19 @@ const MapChangeHandler = () => {
   useEffect(() => {
     const nextMap = map.maps[pos.y] ? map.maps[pos.y][pos.x] : null;
     const exit = isExit(map.exits, pos.x, pos.y);
+    const teleport =
+      map.teleports && map.teleports[pos.y]
+        ? map.teleports[pos.y][pos.x]
+        : null;
 
-    if (!nextMap && !exit) return;
+    if (!nextMap && !exit && !teleport) return;
     if (darkScreen) return;
 
-    const updateMap = (map_?: MapId) => {
+    const transition = (action: () => void) => {
       dispatch(setBlackScreen(true));
       setTimeout(() => {
         emitter.emit(Event.EnterDoor);
-        if (map_) {
-          dispatch(setMap(map_));
-        } else {
-          dispatch(exitMap());
-        }
+        action();
       }, 300);
       setTimeout(() => {
         dispatch(setBlackScreen(false));
@@ -52,11 +57,13 @@ const MapChangeHandler = () => {
     };
 
     if (nextMap) {
-      updateMap(nextMap);
+      transition(() => dispatch(setMap(nextMap)));
     } else if (exit) {
-      updateMap();
+      transition(() => dispatch(exitMap()));
+    } else if (teleport) {
+      transition(() => dispatch(setMapWithPos(teleport)));
     }
-  }, [pos, map.maps, dispatch, map.exits, darkScreen]);
+  }, [pos, map.maps, dispatch, map.exits, darkScreen, map.teleports]);
 
   return <Overlay $show={darkScreen} />;
 };

src/state/gameSlice.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { RootState } from "./store";
-import { MapId, MapItemType, TrainerType } from "../maps/map-types";
+import { MapId, MapItemType, MapWithPos, TrainerType } from "../maps/map-types";
 import palletTown from "../maps/pallet-town";
 import { getPokemonStats } from "../app/use-pokemon-stats";
 import mapData from "../maps/map-data";
@@ -146,6 +146,10 @@ export const gameSlice = createSlice({
       const map = mapData[action.payload];
       state.pos = map.start;
     },
+    setMapWithPos: (state, action: PayloadAction<MapWithPos>) => {
+      state.map = action.payload.map;
+      state.pos = action.payload.pos;
+    },
     exitMap(state) {
       const map = mapData[state.map];
       if (!map) return;
@@ -345,6 +349,7 @@ export const {
   moveDown,
   setMap,
   setPos,
+  setMapWithPos,
   exitMap,
   setMoving,
   addInventory,