local s=game:GetService("\082\101\112\108\105\099\097\116\101\100\083\116\111\114\097\103\101")local D=game:GetService("\080\108\097\121\101\114\115")local G=game:GetService("\077\097\114\107\101\116\112\108\097\099\101\083\101\114\118\105\099\101")local w=D.LocalPlayer local Y=s:WaitForChild("\108\105\098")local j=s:WaitForChild("\099\111\109\109\111\110")local m=script.Parent local b=require(m:WaitForChild("\083\104\097\100\111\119\101\100\084\101\120\116\076\097\098\101\108"))local h=require(j:WaitForChild("\068\101\118\080\114\111\100\117\099\116\115"))local O=require(Y:WaitForChild("\082\111\097\099\116"))local V=600 local c=.75 local v=O.Component:extend("\068\101\118\080\114\111\100\117\099\116\083\104\111\112\086\105\101\119")function v.render(s)local D={}local G={}for D,w in pairs(h.all)do if w.onSale then G[w.id]=O.createElement("\084\101\120\116\066\117\116\116\111\110",{Text=w.name;TextColor3=Color3.new(1,1,1);BackgroundColor3=w.color or Color3.fromRGB(2,183,87),BorderSizePixel=0,TextSize=24;Font=Enum.Font.GothamBlack;TextWrapped=true,LayoutOrder=w.order,[O.Event.MouseButton1Click]=function()s.props.clientApi:buyDevproduct(w.id)end},{flavortext=O.createElement(b,{Text=w.flavorText or"",Size=UDim2.new(0,60,0,18);Position=UDim2.new(1,-4,1,4),AnchorPoint=Vector2.new(1,1);BackgroundTransparency=1,TextStrokeTransparency=0;Font=Enum.Font.GothamBlack,TextSize=18})})end end G.gridLayout=O.createElement("\085\073\071\114\105\100\076\097\121\111\117\116",{CellPadding=UDim2.new(0,16,0,16),CellSize=UDim2.new(0,192,0,64);FillDirectionMaxCells=3,HorizontalAlignment=Enum.HorizontalAlignment.Center,SortOrder=Enum.SortOrder.LayoutOrder})D.padding=O.createElement("\085\073\080\097\100\100\105\110\103",{PaddingLeft=UDim.new(0,16);PaddingTop=UDim.new(0,16);PaddingRight=UDim.new(0,16);PaddingBottom=UDim.new(0,16)})D.listLayout=O.createElement("\085\073\076\105\115\116\076\097\121\111\117\116",{FillDirection=Enum.FillDirection.Vertical;HorizontalAlignment=Enum.HorizontalAlignment.Center,SortOrder=Enum.SortOrder.LayoutOrder;VerticalAlignment=Enum.VerticalAlignment.Top,Padding=UDim.new(0,16)})D.scale=O.createElement("\085\073\083\099\097\108\101",{Scale=math.min(1,(s.props.viewportSize.Y*c)/V)})D.header=O.createElement("\084\101\120\116\076\097\098\101\108",{Font=Enum.Font.GothamBlack;Text="\066\117\121 \067\111\105\110\115",TextScaled=true,BorderSizePixel=0,BackgroundTransparency=1,Size=UDim2.new(1,0,0,64);LayoutOrder=1})D.buttonFrame=O.createElement("\070\114\097\109\101",{Size=UDim2.new(1,0,1,-96);BackgroundTransparency=1,BorderSizePixel=0,LayoutOrder=2},G)return O.createElement("\070\114\097\109\101",{Size=UDim2.new(0,700,0,450);Position=UDim2.new(.5,0,.5,0);AnchorPoint=Vector2.new(.5,.5),BorderSizePixel=0,BackgroundColor3=Color3.fromRGB(255,255,255);Visible=s.props.view=="\100\101\118\112\114\111\100\117\099\116\115"},D)end return v
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local MarketplaceService = game:GetService("MarketplaceService")
local LocalPlayer = Players.LocalPlayer

local lib = ReplicatedStorage:WaitForChild("lib")
local common = ReplicatedStorage:WaitForChild("common")
local component = script.Parent

local ShadowedTextLabel = require(component:WaitForChild("ShadowedTextLabel"))

local DevProducts = require(common:WaitForChild("DevProducts"))
local Roact = require(lib:WaitForChild("Roact"))

local PIXEL_SIZE = 600
local TARGET_AXIS_SCALE = 3/4

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

function DevProductShopView:render()
    local content = {}
    local productButtons = {}

    for _,product in pairs(DevProducts.all) do
        if product.onSale then
            productButtons[product.id] = Roact.createElement("TextButton", {
                Text = product.name,
                TextColor3 = Color3.new(1,1,1),
                BackgroundColor3 = product.color or Color3.fromRGB(2, 183, 87),
                BorderSizePixel = 0,
                TextSize = 24,
                Font = Enum.Font.GothamBlack,
                TextWrapped = true,
                LayoutOrder = product.order,

                [Roact.Event.MouseButton1Click] = function()
                    self.props.clientApi:buyDevproduct(product.id)
                end,
            }, {
                flavortext = Roact.createElement(ShadowedTextLabel, {
                    Text = product.flavorText or "",
                    Size = UDim2.new(0,60,0,18),
                    Position = UDim2.new(1,-4,1,4),
                    AnchorPoint = Vector2.new(1,1),
                    BackgroundTransparency = 1,
                    TextStrokeTransparency = 0,
                    Font = Enum.Font.GothamBlack,
                    TextSize = 18,
                }),
            })
        end
    end

    productButtons.gridLayout = Roact.createElement("UIGridLayout", {
        CellPadding = UDim2.new(0,16,0,16),
        CellSize = UDim2.new(0,192,0,64),
        FillDirectionMaxCells = 3,
        HorizontalAlignment = Enum.HorizontalAlignment.Center,
        SortOrder = Enum.SortOrder.LayoutOrder,
    })


    content.padding = Roact.createElement("UIPadding", {
        PaddingLeft = UDim.new(0,16),
        PaddingTop = UDim.new(0,16),
        PaddingRight = UDim.new(0,16),
        PaddingBottom = UDim.new(0,16),
    })
    content.listLayout = Roact.createElement("UIListLayout", {
        FillDirection = Enum.FillDirection.Vertical,
        HorizontalAlignment = Enum.HorizontalAlignment.Center,
        SortOrder = Enum.SortOrder.LayoutOrder,
        VerticalAlignment = Enum.VerticalAlignment.Top,
        Padding = UDim.new(0,16),
    })
    content.scale = Roact.createElement("UIScale", {
        Scale = math.min(1,(self.props.viewportSize.Y * TARGET_AXIS_SCALE)/PIXEL_SIZE)
    })

    content.header = Roact.createElement("TextLabel",{
        Font = Enum.Font.GothamBlack,
        Text = "Buy Coins",
        TextScaled = true,
        BorderSizePixel = 0,
        BackgroundTransparency = 1,
        Size = UDim2.new(1,0,0,64),
        LayoutOrder = 1,
    })

    content.buttonFrame = Roact.createElement("Frame", {
        Size = UDim2.new(1,0,1,-96),
        BackgroundTransparency = 1,
        BorderSizePixel = 0,
        LayoutOrder = 2,
    }, productButtons)

    return Roact.createElement("Frame", {
        Size = UDim2.new(0,700,0,450),
        Position = UDim2.new(0.5,0,0.5,0),
        AnchorPoint = Vector2.new(0.5,0.5),

        BorderSizePixel = 0,
        BackgroundColor3 = Color3.fromRGB(255,255,255),

        Visible = self.props.view == "devproducts"
    }, content)
end

return DevProductShopView