# Interactable Modal UI Setup Guide

## Overview
Simple modal UI that displays key and interaction text when the player is within interaction range of an object.

## Files Created
- `Assets/Scripts/InteractableModal.cs` - The modal UI component (simplified)
- `Assets/Scripts/InteractableModalManager.cs` - Manages showing/hiding the modal

## Unity Setup Instructions

### 1. Create the Modal UI Prefab

#### Step 1: Create Canvas
1. Right-click in Hierarchy → UI → Canvas
2. Name it "InteractableModalCanvas"
3. Set Canvas Scaler to "Scale With Screen Size"
4. Set Reference Resolution to 1920x1080

#### Step 2: Create Modal Panel
1. Right-click on Canvas → UI → Panel
2. Name it "ModalPanel"
3. Set Panel size (e.g., 200x60)
4. Set background image (use panel-transparent-border-015.png from Assets/UI/)
5. Set background color with alpha (e.g., dark gray with 0.8 alpha)

#### Step 3: Add Text Elements
Under ModalPanel, create:

**Key Text:**
- UI → TextMeshPro - Text
- Name: "KeyText"
- Position: Left side of panel
- Font size: 32
- Text: "E"
- Alignment: Center
- Color: Yellow or Orange

**Interact Text:**
- UI → TextMeshPro - Text
- Name: "InteractText"
- Position: Right side of panel
- Font size: 24
- Text: "채광하기"
- Alignment: Left
- Color: White

#### Step 4: Add InteractableModal Component
1. Add `InteractableModal` script to ModalPanel (or parent GameObject)
2. Assign references in Inspector:
   - ModalPanel: The ModalPanel GameObject
   - KeyText: The KeyText TMP component
   - InteractText: The InteractText TMP component
   - Default Key: "E" (or your interaction key)

### 2. Setup on Player Object

#### Step 1: Add InteractableModalManager
1. Select your Player prefab
2. Add `InteractableModalManager` component
3. Assign references:
   - InteractableModal: Reference to the modal GameObject
   - PlayerInteraction: Reference to PlayerInteraction component (should auto-find)

## Usage

The modal will automatically:
1. Show when an interactable object (Resource, Building) is detected within range
2. Display the key (default: "E") and interaction text
3. Hide when no interactable is in range

## Example Display

When looking at a Resource:
- Key: "E"
- Text: "광석 채집"

When looking at a Building:
- Key: "E"
- Text: "건물 상호작용"

## Customization

### Change Key Text
Modify `defaultKey` in Inspector or change `keyText.text` in code.

### Change Style
Modify the TextMeshPro components:
- Font size
- Colors
- Bold/Italic
- Shadow/Outline

### Change Panel Size
Adjust the ModalPanel RectTransform size and background.

## Troubleshooting

**Modal not showing:**
- Check if PlayerInteraction is detecting objects (debug ray should appear)
- Verify InteractableModalManager is attached to player
- Check if modal references are assigned in Inspector
- Ensure modal starts as hidden (activeSelf = false in Start())

**Text not updating:**
- Ensure IInteractable.GetInteractionPrompt() returns proper format: "[E] Text"
- Check if _currentInteractable is being set in InteractableModal

**Layout issues:**
- Check RectTransform anchors and pivots
- Verify Panel is properly positioned on Canvas