fix stuff, add percentage bar

src/ReplicatedStorage/ui/percentageBar.tsx

@@ -0,0 +1,64 @@
+import Hooks from "@rbxts/roact-hooks"
+import Roact from "@rbxts/roact"
+import Padding from "./padding"
+
+function colorBetween(startColor: Color3, endColor: Color3, degree: number): Color3 {
+    return startColor.Lerp(endColor, degree)
+}
+
+interface percentageBarProps extends Roact.JsxInstanceProperties<UIPadding> {
+	current: number
+    max: number
+    highColor: Color3
+    lowColor: Color3
+    bgColor: Color3
+    text?: string
+
+	Event?: Roact.JsxInstanceEvents<Frame>
+	Change?: Roact.JsxInstanceChangeEvents<Frame>
+}
+
+const percentageBar: Hooks.FC<percentageBarProps> = (props, _hooks) => {
+	const { current, max, highColor, lowColor, bgColor, text } = props
+
+	const spreadableProps = { ...props } as Partial<percentageBarProps>
+	delete spreadableProps.current
+	delete spreadableProps.max
+    delete spreadableProps.highColor
+    delete spreadableProps.lowColor
+    delete spreadableProps.bgColor
+    delete spreadableProps.text
+
+	return (
+		<frame BackgroundColor3={bgColor} BorderSizePixel={0} {...spreadableProps}>
+            <frame BackgroundTransparency={1} Size={new UDim2(current / max, 0, 1, 0)} ZIndex={1} BorderSizePixel={0}>
+                <frame BackgroundColor3={colorBetween(lowColor, highColor, current / max)} Size={new UDim2(1, 0, 1, 0)} BorderSizePixel={0}/>
+            </frame>
+            <frame Size={new UDim2(1, 0, 1, 0)} BackgroundTransparency={1}>
+                <Padding PaddingY={new UDim(.1, 0)} PaddingX={new UDim(0, 8)}/>
+                <textlabel
+                    BackgroundTransparency={1}
+					Text={`${math.floor(current)} / ${math.floor(max)}`}
+					ZIndex={2}
+					Size={new UDim2(1, 0, 1, 0)}
+					TextXAlignment={Enum.TextXAlignment.Right}
+					TextColor3={Color3.fromHex("#cdd6f4")}
+					TextScaled
+                />
+                {(text !== undefined) ? (
+					<textlabel
+						BackgroundTransparency={1}
+						Text={text}
+						ZIndex={2}
+						Size={new UDim2(1, 0, 1, 0)}
+						TextXAlignment={Enum.TextXAlignment.Left}
+						TextColor3={Color3.fromHex("#cdd6f4")}
+						TextScaled
+					/>
+				) : undefined}
+            </frame>
+        </frame>
+	)
+}
+
+export default new Hooks(Roact)(percentageBar)