FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 23:46:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(web/skillcheck): use proper skill check calculations

Browse Source 
Changed the areaSize to use degrees rather than the length of the arch which was causing issues

Co-authored-by: DokaDoka <31368547+DokaDoka@users.noreply.github.com>
This commit is contained in:
Luke
2022-10-20 13:30:25 +02:00
parent 2bb0d68415
commit e40331009b
2 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,18 +18,20 @@ export interface SkillCheckProps {
difficulty: GameDifficulty; difficulty: GameDifficulty;
} }
export const circleCircumference = 2 * 50 * Math.PI;
const getRandomAngle = (min: number, max: number) => Math.floor(Math.random() * (max - min)) + min; const getRandomAngle = (min: number, max: number) => Math.floor(Math.random() * (max - min)) + min;
const difficultyOffsets = { const difficultyOffsets = {
easy: 275, easy: 50,
medium: 290, medium: 40,
hard: 295, hard: 25,
}; };
debugData([ debugData([
{ {
action: 'startSkillCheck', action: 'startSkillCheck',
data: [{ areaSize: 250, speedMultiplier: 2 }, 'easy', 'hard'], data: ['hard'],
}, },
]); ]);
@@ -39,7 +41,7 @@ const SkillCheck: React.FC = () => {
const dataIndexRef = useRef<number>(0); const dataIndexRef = useRef<number>(0);
const [skillCheck, setSkillCheck] = useState<SkillCheckProps>({ const [skillCheck, setSkillCheck] = useState<SkillCheckProps>({
angle: 0, angle: 0,
difficultyOffset: 315, difficultyOffset: 50,
difficulty: 'easy', difficulty: 'easy',
}); });
@@ -49,7 +51,7 @@ const SkillCheck: React.FC = () => {
const gameData = Array.isArray(data) ? data[0] : data; const gameData = Array.isArray(data) ? data[0] : data;
const offset = typeof gameData === 'object' ? gameData.areaSize : difficultyOffsets[gameData]; const offset = typeof gameData === 'object' ? gameData.areaSize : difficultyOffsets[gameData];
setSkillCheck({ setSkillCheck({
angle: -90 + getRandomAngle(120, 360 - (315 - offset)), angle: -90 + getRandomAngle(120, 360 - offset),
difficultyOffset: offset, difficultyOffset: offset,
difficulty: gameData, difficulty: gameData,
}); });
@@ -72,7 +74,7 @@ const SkillCheck: React.FC = () => {
const data = dataRef.current[dataIndexRef.current]; const data = dataRef.current[dataIndexRef.current];
const offset = typeof data === 'object' ? data.areaSize : difficultyOffsets[data]; const offset = typeof data === 'object' ? data.areaSize : difficultyOffsets[data];
setSkillCheck({ setSkillCheck({
angle: -90 + getRandomAngle(120, 360 - (315 - offset)), angle: -90 + getRandomAngle(120, 360 - offset),
difficultyOffset: offset, difficultyOffset: offset,
difficulty: data, difficulty: data,
}); });
@@ -91,7 +93,7 @@ const SkillCheck: React.FC = () => {
fill="transparent" fill="transparent"
stroke="rgba(0, 0, 0, 0.4)" stroke="rgba(0, 0, 0, 0.4)"
strokeWidth={5} strokeWidth={5}
strokeDasharray={360} strokeDasharray={circleCircumference}
/> />
{/*SkillCheck area*/} {/*SkillCheck area*/}
<circle <circle
@@ -100,8 +102,8 @@ const SkillCheck: React.FC = () => {
cy={250} cy={250}
fill="transparent" fill="transparent"
stroke="white" stroke="white"
strokeDasharray={315} strokeDasharray={circleCircumference}
strokeDashoffset={skillCheck.difficultyOffset} strokeDashoffset={circleCircumference - (Math.PI * 50 * skillCheck.difficultyOffset) / 180}
strokeWidth={5} strokeWidth={5}
transform={`rotate(${skillCheck.angle}, 250, 250)`} transform={`rotate(${skillCheck.angle}, 250, 250)`}
/> />

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

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
import { useKeyPress } from '../../hooks/useKeyPress'; import { useKeyPress } from '../../hooks/useKeyPress';
import { SkillCheckProps } from './index'; import { SkillCheckProps } from './index';
import { useInterval } from '@chakra-ui/react'; import { useInterval } from '@chakra-ui/react';
import { circleCircumference } from './index';
interface Props { interface Props {
angle: number; angle: number;
@@ -41,7 +42,8 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete,
if (!isKeyPressed) return; if (!isKeyPressed) return;
setGameState(false); setGameState(false);
if (indicatorAngle < angle || indicatorAngle > angle + (315 - offset)) handleComplete(false);
if (indicatorAngle < angle || indicatorAngle > angle + offset) handleComplete(false);
else handleComplete(true); else handleComplete(true);
}, [isKeyPressed]); }, [isKeyPressed]);
@@ -53,8 +55,8 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete,
fill="transparent" fill="transparent"
stroke="red" stroke="red"
strokeWidth={15} strokeWidth={15}
strokeDasharray={315} strokeDasharray={circleCircumference}
strokeDashoffset={312} strokeDashoffset={circleCircumference - 3}
transform={`rotate(${indicatorAngle}, 250, 250)`} transform={`rotate(${indicatorAngle}, 250, 250)`}
/> />
); );