Client (Fusion example)

--// I always use GetService as it's the most reliable way to fetch a service.
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local InputService = game:GetService("UserInputService")
local Lighting = game:GetService("Lighting")
local Players = game:GetService("Players")

--// Get the player objects early in the initialization progress as it is important.
local Player = Players.LocalPlayer
local Camera = workspace.CurrentCamera
local PlayerGui = Player:WaitForChild("PlayerGui")

--// Get all folders, before all sub-folders or objects of folders,and modules.
local Packages = ReplicatedStorage:WaitForChild("Packages")
local Interface = ReplicatedStorage:WaitForChild("Interface")
local Sounds = ReplicatedStorage:WaitForChild("Sounds")

--// I always use WaitForChild in an un-defined scope, as it ensures it will always be given time to load.
--// Load modules before objects.
local Fusion = require(Packages:WaitForChild("Fusion"))

local LootInterface = Interface:WaitForChild("LootInterface")
local PlantingFrame = LootInterface:WaitForChild("PlantingFrame")

local ScrollingFrame = PlantingFrame:WaitForChild("Frame"):WaitForChild("ScrollingFrame")
local CloseButton = PlantingFrame:WaitForChild("CloseButton")

local Tooltip = LootInterface:WaitForChild("Tooltip")

local Blur = Lighting:WaitForChild("Blur")

local OpenSound = Sounds:WaitForChild("Open")
local HoverSound = Sounds:WaitForChild("Hover")
local ClickSound = Sounds:WaitForChild("Click")

--// Initializing Fusion keywords.
local Value, Computed, Hydrate = Fusion.Value, Fusion.Computed, Fusion.Hydrate
local New, Children, OnEvent, OnChange = Fusion.New, Fusion.Children, Fusion.OnEvent, Fusion.OnChange
local Tween, Spring = Fusion.Tween, Fusion.Spring

local ACTIVATION_KEY = Enum.KeyCode.E

local SPRING_SPEED = 25
local SPRING_DAMPING = .5

--// This value is an important listener as it controls all functionality for opening and closing the GUI.
local InterfaceEnabled = Value(false)

local InterfaceEnabledComputation = Computed(function()
    local InterfaceEnabled = InterfaceEnabled:get()

    if InterfaceEnabled then
        OpenSound:Play()
    end

    return InterfaceEnabled
end)

--// Bootstrap for opening and closing the GUI (InputService)
local function InputBegan(InputObject, GameProcessedEvent)
    local InputKey = InputObject.KeyCode
    if GameProcessedEvent or InputKey ~= ACTIVATION_KEY then
        return
    end

    InterfaceEnabled:set(not InterfaceEnabled:get())
end

--// This runs on MouseButton1Click on the CloseButton Instance
local function CloseButtonClicked()
    InterfaceEnabled:set(false)
end

--// This runs every frame while the mouse is in a Cell
local function UpdateTooltipPosition(MouseInside)
    print(MouseInside:get())
    while MouseInside:get() do task.wait()
        local ScreenCenter = Camera.ViewportSize / 2
        local MousePosition = InputService:GetMouseLocation()
        local MouseInTopHalf = (MousePosition.Y - ScreenCenter.Y) < 0

        local TooltipAnchorY = MouseInTopHalf and .05 or .95

        Tooltip.AnchorPoint = Vector2.new(.95, TooltipAnchorY)
        Tooltip.Position = UDim2.fromOffset(MousePosition.X, MousePosition.Y)
    end
end

--// "Cell" is a keyword for a child of a "Grid" (UIGridLayout)
local function InitializeCell(Cell)
    local ImageButton = Cell:WaitForChild("ImageButton")
    local UIScale = nil
    local MouseInside = Value(false)

    local function ScaleComputation()
        return InterfaceEnabled:get() and (MouseInside:get() and .9 or 1) or 0
    end

    local function MouseInsideComputation()
        if MouseInside:get() then
            HoverSound:Play()
        end

        task.spawn(UpdateTooltipPosition, MouseInside)
        return MouseInside:get()
    end

    local function CellMouseEnter()
        MouseInside:set(true)
    end
    local function CellMouseLeave()
        MouseInside:set(false)
    end

    local function CellMouseButton1Click()
        ClickSound:Play()
    end

    UIScale = New "UIScale" {
        Parent = Cell,
        Scale = Spring(Computed(ScaleComputation), SPRING_SPEED, SPRING_DAMPING),
    }

    Hydrate(ImageButton) {
        [OnEvent "MouseEnter"] = CellMouseEnter,
        [OnEvent "MouseLeave"] = CellMouseLeave,
        [OnEvent "MouseButton1Click"] = CellMouseButton1Click
    }
    Hydrate(Tooltip) {
        Visible = MouseInsideComputation,
        Position = UDim2.new(0, 0, 0 ,0)
    }
    Computed(MouseInsideComputation)
end

--// This is a self contained function to reduce indentation when looping through children.
local function InitializeScrollingGrid()
    for _, Cell in ipairs(ScrollingFrame:GetChildren()) do
        if not Cell:IsA("Frame") then
            continue
        end

        InitializeCell(Cell)
    end
end

Hydrate(LootInterface) {
    --// Order of creation should replicate Instance.new()
    --// ex; Parent is set last.
    Enabled = InterfaceEnabledComputation,
    Parent = PlayerGui,

    [Children] = {
        PlantingFrame = Hydrate(PlantingFrame) {
            [Children] = {
                New "UIScale" {
                    Scale =  Spring(Computed(function()
                        return InterfaceEnabled:get() and 1.2 or 1
                    end), SPRING_SPEED, SPRING_DAMPING),
                },
                Hydrate(CloseButton) {
                    [OnEvent "MouseButton1Click"] = CloseButtonClicked
                },

                Computed(InitializeScrollingGrid)
            }
        },
    }
}

--// We init the Blur completely separately, becuase it is not in any way a descendent of LootInterface
Hydrate(Blur) {
    Enabled = InterfaceEnabledComputation,
    Size = Spring(Computed(function()
        return InterfaceEnabled:get() and 24 or 0
    end), SPRING_SPEED, SPRING_DAMPING)
}

--// Note, this was made with the functional programming paradigm in mind.

InputService.InputBegan:Connect(InputBegan)

--[[ // Order of operations for Fusion bootstrapping is
    1. Create
    2. Hydrate
    3. Compute

    Order of operations for a Fusion instances' properites and events is:

    1. Most essential to least essential properties
    2. Parent to object
    3. Initilaize blocks "[]" such as "Children"
]]