Merge branch 'react-luau' of https://github.com/ryanlua/satchel into react-luau

Author: ryanlua

.gitattributes

@@ -0,0 +1 @@
+*.rbxmx linguist-language=XML

src/Client.client.luau

@@ -3,9 +3,11 @@
 local GuiService = game:GetService("GuiService")
 local Players = game:GetService("Players")
 local StarterGui = game:GetService("StarterGui")
+local UserInputService = game:GetService("UserInputService")
 
 local React = require(script.Parent.Parent.react)
 local ReactRoblox = require(script.Parent.Parent["react-roblox"])
+local closeInventory = require(script.Parent.Api.closeInventory)
 
 local App = require(script.Parent.Components.App)
 
@@ -36,34 +38,56 @@ local function Satchel()
 		local inventoryClosedSignal = bindableEvents.InventoryClosed.Event:Connect(function()
 			setOpened(false)
 		end)
+		local menuOpenedSignal = GuiService.MenuOpened:Connect(function()
+			closeInventory()
+		end)
 
 		return function()
 			inventoryOpenedSignal:Disconnect()
 			inventoryClosedSignal:Disconnect()
+			menuOpenedSignal:Disconnect()
 		end
 	end, {})
 
+	-- Close backpack when clicking outside of it
+	UserInputService.InputBegan:Connect(function(input: InputObject, gameProcessedEvent: boolean)
+		local inputType = input.UserInputType
+		if not gameProcessedEvent then
+			if inputType == Enum.UserInputType.MouseButton1 or inputType == Enum.UserInputType.Touch then
+				closeInventory()
+			end
+		end
+	end)
+
 	-- Change slots based on viewport display size
 	local slots, setSlots = React.useState(10)
 	local rows, setRows = React.useState(4)
 
 	React.useEffect(function()
-		local function viewportDisplaySizeChanged()
+		local function updateBackpackSize()
+			local screenOrientation = playerGui.CurrentScreenOrientation
 			local viewportSize = GuiService.ViewportDisplaySize
-			if viewportSize == Enum.DisplaySize.Small then
-				setSlots(5)
+
+			if screenOrientation == Enum.ScreenOrientation.Portrait then
+				setSlots(3)
 				setRows(3)
+			elseif viewportSize == Enum.DisplaySize.Small then
+				setSlots(5)
+				setRows(2)
 			else
 				setSlots(10)
 				setRows(4)
 			end
 		end
 
-		viewportDisplaySizeChanged()
-		local signal = GuiService:GetPropertyChangedSignal("ViewportDisplaySize"):Connect(viewportDisplaySizeChanged)
+		updateBackpackSize()
+		local viewportSignal = GuiService:GetPropertyChangedSignal("ViewportDisplaySize"):Connect(updateBackpackSize)
+		local orientationSignal =
+			playerGui:GetPropertyChangedSignal("CurrentScreenOrientation"):Connect(updateBackpackSize)
 
 		return function()
-			signal:Disconnect()
+			viewportSignal:Disconnect()
+			orientationSignal:Disconnect()
 		end
 	end, {})
 

src/Components/App.luau

@@ -19,8 +19,8 @@ export type Props = {
 	forceGamepadHintVisible: boolean?,
 	forceKeyboardHintVisible: boolean?,
 	slots: number?,
-	rows: number?, -- TODO: Add rows for inventory height
-	tools: { Tool? }?,
+	rows: number?,
+	items: { Tool | HopperBin }?,
 	opened: boolean?,
 }
 
@@ -69,7 +69,7 @@ local function App(props: Props)
 				forceKeyboardHintVisible = props.forceKeyboardHintVisible,
 				slots = props.slots,
 				rows = props.rows,
-				tools = props.tools,
+				items = props.items,
 				opened = props.opened,
 				onAbsoluteSizeChanged = setBackpackSize,
 			}),

src/Components/Backpack.luau

@@ -9,7 +9,7 @@ export type Props = {
 	forceKeyboardHintVisible: boolean?,
 	slots: number?,
 	rows: number?, -- TODO: Add rows for inventory height
-	tools: { Tool? }?,
+	items: { Tool | HopperBin }?,
 	opened: boolean?,
 	onAbsoluteSizeChanged: ((Vector2) -> ())?,
 }
@@ -18,15 +18,15 @@ local function Backpack(props: Props)
 	local opened = props.opened or false
 	local slots = props.slots or 10
 
-	-- Tools at indices 1..slots are hotbar; tools above slots are inventory.
-	local hotbarTools: { [number]: Tool? } = {}
-	local inventoryTools: { [number]: Tool? } = {}
-	if props.tools then
-		for index, tool in props.tools do
-			if tool and index > 0 and index <= slots then
-				hotbarTools[index] = tool
-			elseif tool and index > slots then
-				inventoryTools[index - slots] = tool
+	-- Items at indices 1..slots are hotbar; items above slots are inventory.
+	local hotbarItems: { [number]: Tool | HopperBin } = {}
+	local inventoryItems: { [number]: Tool | HopperBin } = {}
+	if props.items then
+		for index, item in props.items do
+			if item and index > 0 and index <= slots then
+				hotbarItems[index] = item
+			elseif item and index > slots then
+				inventoryItems[index - slots] = item
 			end
 		end
 	end
@@ -42,13 +42,13 @@ local function Backpack(props: Props)
 		Hotbar = React.createElement(Hotbar, {
 			forceKeyboardHintVisible = props.forceKeyboardHintVisible,
 			slots = slots,
-			tools = hotbarTools,
+			items = hotbarItems,
 			opened = opened,
 		}),
 		Inventory = React.createElement(Inventory, {
 			slots = slots,
 			rows = props.rows,
-			tools = inventoryTools,
+			items = inventoryItems,
 			opened = opened,
 		}),
 	})

src/Components/Hotbar.luau

@@ -7,24 +7,25 @@ local Slot = require(script.Parent.Slot)
 export type Props = {
 	forceKeyboardHintVisible: boolean?,
 	slots: number?,
-	tools: { Tool? }?,
+	items: { Tool | HopperBin }?,
 	opened: boolean?,
 }
 
 local function Hotbar(props: Props)
 	local slotCount = props.slots or 10
 
-	local children = {}
+	local children: any = {}
 
-	for slotNumber = 1, slotCount do
-		local tool = props.tools and props.tools[slotNumber]
-		local slotUnlocked = props.opened and tool ~= nil
+	-- Create hotbar slots
+	for order = 1, slotCount do
+		local item = props.items and props.items[order]
+		local slotUnlocked = props.opened and item ~= nil
 
 		-- Only show slots if the hotbar is opened or if there is a tool in the slot
-		if props.opened or tool then
-			children[slotNumber] = React.createElement(Slot, {
-				order = slotNumber,
-				tool = tool,
+		if props.opened or item then
+			children[tostring(order)] = React.createElement(Slot, {
+				order = order,
+				item = item,
 				hint = true,
 				forceHintVisible = props.forceKeyboardHintVisible,
 				unlocked = slotUnlocked,

src/Components/Inventory.luau

@@ -8,7 +8,7 @@ local Slot = require(script.Parent.Slot)
 export type Props = {
 	width: number?,
 	rows: number?,
-	tools: { Tool? }?,
+	items: { Tool | HopperBin }?,
 	opened: boolean?,
 }
 
@@ -17,15 +17,16 @@ local function Inventory(props: Props)
 	local rows = props.rows or 4
 	local height = rows * 65 - 5
 
-	local slotChildren = {}
+	local children: any = {}
 
-	if props.tools then
-		for order, tool in props.tools do
-			if tool then
-				slotChildren[order] = React.createElement(Slot, {
+	-- Create inventory slots
+	if props.items then
+		for order, item in props.items do
+			if item then
+				children[tostring(order)] = React.createElement(Slot, {
 					unlocked = true,
 					order = order,
-					tool = tool,
+					item = item,
 				})
 			end
 		end
@@ -39,7 +40,7 @@ local function Inventory(props: Props)
 		SearchBox = React.createElement(Searchbar),
 		SlotFrame = React.createElement("ScrollingFrame", {
 			Size = UDim2.new(1, 0, 0, height),
-		}, slotChildren),
+		}, children),
 	})
 end
 

src/Components/Slot.luau

@@ -7,7 +7,7 @@ local React = require(script.Parent.Parent.Parent.react)
 local Tooltip = require(script.Parent.Tooltip)
 
 export type Props = {
-	tool: Tool?,
+	item: (Tool | HopperBin)?,
 	equipped: boolean?,
 	unlocked: boolean?,
 	forceHintVisible: boolean?,
@@ -16,10 +16,10 @@ export type Props = {
 }
 
 local function Slot(props: Props)
-	local tool = props.tool
-	local toolName = tool and tool.Name
-	local toolImage = tool and tool.TextureId
-	local tooltipText = tool and tool.ToolTip
+	local item = props.item
+	local itemName = item and item.Name
+	local itemImage = item and item.TextureId
+	local tooltipText = item and (item:IsA("Tool") and item.ToolTip or "")
 
 	local equipped, setEquipped = React.useState(props.equipped or false)
 
@@ -67,8 +67,8 @@ local function Slot(props: Props)
 	end
 
 	-- Hide name if there is an image
-	local slotText = toolName
-	if toolImage ~= "" then
+	local slotText = itemName
+	if itemImage ~= "" then
 		slotText = ""
 	end
 
@@ -77,7 +77,7 @@ local function Slot(props: Props)
 		LayoutOrder = props.order,
 		[React.Tag] = tags,
 		[React.Event.Activated] = function()
-			if props.tool then
+			if props.item then
 				setEquipped(not equipped)
 			end
 		end :: any,
@@ -88,7 +88,7 @@ local function Slot(props: Props)
 			[React.Tag] = "SlotNumber",
 		}),
 		TextureIcon = React.createElement("ImageLabel", {
-			Image = toolImage or "",
+			Image = itemImage or "",
 		}),
 		ToolTip = React.createElement(Tooltip, {
 			text = tooltipText,