[ Unsolved ] Help with Roact / Rodux

Help and Feedback Scripting Support
, , ,
#1

I want to make a UI with Roact and Rodux that will update / create / destroy / update top menus whenever a remote is fired. I need help finding a way to do this

Example during a game:
InGame

Example in between games:
Lobby

I have looked into fragments and other posts, but couldn’t think of a good way to accomplish this

Example of what i’m kind of going for:

-- Server
local Remote = game.ReplicatedStorage.UpdateTop

Remote:FireAll("Create", "TitleOne")
Remote:FireAll("Remove", "TitleTwo")
Remote:FireAll("Update", "TitleOne", "my new text")

Expected result:
Result

Any help would be appreciated!

Im new to rodux and roact ok lol

#2

You got some errors in your code, RemoteEvent doesn’t have a function :FireAll(), it has the function :FireAllClients(). Hope I helped.

#3

That was an example, that wasnt really my code. I am looking for a way to use roact and rodux to create those top sections whenever a remote is fired.

#4

do you have current code that you can show

1 Like
#5

Sorry for being late! here is the module for the top ui:

local ServicesMeta = require(game:GetService("ReplicatedStorage").Modules.ServicesMeta)

local Client = ServicesMeta.Players.LocalPlayer

local Roact = require(ServicesMeta.ReplicatedStorage.Modules.Roact)
local Rodux = require(ServicesMeta.ReplicatedStorage.Modules.Rodux)
local RoactRodux = require(ServicesMeta.ReplicatedStorage.Modules.RoactRodux)

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

function Top:render()
	return Roact.createElement("ScreenGui", {
		Name = "Top",
		DisplayOrder = 5,
		ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
	}, {
		holder = Roact.createElement("Frame", {
			AnchorPoint = Vector2.new(0.5, 0),
			AutomaticSize = Enum.AutomaticSize.XY,
			BackgroundColor3 = Color3.fromHex("#FFFFFF"),
			BackgroundTransparency = 1,
			BorderSizePixel = 0,
			Position = UDim2.fromScale(0.5, 0),
		}, {
			list = Roact.createElement("UIListLayout", {
				Padding = UDim.new(0, 8),
				FillDirection = Enum.FillDirection.Horizontal,
				HorizontalAlignment = Enum.HorizontalAlignment.Center,
				SortOrder = Enum.SortOrder.LayoutOrder,
				VerticalAlignment = Enum.VerticalAlignment.Bottom,
			}),

			template = Roact.createElement("Frame", {
				AutomaticSize = Enum.AutomaticSize.XY,
				BackgroundColor3 = Color3.fromHex("#0F0F0F"),
				BorderSizePixel = 0,
			}, {
				padding = Roact.createElement("UIPadding", {
					PaddingBottom = UDim.new(0, 8),
					PaddingLeft = UDim.new(0, 8),
					PaddingRight = UDim.new(0, 8),
					PaddingTop = UDim.new(0, 9),
				}),

				corner = Roact.createElement("UICorner"),

				list1 = Roact.createElement("UIListLayout", {
					SortOrder = Enum.SortOrder.LayoutOrder,
				}),

				textLabel = Roact.createElement("TextLabel", {
					FontFace = Font.new(
						"rbxasset://fonts/families/GothamSSm.json",
						Enum.FontWeight.Medium,
						Enum.FontStyle.Normal
					),
					RichText = true,
					Text = "Title",
					TextColor3 = Color3.fromHex("#B2B2B2"),
					TextSize = 14,
					AutomaticSize = Enum.AutomaticSize.XY,
					BackgroundColor3 = Color3.fromHex("#FFFFFF"),
					BackgroundTransparency = 1,
				}),

				textLabel1 = Roact.createElement("TextLabel", {
					FontFace = Font.new(
						"rbxasset://fonts/families/GothamSSm.json",
						Enum.FontWeight.Medium,
						Enum.FontStyle.Normal
					),
					RichText = true,
					Text = "Content",
					TextColor3 = Color3.fromHex("#E8E8E8"),
					TextSize = 16,
					AutomaticSize = Enum.AutomaticSize.XY,
					BackgroundColor3 = Color3.fromHex("#FFFFFF"),
					BackgroundTransparency = 1,
				}),
			}),
		}),
	})
end

return Top
2 Likes
#9

i want to use roact for this, can you please answer my question?

1 Like
#11

do you have your rodux store code or no?

#13

no, i cant find a way to use the store and rodux to create the top uis though