From d6af38eba1bdf52a7f44194cb00a5e64fa1833b6 Mon Sep 17 00:00:00 2001
From: reidlab <reidlab325@gmail.com>
Date: Sun, 13 Aug 2023 10:03:18 -0700
Subject: [PATCH] revamp hotbar ui

---
 readme.md                                     |  2 +
 .../StarterPlayerScripts/ui/hotbar/hotbar.tsx | 48 ++++++------
 .../StarterPlayerScripts/ui/hotbar/slot.tsx   | 76 ++++++++-----------
 3 files changed, 57 insertions(+), 69 deletions(-)

diff --git a/readme.md b/readme.md
index 24d58b7..ae6b618 100644
--- a/readme.md
+++ b/readme.md
@@ -7,6 +7,8 @@ An in-dev game that I plan to make a shooter game out of.
 
 — reidlab
 
+# Ui theming is based on Catppucin Mocha. You can find the colors [here](https://github.com/catppuccin/catppuccin) and the style guide [here](https://github.com/catppuccin/catppuccin/blob/main/docs/style-guide.md)
+
 # Hacks
 * I get a strange error about private identifiers in [`./src/ReplicatedStorage/ecs/state.ts`](./src/ReplicatedStorage/ecs/state.ts)
 * I decided to omit the "TS" folder from [`./default.project.json:40`](./default.project.json) due to the script override not working in Health.server.ts in StarterCharacterScripts.
diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx
index ad20962..0c370af 100644
--- a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx
+++ b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx
@@ -27,38 +27,36 @@ const hotbar: Hooks.FC<hotbarProps> = (props, hooks) => {
         Enum.KeyCode.Six,
         Enum.KeyCode.Seven,
         Enum.KeyCode.Eight,
-        Enum.KeyCode.Nine
+        Enum.KeyCode.Nine,
+        // idk if this works
+        Enum.KeyCode.Zero
     ]
 
     return (
         <frame
             {...spreadableProps}
-            AutomaticSize={Enum.AutomaticSize.X}
-            AnchorPoint={new Vector2(0.5, 1)}
+            AnchorPoint={new Vector2(0, 0)}
+            Position={new UDim2(0, 0, 0, 0)}
             BackgroundTransparency={1}
-            Key="Hotbar"
+            Size={new UDim2(.25, 0, 1, 0)}
+            Key={"Hotbar"}
         >
-            <frame Size={new UDim2(0, 0, 0.5, 0)} Position={new UDim2(0.5, 0, 0.5, 0)} BackgroundTransparency={1}>
-                <uilistlayout
-                    FillDirection={Enum.FillDirection.Horizontal}
-                    HorizontalAlignment={Enum.HorizontalAlignment.Center}
-                    VerticalAlignment={Enum.VerticalAlignment.Bottom}
-                    Padding={new UDim(0, 5)}
-                />
-                <Padding
-                    PaddingY={new UDim(0, 5)}
-                />
-                {
-                    clientState.backpack.GetChildren().map((tool, i) => (
-                        <Slot
-                            index={i + 1}
-                            Size={new UDim2(1, 0, 1, 0)}
-                            keycode={keycodes[i]}
-                            tool={tool as Tool}
-                        />
-                    ))
-                }
-            </frame>
+            <uilistlayout
+                Padding={new UDim(0, 5)}
+                VerticalAlignment={Enum.VerticalAlignment.Bottom}
+            />
+            <Padding
+                Padding={new UDim(0, 10)}
+            />
+            {
+                clientState.backpack.GetChildren().map((tool, i) => (
+                    <Slot
+                        index={i + 1}
+                        keycode={keycodes[i]}
+                        tool={tool as Tool}
+                    />
+                ))
+            }
         </frame>
     )
 }
diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx
index b9e790c..926d8d0 100644
--- a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx
+++ b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx
@@ -44,50 +44,38 @@ const slot: Hooks.FC<slotProps> = (props, hooks) => {
     })
 
     return (
-        <frame {...spreadableProps} BackgroundTransparency={1} SizeConstraint={Enum.SizeConstraint.RelativeYY}>
-            <textbutton
-                Position={new UDim2(0, 0, 0, 0)}
-                Size={new UDim2(1, 0, 1, 0)}
-                BackgroundColor3={new Color3()}
-                BackgroundTransparency={0.3}
-                Text=""
-                Event={{
-                    Activated: (): void => {
-                        handleActivated()
-                    }
-                }}
-            >
-                <uicorner CornerRadius={new UDim(0.05, 0)}/>
-                <uistroke
-                    Thickness={2}
-                    Color={new Color3(0.1, 0.1, 0.1)}
-                    ApplyStrokeMode={Enum.ApplyStrokeMode.Border}
-                />
-
-                <textlabel
-                    Size={new UDim2(1, 0, 0.2, 0)}
-					Text={tostring(index)}
-					TextXAlignment={Enum.TextXAlignment.Left}
-					BackgroundTransparency={1}
-					TextColor3={new Color3(1, 1, 1)}
-					TextScaled
-                >
-                    <uistroke Thickness={1}/>
-                </textlabel>
-
-                <textlabel
-                    Size={new UDim2(1, 0, 1, 0)}
-                    AnchorPoint={new Vector2(0.5, 0.5)}
-                    Position={new UDim2(0.5, 0, 0.5, 0)}
-                    BackgroundTransparency={1}
-                    TextScaled
-                    Text={tool.Name}
-                    TextColor3={Color3.fromRGB(255, 255, 255)}
-                >
-                    <uistroke Thickness={1}/>
-                    <Padding Padding={new UDim(0.05, 0)}/>
-                </textlabel>
-            </textbutton>
+        <frame
+            BackgroundColor3={Color3.fromHex("#11111b")}
+            BackgroundTransparency={.7}
+            Size={new UDim2(1, 0, 1, 0)}
+        >
+            <uiaspectratioconstraint
+                AspectRatio={6}
+            />
+            <uicorner
+                CornerRadius={new UDim(0, 8)}
+            />
+            <Padding
+                PaddingY={new UDim(.3, 0)}
+            />
+            <textlabel
+                TextColor3={Color3.fromHex("#cdd6f4")}
+                BackgroundTransparency={1}
+                Size={new UDim2(.2, 0, 1, 0)}
+                Font={Enum.Font.GothamBold}
+                Text={tostring(index)}
+                TextScaled
+            />
+            <textlabel
+                TextColor3={Color3.fromHex("#cdd6f4")}
+                BackgroundTransparency={1}
+                Size={new UDim2(.8, 0, 1, 0)}
+                Position={new UDim2(.2, 0, 0, 0)}
+                Font={Enum.Font.Gotham}
+                Text={tool.Name}
+                TextXAlignment={Enum.TextXAlignment.Left}
+                TextScaled
+            />
         </frame>
     )
 }