.eslintrc

@@ -27,6 +27,7 @@
 		"@typescript-eslint/no-empty-function": "error",
 		"@typescript-eslint/no-empty-interface": "error",
 		"@typescript-eslint/no-namespace": "error",
+		"@typescript-eslint/no-non-null-assertion": "warn",
 		"@typescript-eslint/no-unused-vars": [
 			"warn",
 			{

package.json

@@ -34,7 +34,6 @@
   "dependencies": {
     "@rbxts/character-promise": "^1.0.2",
     "@rbxts/log": "^0.6.3",
-    "@rbxts/make": "^1.0.6",
     "@rbxts/matter": "^0.6.2-ts.6",
     "@rbxts/plasma": "^0.4.1-ts.1",
     "@rbxts/reflex": "^4.2.0",

src/ReplicatedStorage/ecs/index.ts

@@ -6,7 +6,7 @@ import { Host } from "ReplicatedStorage/hosts"
 import { tags } from "./boundTags"
 import { Model } from "./components"
 import { start as startReplication, stop as stopReplication } from "./replication"
-import { ClientState, ServerState } from "./state"
+import { clientState, serverState } from "./state"
 import { start as startSystems, stop as stopSystems } from "./systems"
 import { start as startTags, stop as stopTags } from "./tags"
 
@@ -45,13 +45,13 @@ export function start<S extends object>(host: Host, state: S): [World, S] {
     })
 
     if (host === Host.All || host === Host.Server) {
-        const ServerState = state as ServerState
+        const ServerState = state as serverState
 
         startTags(world, tags, ServerState)
     }
 
     if (host === Host.All || host === Host.Client) {
-        const ClientState = state as ClientState
+        const ClientState = state as clientState
 
         startReplication(world, ClientState)
 

src/ReplicatedStorage/ecs/replication.ts

@@ -1,7 +1,7 @@
 import { AnyEntity, World } from "@rbxts/matter"
 import { waitForEvent } from "ReplicatedStorage/remotes"
 import * as Components from "./components"
-import { ClientState } from "./state"
+import { clientState } from "./state"
 
 type ComponentNames = keyof typeof Components
 type ComponentConstructors = (typeof Components)[ComponentNames]
@@ -14,7 +14,7 @@ let connection: RBXScriptConnection | undefined
  * @param world - The world to replicate components in
  * @param client - The client state for the ECS
  */
-export function start(world: World, client: ClientState): void {
+export function start(world: World, client: clientState): void {
 	if (connection) return
 
 	const replicationEvent = waitForEvent("EcsReplication")

src/ReplicatedStorage/ecs/state.ts

@@ -7,7 +7,7 @@ import { InputKind } from "ReplicatedStorage/inputKind"
 /**
  * The client ECS state.
  */
-export class ClientState {
+export class clientState {
 	constructor(
 		player: Player,
 		character: CharacterRigR6,
@@ -41,7 +41,7 @@ export class ClientState {
 /**
  * The server ECS state.
  */
-export class ServerState {
+export class serverState {
 	constructor(
 		logger: Logger
 	) {
@@ -54,4 +54,4 @@ export class ServerState {
 /**
  * The shared ECS state.
  */
-export type SharedState = ServerState & ClientState
+export type sharedState = serverState & clientState

src/ReplicatedStorage/ecs/systems/client/customReset.ts

@@ -1,6 +1,6 @@
 import { World, useEvent } from "@rbxts/matter"
 import { StarterGui } from "@rbxts/services"
-import { ClientState } from "ReplicatedStorage/ecs/state"
+import { clientState } from "ReplicatedStorage/ecs/state"
 import { getEvent } from "ReplicatedStorage/remotes"
 
 const resetButtonCallback = new Instance("BindableEvent")
@@ -8,7 +8,7 @@ StarterGui.SetCore("ResetButtonCallback", resetButtonCallback)
 
 getEvent("resetButton")
 
-function customReset(_: World, _client: ClientState): void {
+function customReset(_: World, _client: clientState): void {
     const resetButtonEvent = getEvent("resetButton")
     for (const [,] of useEvent(resetButtonCallback, "Event")) {
         resetButtonEvent.FireServer()

src/ReplicatedStorage/ecs/systems/client/inputMapper.ts

@@ -1,10 +1,10 @@
 import { useDeltaTime, useEvent, useThrottle, World } from "@rbxts/matter"
 import { UserInputService } from "@rbxts/services"
-import { ClientState } from "ReplicatedStorage/ecs/state"
+import { clientState } from "ReplicatedStorage/ecs/state"
 import { InputKind } from "ReplicatedStorage/inputKind"
 
 let holdDuration = 0
-function inputMapper(_: World, client: ClientState): void {
+function inputMapper(_: World, client: clientState): void {
 	for (const [, input, gpe] of useEvent(UserInputService, "InputBegan")) {
 		if (gpe) return undefined
 		if (input.KeyCode !== Enum.KeyCode.Unknown) {

src/ReplicatedStorage/ecs/systems/client/sprint.ts

@@ -1,8 +1,8 @@
 import { World } from "@rbxts/matter"
 import { match } from "@rbxts/variant"
-import { ClientState } from "ReplicatedStorage/ecs/state"
+import { clientState } from "ReplicatedStorage/ecs/state"
 
-function sprint(_: World, client: ClientState): void {
+function sprint(_: World, client: clientState): void {
 	if (client.lastProcessedCommand !== undefined) {
         match(client.lastProcessedCommand, {
             KeyDown: ({ key }) => {

src/ReplicatedStorage/ecs/tags.ts

@@ -2,7 +2,7 @@ import { AnyEntity, Component, World } from "@rbxts/matter"
 import { CollectionService } from "@rbxts/services"
 import { getIdAttribute } from "ReplicatedStorage/idAttribute"
 import { Model, Transform } from "./components"
-import { ServerState } from "./state"
+import { serverState } from "./state"
 
 export type ComponentConstructor<T extends object> = () => Component<T>
 
@@ -17,7 +17,7 @@ const connections: RBXScriptConnection[] = []
 export function start(
 	world: World,
 	bound: ReadonlyMap<string, ComponentConstructor<object>>,
-	server: ServerState
+	server: serverState
 ): void {
 	function spawnBound<T extends object>(
 		instance: Instance,

src/ReplicatedStorage/reflex/uiStore/hooks/useRootProducer.ts

@@ -0,0 +1,4 @@
+import { UseProducerHook, useProducer } from "@rbxts/roact-reflex"
+import { rootProducer } from "../producer"
+
+export const useRootProducer: UseProducerHook<rootProducer> = useProducer

src/ReplicatedStorage/reflex/uiStore/producer/index.ts

@@ -0,0 +1,9 @@
+import { InferDispatchers, InferState, combineProducers, loggerMiddleware } from "@rbxts/reflex"
+
+export type rootProducer = typeof producer
+export type rootState = InferState<rootProducer>
+export type rootDispatchers = InferDispatchers<rootProducer>
+
+export const producer = combineProducers({
+    
+}).applyMiddleware(loggerMiddleware)

src/ReplicatedStorage/ui/components/acrylic/acrylicInstance.tsx

@@ -1,77 +0,0 @@
-import Make from "@rbxts/make"
-
-export type AcrylicInstance = Model & {
-	Horizontal: Part & { Mesh: SpecialMesh }
-	Vertical: Part & { Mesh: SpecialMesh }
-	TopLeft: Part & { Mesh: SpecialMesh }
-	TopRight: Part & { Mesh: SpecialMesh }
-	BottomLeft: Part & { Mesh: SpecialMesh }
-	BottomRight: Part & { Mesh: SpecialMesh }
-}
-
-const fill = {
-	Color: new Color3(0, 0, 0),
-	Material: Enum.Material.Glass,
-	Size: new Vector3(1, 1, 0),
-	Anchored: true,
-	CanCollide: false,
-	Locked: true,
-	CastShadow: false,
-	Transparency: 0.999
-}
-
-const corner = {
-	Color: new Color3(0, 0, 0),
-	Material: Enum.Material.Glass,
-	Size: new Vector3(0, 1, 1),
-	Anchored: true,
-	CanCollide: false,
-	Locked: true,
-	CastShadow: false,
-	Transparency: 0.999
-}
-
-export const acrylicInstance = Make("Model", {
-	Children: [
-		Make("Part", {
-			Name: "Horizontal",
-			Children: [
-				Make("SpecialMesh", {
-					MeshType: Enum.MeshType.Brick,
-					Offset: new Vector3(0, 0, -0.000001)
-				})
-			],
-			...fill
-		}),
-		Make("Part", {
-			Name: "Vertical",
-			Children: [
-				Make("SpecialMesh", {
-					MeshType: Enum.MeshType.Brick,
-					Offset: new Vector3(0, 0, 0.000001)
-				})
-			],
-			...fill
-		}),
-		Make("Part", {
-			Name: "TopRight",
-			Children: [Make("SpecialMesh", { MeshType: Enum.MeshType.Cylinder })],
-			...corner
-		}),
-		Make("Part", {
-			Name: "TopLeft",
-			Children: [Make("SpecialMesh", { MeshType: Enum.MeshType.Cylinder })],
-			...corner
-		}),
-		Make("Part", {
-			Name: "BottomRight",
-			Children: [Make("SpecialMesh", { MeshType: Enum.MeshType.Cylinder })],
-			...corner
-		}),
-		Make("Part", {
-			Name: "BottomLeft",
-			Children: [Make("SpecialMesh", { MeshType: Enum.MeshType.Cylinder })],
-			...corner
-		})
-	]
-}) as AcrylicInstance

src/ReplicatedStorage/ui/components/acrylic/index.tsx

@@ -1,164 +0,0 @@
-import Roact from "@rbxts/roact"
-import { useEffect, useCallback, useMemo, useMutable } from "@rbxts/roact-hooked"
-import { acrylicInstance } from "./acrylicInstance"
-import { Lighting, Workspace } from "@rbxts/services"
-import Make from "@rbxts/make"
-
-const cylinderAngleOffset = CFrame.Angles(0, math.rad(90), 0)
-
-function viewportPointToWorld(location: Vector2, distance: number): Vector3 {
-	const unitRay = Workspace.CurrentCamera!.ScreenPointToRay(location.X, location.Y)
-	return unitRay.Origin.add(unitRay.Direction.mul(distance))
-}
-
-function map(n: number, min0: number, max0: number, min1: number, max1: number): number {
-	return min1 + ((n - min0) * (max1 - min1)) / (max0 - min0)
-}
-
-function getOffset(): number {
-	return map(Workspace.CurrentCamera!.ViewportSize.Y, 0, 2560, 8, 56)
-}
-
-interface acrylicProps extends Roact.JsxInstanceProperties<Frame> {
-	radius: number
-	distance: number
-
-	Event?: Roact.JsxInstanceEvents<Frame>
-	Change?: Roact.JsxInstanceChangeEvents<Frame>
-}
-
-function acrylic(props: acrylicProps): Roact.Element {
-	const { radius, distance } = props
-
-	const spreadableProps = { ...props } as Partial<acrylicProps>
-	delete spreadableProps.radius
-	delete spreadableProps.distance
-
-	const frameInfo = useMutable({
-		topleft2d: new Vector2(),
-		topright2d: new Vector2(),
-		bottomright2d: new Vector2(),
-		topleftradius2d: new Vector2()
-	})
-
-	const acrylic = useMemo(() => {
-		const clone = acrylicInstance.Clone()
-		clone.Parent = Workspace
-		return clone
-	}, [])
-
-	useEffect(() => {
-		return () => acrylic.Destroy()
-	}, [])
-
-	const updateFrameInfo = useCallback(
-		(size: Vector2, position: Vector2) => {
-			const topleftRaw = position.sub(size.div(2))
-			const info = frameInfo.current
-
-			info.topleft2d = new Vector2(math.ceil(topleftRaw.X), math.ceil(topleftRaw.Y))
-			info.topright2d = info.topleft2d.add(new Vector2(size.X, 0))
-			info.bottomright2d = info.topleft2d.add(size)
-			info.topleftradius2d = info.topleft2d.add(new Vector2(radius, 0))
-		},
-		[distance, radius]
-	)
-
-	const updateInstance = useCallback(() => {
-		const { topleft2d, topright2d, bottomright2d, topleftradius2d } = frameInfo.current
-
-		const topleft = viewportPointToWorld(topleft2d, distance)
-		const topright = viewportPointToWorld(topright2d, distance)
-		const bottomright = viewportPointToWorld(bottomright2d, distance)
-		const topleftradius = viewportPointToWorld(topleftradius2d, distance)
-
-		const cornerRadius = topleftradius.sub(topleft).Magnitude
-		const width = topright.sub(topleft).Magnitude
-		const height = topright.sub(bottomright).Magnitude
-
-		const center = CFrame.fromMatrix(
-			topleft.add(bottomright).div(2),
-			Workspace.CurrentCamera!.CFrame.XVector,
-			Workspace.CurrentCamera!.CFrame.YVector,
-			Workspace.CurrentCamera!.CFrame.ZVector
-		)
-
-		if (radius !== undefined && radius > 0) {
-			acrylic.Horizontal.CFrame = center
-			acrylic.Horizontal.Mesh.Scale = new Vector3(width - cornerRadius * 2, height, 0)
-			acrylic.Vertical.CFrame = center
-			acrylic.Vertical.Mesh.Scale = new Vector3(width, height - cornerRadius * 2, 0)
-		} else {
-			acrylic.Horizontal.CFrame = center
-			acrylic.Horizontal.Mesh.Scale = new Vector3(width, height, 0)
-		}
-
-		if (radius !== undefined && radius > 0) {
-			acrylic.TopLeft.CFrame = center
-				.mul(new CFrame(-width / 2 + cornerRadius, height / 2 - cornerRadius, 0))
-				.mul(cylinderAngleOffset)
-			acrylic.TopLeft.Mesh.Scale = new Vector3(0, cornerRadius * 2, cornerRadius * 2)
-
-			acrylic.TopRight.CFrame = center
-				.mul(new CFrame(width / 2 - cornerRadius, height / 2 - cornerRadius, 0))
-				.mul(cylinderAngleOffset)
-			acrylic.TopRight.Mesh.Scale = new Vector3(0, cornerRadius * 2, cornerRadius * 2)
-
-			acrylic.BottomLeft.CFrame = center
-				.mul(new CFrame(-width / 2 + cornerRadius, -height / 2 + cornerRadius, 0))
-				.mul(cylinderAngleOffset)
-			acrylic.BottomLeft.Mesh.Scale = new Vector3(0, cornerRadius * 2, cornerRadius * 2)
-
-			acrylic.BottomRight.CFrame = center
-				.mul(new CFrame(width / 2 - cornerRadius, -height / 2 + cornerRadius, 0))
-				.mul(cylinderAngleOffset)
-			acrylic.BottomRight.Mesh.Scale = new Vector3(0, cornerRadius * 2, cornerRadius * 2)
-		}
-	}, [radius, distance])
-
-	useEffect(() => {
-		updateInstance()
-
-		const posHandle = Workspace.CurrentCamera!.GetPropertyChangedSignal("CFrame").Connect(updateInstance)
-		const fovHandle = Workspace.CurrentCamera!.GetPropertyChangedSignal("FieldOfView").Connect(updateInstance)
-		const viewportHandle = Workspace.CurrentCamera!.GetPropertyChangedSignal("ViewportSize").Connect(updateInstance)
-
-		Make("DepthOfFieldEffect", {
-			FarIntensity: 0,
-			InFocusRadius: 0.1,
-			NearIntensity: 1,
-			Parent: Lighting
-		})
-
-		return () => {
-			posHandle.Disconnect()
-			fovHandle.Disconnect()
-			viewportHandle.Disconnect()
-		}
-	}, [updateInstance])
-
-	return (
-		<frame
-			Change={{
-				AbsoluteSize: (rbx): void => {
-					const blurOffset = getOffset()
-					const size = rbx.AbsoluteSize.sub(new Vector2(blurOffset, blurOffset))
-					const position = rbx.AbsolutePosition.add(rbx.AbsoluteSize.div(2))
-					updateFrameInfo(size, position)
-					task.spawn(updateInstance)
-				},
-				AbsolutePosition: (rbx): void => {
-					const blurOffset = getOffset()
-					const size = rbx.AbsoluteSize.sub(new Vector2(blurOffset, blurOffset))
-					const position = rbx.AbsolutePosition.add(rbx.AbsoluteSize.div(2))
-					updateFrameInfo(size, position)
-					task.spawn(updateInstance)
-				}
-			}}
-			Size={new UDim2(1, 0, 1, 0)}
-			BackgroundTransparency={1}
-		/>
-	)
-}
-
-export default acrylic

src/ReplicatedStorage/ui/components/padding.tsx

@@ -1,3 +1,4 @@
+import Hooks from "@rbxts/roact-hooked"
 import Roact from "@rbxts/roact"
 
 interface paddingProps extends Roact.JsxInstanceProperties<UIPadding> {

src/ServerScriptService/ecs/systems/server/playersRagdollOnDeath.ts

@@ -1,4 +1,3 @@
-import Make from "@rbxts/make"
 import { World, useEvent } from "@rbxts/matter"
 import { Model, PlayerCharacter } from "ReplicatedStorage/ecs/components"
 
@@ -16,22 +15,19 @@ function playersRagdollOnDeath(world: World): void {
         for (const [_] of useEvent(playerCharacter.humanoid, "Died")) {
             model.model.GetDescendants().forEach((v, _) => {
                 if (v.IsA("Motor6D")) {
-                    const attachment0 = Make("Attachment", {
+                    const attachment0 = new Instance("Attachment")
-                        CFrame: v.C0,
+                    const attachment1 = new Instance("Attachment")
-                        Parent: v.Part0
+                    attachment0.CFrame = v.C0
-                    })
+                    attachment1.CFrame = v.C1
-                    const attachment1 = Make("Attachment", {
+                    attachment0.Parent = v.Part0
-                        CFrame: v.C1,
+                    attachment1.Parent = v.Part1
-                        Parent: v.Part1
-                    })
 
-                    Make("BallSocketConstraint", {
+                    const ballSocketConstraint = new Instance("BallSocketConstraint")
-                        Attachment0: attachment0,
+                    ballSocketConstraint.Attachment0 = attachment0
-                        Attachment1: attachment1,
+                    ballSocketConstraint.Attachment1 = attachment1
-                        LimitsEnabled: true,
+                    ballSocketConstraint.LimitsEnabled = true
-                        TwistLimitsEnabled: true,
+                    ballSocketConstraint.TwistLimitsEnabled = true
-                        Parent: v.Parent
+                    ballSocketConstraint.Parent = v.Parent
-                    })
 
                     v.Destroy()
                 }

src/ServerScriptService/ecs/systems/server/replication.ts

@@ -1,7 +1,7 @@
 import { useEvent, World } from "@rbxts/matter"
 import { Players } from "@rbxts/services"
 import * as Components from "ReplicatedStorage/ecs/components"
-import { ServerState } from "ReplicatedStorage/ecs/state"
+import { serverState } from "ReplicatedStorage/ecs/state"
 import { getEvent } from "ReplicatedStorage/remotes"
 
 type ComponentName = keyof typeof Components
@@ -21,7 +21,7 @@ const replicatedComponents: ReadonlySet<ComponentConstructor> = REPLICATED_COMPO
 
 getEvent("EcsReplication")
 
-function replication(world: World, server: ServerState): void {
+function replication(world: World, server: serverState): void {
 	const replicationEvent = getEvent("EcsReplication")
 
 	let payload: Map<string, Map<ComponentName, { data?: Components.GooplerComponent }>> | undefined

src/ServerScriptService/main.server.ts

@@ -1,6 +1,6 @@
 import Log, { Logger } from "@rbxts/log"
 import { start } from "ReplicatedStorage/ecs"
-import { ServerState } from "ReplicatedStorage/ecs/state"
+import { serverState } from "ReplicatedStorage/ecs/state"
 import { Host } from "ReplicatedStorage/hosts"
 import { setEnvironment } from "ReplicatedStorage/idAttribute"
 import { getEvent } from "ReplicatedStorage/remotes"
@@ -12,7 +12,7 @@ const serverLogger = Logger.configure()
     .WriteTo(Log.RobloxOutput())
     .Create()
 
-const serverState = new ServerState(
+const ServerState = new serverState(
     serverLogger
 )
 
@@ -21,4 +21,4 @@ const serverState = new ServerState(
 getEvent("EcsReplication")
 
 setEnvironment(HOST)
-start(HOST, serverState)
+start(HOST, ServerState)

src/StarterPlayer/StarterPlayerScripts/main.client.ts

@@ -1,8 +1,8 @@
 import { CharacterRigR6 } from "@rbxts/character-promise"
 import Log, { Logger } from "@rbxts/log"
-import { Players, Workspace } from "@rbxts/services"
+import { Players } from "@rbxts/services"
 import { start } from "ReplicatedStorage/ecs"
-import { ClientState } from "ReplicatedStorage/ecs/state"
+import { clientState } from "ReplicatedStorage/ecs/state"
 import { Host } from "ReplicatedStorage/hosts"
 import { setEnvironment } from "ReplicatedStorage/idAttribute"
 import showGUI from "./showGUI"
@@ -13,7 +13,7 @@ const clientLogger = Logger.configure()
     .WriteTo(Log.RobloxOutput())
     .Create()
 
-const clientState = new ClientState(
+const ClientState = new clientState(
     Players.LocalPlayer,
     (Players.LocalPlayer.Character || Players.LocalPlayer.CharacterAdded.Wait()[0]) as CharacterRigR6,
     false,
@@ -23,10 +23,6 @@ const clientState = new ClientState(
     clientLogger
 )
 
-const worldAndClientState = start(HOST, clientState)
+const worldAndClientState = start(HOST, ClientState)
-showGUI(worldAndClientState[0], clientState)
+showGUI(worldAndClientState[0], ClientState)
-setEnvironment(HOST)
+setEnvironment(HOST)
-
-task.delay(10, () => {
-    print(Workspace.CurrentCamera?.GetChildren())
-})

src/StarterPlayer/StarterPlayerScripts/showGUI.tsx

@@ -1,12 +1,12 @@
 import { World } from "@rbxts/matter"
-import { ClientState } from "ReplicatedStorage/ecs/state"
+import { clientState } from "ReplicatedStorage/ecs/state"
 import { WorldContext } from "./ui/contexts/worldContext"
 import Roact from "@rbxts/roact"
 import Main from "./ui/main"
 import { ReflexProvider } from "@rbxts/roact-reflex"
 import { producer } from "ReplicatedStorage/ui/store/producer"
 
-const showGUI = (world: World, state: ClientState): void => {
+const showGUI = (world: World, state: clientState): void => {
     const playerGui = state.player.WaitForChild("PlayerGui") as PlayerGui
     const tree = (
         <WorldContext.Provider value={{ world: world, clientState: state }}>

src/StarterPlayer/StarterPlayerScripts/ui/contexts/worldContext.tsx

@@ -1,16 +1,16 @@
 import { World } from "@rbxts/matter"
 import Roact from "@rbxts/roact"
 import { useContext } from "@rbxts/roact-hooked"
-import { ClientState } from "ReplicatedStorage/ecs/state"
+import { clientState } from "ReplicatedStorage/ecs/state"
 
-interface WorldContextProps {
+interface worldContextProps {
 	world: World
-	clientState: ClientState
+	clientState: clientState
 }
 
-export const WorldContext = Roact.createContext<WorldContextProps | undefined>(undefined)
+export const WorldContext = Roact.createContext<worldContextProps | undefined>(undefined)
 
-export function useWorldContext(): WorldContextProps {
+export function useWorldContext(): worldContextProps {
 	const context = useContext(WorldContext)
 	if (!context) {
 		error("useContext must be called within a Provider")

src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx

@@ -4,15 +4,15 @@ import { useWorldContext } from "../contexts/worldContext"
 import Padding from "ReplicatedStorage/ui/components/padding"
 import { StarterGui } from "@rbxts/services"
 
-interface HotbarProps extends Roact.JsxInstanceProperties<Frame> {
+interface hotbarProps extends Roact.JsxInstanceProperties<Frame> {
 	Event?: Roact.JsxInstanceEvents<Frame>
 	Change?: Roact.JsxInstanceChangeEvents<Frame>
 }
 
 StarterGui.SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)
 
-function hotbar(props: HotbarProps): Roact.Element {
+function hotbar(props: hotbarProps): Roact.Element {
-    const spreadableProps = { ...props } as Partial<HotbarProps>
+    const spreadableProps = { ...props } as Partial<hotbarProps>
 
     const { clientState } = useWorldContext()
 

src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx

@@ -3,9 +3,8 @@ import { useEffect } from "@rbxts/roact-hooked"
 import { useWorldContext } from "../contexts/worldContext"
 import { ContextActionService, HttpService } from "@rbxts/services"
 import Padding from "ReplicatedStorage/ui/components/padding"
-import Acrylic from "ReplicatedStorage/ui/components/acrylic"
 
-interface SlotProps extends Roact.JsxInstanceProperties<Frame> {
+interface slotProps extends Roact.JsxInstanceProperties<Frame> {
     index: number
     keycode: Enum.KeyCode
     tool: Tool
@@ -14,10 +13,10 @@ interface SlotProps extends Roact.JsxInstanceProperties<Frame> {
 	Change?: Roact.JsxInstanceChangeEvents<Frame>
 }
 
-function slot(props: SlotProps): Roact.Element {
+function slot(props: slotProps): Roact.Element {
     const { index, keycode, tool } = props
 
-    const spreadableProps = { ...props } as Partial<SlotProps>
+    const spreadableProps = { ...props } as Partial<slotProps>
     delete spreadableProps.index
     delete spreadableProps.keycode
     delete spreadableProps.tool
@@ -49,43 +48,37 @@ function slot(props: SlotProps): Roact.Element {
         <frame
             BackgroundColor3={Color3.fromHex("#11111b")}
             BackgroundTransparency={
-                .75
+                .7
             }
             Size={new UDim2(1, 0, 1, 0)}
         >
-            <Acrylic
-                radius={8}
-                distance={0.0001}
-            />
             <uiaspectratioconstraint
                 AspectRatio={6}
             />
             <uicorner
                 CornerRadius={new UDim(0, 8)}
             />
-            <frame BackgroundTransparency={1} Size={new UDim2(1, 0, 1, 0)}>
+            <Padding
-                <Padding
+                paddingY={new UDim(.3, 0)}
-                    paddingY={new UDim(.3, 0)}
+            />
-                />
+            <textlabel
-                <textlabel
+                TextColor3={Color3.fromHex("#cdd6f4")}
-                    TextColor3={Color3.fromHex("#cdd6f4")}
+                BackgroundTransparency={1}
-                    BackgroundTransparency={1}
+                Size={new UDim2(.2, 0, 1, 0)}
-                    Size={new UDim2(.2, 0, 1, 0)}
+                Font={Enum.Font.GothamBold}
-                    Font={Enum.Font.GothamBold}
+                Text={tostring(index)}
-                    Text={tostring(index)}
+                TextScaled
-                    TextScaled
+            />
-                />
+            <textlabel
-                <textlabel
+                TextColor3={Color3.fromHex("#cdd6f4")}
-                    TextColor3={Color3.fromHex("#cdd6f4")}
+                BackgroundTransparency={1}
-                    BackgroundTransparency={1}
+                Size={new UDim2(.8, 0, 1, 0)}
-                    Size={new UDim2(.8, 0, 1, 0)}
+                Position={new UDim2(.2, 0, 0, 0)}
-                    Position={new UDim2(.2, 0, 0, 0)}
+                Font={Enum.Font.Gotham}
-                    Font={Enum.Font.Gotham}
+                Text={tool.Name}
-                    Text={tool.Name}
+                TextXAlignment={Enum.TextXAlignment.Left}
-                    TextXAlignment={Enum.TextXAlignment.Left}
+                TextScaled
-                    TextScaled
+            />
-                />
-            </frame>
         </frame>
     )
 }

src/StarterPlayer/StarterPlayerScripts/ui/main.tsx

@@ -2,13 +2,13 @@ import Roact from "@rbxts/roact"
 import Hotbar from "./hotbar/hotbar"
 import { withHookDetection } from "@rbxts/roact-hooked"
 
-interface MainProps extends Roact.JsxInstanceEvents<ScreenGui> {
+interface mainProps extends Roact.JsxInstanceEvents<ScreenGui> {
     Event?: Roact.JsxInstanceEvents<ScreenGui>
     Change?: Roact.JsxInstanceChangeEvents<ScreenGui>
 }
 
-export default function main(props: MainProps): Roact.Element {
+export default function main(props: mainProps): Roact.Element {
-    const spreadableProps = { ...props } as Partial<MainProps>
+    const spreadableProps = { ...props } as Partial<mainProps>
 
     withHookDetection(Roact)
     

yarn.lock

@@ -86,11 +86,6 @@
   dependencies:
     "@rbxts/validate-tree" "^2.0.1"
 
-"@rbxts/compiler-types@^1.2.3-types.1":
-  version "1.2.3-types.1"
-  resolved "https://registry.yarnpkg.com/@rbxts/compiler-types/-/compiler-types-1.2.3-types.1.tgz#d7945531c917d62bafadd2b5aa6c2f2e88a2036a"
-  integrity sha512-SXXIBazyJ7N6d2xcy471/kqZZpCv7EDOWrRJ45jcv3g00VQaZwYl4Elr10woqRloIblQanwJ7yUqGXAsWv7iuQ==
-
 "@rbxts/compiler-types@^2.1.1-types.0":
   version "2.1.1-types.0"
   resolved "https://registry.yarnpkg.com/@rbxts/compiler-types/-/compiler-types-2.1.1-types.0.tgz#a1f02b57402dffec474dd6656ec1d8a897b9756b"
@@ -103,14 +98,6 @@
   dependencies:
     "@rbxts/message-templates" "^0.3.1"
 
-"@rbxts/make@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@rbxts/make/-/make-1.0.6.tgz#9fbed42cd263b6ce997cdb6a840f77fdeb9e6b36"
-  integrity sha512-ZL1FMxDqWv1TIzE064JFen75rgybV7ulQHTUVqXuvngDBa3lP3btFiIdUO2MMJAOZpHKinC9jFudcCenrprcPg==
-  dependencies:
-    "@rbxts/compiler-types" "^1.2.3-types.1"
-    "@rbxts/types" "^1.0.537"
-
 "@rbxts/matter@^0.6.2-ts.6":
   version "0.6.4"
   resolved "https://registry.yarnpkg.com/@rbxts/matter/-/matter-0.6.4.tgz#49ff6ce56bada1ce7c5e2715a05daaa3fb7615e6"
@@ -161,11 +148,6 @@
   resolved "https://registry.yarnpkg.com/@rbxts/testez/-/testez-0.4.2-ts.0.tgz#4475183d317182ac7099bffee6492ffcb7bcaf0b"
   integrity sha512-8Q+OG9ddTD2P3aARCuRKpPqUBvuifgSnHvQMZ6jBMqUzxhIysnb0l4c3vnnaQnvdyZ1OW9tKxcdEHMGTb67uOw==
 
-"@rbxts/types@^1.0.537":
-  version "1.0.709"
-  resolved "https://registry.yarnpkg.com/@rbxts/types/-/types-1.0.709.tgz#645bd5547ccebed748c167e1c43d3ff62a788db3"
-  integrity sha512-lvglSXxGNSNgZNvccnh70USvhSn6yYO+yQTA4m0ePjNjyJ8DueVLfuT5Ge0NDFYOlTtx1vJuxd2wlFqCBJAXVw==
-
 "@rbxts/types@^1.0.707":
   version "1.0.707"
   resolved "https://registry.yarnpkg.com/@rbxts/types/-/types-1.0.707.tgz#8007f5eb0f0368ec25ff1c4d313bd80c30bbed33"