Custom Art Popup UI

<#

    A generic pop-up box which can be used for a variety of purposes
    in games such as notifications, NPC dialogue, tooltips, weclome
    messages, ect..

#>


using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/Diagnostics }

#imports
using { /UnrealEngine.com/Temporary/UI }
using { /Fortnite.com/UI }
using { /Verse.org/Colors }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /Verse.org/Assets }
using {EZUI}

EZ_PopUpManager := class () 
{
    <# 
        adjusts the general UI position on-screen by pixels based upon a 1080p resolution
        be aware that button's have no DefaultDesiredSize so their margin's will need to
        be manually adjusted as you move the pop-up around
    #>
    var UI_Pos_Horizonal : float = 0.0
    var UI_Pos_Vertical: float = 0.0

    EZ_LinkedCreativeDevice<public> : ez_ui_popup           # a backreference to the device that created this EZUI class
    EZ_LinkedPlayer<public> : player                         # the player linked to this instance of the EZUI class
    EZ_UI_ID<public> : int                                  # used to control what UI is initialised by the class
    EZ_PopUpBoxMsg<public> : message                        # the pop up box text
    EZ_PopUpButtonMsg<public> : message                     # the pop up button text
    
    var IsInitialized<private> : logic = false              # a lock to prevent recreating the canvas after the first execution of Initialize()
    var MainCanvas<private> : canvas = canvas{}             # the canvas that holds all the screen elements and will be added to the PlayerUI

    #Interactive UI components
    CustomPopUpButton<private>:button_quiet = button_quiet{}

    #FNC Visual UI Components
    <# 
        Design your visible UI widgets here which use the default FNC gfx
        don't bother using DefaultText as it is handled within Ini()
    #>

    DefaultPopUpBox<private> : color_block = color_block
    {
        DefaultColor := color{R := 0.0, G := 0.0, B := 1.0}
        DefaultOpacity := 0.9
        DefaultDesiredSize := vector2{X := 600.0, Y := 115.0}
    }

    DefaultPopUpBoxOutline<private> : color_block = color_block
    {
        DefaultColor := color{R := 1.0, G := 1.0, B := 1.0}
        DefaultOpacity := 1.0
        DefaultDesiredSize := vector2{X := 605.0, Y := 120.0}
    }

    DefaultPopUpBoxText <private> : text_block = text_block
    {
        DefaultTextColor := color{R := 1.0, G := 1.0, B := 1.0}
    }

    DefaultPopUpButton <private> : button_loud = button_loud{}
    


    # do all the things
    Ini<public>() : void =
        if (IsInitialized?): 
            return

        set UI_Pos_Horizonal = EZ_LinkedCreativeDevice.PositionHorizontal
        set UI_Pos_Vertical = EZ_LinkedCreativeDevice.PositionVertical

        if(EZ_UI_ID = 1): #uses default Fortnite UI gfx
            DefaultPopUpButton.OnClick().Subscribe(CloseUIButtonClick)
            DefaultPopUpBoxText.SetText(EZ_PopUpBoxMsg)
            DefaultPopUpButton.SetText(EZ_PopUpButtonMsg)
            PopUp_1()
        
        if(EZ_UI_ID = 2): #uses your imported UI gfx
            CustomPopUpButton.OnClick().Subscribe(CloseUIButtonClick)
            PopUp_2()
        
       
    #.........................


    OpenUI<public>() : void =
        if (PlayerUI := GetPlayerUI[EZ_LinkedPlayer]):
            PlayerUI.AddWidget(GetMainCanvas(), player_ui_slot{InputMode := ui_input_mode.All}) #all canvas and content interactions active
    
    
    # closes UI
    CloseUI<public>()<suspends> : void =
        EZUI.DeleteWidget(EZ_LinkedPlayer,  GetMainCanvas())

    #.........................

    GetMainCanvas<public>() : canvas = MainCanvas  # Exposes the class Canvas to public

    CloseUIButtonClick<private>(WidgetEvent : widget_message) : void = 
        if (PlayerUI := GetPlayerUI[WidgetEvent.Player]):
            spawn{CloseUI()}

    # Builds a canvas using default FNC UI
    PopUp_1 <private>() : void =

        UIWrapper := canvas
        {
            Slots:=array 
            {
                canvas_slot
                    {
                        Anchors := anchors{Minimum := vector2{X := 0.5 , Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}}
                        Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
                        Alignment := vector2{X := 0.5, Y := 0.5}
                        ZOrder := 1
                        SizeToContent := true
                        Widget := DefaultPopUpBox
                    }
                   canvas_slot
                    {
                        Anchors := anchors{Minimum := vector2{X := 0.5 , Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}}
                        Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
                        Alignment := vector2{X := 0.5, Y := 0.5}
                        ZOrder := 0
                        SizeToContent := true
                        Widget := DefaultPopUpBoxOutline
                    }
                    canvas_slot
                    {
                        Anchors := anchors{Minimum := vector2{X := 0.5 , Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}}
                        Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
                        Alignment := vector2{X := 0.5, Y := 0.5}
                        ZOrder := 2
                        SizeToContent := true
                        Widget := DefaultPopUpBoxText
                    }
                    canvas_slot
                    {
                        Anchors := anchors{Minimum := vector2{X := 0.0, Y := 0.0}, Maximum := vector2{X := 1.0, Y := 1.0}}
                        Offsets := margin{Top := 600.0, Left := 650.0, Right := 650.0, Bottom := 450.0}
                        Alignment := vector2{X := 0.5, Y := 0.5}
                        ZOrder := 2
                        SizeToContent := false
                        Widget := DefaultPopUpButton
                    }
            }
        }

        set MainCanvas = canvas
        {
            Slots := array
                {
                    NewDefaultBoxSlot:= canvas_slot
                    {
                        Anchors := anchors{Minimum := vector2{X := 0.0 , Y := 0.0}, Maximum := vector2{X := 1.0, Y := 1.0}}
                        Offsets := margin{Top := UI_Pos_Vertical, Left := UI_Pos_Horizonal, Right := 0.0, Bottom := 0.0}
                        Alignment := vector2{X := 0.5, Y := 0.5}
                        ZOrder := 1
                        SizeToContent := false
                        Widget := UIWrapper
                    }
                }
            }
        
            set IsInitialized = true # Lock the inialization state to prevent from running this function again
    #.........................
    
    # Builds a canvas using custom artwork UI
    PopUp_2 <private>() : void =

        #Custom Visual UI components
        <# 
        Design your visible UI widgets here which use imported custom visuals
        This is only used if you enable the "UseCustomArt" tickbox on the properties

        refer to https://dev.epicgames.com/documentation/en-us/uefn/exposing-assets-to-verse-in-unreal-editor-for-fortnite
        for info on how to import custom textures required for texture_blocks. 
        #>
        
        CustomArt1 := Textures.NyanCatPNG
        CustomArt2 := Textures.NyanMewPNG
            
        if (EZ_LinkedCreativeDevice.UseCustomdArt?):
        NyanCatGfx: texture_block = texture_block
        {
            DefaultImage := CustomArt1
            DefaultDesiredSize := vector2{X := 820.0, Y := 771.0}
        }


        NyanButtonGfx : texture_block = texture_block
        {
            DefaultImage := CustomArt2
            DefaultDesiredSize := vector2{X := 468.0, Y := 147.0}
        }

        UIWrapper := canvas
        {
            Slots:=array 
            {
                canvas_slot
                {
                    Anchors := anchors{Minimum := vector2{X := 0.5 , Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}}
                    Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
                    Alignment := vector2{X := 0.5, Y := 0.5}
                    ZOrder := 0
                    SizeToContent := true
                    Widget := NyanCatGfx
                }
                canvas_slot
                {
                    Anchors := anchors{Minimum := vector2{X := 0.5 , Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}}
                    Offsets := margin{Top := 250.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
                    Alignment := vector2{X := 0.5, Y := 0.5}
                    ZOrder := 1
                    SizeToContent := true
                    Widget := NyanButtonGfx
                }
                canvas_slot
                {
                    Anchors := anchors{Minimum := vector2{X := 0.0, Y := 0.0}, Maximum := vector2{X := 1.0, Y := 1.0}}
                    Offsets := margin{Top := 700.0, Left := 750.0, Right := 750.0, Bottom := 200.0}
                    Alignment := vector2{X := 0.5, Y := 0.5}
                    ZOrder := 2
                    SizeToContent := false
                    Widget := CustomPopUpButton
                }
            }
        }

        set MainCanvas = canvas
        {
        Slots := array
            {
                canvas_slot
                {
                    Anchors := anchors{Minimum := vector2{X := 0.0 , Y := 0.0}, Maximum := vector2{X := 1.0, Y := 1.0}}
                    Offsets := margin{Top := UI_Pos_Vertical, Left := UI_Pos_Horizonal, Right := 0.0, Bottom := 0.0}
                    Alignment := vector2{X := 0.5, Y := 0.5}
                    ZOrder := 0
                    SizeToContent := true
                    Widget := UIWrapper
                }

            }
        }

        set IsInitialized = true # Lock the inialization state to prevent from running this function again

    #.........................
        

} # END EZ_PopUpManager ------------------------------------------------------------------------------------------------------------------------------------

ez_ui_popup := class(creative_device):

    @editable ShowUITrigger : trigger_device = trigger_device {}
    @editable PopUpBoxText : string = "Thank you for using EZUI for UEFN!"
    @editable PopUpButtonText : string = "CLOSE"
    @editable PositionHorizontal <public> : type{_X:float where -540.000000 <= _X, _X <= 540.00000} = 0.0
    @editable PositionVertical <public> : type{_X:float where -960.000000 <= _X, _X <= 960.00000} = 0.0
    @editable UseCustomdArt <public> : logic = false


    # UI regisitration
    var PlayerToUIMap : [player]EZ_PopUpManager = map{} #[playerdata]/ez_ui class


    OnBegin<override>()<suspends> : void =
        ShowUITrigger.TriggeredEvent.Subscribe(OpenUI)

    # all the steps needed to open the Pop Up
    OpenUI<private>(MaybePlayer : ?agent) : void = 
    {
    
        # check that the event was triggered by a player and stop if it wasn't
        Result := EZUI.IsAPlayer(MaybePlayer,Self)
        if (Result = false):
            return
        #.........................

        #covert txt strings to messages for the UI
        PopUpBoxTextMsg : message = EZUI.TextToMsg(PopUpBoxText)
        PopUpButtonTextMsg : message = EZUI.TextToMsg(PopUpButtonText)
        #.........................

        # pop-up templates selected by a UI ID number
        var UI_ID : int = 1 #uses default FNC UI by default
            
        if (UseCustomdArt?): 
            set UI_ID = 2 #custom artwork is supported but requires imported assets
        #.........................

        if(PlayerAgent := MaybePlayer?): #set the typing to agent from ?agent

            # Verify if an Linked pop-up manager already exists and uses it, if not, create a new one
            if ( InteractingPlayer := player[PlayerAgent] ) 
            {   
                var OptPlayerUI :?EZ_PopUpManager = false
        
                if (ThisPlayerUI := PlayerToUIMap[InteractingPlayer])
                { set OptPlayerUI = option{ThisPlayerUI} }
                    
                else if (ThisPlayerUI := set PlayerToUIMap[InteractingPlayer] = EZ_PopUpManager

                            #everything that is passed to the pop-up manager
                            { 
                                EZ_LinkedPlayer := InteractingPlayer,
                                EZ_LinkedCreativeDevice := Self, 
                                EZ_UI_ID := UI_ID, 
                                EZ_PopUpBoxMsg := PopUpBoxTextMsg,
                                EZ_PopUpButtonMsg := PopUpButtonTextMsg
                            }
                        ) 
                    
                { ThisPlayerUI.Ini(), set OptPlayerUI = option{ThisPlayerUI} }
        
                # Try to open the Interface for the player
                if (PlayerUI := OptPlayerUI?):
                    PlayerUI.OpenUI()
                else 
                    { Print("Error when getting saved or creating ThisPlayerUI") }
            }
        #.........................
    }



<#
    a special thamks to: 
        Mayapple
        SprinterMax
        Daigorō
        japan
        UEFN Discord community

    ****************************************************************************************
    Made with EZUI, please follow @kryyative on Instagram Threads and @KryyssX on X (Twitter)
    for more useful Snippets, UEFN & UE5 news,tutorials and community spotlights!
    ****************************************************************************************

    If you found EZUI useful please include the text above in your credits to show your support
    for my work and encourage others to use EZUI for their projects. Thank you! ^_^
#>