From 4ee6bee4ecbd605658fc7b608688c728bb4779e6 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Fri, 19 Jul 2024 08:59:46 -0600
Subject: [PATCH 1/6] Render insufficient funds error

---
 packages/client/src/hooks/useToast.ts         | 18 +++++++-
 .../client/src/lib/mud/createSystemCalls.ts   | 42 +++++++++++--------
 packages/client/src/utils/errors.ts           |  1 +
 3 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/packages/client/src/hooks/useToast.ts b/packages/client/src/hooks/useToast.ts
index 170733d3b..92af25ceb 100644
--- a/packages/client/src/hooks/useToast.ts
+++ b/packages/client/src/hooks/useToast.ts
@@ -1,7 +1,11 @@
 import { useToast as useChakraToast } from '@chakra-ui/react';
 import { useCallback } from 'react';
 
-import { getError, USER_ERRORS } from '../utils/errors';
+import {
+  getError,
+  INSUFFICIENT_FUNDS_MESSAGE,
+  USER_ERRORS,
+} from '../utils/errors';
 
 export const useToast = (): {
   renderError: (errorMsg: string, errorLog?: unknown) => void;
@@ -21,6 +25,18 @@ export const useToast = (): {
       // eslint-disable-next-line no-console
       console.error(errorLog);
 
+      if ((errorLog as Error).message === INSUFFICIENT_FUNDS_MESSAGE) {
+        toast({
+          description: (errorLog as Error).message,
+          position: 'top',
+          status: 'error',
+          containerStyle: {
+            bg: 'red',
+          },
+        });
+        return;
+      }
+
       toast({
         description: errorMsg,
         position: 'top',
diff --git a/packages/client/src/lib/mud/createSystemCalls.ts b/packages/client/src/lib/mud/createSystemCalls.ts
index 6559a493f..f77b14d7d 100644
--- a/packages/client/src/lib/mud/createSystemCalls.ts
+++ b/packages/client/src/lib/mud/createSystemCalls.ts
@@ -21,12 +21,14 @@ import {
   BaseError,
   ContractFunctionRevertedError,
   getContract,
+  InsufficientFundsError,
   keccak256,
   parseAbiItem,
   stringToHex,
   toBytes,
 } from 'viem';
 
+import { INSUFFICIENT_FUNDS_MESSAGE } from '../../utils/errors';
 import { EncounterType, StatsClasses } from '../../utils/types';
 import { ClientComponents } from './createClientComponents';
 import { SetupNetworkResult } from './setupNetwork';
@@ -38,15 +40,19 @@ type SystemCallReturn = Promise<{
   error?: string;
 }>;
 
-const getContractError = (error: unknown): string => {
-  if (error instanceof BaseError) {
-    const revertError = error.walk(
-      e => e instanceof ContractFunctionRevertedError,
-    );
-    if (revertError instanceof ContractFunctionRevertedError) {
-      const args = revertError.data?.args ?? [];
-      return args[0] as string;
-    }
+const getContractError = (error: BaseError): string => {
+  const revertError = error.walk(
+    e => e instanceof ContractFunctionRevertedError,
+  );
+  if (revertError instanceof ContractFunctionRevertedError) {
+    const args = revertError.data?.args ?? [];
+    return args[0] as string;
+  }
+  const insufficientFundsError = error.walk(
+    e => e instanceof InsufficientFundsError,
+  );
+  if (insufficientFundsError instanceof InsufficientFundsError) {
+    return INSUFFICIENT_FUNDS_MESSAGE;
   }
   return 'An error occurred calling the contract.';
 };
@@ -131,7 +137,7 @@ export function createSystemCalls(
       };
     } catch (e) {
       return {
-        error: getContractError(e),
+        error: getContractError(e as BaseError),
         success: false,
       };
     }
@@ -195,7 +201,7 @@ export function createSystemCalls(
       };
     } catch (e) {
       return {
-        error: getContractError(e),
+        error: getContractError(e as BaseError),
         success: false,
       };
     }
@@ -223,7 +229,7 @@ export function createSystemCalls(
       };
     } catch (e) {
       return {
-        error: getContractError(e),
+        error: getContractError(e as BaseError),
         success: false,
       };
     }
@@ -268,7 +274,7 @@ export function createSystemCalls(
       };
     } catch (e) {
       return {
-        error: getContractError(e),
+        error: getContractError(e as BaseError),
         success: false,
       };
     }
@@ -318,7 +324,7 @@ export function createSystemCalls(
       };
     } catch (e) {
       return {
-        error: getContractError(e),
+        error: getContractError(e as BaseError),
         success: false,
       };
     }
@@ -363,7 +369,7 @@ export function createSystemCalls(
       };
     } catch (e) {
       return {
-        error: getContractError(e),
+        error: getContractError(e as BaseError),
         success: false,
       };
     } finally {
@@ -413,7 +419,7 @@ export function createSystemCalls(
       };
     } catch (e) {
       return {
-        error: getContractError(e),
+        error: getContractError(e as BaseError),
         success: false,
       };
     }
@@ -442,7 +448,7 @@ export function createSystemCalls(
       };
     } catch (e) {
       return {
-        error: getContractError(e),
+        error: getContractError(e as BaseError),
         success: false,
       };
     }
@@ -485,7 +491,7 @@ export function createSystemCalls(
       };
     } catch (e) {
       return {
-        error: getContractError(e),
+        error: getContractError(e as BaseError),
         success: false,
       };
     }
diff --git a/packages/client/src/utils/errors.ts b/packages/client/src/utils/errors.ts
index f1ba2eb40..d5ff835bf 100644
--- a/packages/client/src/utils/errors.ts
+++ b/packages/client/src/utils/errors.ts
@@ -1,4 +1,5 @@
 export const USER_ERRORS = ['User denied signature'];
+export const INSUFFICIENT_FUNDS_MESSAGE = 'Insufficient funds.';
 
 export const getError = (
   error: unknown,

From efd790093c5a5cd73c38fbc3e05e2db0ced1a4d9 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Fri, 19 Jul 2024 09:23:16 -0600
Subject: [PATCH 2/6] Remove auction house link in character creation

---
 packages/client/src/pages/CharacterCreation.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/client/src/pages/CharacterCreation.tsx b/packages/client/src/pages/CharacterCreation.tsx
index 116f2cad2..f6a68f4a2 100644
--- a/packages/client/src/pages/CharacterCreation.tsx
+++ b/packages/client/src/pages/CharacterCreation.tsx
@@ -9,7 +9,6 @@ import {
   Heading,
   HStack,
   Input,
-  Link,
   SimpleGrid,
   Stack,
   Text,
@@ -626,14 +625,6 @@ export const CharacterCreation = (): JSX.Element => {
                   </Box>
                 </HStack>
               )}
-              <Link
-                alignSelf="end"
-                color="grey500"
-                fontSize="18px"
-                fontWeight={700}
-              >
-                Auction House ▶
-              </Link>
             </VStack>
           </SimpleGrid>
           {!isSmallScreen && (

From 9b73d9f49d2b08ca5e049ccb51734554bdc20451 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Fri, 19 Jul 2024 11:09:48 -0600
Subject: [PATCH 3/6] Remove InitiateCombatModal

---
 .../client/src/components/ActionsPanel.tsx    |   8 --
 .../src/components/InitiateCombatModal.tsx    | 109 ------------------
 .../client/src/components/ItemEquipModal.tsx  |  15 ---
 .../src/components/TileDetailsPanel.tsx       |  81 ++++++++++---
 .../src/contexts/MapNavigationContext.tsx     |  16 +--
 .../client/src/pages/CharacterCreation.tsx    |  15 ---
 packages/client/src/utils/errors.ts           |   3 +-
 7 files changed, 68 insertions(+), 179 deletions(-)
 delete mode 100644 packages/client/src/components/InitiateCombatModal.tsx

diff --git a/packages/client/src/components/ActionsPanel.tsx b/packages/client/src/components/ActionsPanel.tsx
index 9de776e45..805fe1555 100644
--- a/packages/client/src/components/ActionsPanel.tsx
+++ b/packages/client/src/components/ActionsPanel.tsx
@@ -56,7 +56,6 @@ import { HealthBar } from './HealthBar';
 export const ActionsPanel = (): JSX.Element => {
   const { renderError } = useToast();
   const {
-    burnerBalance,
     components: { Actions },
     delegatorAddress,
     systemCalls: { endTurn },
@@ -84,12 +83,6 @@ export const ActionsPanel = (): JSX.Element => {
       try {
         setIsAttacking(true);
 
-        if (burnerBalance === '0') {
-          throw new Error(
-            'Insufficient funds. Please top off your session account.',
-          );
-        }
-
         if (!delegatorAddress) {
           throw new Error('Missing delegation.');
         }
@@ -139,7 +132,6 @@ export const ActionsPanel = (): JSX.Element => {
     },
     [
       Actions,
-      burnerBalance,
       character,
       currentBattle,
       delegatorAddress,
diff --git a/packages/client/src/components/InitiateCombatModal.tsx b/packages/client/src/components/InitiateCombatModal.tsx
deleted file mode 100644
index 43cc3c8be..000000000
--- a/packages/client/src/components/InitiateCombatModal.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-} from '@chakra-ui/react';
-import { useCallback, useState } from 'react';
-
-import { useCharacter } from '../contexts/CharacterContext';
-import { useMUD } from '../contexts/MUDContext';
-import { useToast } from '../hooks/useToast';
-import { EncounterType, type Monster } from '../utils/types';
-
-type InitiateCombatModalProps = Monster & {
-  isOpen: boolean;
-  onClose: () => void;
-};
-
-export const InitiateCombatModal: React.FC<InitiateCombatModalProps> = ({
-  isOpen,
-  onClose,
-  ...monster
-}): JSX.Element => {
-  const { renderError, renderSuccess } = useToast();
-  const {
-    burnerBalance,
-    delegatorAddress,
-    systemCalls: { createMatch },
-  } = useMUD();
-  const { character } = useCharacter();
-
-  const [isInitiating, setIsInitiating] = useState(false);
-
-  const onInitiateCombat = useCallback(async () => {
-    try {
-      setIsInitiating(true);
-
-      if (!character) {
-        throw new Error('Character not found.');
-      }
-
-      if (burnerBalance === '0') {
-        throw new Error(
-          'Insufficient funds. Please top off your session account.',
-        );
-      }
-
-      if (!delegatorAddress) {
-        throw new Error('Missing delegation.');
-      }
-
-      const { error, success } = await createMatch(
-        EncounterType.PvE,
-        [character.characterId],
-        [monster.monsterId],
-      );
-
-      if (error && !success) {
-        throw new Error(error);
-      }
-
-      renderSuccess(`Battle has begun!`);
-      onClose();
-    } catch (e) {
-      renderError('Failed to initiate battle.', e);
-    } finally {
-      setIsInitiating(false);
-    }
-  }, [
-    burnerBalance,
-    character,
-    createMatch,
-    delegatorAddress,
-    monster,
-    onClose,
-    renderError,
-    renderSuccess,
-  ]);
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Initiate Battle</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody padding={4}>
-          Are you sure you want to initiate a battle with {monster.name}?
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            isLoading={isInitiating}
-            loadingText="Initiating..."
-            mr={3}
-            onClick={onInitiateCombat}
-          >
-            Yes
-          </Button>
-          <Button isDisabled={isInitiating} onClick={onClose} variant="ghost">
-            No
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/packages/client/src/components/ItemEquipModal.tsx b/packages/client/src/components/ItemEquipModal.tsx
index e6d7b6ed7..0a3afb528 100644
--- a/packages/client/src/components/ItemEquipModal.tsx
+++ b/packages/client/src/components/ItemEquipModal.tsx
@@ -31,7 +31,6 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
 }): JSX.Element => {
   const { renderError, renderSuccess } = useToast();
   const {
-    burnerBalance,
     delegatorAddress,
     systemCalls: { equipItems, unequipItem },
   } = useMUD();
@@ -52,12 +51,6 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
         throw new Error('Character not found.');
       }
 
-      if (burnerBalance === '0') {
-        throw new Error(
-          'Insufficient funds. Please top off your session account.',
-        );
-      }
-
       if (!delegatorAddress) {
         throw new Error('Missing delegation.');
       }
@@ -79,7 +72,6 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
       setIsEquipping(false);
     }
   }, [
-    burnerBalance,
     character,
     delegatorAddress,
     equipItems,
@@ -98,12 +90,6 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
         throw new Error('Character not found.');
       }
 
-      if (burnerBalance === '0') {
-        throw new Error(
-          'Insufficient funds. Please top off your session account.',
-        );
-      }
-
       if (!delegatorAddress) {
         throw new Error('Missing delegation.');
       }
@@ -126,7 +112,6 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
       setIsEquipping(false);
     }
   }, [
-    burnerBalance,
     character,
     delegatorAddress,
     onClose,
diff --git a/packages/client/src/components/TileDetailsPanel.tsx b/packages/client/src/components/TileDetailsPanel.tsx
index 978d0e8ff..d6bd521aa 100644
--- a/packages/client/src/components/TileDetailsPanel.tsx
+++ b/packages/client/src/components/TileDetailsPanel.tsx
@@ -8,27 +8,67 @@ import {
   Spinner,
   Text,
   useBreakpointValue,
-  useDisclosure,
   VStack,
 } from '@chakra-ui/react';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { GiCrossedSwords } from 'react-icons/gi';
 import { IoIosArrowForward } from 'react-icons/io';
 import { useNavigate } from 'react-router-dom';
 
+import { useCharacter } from '../contexts/CharacterContext';
 import { useCombat } from '../contexts/CombatContext';
 import { useMapNavigation } from '../contexts/MapNavigationContext';
-import { type Character, type Monster } from '../utils/types';
-import { InitiateCombatModal } from './InitiateCombatModal';
+import { useMUD } from '../contexts/MUDContext';
+import { useToast } from '../hooks/useToast';
+import { type Character, EncounterType, type Monster } from '../utils/types';
 
 const ROW_HEIGHT = { base: 5, md: 8, lg: 10 };
 
 export const TileDetailsPanel = (): JSX.Element => {
+  const { renderError, renderSuccess } = useToast();
+
+  const {
+    delegatorAddress,
+    systemCalls: { createMatch },
+  } = useMUD();
+  const { character } = useCharacter();
   const { isRefreshing, monsters, otherPlayers } = useMapNavigation();
-  const { isOpen, onOpen, onClose } = useDisclosure();
   const { currentBattle } = useCombat();
 
-  const [selectedMonster, setSelectedMonster] = useState<Monster | null>(null);
+  const [isInitiating, setIsInitiating] = useState(false);
+
+  const onInitiateCombat = useCallback(
+    async (monster: Monster) => {
+      try {
+        setIsInitiating(true);
+
+        if (!character) {
+          throw new Error('Character not found.');
+        }
+
+        if (!delegatorAddress) {
+          throw new Error('Missing delegation.');
+        }
+
+        const { error, success } = await createMatch(
+          EncounterType.PvE,
+          [character.characterId],
+          [monster.monsterId],
+        );
+
+        if (error && !success) {
+          throw new Error(error);
+        }
+
+        renderSuccess('Battle has begun!');
+      } catch (e) {
+        renderError('Failed to initiate battle.', e);
+      } finally {
+        setIsInitiating(false);
+      }
+    },
+    [character, createMatch, delegatorAddress, renderError, renderSuccess],
+  );
 
   if (isRefreshing) {
     return (
@@ -67,8 +107,7 @@ export const TileDetailsPanel = (): JSX.Element => {
                 key={`tile-monster-${i}-${monster.name}`}
                 monster={monster}
                 onClick={() => {
-                  setSelectedMonster(monster);
-                  onOpen();
+                  onInitiateCombat(monster);
                 }}
               />
             ))}
@@ -108,12 +147,22 @@ export const TileDetailsPanel = (): JSX.Element => {
           </GridItem>
         )}
       </Grid>
-      {selectedMonster && (
-        <InitiateCombatModal
-          isOpen={isOpen}
-          onClose={onClose}
-          {...selectedMonster}
-        />
+      {isInitiating && (
+        <Box
+          pos="absolute"
+          bg="rgba(0, 0, 0, 0.5)"
+          h="100%"
+          w="100%"
+          top={0}
+          left={0}
+        >
+          <VStack h="100%" justifyContent="center" spacing={8}>
+            <Text color="white" fontWeight="bold" size="xl">
+              Initiating battle!
+            </Text>
+            <Spinner color="white" size="xl" />
+          </VStack>
+        </Box>
       )}
       {currentBattle && (
         <Box
@@ -126,7 +175,7 @@ export const TileDetailsPanel = (): JSX.Element => {
         >
           <VStack h="100%" justifyContent="center" spacing={8}>
             <Text color="white" fontWeight="bold" size="xl">
-              Combat in progress!
+              Battle in progress!
             </Text>
             <GiCrossedSwords color="white" size="100px" />
           </VStack>
@@ -175,7 +224,7 @@ const MonsterRow = ({
       }}
     >
       <Text
-        color={MONSTER_COLORS[monster.class]}
+        color={MONSTER_COLORS[monster.entityClass]}
         size={{ base: '3xs', sm: '2xs', md: 'sm', lg: 'md' }}
       >
         {name}
diff --git a/packages/client/src/contexts/MapNavigationContext.tsx b/packages/client/src/contexts/MapNavigationContext.tsx
index a5adb43d1..0ce50b33e 100644
--- a/packages/client/src/contexts/MapNavigationContext.tsx
+++ b/packages/client/src/contexts/MapNavigationContext.tsx
@@ -57,7 +57,6 @@ export const MapNavigationProvider = ({
   const { pathname } = useLocation();
   const { renderError, renderSuccess } = useToast();
   const {
-    burnerBalance,
     components: {
       Characters,
       CharactersTokenURI,
@@ -258,12 +257,6 @@ export const MapNavigationProvider = ({
     try {
       setIsSpawning(true);
 
-      if (burnerBalance === '0') {
-        throw new Error(
-          'Insufficient funds. Please top off your session account.',
-        );
-      }
-
       if (!delegatorAddress) {
         throw new Error('Missing delegation.');
       }
@@ -284,14 +277,7 @@ export const MapNavigationProvider = ({
     } finally {
       setIsSpawning(false);
     }
-  }, [
-    burnerBalance,
-    character,
-    delegatorAddress,
-    renderError,
-    renderSuccess,
-    spawn,
-  ]);
+  }, [character, delegatorAddress, renderError, renderSuccess, spawn]);
 
   const onMove = useCallback(
     async (direction: 'up' | 'down' | 'left' | 'right') => {
diff --git a/packages/client/src/pages/CharacterCreation.tsx b/packages/client/src/pages/CharacterCreation.tsx
index f6a68f4a2..b60c6e7e2 100644
--- a/packages/client/src/pages/CharacterCreation.tsx
+++ b/packages/client/src/pages/CharacterCreation.tsx
@@ -45,7 +45,6 @@ export const CharacterCreation = (): JSX.Element => {
   const isSmallScreen = useBreakpointValue({ base: true, lg: false });
   const { data: externalWalletClient } = useWalletClient();
   const {
-    burnerBalance,
     components: { ItemsBaseURI, ItemsTokenURI, UltimateDominionConfig },
     delegatorAddress,
     isSynced,
@@ -149,12 +148,6 @@ export const CharacterCreation = (): JSX.Element => {
       try {
         setIsCreating(true);
 
-        if (burnerBalance === '0') {
-          throw new Error(
-            'Insufficient funds. Please top off your session account.',
-          );
-        }
-
         if (!delegatorAddress) {
           throw new Error('Missing delegation.');
         }
@@ -219,7 +212,6 @@ export const CharacterCreation = (): JSX.Element => {
     },
     [
       avatar,
-      burnerBalance,
       delegatorAddress,
       description,
       mintCharacter,
@@ -235,12 +227,6 @@ export const CharacterCreation = (): JSX.Element => {
     try {
       setIsRollingStats(true);
 
-      if (burnerBalance === '0') {
-        throw new Error(
-          'Insufficient funds. Please top off your session account.',
-        );
-      }
-
       if (!delegatorAddress) {
         throw new Error('Missing delegation.');
       }
@@ -266,7 +252,6 @@ export const CharacterCreation = (): JSX.Element => {
       setIsRollingStats(false);
     }
   }, [
-    burnerBalance,
     character,
     characterClass,
     delegatorAddress,
diff --git a/packages/client/src/utils/errors.ts b/packages/client/src/utils/errors.ts
index d5ff835bf..604205238 100644
--- a/packages/client/src/utils/errors.ts
+++ b/packages/client/src/utils/errors.ts
@@ -1,5 +1,6 @@
 export const USER_ERRORS = ['User denied signature'];
-export const INSUFFICIENT_FUNDS_MESSAGE = 'Insufficient funds.';
+export const INSUFFICIENT_FUNDS_MESSAGE =
+  'Insufficient funds. Please top off your session account.';
 
 export const getError = (
   error: unknown,

From 21a7fc4729b72dadc7fa085d48b5e337dcf72cb0 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Fri, 19 Jul 2024 13:56:06 -0600
Subject: [PATCH 4/6] Add InfoModal component

---
 packages/client/src/components/Header.tsx    |  8 +++-
 packages/client/src/components/InfoModal.tsx | 41 ++++++++++++++++++++
 packages/client/src/pages/GameBoard.tsx      | 36 ++++++++++++++++-
 3 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 packages/client/src/components/InfoModal.tsx

diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx
index 1fac2878d..19e14f521 100644
--- a/packages/client/src/components/Header.tsx
+++ b/packages/client/src/components/Header.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, Heading, Stack } from '@chakra-ui/react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-import { HOME_PATH } from '../Routes';
+import { GAME_BOARD_PATH, HOME_PATH } from '../Routes';
 
 const PAGES_WITHOUT_HEADER = [HOME_PATH];
 
@@ -11,6 +11,8 @@ export const Header = ({
   onOpenWalletDetailsModal: () => void;
 }): JSX.Element => {
   const { pathname } = useLocation();
+  const navigate = useNavigate();
+
   if (PAGES_WITHOUT_HEADER.includes(pathname)) {
     return <Box />;
   }
@@ -34,6 +36,8 @@ export const Header = ({
         Wallet Details
       </Button>
       <Heading
+        as="button"
+        onClick={() =><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script> navigate(GAME_BOARD_PATH)}
         size={{ base: 'sm', sm: 'md' }}
         textAlign={{ base: 'left', lg: 'right' }}
       >
diff --git a/packages/client/src/components/InfoModal.tsx b/packages/client/src/components/InfoModal.tsx
new file mode 100644
index 000000000..0eca30bab
--- /dev/null
+++ b/packages/client/src/components/InfoModal.tsx
@@ -0,0 +1,41 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+type InfoModalProps = {
+  children: ReactNode;
+  heading: string;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const InfoModal: React.FC<InfoModalProps> = ({
+  children,
+  heading,
+  isOpen,
+  onClose,
+}): JSX.Element => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{heading}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody padding={4}>{children}</ModalBody>
+        <ModalFooter>
+          <Button onClick={onClose} variant="ghost">
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index fa3a0106c..60726ee96 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -6,13 +6,16 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Text,
+  useDisclosure,
   VStack,
 } from '@chakra-ui/react';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useWalletClient } from 'wagmi';
 
 import { ActionsPanel } from '../components/ActionsPanel';
+import { InfoModal } from '../components/InfoModal';
 import { MapPanel } from '../components/MapPanel';
 import { StatsPanel } from '../components/StatsPanel';
 import { TileDetailsPanel } from '../components/TileDetailsPanel';
@@ -23,10 +26,12 @@ import { useMUD } from '../contexts/MUDContext';
 import { GAME_BOARD_PATH, HOME_PATH } from '../Routes';
 
 export const GameBoard = (): JSX.Element => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
   const { data: externalWalletClient } = useWalletClient();
   const navigate = useNavigate();
   const { delegatorAddress, isSynced } = useMUD();
-  const { character } = useCharacter();
+  const { character, equippedItems } = useCharacter();
 
   useEffect(() => {
     if (!isSynced) return;
@@ -44,6 +49,12 @@ export const GameBoard = (): JSX.Element => {
     }
   }, [character, delegatorAddress, externalWalletClient, isSynced, navigate]);
 
+  useEffect(() => {
+    if (character?.experience === '0' && equippedItems?.length === 0) {
+      onOpen();
+    }
+  }, [character, equippedItems, onOpen]);
+
   return (
     <MapNavigationProvider>
       <CombatProvider>
@@ -118,6 +129,27 @@ export const GameBoard = (): JSX.Element => {
             </Popover>
           </Box>
         </Grid>
+        <InfoModal
+          heading="Welcome to the game board!"
+          isOpen={isOpen}
+          onClose={onClose}
+        >
+          <Text>
+            In order to start battling, you must have at least 1 weapon
+            equipped. Go to your{' '}
+            <Text
+              as={Link}
+              color="blue"
+              to={`/characters/${character?.characterId}`}
+              _hover={{
+                textDecoration: 'underline',
+              }}
+            >
+              character page
+            </Text>{' '}
+            to equip a weapon.
+          </Text>
+        </InfoModal>
       </CombatProvider>
     </MapNavigationProvider>
   );

From 3a34bb9e5cdb42f03e4ce340c482675593f9e9aa Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Fri, 19 Jul 2024 14:41:25 -0600
Subject: [PATCH 5/6] Add Outer Realms warning

---
 packages/client/src/App.tsx                  |   8 +-
 packages/client/src/components/InfoModal.tsx |   5 +-
 packages/client/src/pages/GameBoard.tsx      | 245 +++++++++++--------
 3 files changed, 158 insertions(+), 100 deletions(-)

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index 5eccde0bf..35dbfd7f0 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -5,13 +5,19 @@ import { BrowserRouter as Router, useLocation } from 'react-router-dom';
 import { Footer } from './components/Footer';
 import { Header } from './components/Header';
 import { WalletDetailsModal } from './components/WalletDetailsModal';
+import { CombatProvider } from './contexts/CombatContext';
+import { MapNavigationProvider } from './contexts/MapNavigationContext';
 import { useMUD } from './contexts/MUDContext';
 import AppRoutes, { HOME_PATH } from './Routes';
 
 export const App = (): JSX.Element => {
   return (
     <Router>
-      <AppInner />
+      <MapNavigationProvider>
+        <CombatProvider>
+          <AppInner />
+        </CombatProvider>
+      </MapNavigationProvider>
     </Router>
   );
 };
diff --git a/packages/client/src/components/InfoModal.tsx b/packages/client/src/components/InfoModal.tsx
index 0eca30bab..893e951fc 100644
--- a/packages/client/src/components/InfoModal.tsx
+++ b/packages/client/src/components/InfoModal.tsx
@@ -7,6 +7,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Text,
 } from '@chakra-ui/react';
 import { ReactNode } from 'react';
 
@@ -27,7 +28,9 @@ export const InfoModal: React.FC<InfoModalProps> = ({
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>{heading}</ModalHeader>
+        <ModalHeader>
+          <Text>{heading}</Text>
+        </ModalHeader>
         <ModalCloseButton />
         <ModalBody padding={4}>{children}</ModalBody>
         <ModalFooter>
diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index 60726ee96..54989ea7e 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -10,7 +10,8 @@ import {
   useDisclosure,
   VStack,
 } from '@chakra-ui/react';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
+import { IoIosWarning } from 'react-icons/io';
 import { Link, useNavigate } from 'react-router-dom';
 import { useWalletClient } from 'wagmi';
 
@@ -20,18 +21,27 @@ import { MapPanel } from '../components/MapPanel';
 import { StatsPanel } from '../components/StatsPanel';
 import { TileDetailsPanel } from '../components/TileDetailsPanel';
 import { useCharacter } from '../contexts/CharacterContext';
-import { CombatProvider } from '../contexts/CombatContext';
-import { MapNavigationProvider } from '../contexts/MapNavigationContext';
+import { useMapNavigation } from '../contexts/MapNavigationContext';
 import { useMUD } from '../contexts/MUDContext';
 import { GAME_BOARD_PATH, HOME_PATH } from '../Routes';
 
 export const GameBoard = (): JSX.Element => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const {
+    isOpen: isEquipInfoModalOpen,
+    onOpen: onOpenEquipInfoModal,
+    onClose: onCloseEquipInfoModal,
+  } = useDisclosure();
+  const {
+    isOpen: isOuterRealmsInfoModalOpen,
+    onOpen: onOpenOuterRealmsInfoModal,
+    onClose: onCloseOuterRealmsInfoModal,
+  } = useDisclosure();
 
   const { data: externalWalletClient } = useWalletClient();
   const navigate = useNavigate();
   const { delegatorAddress, isSynced } = useMUD();
   const { character, equippedItems } = useCharacter();
+  const { position } = useMapNavigation();
 
   useEffect(() => {
     if (!isSynced) return;
@@ -51,106 +61,145 @@ export const GameBoard = (): JSX.Element => {
 
   useEffect(() => {
     if (character?.experience === '0' && equippedItems?.length === 0) {
-      onOpen();
+      onOpenEquipInfoModal();
     }
-  }, [character, equippedItems, onOpen]);
+  }, [character, equippedItems, onOpenEquipInfoModal]);
+
+  useEffect(() => {
+    if (!(character && position)) return;
+    const outerRealms = position.x === 5 || position.y === 5;
+
+    const outerRealmsSeenKey = `outer-realms-warning-seen-${character.characterId}`;
+
+    const hasSeenWarning = localStorage.getItem(outerRealmsSeenKey);
+    if (hasSeenWarning) return;
+
+    if (character.level === '1' && outerRealms) {
+      onOpenOuterRealmsInfoModal();
+    }
+  }, [character, onOpenOuterRealmsInfoModal, position]);
+
+  const onAcknowledgeOuterRealmsWarning = useCallback(() => {
+    if (!character) return;
+
+    const outerRealmsSeenKey = `outer-realms-warning-seen-${character.characterId}`;
+    localStorage.setItem(outerRealmsSeenKey, 'true');
+    onCloseOuterRealmsInfoModal();
+  }, [character, onCloseOuterRealmsInfoModal]);
 
   return (
-    <MapNavigationProvider>
-      <CombatProvider>
-        <Grid
-          gap={2}
-          h={{ base: 'calc(100vh - 100px)', lg: 'calc(100vh - 100px)' }}
-          mt={4}
-          templateColumns={{ base: '1fr', lg: 'repeat(16, 1fr)' }}
-          templateRows={{ base: 'repeat(12, 1fr)', lg: 'repeat(12, 1fr)' }}
-        >
-          <GridItem
-            border="2px solid"
-            colSpan={{ base: 1, lg: 4 }}
-            display={{ base: 'none', lg: 'block' }}
-            overflowY="auto"
-            p={4}
-            rowSpan={{ base: 12, lg: 12 }}
-          >
+    <Grid
+      gap={2}
+      h={{ base: 'calc(100vh - 100px)', lg: 'calc(100vh - 100px)' }}
+      mt={4}
+      templateColumns={{ base: '1fr', lg: 'repeat(16, 1fr)' }}
+      templateRows={{ base: 'repeat(12, 1fr)', lg: 'repeat(12, 1fr)' }}
+    >
+      <GridItem
+        border="2px solid"
+        colSpan={{ base: 1, lg: 4 }}
+        display={{ base: 'none', lg: 'block' }}
+        overflowY="auto"
+        p={4}
+        rowSpan={{ base: 12, lg: 12 }}
+      >
+        <StatsPanel />
+      </GridItem>
+      <GridItem
+        border="2px solid"
+        colSpan={{ base: 1, lg: 8 }}
+        colStart={{ base: 0, lg: 5 }}
+        overflowY="auto"
+        p={{ base: 2, lg: 4 }}
+        pos="relative"
+        rowSpan={{ base: 3, lg: 6 }}
+        rowStart={{ base: 0, lg: 0 }}
+      >
+        <TileDetailsPanel />
+      </GridItem>
+      <GridItem
+        border="2px solid"
+        colSpan={{ base: 1, lg: 8 }}
+        colStart={{ base: 0, lg: 5 }}
+        overflowY="auto"
+        p={{ base: 2, lg: 4 }}
+        rowSpan={{ base: 4, lg: 6 }}
+        rowStart={{ base: 4, lg: 7 }}
+      >
+        <ActionsPanel />
+      </GridItem>
+      <GridItem
+        colSpan={{ base: 1, lg: 4 }}
+        colStart={{ base: 0, lg: 13 }}
+        rowSpan={{ base: 3, lg: 12 }}
+        rowStart={{ base: 8, lg: 0 }}
+      >
+        <MapPanel />
+      </GridItem>
+      <Box
+        bottom={2}
+        display={{ base: 'block', lg: 'none' }}
+        left="50%"
+        pos="fixed"
+        px={2}
+        transform="translateX(-50%)"
+        w="100%"
+      >
+        <Popover>
+          <PopoverTrigger>
+            <VStack>
+              <Button size="sm" w="100%">
+                Stats
+              </Button>
+            </VStack>
+          </PopoverTrigger>
+          <PopoverContent p={4}>
             <StatsPanel />
-          </GridItem>
-          <GridItem
-            border="2px solid"
-            colSpan={{ base: 1, lg: 8 }}
-            colStart={{ base: 0, lg: 5 }}
-            overflowY="auto"
-            p={{ base: 2, lg: 4 }}
-            pos="relative"
-            rowSpan={{ base: 3, lg: 6 }}
-            rowStart={{ base: 0, lg: 0 }}
-          >
-            <TileDetailsPanel />
-          </GridItem>
-          <GridItem
-            border="2px solid"
-            colSpan={{ base: 1, lg: 8 }}
-            colStart={{ base: 0, lg: 5 }}
-            overflowY="auto"
-            p={{ base: 2, lg: 4 }}
-            rowSpan={{ base: 4, lg: 6 }}
-            rowStart={{ base: 4, lg: 7 }}
-          >
-            <ActionsPanel />
-          </GridItem>
-          <GridItem
-            colSpan={{ base: 1, lg: 4 }}
-            colStart={{ base: 0, lg: 13 }}
-            rowSpan={{ base: 3, lg: 12 }}
-            rowStart={{ base: 8, lg: 0 }}
-          >
-            <MapPanel />
-          </GridItem>
-          <Box
-            bottom={2}
-            display={{ base: 'block', lg: 'none' }}
-            left="50%"
-            pos="fixed"
-            px={2}
-            transform="translateX(-50%)"
-            w="100%"
+          </PopoverContent>
+        </Popover>
+      </Box>
+      <InfoModal
+        heading="Welcome to the game board!"
+        isOpen={isEquipInfoModalOpen}
+        onClose={onCloseEquipInfoModal}
+      >
+        <Text>
+          In order to start battling, you must have at least 1 weapon equipped.
+          Go to your{' '}
+          <Text
+            as={Link}
+            color="blue"
+            to={`/characters/${character?.characterId}`}
+            _hover={{
+              textDecoration: 'underline',
+            }}
           >
-            <Popover>
-              <PopoverTrigger>
-                <VStack>
-                  <Button size="sm" w="100%">
-                    Stats
-                  </Button>
-                </VStack>
-              </PopoverTrigger>
-              <PopoverContent p={4}>
-                <StatsPanel />
-              </PopoverContent>
-            </Popover>
-          </Box>
-        </Grid>
-        <InfoModal
-          heading="Welcome to the game board!"
-          isOpen={isOpen}
-          onClose={onClose}
-        >
-          <Text>
-            In order to start battling, you must have at least 1 weapon
-            equipped. Go to your{' '}
-            <Text
-              as={Link}
-              color="blue"
-              to={`/characters/${character?.characterId}`}
-              _hover={{
-                textDecoration: 'underline',
-              }}
-            >
-              character page
+            character page
+          </Text>{' '}
+          to equip a weapon.
+        </Text>
+      </InfoModal>
+      <InfoModal
+        heading="Careful! You're about to enter the Outer Realms!"
+        isOpen={isOuterRealmsInfoModalOpen}
+        onClose={onAcknowledgeOuterRealmsWarning}
+      >
+        <VStack>
+          <IoIosWarning color="orange" size={40} />
+          <Text mt={4}>
+            The{' '}
+            <Text as="span" fontWeight={700}>
+              Outer Realms
             </Text>{' '}
-            to equip a weapon.
+            is a dangerous place for a level 1 character. Any other player could
+            attack you at any time.
+          </Text>
+          <Text>
+            It is recommended that you level up your character more before
+            entering.
           </Text>
-        </InfoModal>
-      </CombatProvider>
-    </MapNavigationProvider>
+        </VStack>
+      </InfoModal>
+    </Grid>
   );
 };

From 8a466664c8e5c546b7b36011e527e289940cc080 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Fri, 19 Jul 2024 17:57:29 -0600
Subject: [PATCH 6/6] Fix rollStats issue

---
 packages/client/src/lib/mud/createSystemCalls.ts | 13 +++++++++++--
 packages/client/src/pages/Character.tsx          |  1 -
 packages/client/src/pages/CharacterCreation.tsx  |  2 +-
 packages/client/src/pages/GameBoard.tsx          |  4 ++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/lib/mud/createSystemCalls.ts b/packages/client/src/lib/mud/createSystemCalls.ts
index f77b14d7d..a5732f298 100644
--- a/packages/client/src/lib/mud/createSystemCalls.ts
+++ b/packages/client/src/lib/mud/createSystemCalls.ts
@@ -90,6 +90,7 @@ export function createSystemCalls(
     CombatEncounter,
     Position,
     Spawned,
+    Stats,
   }: ClientComponents,
 ) {
   const createMatch = async (
@@ -411,9 +412,17 @@ export function createSystemCalls(
         },
       );
 
-      await waitForTransaction(tx);
+      const { blockNumber } = await waitForTransaction(tx);
+
+      const blockToWaitFor = blockNumber + BigInt(2);
+
+      let currentBlockNumber = await publicClient.getBlockNumber();
+      while (currentBlockNumber < blockToWaitFor) {
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        currentBlockNumber = await publicClient.getBlockNumber();
+      }
 
-      const success = !!getComponentValue(Characters, characterEntity);
+      const success = !!getComponentValue(Stats, characterEntity);
       return {
         success,
       };
diff --git a/packages/client/src/pages/Character.tsx b/packages/client/src/pages/Character.tsx
index ee2ce4354..ad85fd5b3 100644
--- a/packages/client/src/pages/Character.tsx
+++ b/packages/client/src/pages/Character.tsx
@@ -286,7 +286,6 @@ export const CharacterPage = (): JSX.Element => {
       {character ? (
         <Grid
           gap={2}
-          h={{ base: 'calc(100vh - 100px)', lg: 'calc(100vh - 100px)' }}
           mt={4}
           rowGap={{ base: 3, lg: 10 }}
           sx={{
diff --git a/packages/client/src/pages/CharacterCreation.tsx b/packages/client/src/pages/CharacterCreation.tsx
index b60c6e7e2..7a8d8575a 100644
--- a/packages/client/src/pages/CharacterCreation.tsx
+++ b/packages/client/src/pages/CharacterCreation.tsx
@@ -244,7 +244,7 @@ export const CharacterCreation = (): JSX.Element => {
         throw new Error(error);
       }
 
-      refreshCharacter();
+      await refreshCharacter();
       renderSuccess('Stats rolled!');
     } catch (e) {
       renderError('Failed to roll stats.', e);
diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index 54989ea7e..4e106202a 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -90,10 +90,10 @@ export const GameBoard = (): JSX.Element => {
   return (
     <Grid
       gap={2}
-      h={{ base: 'calc(100vh - 100px)', lg: 'calc(100vh - 100px)' }}
+      h="calc(100vh - 100px)"
       mt={4}
       templateColumns={{ base: '1fr', lg: 'repeat(16, 1fr)' }}
-      templateRows={{ base: 'repeat(12, 1fr)', lg: 'repeat(12, 1fr)' }}
+      templateRows="repeat(12, 1fr)"
     >
       <GridItem
         border="2px solid"