Terrain Types - Copy this React, Tailwind Component to your project

GameLayout Component: This is the main component that controls the game flow. It switches between the Map view (exploration) and the BattleScreen (when encountering a creature). Map Component: Handles the player’s movement across a grid based map using arrow keys. Represents different terrains: paths (walkable), obstacles (not walkable), grass, and forest. When the player moves over grass or forest tiles, there is a chance to trigger a battle with a random creature. BattleScreen Component: Displays a simple battle screen when a wild creature is encountered. For now, it allows the player to "Run Away" to end the battle and return to the map.