# UI Fish Strike

<figure><img src="https://2707882048-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7extQzUzohv5ZZCgCVG8%2Fuploads%2F5QhQ0jhWIQJ26ZdH7X0A%2Fimage.png?alt=media&#x26;token=3300b473-ef6c-459f-8cd0-b1e4334d1125" alt="" width="563"><figcaption></figcaption></figure>

A UI component that visualizes the player’s remaining reaction time during a fish strike using a dynamic fill bar. The bar fades in when a fish bites and fades out when the window closes, with color shifting based on urgency.

Attach this to a UI element (e.g., a canvas or panel) that should display real-time strike timing feedback.

***

#### 🔧 Inspector Settings

<figure><img src="https://2707882048-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7extQzUzohv5ZZCgCVG8%2Fuploads%2FZTK1G1bMMoL7krGkiPEo%2Fimage.png?alt=media&#x26;token=1cd000a9-5a28-4ae9-a1ef-2a6fc5f3bb07" alt="" width="341"><figcaption></figcaption></figure>

**References**

* **Time Fill Bar**\
  The `Image` component,  a filled horizontal bar that visually represents remaining strike time.

**Time Settings**

* **Remaining Time**\
  A `Global Float Reference` from fishing state that provides the current time left before the fish escapes.

**Fade Settings**

* **Fade In/Out Duration**\
  Duration (in seconds) for the smooth fade-in when the strike begins and fade-out when it ends.

**Color Settings**

* **Time Gradient**\
  A `Gradient` that maps fill percentage to color—e.g., green (plenty of time) → yellow → red (almost out of time).

***

#### 💡 Key Behavior

* **Automatic Monitoring**: When `StartRemainingTimeMonitoring()` is called, it:
  * Records the initial (`max`) time value.
  * Fades the UI in.
  * Continuously updates the fill amount and color every frame via `Update()`.
* **Visual Feedback**: The bar’s color dynamically shifts using the provided gradient, giving players intuitive urgency cues.

***

#### 🎯 Usage Flow

1. Fishing system detects a bite and begins counting down `remainingTime`.
2. Calls `StartRemainingTimeMonitoring()` on this component.
3. UI fades in and displays a live-updating time bar.
4. When time runs out or the player reels in, the system calls `StopRemainingTimeMonitoring()`.
5. UI fades out smoothly and stops consuming update cycles.

<figure><img src="https://2707882048-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7extQzUzohv5ZZCgCVG8%2Fuploads%2FF7gKPkAud3mdHjk6FGYX%2Fimage.png?alt=media&#x26;token=665f8358-aea7-4458-8082-16c6f54aa0e6" alt=""><figcaption></figcaption></figure>

\
The [**Event Listener** ](https://sunfish-studios.gitbook.io/fishing-for-animal-controller/secondary-components/event-system)is used to respond to events and trigger the responses on **UIFishStrike**.
