11 replies

Need help with a @rbxts/react item component for a Tarkov-themed inventory.

❓unsolved

react

I am working on a tarkov/arena breakout themed inventory system. I have two of the primary components I will likely need mostly completed. The issue I am having is regarding the

InventoryItem

InventoryItem

InventoryItem

InventoryItem component. This component will be responsible for displaying the actual item in whatever configuration it is set in (e.g. slot sizes x. y and rotation)

I have a few issues with how I am going to make this component work but first let me share the code for the component in question:

import React, { useRef, useState } from "@rbxts/react";

export enum DisplayType { // The display type for the current item. Can either be a image (imagelabel) or a model (viewportframe) 
    Model = "model",
    Image = "image"
}

// PROP TYPES
interface InventoryItemProps {
    displayType: DisplayType; // the DisplayType (DisplayType.Model | DisplayType.Image)
    sizeX: number; // slot size in x direction
    sizeY: number; // slot size in y direction
    initialPosition: UDim2; // the inital position of the item when the invnetory grid renders/mounts
    image?: string; // the image id of the item assuming the displayType is set to image
    model?: Instance; // the model instance of the item assuming the displayType is set to model
}

const slotSize: number = 60; // TODO: make global constant

// COMPONENT
export default function InventoryItem({ displayType, sizeX, sizeY, initialPosition, image, model }: InventoryItemProps) {
    // STATE
    const [position, setPosiiton] = useState<UDim2>(initialPosition)

    // HELPER FUNCTIONS
    const clampSize = (x: number, y: number): UDim2 => { // ensures the size of the frame can only be a factor of gridSize. In this case, a multple of 60
        return UDim2.fromOffset(
            math.round(math.max(1, x)) * slotSize, 
            math.round(math.max(1, y)) * slotSize
        )
    }

    const inventoryItemProps = {
        Size: clampSize(sizeX, sizeY),
        Position: position,
    }

    const dragDetectorProps: React.InstanceProps<UIDragDetector> = {
        DragStyle: "TranslatePlane",
        Event: {
            DragStart: (rbx: UIDragDetector, inputPosition: Vector2) => {

            },
            DragContinue: (rbx: UIDragDetector, inputPosition: Vector2) => {

            },
            DragEnd: (rbx: UIDragDetector, inputPosition: Vector2) => {
                
            },
        }
    }

    // RENDER
    return displayType === DisplayType.Image ?
        <imagelabel
            {...inventoryItemProps}
        >
            <uidragdetector {...dragDetectorProps} />
        </imagelabel> :
        <viewportframe
            {...inventoryItemProps}
        >
            <uidragdetector {...dragDetectorProps} />
        </viewportframe>
}

import React, { useRef, useState } from "@rbxts/react";

export enum DisplayType { // The display type for the current item. Can either be a image (imagelabel) or a model (viewportframe) 
    Model = "model",
    Image = "image"
}

// PROP TYPES
interface InventoryItemProps {
    displayType: DisplayType; // the DisplayType (DisplayType.Model | DisplayType.Image)
    sizeX: number; // slot size in x direction
    sizeY: number; // slot size in y direction
    initialPosition: UDim2; // the inital position of the item when the invnetory grid renders/mounts
    image?: string; // the image id of the item assuming the displayType is set to image
    model?: Instance; // the model instance of the item assuming the displayType is set to model
}

const slotSize: number = 60; // TODO: make global constant

// COMPONENT
export default function InventoryItem({ displayType, sizeX, sizeY, initialPosition, image, model }: InventoryItemProps) {
    // STATE
    const [position, setPosiiton] = useState<UDim2>(initialPosition)

    // HELPER FUNCTIONS
    const clampSize = (x: number, y: number): UDim2 => { // ensures the size of the frame can only be a factor of gridSize. In this case, a multple of 60
        return UDim2.fromOffset(
            math.round(math.max(1, x)) * slotSize, 
            math.round(math.max(1, y)) * slotSize
        )
    }

    const inventoryItemProps = {
        Size: clampSize(sizeX, sizeY),
        Position: position,
    }

    const dragDetectorProps: React.InstanceProps<UIDragDetector> = {
        DragStyle: "TranslatePlane",
        Event: {
            DragStart: (rbx: UIDragDetector, inputPosition: Vector2) => {

            },
            DragContinue: (rbx: UIDragDetector, inputPosition: Vector2) => {

            },
            DragEnd: (rbx: UIDragDetector, inputPosition: Vector2) => {
                
            },
        }
    }

    // RENDER
    return displayType === DisplayType.Image ?
        <imagelabel
            {...inventoryItemProps}
        >
            <uidragdetector {...dragDetectorProps} />
        </imagelabel> :
        <viewportframe
            {...inventoryItemProps}
        >
            <uidragdetector {...dragDetectorProps} />
        </viewportframe>
}

import React, { useRef, useState } from "@rbxts/react";

export enum DisplayType { // The display type for the current item. Can either be a image (imagelabel) or a model (viewportframe) 
    Model = "model",
    Image = "image"
}

// PROP TYPES
interface InventoryItemProps {
    displayType: DisplayType; // the DisplayType (DisplayType.Model | DisplayType.Image)
    sizeX: number; // slot size in x direction
    sizeY: number; // slot size in y direction
    initialPosition: UDim2; // the inital position of the item when the invnetory grid renders/mounts
    image?: string; // the image id of the item assuming the displayType is set to image
    model?: Instance; // the model instance of the item assuming the displayType is set to model
}

const slotSize: number = 60; // TODO: make global constant

// COMPONENT
export default function InventoryItem({ displayType, sizeX, sizeY, initialPosition, image, model }: InventoryItemProps) {
    // STATE
    const [position, setPosiiton] = useState<UDim2>(initialPosition)

    // HELPER FUNCTIONS
    const clampSize = (x: number, y: number): UDim2 => { // ensures the size of the frame can only be a factor of gridSize. In this case, a multple of 60
        return UDim2.fromOffset(
            math.round(math.max(1, x)) * slotSize, 
            math.round(math.max(1, y)) * slotSize
        )
    }

    const inventoryItemProps = {
        Size: clampSize(sizeX, sizeY),
        Position: position,
    }

    const dragDetectorProps: React.InstanceProps<UIDragDetector> = {
        DragStyle: "TranslatePlane",
        Event: {
            DragStart: (rbx: UIDragDetector, inputPosition: Vector2) => {

            },
            DragContinue: (rbx: UIDragDetector, inputPosition: Vector2) => {

            },
            DragEnd: (rbx: UIDragDetector, inputPosition: Vector2) => {
                
            },
        }
    }

    // RENDER
    return displayType === DisplayType.Image ?
        <imagelabel
            {...inventoryItemProps}
        >
            <uidragdetector {...dragDetectorProps} />
        </imagelabel> :
        <viewportframe
            {...inventoryItemProps}
        >
            <uidragdetector {...dragDetectorProps} />
        </viewportframe>
}

import React, { useRef, useState } from "@rbxts/react";

export enum DisplayType { // The display type for the current item. Can either be a image (imagelabel) or a model (viewportframe) 
    Model = "model",
    Image = "image"
}

// PROP TYPES
interface InventoryItemProps {
    displayType: DisplayType; // the DisplayType (DisplayType.Model | DisplayType.Image)
    sizeX: number; // slot size in x direction
    sizeY: number; // slot size in y direction
    initialPosition: UDim2; // the inital position of the item when the invnetory grid renders/mounts
    image?: string; // the image id of the item assuming the displayType is set to image
    model?: Instance; // the model instance of the item assuming the displayType is set to model
}

const slotSize: number = 60; // TODO: make global constant

// COMPONENT
export default function InventoryItem({ displayType, sizeX, sizeY, initialPosition, image, model }: InventoryItemProps) {
    // STATE
    const [position, setPosiiton] = useState<UDim2>(initialPosition)

    // HELPER FUNCTIONS
    const clampSize = (x: number, y: number): UDim2 => { // ensures the size of the frame can only be a factor of gridSize. In this case, a multple of 60
        return UDim2.fromOffset(
            math.round(math.max(1, x)) * slotSize, 
            math.round(math.max(1, y)) * slotSize
        )
    }

    const inventoryItemProps = {
        Size: clampSize(sizeX, sizeY),
        Position: position,
    }

    const dragDetectorProps: React.InstanceProps<UIDragDetector> = {
        DragStyle: "TranslatePlane",
        Event: {
            DragStart: (rbx: UIDragDetector, inputPosition: Vector2) => {

            },
            DragContinue: (rbx: UIDragDetector, inputPosition: Vector2) => {

            },
            DragEnd: (rbx: UIDragDetector, inputPosition: Vector2) => {
                
            },
        }
    }

    // RENDER
    return displayType === DisplayType.Image ?
        <imagelabel
            {...inventoryItemProps}
        >
            <uidragdetector {...dragDetectorProps} />
        </imagelabel> :
        <viewportframe
            {...inventoryItemProps}
        >
            <uidragdetector {...dragDetectorProps} />
        </viewportframe>
}

1. I am having an issue figuring out how to capture a ref of the item frame which can be either a imagelabel or a viewportframe.
2. I am having an issue when using a

uidragdetector

uidragdetector

uidragdetector

uidragdetector I need the

inputPosition

inputPosition

inputPosition

inputPosition to be relative to the grid component the item is a child of.

Need help with a @rbxts/react item component for a Tarkov-themed inventory.

Similar Threads