Roact Portal

DayOver.lua

local TweenService = game:GetService("TweenService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Nevermore = require(ReplicatedStorage:WaitForChild("Nevermore"))
local Roact = Nevermore("Roact")
local RoactRodux = Nevermore("RoactRodux")

local DayOver = Roact.Component:extend("DayOver")

function DayOver:init()
    self.frameRef = Roact.createRef()
end

function DayOver:render()
    if not self.props.dayOver then return end

    return Roact.createElement(Roact.Portal, {
        target = Nevermore("PlayerGuiUtils").getPlayerGui()
    }, {
        ScreenGui = Roact.createElement("ScreenGui", {
            IgnoreGuiInset = true
        }, {
            Frame = Roact.createElement("Frame", {
                BackgroundColor3 = Color3.fromRGB(68, 68, 68),
                BackgroundTransparency = 1,
                [Roact.Ref] = self.frameRef
            }, {
                TextLabel = Roact.createElement("TextLabel", {
                    Text = "Day is over!",
                    TextScaled = true,
                    TextColor3 = Color3.fromRGB(255, 255, 255),
                    AnchorPoint = Vector2.new(0.5, 0.5),
                    Position = UDim2.new(0.5, 0, 0.5, 0)
                })
            })
        })
    })
end

function DayOver:didUpdate()
    if not self.props.dayOver then return end

    local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut)
    local fadeIn = TweenService:Create(self.frameRef:getValue(), tweenInfo, { BackgroundTransparency = 0 })
    local fadeOut = TweenService:Create(self.frameRef:getValue(), tweenInfo, { BackgroundTransparency = 1 })

    fadeIn.Completed:Connect(function()
        self.props.resetDay()
        fadeOut:Play()
    end)

    fadeIn:Play()
end

local function mapStateToProps(state)
    return {
        dayOver = state.Manage.dayOver
    }
end

local function mapDispatchToProps(dispatch)
    return {
        resetDay = function()
            dispatch({
                type = "reset"
            })
        end
    }
end

DayOver = RoactRodux.connect(mapStateToProps, mapDispatchToProps)(DayOver)

return DayOver

main.lua

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Nevermore = require(ReplicatedStorage:WaitForChild("Nevermore"))
local Roact = Nevermore("Roact")
local Rodux = Nevermore("Rodux")
local RoactRodux = Nevermore("RoactRodux")

local Components = ReplicatedStorage:WaitForChild("RoactComponents")
local Reducer = require(ReplicatedStorage:WaitForChild("RoduxReducers"))
local PlayerGui = Nevermore("PlayerGuiUtils").getPlayerGui()

local ShopButton = require(script.ShopButton)
local DayTimer = require(script.DayTimer)
local Shop = require(Components.Shop)
local Screens = require(Components.Screens)

local store = Rodux.Store.new(Reducer, nil)

local element = Roact.createElement(RoactRodux.StoreProvider, {
    store = store
}, {
    MainUI = Roact.createElement("ScreenGui", nil, {
        Shop = Roact.createElement(Shop),
        ShopButton = Roact.createElement(ShopButton),
        DayTimer = Roact.createElement(DayTimer),
        DayOver = Roact.createElement(Screens.DayOver)
    })
})

Roact.mount(element, PlayerGui, "MainUI")