Tutorial: Building an RPG Shop

In this tutorial, we will build a visual Shop interface where a player can buy a sword. This involves:

1. Navigation: Menu -> Shop.
2. Interaction: Clicking "Buy Sword".
3. Confirmation: Using the HookInAppNotifications to ask "Are you sure?".
4. Logic: Checking gold and deducting it.
5. Feedback: Playing a sound and updating the UI via Signals.

Prerequisites

• A basic scene with HookUIManager initialized.
• Two Views: MainMenu and ShopView.
• A HookInAppNotifications prefab in your scene (usually under the Canvas).

Step 1: define IDs

Dashboard > Settings:

• Signals: OnGoldUpdated, OnItemBought.
• Buttons: Btn_OpenShop, Btn_BuySword, Btn_CloseShop.

Step 2: The Script (ShopLogic.cs)

We need a script to handle the "Business Logic". HookUI doesn't do math, it just handles flow.

using JsonProductions.HookUI.Runtime;
using JsonProductions.HookUI.Runtime.Prompts; // For In-App Notifications

public class ShopLogic : MonoBehaviour
{
    public int Gold = 100;
    
    // Wire this to the "Buy Sword" button in Inspector
    public void TryBuySword()
    {
        // 1. Open Confirmation
        HookInAppNotifications.Show(
            "Confirm Purchase",
            "Buy Diamond Sword for 50 Gold?",
            OnConfirmBuy, // Action for YES
            null,         // Action for NO (do nothing)
            "Buy It!",
            "Cancel"
        );
    }
    
    void OnConfirmBuy()
    {
        if (Gold >= 50)
        {
            Gold -= 50;
            Debug.Log("Purchase Successful!");
            
            // 2. Notify Game
            HookSignalHub.Send("OnItemBought");
            HookSignalHub.Send("OnGoldUpdated");
            
            // 3. Close Shop (Optional: Navigate back)
            // HookUIManager.Instance.GoBack();
        }
        else
        {
            HookInAppNotifications.Show("Error", "Not enough cash, stranger!", "OK");
        }
    }
}

Step 3: Wiring the Graph

1. MainMenu Node: Connect Btn_OpenShop -> ShopView.
2. ShopView Node: Connect Btn_CloseShop -> MainMenu (or use GoBack in code).
3. The Buy Button: The Btn_BuySword button does NOT need a wire in the graph! Why? Because it doesn't navigate to a new screen immediately. It triggers logic.
   • Leave the port disconnected (or don't even add it to the node output).
   • On the View GameObject, finding the Button component.
   • Add OnClick event -> ShopLogic.TryBuySword.

Conclusion

This pattern demonstrates the "Hybrid" power of HookUI.

• Navigation (Menu ↔ Shop) is visual in the Graph.
• Business Logic (Transactions) represents standard C# code.
• Bridges: Used HookInAppNotifications for modal dialogs and Signals for updates.