Skip to content

Commit

Permalink
fix: bug fixes with the positioning and changed the mic in hud mode 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@vipexv
vipexv committed Jan 9, 2024
1 parent 34d4025 commit 08a54a9
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 121 deletions.
125 changes: 55 additions & 70 deletions web/src/components/CarHud.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,81 +51,66 @@ const CarHud: React.FC<props> = ({
});
return (
<>
<Transition
mounted={playerState.isInVeh}
transition={"pop"}
duration={400}
timingFunction="ease"
>
{(styles) => (
<>
<div style={styles}>
<div className={`${playerState.isInVeh ? "visible" : "invisible"}`}>
<div
className={`flex justify-center items-center h-[40px] font-bold ${
userSettings.hudMode.toString() === "2" ? "skew-x-6" : ""
}`}
>
{isSeatbeltEnabled && !vehicleData.isSeatbeltOn && (
<>
<div
className={`flex justify-center items-center h-[40px] font-bold ${
userSettings.hudMode.toString() === "2" ? "skew-x-6" : ""
}`}
className={`bg-black bg-opacity-80 border py-[8px] px-5 rounded-[2px]`}
>
{isSeatbeltEnabled && !vehicleData.isSeatbeltOn && (
<>
<div
className={`bg-black bg-opacity-80 border py-[8px] px-5 rounded-[2px]`}
>
<FaUserAltSlash className="text-red-600 animate-pulse" />
</div>
</>
)}
<FaUserAltSlash className="text-red-600 animate-pulse" />
</div>
</>
)}
</div>
<div
className={`flex flex-row bg-black border opacity-80 rounded-[2px] px-2 py-[4px] font-bold justify-between scale-90 ${
userSettings.hudMode.toString() == "2" ? "skew-x-6" : ""
}`}
>
<div className="flex p-1 gap-2 justify-center items-center">
<motion.p
className="text-[13.5px]"
initial={{
y: 20,
}}
animate={{
y: 0,
}}
key={vehicleData.gear}
>
{vehicleData.gear}
</motion.p>
<Cog size={16} strokeWidth={2.25} />
</div>
<div className="flex justify-center items-center flex-col mr-5 ml-5">
<p
className="opacity-100 text-opacity-100 text-white"
id="vehSpeed"
>
0
</p>
<p className="text-[9.5px] opacity-50">
{userSettings.measurementSystem === "MPH" ? "MP/H" : "KM/H"}
</p>
</div>
<div className="flex p-1 gap-2 justify-center transition-all">
<Fuel size={16} strokeWidth={2.25} className="place-self-center" />
<div className="bg-primary rounded-[2px] border p-[2px] h-[35px] flex">
<div
className={`flex flex-row bg-black border opacity-80 rounded-[2px] px-2 py-[4px] font-bold justify-between scale-90 ${
userSettings.hudMode.toString() == "2" ? "skew-x-6" : ""
}`}
>
<div className="flex p-1 gap-2 justify-center items-center">
<motion.p
className="text-[13.5px]"
initial={{
y: 20,
}}
animate={{
y: 0,
}}
key={vehicleData.gear}
>
{vehicleData.gear}
</motion.p>
<Cog size={16} strokeWidth={2.25} />
</div>
<div className="flex justify-center items-center flex-col mr-5 ml-5">
<p
className="opacity-100 text-opacity-100 text-white"
id="vehSpeed"
>
0
</p>
<p className="text-[9.5px] opacity-50">
{userSettings.measurementSystem === "MPH" ? "MP/H" : "KM/H"}
</p>
</div>
<div className="flex p-1 gap-2 justify-center transition-all">
<Fuel
size={16}
strokeWidth={2.25}
className="place-self-center"
/>
<div className="bg-primary rounded-[2px] border p-[2px] h-[35px] flex">
<div
className={`w-[5px] max-h-full bg-blue-600 transition-all place-self-end`}
style={{
height: `${vehicleData.fuel}%`,
}}
></div>
</div>
</div>
</div>
className={`w-[5px] max-h-full bg-blue-600 transition-all place-self-end`}
style={{
height: `${vehicleData.fuel}%`,
}}
></div>
</div>
</>
)}
</Transition>
</div>
</div>
</div>
</>
);
};
Expand Down
80 changes: 29 additions & 51 deletions web/src/components/Status.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,9 @@ const Status: React.FC<props> = ({
harnessDurability: 0,
});

const [micActive, setMicActive] = useState("0");

useNuiEvent("nui:data:frameworkStatus", setFrameworkStatus);

useNuiEvent("nui:data:playerstats", (stats) => {
setStats(stats);

setMicActive(stats.mic ? "100" : "0");
});
useNuiEvent("nui:data:playerstats", setStats);

interface Stat {
name: string;
Expand Down Expand Up @@ -99,15 +93,13 @@ const Status: React.FC<props> = ({
icon: Mic,
className: "bg-white bg-opacity-50",
classNameInHudMode2: "text-white opacity-50",
hideInHudMode: "2",
renderCondition: true,
value: micActive,
value: pstats.mic,
},
{
name: "stress",
icon: Brain,
className: "bg-white bg-opacity-50",
classNameInHudMode2: "text-white opacity-50",
renderCondition: scriptConfig["Framework Options"].Stress,
value: frameworkStatus["stress"],
},
Expand All @@ -131,36 +123,6 @@ const Status: React.FC<props> = ({

return (
<>
{userSettings?.hudMode.toString() === "2" && (
<>
<Transition
mounted={micActive === "100" ? true : false}
transition="slide-up"
duration={400}
timingFunction="ease"
>
{(styles) => (
<div className="absolute top-[97.5vh] left-[50dvh] -translate-x-2/4 -translate-y-2/4 skew-x-6">
<p
className="bg-black border bg-opacity-80 mb-2 flex justify-center items-center flex-col font-inter text-white font-bold rounded-[2px]"
style={{
minWidth: "40px",
minHeight: "40px",
...styles,
}}
>
<Mic
size={18}
strokeWidth={2.5}
className="text-white animate-pulse"
/>
</p>
<a href="" target="_blank"></a>
</div>
)}
</Transition>
</>
)}
<div className="flex justify-center items-center mb-3">
{userSettings?.hudMode == 1 ? (
<>
Expand Down Expand Up @@ -219,17 +181,33 @@ const Status: React.FC<props> = ({
// fontSize: "11px",
}}
>
<stat.icon
size={16}
strokeWidth={2.5}
className={cn(
"rounded-[2px]",
stat.classNameInHudMode2
? stat.classNameInHudMode2
: stat.className
)}
/>
<p className="text-[9.5px]">{stat.value}</p>
{stat.name === "mic" ? (
<>
<Mic
size={16}
strokeWidth={2.5}
className={`text-white transition-all ${
!pstats.mic ? "opacity-50" : "opacity-100"
}`}
/>
</>
) : (
<>
<stat.icon
size={16}
strokeWidth={2.5}
className={cn(
`rounded-[2px]`,
stat.classNameInHudMode2
)}
/>
</>
)}
{stat.name !== "mic" && (
<>
<p className="text-[9.5px]">{stat.value}</p>
</>
)}
</p>
</>
)}
Expand Down

0 comments on commit 08a54a9

Please sign in to comment.