FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-19 07:56:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web/skillcheck): move visibility into it's own state

Browse Source
This commit is contained in:
Luke
2022-10-15 21:39:46 +02:00
committed by Luke
parent d5437e070c
commit 61092d7c3c
2 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/features/skillcheck/index.tsx
View File

@@ -12,7 +12,6 @@ interface CustomGameDifficulty {
type GameDifficulty = 'easy' | 'medium' | 'hard' | CustomGameDifficulty; type GameDifficulty = 'easy' | 'medium' | 'hard' | CustomGameDifficulty;
export interface SkillCheckProps { export interface SkillCheckProps {
visible: boolean;
angle: number; angle: number;
difficultyOffset: number; difficultyOffset: number;
difficulty: GameDifficulty; difficulty: GameDifficulty;
@@ -34,8 +33,8 @@ debugData([
]); ]);
const SkillCheck: React.FC = () => { const SkillCheck: React.FC = () => {
const [visible, setVisible] = useState(false);
const [skillCheck, setSkillCheck] = useState<SkillCheckProps>({ const [skillCheck, setSkillCheck] = useState<SkillCheckProps>({
visible: false,
angle: 0, angle: 0,
difficultyOffset: 315, difficultyOffset: 315,
difficulty: 'easy', difficulty: 'easy',
@@ -44,16 +43,16 @@ const SkillCheck: React.FC = () => {
useNuiEvent('startSkillCheck', (data: GameDifficulty) => { useNuiEvent('startSkillCheck', (data: GameDifficulty) => {
const offset = typeof data === 'object' ? data.areaSize : difficultyOffsets[data]; const offset = typeof data === 'object' ? data.areaSize : difficultyOffsets[data];
setSkillCheck({ setSkillCheck({
visible: true,
angle: -90 + getRandomAngle(120, 360 - (315 - offset)), angle: -90 + getRandomAngle(120, 360 - (315 - offset)),
difficultyOffset: offset, difficultyOffset: offset,
difficulty: data, difficulty: data,
}); });
setVisible(true);
}); });
return ( return (
<Center height="100%" width="100%"> <Center height="100%" width="100%">
{skillCheck.visible && ( {visible && (
<> <>
<svg width={500} height={500}> <svg width={500} height={500}>
{/*Circle track*/} {/*Circle track*/}
@@ -91,6 +90,7 @@ const SkillCheck: React.FC = () => {
: skillCheck.difficulty.speedMultiplier : skillCheck.difficulty.speedMultiplier
} }
setSkillCheck={setSkillCheck} setSkillCheck={setSkillCheck}
setVisible={setVisible}
/> />
</svg> </svg>
<Box <Box

7
web/src/features/skillcheck/indicator.tsx
View File

@@ -8,10 +8,11 @@ interface Props {
angle: number; angle: number;
offset: number; offset: number;
multiplier: number; multiplier: number;
setVisible: React.Dispatch<React.SetStateAction<boolean>>;
setSkillCheck: React.Dispatch<React.SetStateAction<SkillCheckProps>>; setSkillCheck: React.Dispatch<React.SetStateAction<SkillCheckProps>>;
} }
const Indicator: React.FC<Props> = ({ angle, offset, multiplier, setSkillCheck }) => { const Indicator: React.FC<Props> = ({ angle, offset, multiplier, setSkillCheck, setVisible }) => {
const [indicatorAngle, setIndicatorAngle] = useState(-90); const [indicatorAngle, setIndicatorAngle] = useState(-90);
const intervalRef = useRef<NodeJS.Timer | null>(null); const intervalRef = useRef<NodeJS.Timer | null>(null);
const isKeyPressed = useKeyPress('e'); const isKeyPressed = useKeyPress('e');
@@ -30,7 +31,7 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, setSkillCheck }
if (intervalRef.current && indicatorAngle + 90 >= 360) { if (intervalRef.current && indicatorAngle + 90 >= 360) {
clearInterval(intervalRef.current); clearInterval(intervalRef.current);
fetchNui('skillCheckOver', { success: false }); fetchNui('skillCheckOver', { success: false });
setSkillCheck((prevState) => ({ ...prevState, visible: false })); setVisible(false);
} }
if (isKeyPressed && intervalRef.current) { if (isKeyPressed && intervalRef.current) {
@@ -40,7 +41,7 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, setSkillCheck }
} else { } else {
fetchNui('skillCheckOver', { success: true }); fetchNui('skillCheckOver', { success: true });
} }
setSkillCheck((prevState) => ({ ...prevState, visible: false })); setVisible(false);
} }
}, [indicatorAngle, isKeyPressed]); }, [indicatorAngle, isKeyPressed]);