📜 Making a Quest Log

For the quest log let's create 2 local scripts. One for the HUD and nother one for the quest log! Feel free to copy paste the example.

👀 Example

--Hud.lua
--!strict
local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local RoQuest = require(ReplicatedStorage.RoQuest).Client

local localPlayer: Player = Players.LocalPlayer
local playerGui = localPlayer:WaitForChild("PlayerGui")
local questLog = playerGui:WaitForChild("QuestLog")
local hud = playerGui:WaitForChild("HUD")

local screens = {
	QuestLog = questLog.Container,
}

local Hud = {}
Hud.currentScreen = ""

function Hud:DisableScreen(screenName: string)
	if not screens[screenName] then
		return
	end

	screens[screenName].Visible = false
	self.currentScreen = ""
end

function Hud:EnableScreen(screenName: string)
	local currentScreen = self.currentScreen
	self:DisableScreen(self.currentScreen)

	if screenName == currentScreen then
		return
	end

	screens[screenName].Visible = true
	self.currentScreen = screenName
end

RoQuest.OnStart():andThen(function()
	for _, instance: Instance in hud.Container:GetChildren() do
		if not instance:IsA("ImageButton") then
			continue
		end

		(instance :: ImageButton).Activated:Connect(function()
			Hud:EnableScreen(instance.Name)
		end)   
	end	

end)

--QuestLog.lua

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")

local RoQuest = require(ReplicatedStorage.RoQuest).Client
local Red = require(ReplicatedStorage.RoQuest.Vendor.Red).Client

type Quest = RoQuest.Quest

local DEFAULT_COLOR: Color3 = Color3.fromRGB(140, 140, 140)
local ACTIVE_COLOR: Color3 = Color3.fromRGB(255, 255, 127)

local localPlayer: Player = Players.LocalPlayer
local playerGui: PlayerGui = localPlayer:WaitForChild("PlayerGui")
local questLog: ScreenGui = playerGui:WaitForChild("QuestLog")
local template: Frame = questLog.Container.Unavailable.Template:Clone()
questLog.Container.Unavailable.Template:Destroy() -- Delete the template after we cached a clone

local QuestLog = {}
QuestLog.screens = {} :: {[string]: ScrollingFrame}
QuestLog.buttons = {} :: {[string]: GuiButton}
QuestLog.currentScreen = "" :: string

function QuestLog:UpdateButtonColor()
	for buttonName: string, button: GuiButton in self.buttons do
		button.BackgroundColor3 = buttonName == self.currentScreen and ACTIVE_COLOR or DEFAULT_COLOR
	end
end

function QuestLog:SetScreen(name: string)
	if self.currentScreen == name then
		return
	end

	local currentScrollingFrame: ScrollingFrame? = self.screens[self.currentScreen]
	local newScrollingFrame: ScrollingFrame? = self.screens[name]

	if currentScrollingFrame then
		currentScrollingFrame.Visible = false
	end

	if newScrollingFrame then
		newScrollingFrame.Visible = true
	end

	self.currentScreen = name
	self:UpdateButtonColor()
end

function QuestLog:SetupButtons()
	for _, button: Instance in questLog.Container.Buttons:GetChildren() do
		if not button:IsA("GuiButton") then
			continue
		end

		(button :: GuiButton).Activated:Connect(function()
			self:SetScreen(button.Name)
		end)

		self.buttons[button.Name] = button
	end
end

function QuestLog:SetupWindows()
	for _, child: Instance in questLog.Container:GetChildren() do
		if not child:IsA("ScrollingFrame") then
			continue
		end

		self.screens[child.Name] = child
	end
end

function QuestLog:DestroyQuest(scrollingFrame: ScrollingFrame, questId: string)
	local frame: Frame? = scrollingFrame:FindFirstChild(questId)

	if frame then
		frame:Destroy()
	end
end

function QuestLog:CreateQuest(scrollingFrame: ScrollingFrame, quest: Quest)
	local Net = Red "QuestManager"

	local frame: Frame = scrollingFrame:FindFirstChild(quest.QuestId) or template:Clone()
	frame.Name = quest.QuestId
	frame.Title.Text = quest.Name
	frame.Description.Text = quest.Description
	frame.Buttons.Cancel.Visible = quest:GetQuestStatus() == RoQuest.QuestStatus.InProgress
	frame.Buttons.Cancel.Activated:Connect(function()
		Net:Fire("CancelQuest", quest.QuestId)
	end)

	frame.Visible = true
	frame.Parent = scrollingFrame
end

function QuestLog:PopulateScreen(scrollingFrame: ScrollingFrame, quests: {[string]: Quest})
	for _, child: Instance in scrollingFrame:GetChildren() do -- Remove quests no longer in use
		if not child:IsA("Frame") then
			continue
		end

		if not quests[child.Name] then
			child:Destroy()
		end
	end

	for _, quest: Quest in quests do
		self:CreateQuest(scrollingFrame, quest)
	end
end

function QuestLog:SetAllScreens()
	self:PopulateScreen(self.screens["InProgress"], RoQuest:GetInProgressQuests())
	self:PopulateScreen(self.screens["Available"], RoQuest:GetAvailableQuests())
	self:PopulateScreen(self.screens["Completed"], RoQuest:GetCompletedQuests())
	self:PopulateScreen(self.screens["Delivered"], RoQuest:GetDeliveredQuests())
	self:PopulateScreen(self.screens["Unavailable"], RoQuest:GetUnAvailableQuests())
end

RoQuest.OnStart():andThen(function()
	QuestLog:SetupWindows() -- Caching our windows
	QuestLog:SetupButtons() -- Caching our buttons
	QuestLog:SetScreen("InProgress") -- Setting the initial active screen
	QuestLog:SetAllScreens() -- Populating all screens

	RoQuest.OnUnAvailableQuestChanged:Connect(function()
		QuestLog:PopulateScreen(QuestLog.screens["Unavailable"], RoQuest:GetUnAvailableQuests())
	end)

	RoQuest.OnAvailableQuestChanged:Connect(function()
		QuestLog:PopulateScreen(QuestLog.screens["Available"], RoQuest:GetAvailableQuests())
	end)

	RoQuest.OnCompletedQuestChanged:Connect(function()
		QuestLog:PopulateScreen(QuestLog.screens["Completed"], RoQuest:GetCompletedQuests())
	end)

	RoQuest.OnDeliveredQuestChanged:Connect(function()
		QuestLog:PopulateScreen(QuestLog.screens["Delivered"], RoQuest:GetDeliveredQuests())
	end)

	RoQuest.OnInProgressQuestChanged:Connect(function()
		QuestLog:PopulateScreen(QuestLog.screens["InProgress"], RoQuest:GetInProgressQuests())
	end)

	RoQuest.OnPlayerDataChanged:Connect(function()
		QuestLog:SetAllScreens()
	end) -- Hard reset our screens    	
end)

🔑 Main take aways

We used multiple events from RoQuest to listen to the changes from specific quest states. We also used different quest getters to get the information from said quests.

info

You should always have a listener for when the player data changes that resets everything. This ensure that if a player's data gets hard reset that you can update the interface accordingly.

	RoQuest.OnPlayerDataChanged:Connect(function()
		QuestLog:SetAllScreens()
	end) -- Hard reset our screens