ShopPage Component example

examples/init.client.lua

@@ -29,6 +29,10 @@ local exampleData = {
 		name = "binding",
 		label = "Binding",
 	},
+	{
+		name = "shop-page",
+		label = "Shop Page",
+	},
 }
 
 for _, example in ipairs(exampleData) do

examples/shop-page/Components/Item.lua

@@ -0,0 +1,82 @@
+local MarketplaceService = game:GetService("MarketplaceService")
+local Players = game:GetService("Players")
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local TweenService = game:GetService("TweenService")
+
+local Roact = require(ReplicatedStorage.Roact)
+
+local Item = Roact.Component:extend("Item")
+
+local PADDING = 20
+
+function Item:init()
+	self.ref = Roact.createRef()
+	self.onMouseEnter = function()
+		self.toBigIcon:Play()
+	end
+	self.onMouseLeave = function()
+		self.toNormalIcon:Play()
+	end
+	self.onActivated = function()
+		local props = self.props
+
+		MarketplaceService:PromptProductPurchase(Players.LocalPlayer, props.productId)
+	end
+end
+
+function Item:render()
+	local props = self.props
+
+	local image = props.image
+	local price = props.price
+	local order = props.order or price
+
+	return Roact.createElement("ImageButton", {
+		BackgroundTransparency = 1,
+		Image = "",
+		LayoutOrder = order,
+		[Roact.Event.Activated] = self.onActivated,
+		[Roact.Event.MouseEnter] = self.onMouseEnter,
+		[Roact.Event.MouseLeave] = self.onMouseLeave,
+	}, {
+		Icon = Roact.createElement("ImageLabel", {
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BackgroundTransparency = 1,
+			Image = image,
+			Position = UDim2.new(0.5, 0, 0.5, 0),
+			Size = UDim2.new(1, -PADDING, 1, -PADDING),
+			[Roact.Ref] = self.ref,
+		}),
+		PriceLabel = Roact.createElement("TextLabel", {
+			AnchorPoint = Vector2.new(0.5, 1),
+			BackgroundTransparency = 1,
+			Font = Enum.Font.SourceSans,
+			Text = ("R$ %d"):format(price),
+			TextColor3 = Color3.fromRGB(10, 200, 10),
+			TextScaled = true,
+			TextStrokeTransparency = 0,
+			TextStrokeColor3 = Color3.fromRGB(255, 255, 255),
+			Position = UDim2.new(0.5, 0, 1, 0),
+			Size = UDim2.new(1, 0, 0.3, 0),
+		}),
+	})
+end
+
+function Item:didMount()
+	local tweenInfo = TweenInfo.new(0.2)
+	local icon = self.ref:getValue()
+
+	self.toBigIcon = TweenService:Create(icon, tweenInfo, {
+		Size = UDim2.new(1, 0, 1, 0),
+	})
+	self.toNormalIcon = TweenService:Create(icon, tweenInfo, {
+		Size = UDim2.new(1, -PADDING, 1, -PADDING),
+	})
+end
+
+function Item:willUnmount()
+	self.toBigIcon:Destroy()
+	self.toNormalIcon:Destroy()
+end
+
+return Item

examples/shop-page/Components/ItemList.lua

@@ -0,0 +1,28 @@
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+
+local Components = script.Parent
+
+local Roact = require(ReplicatedStorage.Roact)
+
+local Item = require(Components:WaitForChild("Item"))
+
+local function ItemList(props)
+	local items = props.items
+
+	local elements = {}
+
+	for i=1, #items do
+		local item = items[i]
+
+		elements[item.identifier] = Roact.createElement(Item, {
+			image = item.image,
+			price = item.price,
+			productId = item.productId,
+			order = item.order,
+		})
+	end
+
+	return Roact.createFragment(elements)
+end
+
+return ItemList

examples/shop-page/Components/ShopPage.lua

@@ -0,0 +1,73 @@
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+
+local Components = script.Parent
+
+local Roact = require(ReplicatedStorage.Roact)
+local ItemList = require(Components:WaitForChild("ItemList"))
+
+local ShopPage = Roact.Component:extend("ShopPage")
+
+ShopPage.defaultProps = {
+	padding = 0,
+}
+
+function ShopPage:init()
+	self:setState({
+		cellSize = 0,
+		canvasHeight = 0,
+	})
+
+	self.onAbsoluteSizeChanged = function(frame)
+		local props = self.props
+		local padding = props.padding
+		local itemsPerRow = props.itemsPerRow
+
+		local totalWidth = frame.AbsoluteSize.X
+		local cellWidth = (totalWidth - padding * (itemsPerRow + 1)) / itemsPerRow
+		local cellHeight = cellWidth / props.itemAspectRatio
+		local rows = math.ceil(#props.items / itemsPerRow)
+		local canvasHeight = rows * cellHeight + padding * (rows + 1)
+
+		self:setState({
+			cellSize = cellWidth,
+			canvasHeight = canvasHeight,
+		})
+	end
+end
+
+function ShopPage:render()
+	local props = self.props
+	local state = self.state
+
+	local items = props.items
+	local itemAspectRatio = props.itemAspectRatio
+	local frameProps = props.frameProps
+	local padding = props.padding
+
+	local cellSize = state.cellSize
+	local canvasHeight = state.canvasHeight
+
+	local newFrameProps = {}
+
+	for key, value in pairs(frameProps) do
+		newFrameProps[key] = value
+	end
+
+	newFrameProps.CanvasSize = UDim2.new(0, 0, 0, canvasHeight)
+	newFrameProps[Roact.Change.AbsoluteSize] = self.onAbsoluteSizeChanged
+
+	return Roact.createElement("ScrollingFrame", newFrameProps, {
+		UIGrid = Roact.createElement("UIGridLayout", {
+			CellPadding = UDim2.new(0, padding, 0, padding),
+			CellSize = UDim2.new(0, cellSize, 0, cellSize / itemAspectRatio),
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		}),
+		Items = Roact.createElement(ItemList, {
+			items = items,
+		}),
+	})
+end
+
+return ShopPage

examples/shop-page/Products.lua

@@ -0,0 +1,38 @@
+return {
+	{
+		identifier = "Red Visor",
+		image = "https://www.roblox.com/asset-thumbnail/image?assetId=139618072&width=420&height=420&format=png",
+		price = 30,
+		productId = 0,
+	},
+	{
+		identifier = "Green Visor",
+		image = "https://www.roblox.com/asset-thumbnail/image?assetId=20264649&width=420&height=420&format=png",
+		price = 50,
+		productId = 0,
+	},
+	{
+		identifier = "Yellow Visor",
+		image = "https://www.roblox.com/asset-thumbnail/image?assetId=7135977&width=420&height=420&format=png",
+		price = 40,
+		productId = 0,
+	},
+	{
+		identifier = "Blue Visor",
+		image = "https://www.roblox.com/asset-thumbnail/image?assetId=1459035&width=420&height=420&format=png",
+		price = 55,
+		productId = 0,
+	},
+	{
+		identifier = "Dark Blue Visor",
+		image = "https://www.roblox.com/asset-thumbnail/image?assetId=68268372&width=420&height=420&format=png",
+		price = 60,
+		productId = 0,
+	},
+	{
+		identifier = "Purple Visor",
+		image = "https://www.roblox.com/asset-thumbnail/image?assetId=334661971&width=420&height=420&format=png",
+		price = 100,
+		productId = 0,
+	},
+}

examples/shop-page/init.lua

@@ -0,0 +1,36 @@
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Players = game:GetService("Players")
+
+local Roact = require(ReplicatedStorage.Roact)
+
+local Products = require(script:WaitForChild("Products"))
+
+local Components = script:WaitForChild("Components")
+local ShopPage = require(Components:WaitForChild("ShopPage"))
+
+return function()
+	local screenGui = Instance.new("ScreenGui")
+	screenGui.Parent = Players.LocalPlayer:WaitForChild("PlayerGui")
+
+	local shopPage = Roact.createElement(ShopPage, {
+		items = Products,
+		itemAspectRatio = 1,
+		itemsPerRow = 3,
+		padding = 10,
+		frameProps = {
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BackgroundColor3 = Color3.fromRGB(0, 3, 20),
+			BorderSizePixel = 0,
+			Position = UDim2.new(0.5, 0, 0.5, 0),
+			Size = UDim2.new(0.5, 0, 0.5, 0),
+		},
+	})
+
+	local handle = Roact.mount(shopPage, screenGui)
+
+	local function stop()
+		Roact.unmount(handle)
+	end
+
+	return stop
+end