TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-23 11:39:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: cleaned code

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-01-02 21:10:04 -06:00
1 parent 60164cfb78
commit f15bee34fb
2 files changed
+96 -139
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/[id]/page.tsx
+93 -130
View File
@@ -38,9 +38,9 @@ import {
tankDefinitions, tankDefinitions,
tankNamesDiacritics, tankNamesDiacritics,
} from '../../../../core/blitzkrieg/tankDefinitions'; } from '../../../../core/blitzkrieg/tankDefinitions';
import { normalizeAngle180 } from '../../../../core/math/normalizeAngle180'; import { normalizeAnglePI } from '../../../../core/math/normalizeAngle180';
import * as styles from '../page.css'; import * as styles from '../page.css';
import { TankAlignment } from './components/tankAlignment'; import { TankAlignment } from './components/TankAlignment';
const X_AXIS = new Vector3(1, 0, 0); const X_AXIS = new Vector3(1, 0, 0);
@@ -81,12 +81,12 @@ export default function Page({ params }: { params: { id: string } }) {
).applyAxisAngle(X_AXIS, Math.PI / 2); ).applyAxisAngle(X_AXIS, Math.PI / 2);
const [turretYaw, setTurretYaw] = useState(0); const [turretYaw, setTurretYaw] = useState(0);
const [hullYaw, setHullYaw] = useState(0); const [hullYaw, setHullYaw] = useState(0);
const [mantletPitch, setMantletPitch] = useState(0); const [gunPitch, setGunPitch] = useState(0);
const [orbitControlsEnabled, setOrbitControlsEnabled] = useState(true); const [orbitControlsEnabled, setOrbitControlsEnabled] = useState(true);
const turretRotationInput = useRef<HTMLInputElement>(null); const turretYawInput = useRef<HTMLInputElement>(null);
const hullRotationInput = useRef<HTMLInputElement>(null); const hullYawInput = useRef<HTMLInputElement>(null);
const gunRotationInput = useRef<HTMLInputElement>(null); const gunPitchInput = useRef<HTMLInputElement>(null);
const mantletContainer = useRef<Group>(null); const gunContainer = useRef<Group>(null);
useEffect(() => { useEffect(() => {
if (!turret.guns.some(({ id }) => gun.id === id)) { if (!turret.guns.some(({ id }) => gun.id === id)) {
@@ -104,20 +104,16 @@ export default function Page({ params }: { params: { id: string } }) {
} }
}, [versusTurret]); }, [versusTurret]);
useEffect(() => { useEffect(() => {
turretRotationInput.current!.value = `${Math.round( hullYawInput.current!.value = `${-Math.round(hullYaw * (180 / Math.PI))}`;
}, [hullYaw]);
useEffect(() => {
turretYawInput.current!.value = `${-Math.round(
turretYaw * (180 / Math.PI), turretYaw * (180 / Math.PI),
)}`; )}`;
}, [turretYaw]); }, [turretYaw]);
useEffect(() => { useEffect(() => {
hullRotationInput.current!.value = `${Math.round( gunPitchInput.current!.value = `${-Math.round(gunPitch * (180 / Math.PI))}`;
hullYaw * (180 / Math.PI), }, [gunPitch]);
)}`;
}, [hullYaw]);
useEffect(() => {
gunRotationInput.current!.value = `${Math.round(
mantletPitch * (180 / Math.PI),
)}`;
}, [mantletPitch]);
return ( return (
<PageWrapper color="purple"> <PageWrapper color="purple">
@@ -197,42 +193,32 @@ export default function Page({ params }: { params: { id: string } }) {
const isWheel = child.name.startsWith('chassis_wheel_'); const isWheel = child.name.startsWith('chassis_wheel_');
const isTrack = child.name.startsWith('chassis_track_'); const isTrack = child.name.startsWith('chassis_track_');
const isVisible = isHull || isWheel || isTrack; const isVisible = isHull || isWheel || isTrack;
let draftTurretRotation = 0; let draftHullYaw = 0;
function handlePointerDown( function handlePointerDown(
event: ThreeEvent<PointerEvent>, event: ThreeEvent<PointerEvent>,
) { ) {
if (isHull) { event.stopPropagation();
event.stopPropagation(); draftHullYaw = hullYaw;
setOrbitControlsEnabled(false);
draftTurretRotation = hullYaw; window.addEventListener(
'pointermove',
setOrbitControlsEnabled(false); handlePointerMove,
window.addEventListener( );
'pointermove', window.addEventListener('pointerup', handlePointerUp);
handlePointerMove,
);
window.addEventListener('pointerup', handlePointerUp);
}
} }
function handlePointerMove(event: PointerEvent) { function handlePointerMove(event: PointerEvent) {
event.stopPropagation(); draftHullYaw +=
event.preventDefault(); event.movementX *
((2 * Math.PI) / canvas.current!.width);
const rotationSpeed =
(2 * Math.PI) / canvas.current!.width;
const delta = event.movementX * rotationSpeed;
draftTurretRotation += delta;
if (hullContainer.current) { if (hullContainer.current) {
hullContainer.current.rotation.z = hullContainer.current.rotation.z = draftHullYaw;
draftTurretRotation;
} }
} }
function handlePointerUp(event: PointerEvent) { function handlePointerUp() {
setOrbitControlsEnabled(true); setOrbitControlsEnabled(true);
setHullYaw(normalizeAngle180(draftTurretRotation)); setHullYaw(normalizeAnglePI(draftHullYaw));
window.removeEventListener( window.removeEventListener(
'pointermove', 'pointermove',
handlePointerMove, handlePointerMove,
@@ -243,9 +229,9 @@ export default function Page({ params }: { params: { id: string } }) {
); );
} }
if (!isVisible) return null;
return ( return (
<mesh <mesh
visible={isVisible}
children={resolveJsxTree(child as Mesh)} children={resolveJsxTree(child as Mesh)}
key={child.uuid} key={child.uuid}
castShadow castShadow
@@ -271,24 +257,19 @@ export default function Page({ params }: { params: { id: string } }) {
{gltf.scene.children[0].children.map((child) => { {gltf.scene.children[0].children.map((child) => {
const isTurret = child.name.startsWith('turret_'); const isTurret = child.name.startsWith('turret_');
const isCurrentTurret = const isCurrentTurret =
isTurret &&
child.name === child.name ===
`turret_${turretModelDefinition.model `turret_${turretModelDefinition.model
.toString() .toString()
.padStart(2, '0')}`; .padStart(2, '0')}`;
const isVisible = isCurrentTurret; const isVisible = isCurrentTurret;
let draftTurretRotation = 0; let draftTurretYaw = 0;
if (!isVisible) return null;
function handlePointerDown( function handlePointerDown(
event: ThreeEvent<PointerEvent>, event: ThreeEvent<PointerEvent>,
) { ) {
event.stopPropagation();
if (isTurret) { if (isTurret) {
event.stopPropagation(); draftTurretYaw = turretYaw;
draftTurretRotation = turretYaw;
setOrbitControlsEnabled(false); setOrbitControlsEnabled(false);
window.addEventListener( window.addEventListener(
'pointermove', 'pointermove',
@@ -301,27 +282,25 @@ export default function Page({ params }: { params: { id: string } }) {
} }
} }
function handlePointerMove(event: PointerEvent) { function handlePointerMove(event: PointerEvent) {
event.stopPropagation(); draftTurretYaw +=
event.preventDefault(); event.movementX *
((2 * Math.PI) / canvas.current!.width);
const rotationSpeed =
(2 * Math.PI) / canvas.current!.width;
const delta = event.movementX * rotationSpeed;
draftTurretRotation += delta;
if (turretContainer.current) { if (turretContainer.current) {
turretContainer.current.position turretContainer.current.position
.set(0, 0, 0)
.sub(turretOrigin) .sub(turretOrigin)
.applyAxisAngle(new Vector3(0, 0, 1), delta) .applyAxisAngle(
new Vector3(0, 0, 1),
draftTurretYaw,
)
.add(turretOrigin); .add(turretOrigin);
turretContainer.current.rotation.z = turretContainer.current.rotation.z = draftTurretYaw;
draftTurretRotation;
} }
} }
function handlePointerUp(event: PointerEvent) { function handlePointerUp() {
setOrbitControlsEnabled(true); setOrbitControlsEnabled(true);
setTurretYaw(normalizeAngle180(draftTurretRotation)); setTurretYaw(normalizeAnglePI(draftTurretYaw));
window.removeEventListener( window.removeEventListener(
'pointermove', 'pointermove',
handlePointerMove, handlePointerMove,
@@ -332,6 +311,7 @@ export default function Page({ params }: { params: { id: string } }) {
); );
} }
if (!isVisible) return null;
return ( return (
<mesh <mesh
visible={isVisible} visible={isVisible}
@@ -353,41 +333,27 @@ export default function Page({ params }: { params: { id: string } }) {
position={new Vector3() position={new Vector3()
.sub(turretOrigin) .sub(turretOrigin)
.sub(gunOrigin) .sub(gunOrigin)
.applyAxisAngle(new Vector3(1, 0, 0), mantletPitch) .applyAxisAngle(new Vector3(1, 0, 0), gunPitch)
.add(turretOrigin) .add(turretOrigin)
.add(gunOrigin)} .add(gunOrigin)}
rotation={[mantletPitch, 0, 0]} rotation={[gunPitch, 0, 0]}
ref={mantletContainer} ref={gunContainer}
> >
{gltf.scene.children[0].children.map((child) => { {gltf.scene.children[0].children.map((child) => {
const isGun =
child.name.startsWith('gun_') &&
!child.name.endsWith('_mask');
const isMantlet = const isMantlet =
child.name.startsWith('gun_') && child.name.startsWith('gun_') &&
child.name.endsWith('_mask'); child.name.endsWith('_mask');
const isCurrentMantlet = const isVisible = isGun || isMantlet;
child.name ===
`gun_${gunModelDefinition.model
.toString()
.padStart(2, '0')}_mask`;
const isGun =
child.name.startsWith('gun_') && !isMantlet;
const isCurrentGun =
isGun &&
child.name ===
`gun_${gunModelDefinition.model
.toString()
.padStart(2, '0')}`;
const isVisible = isCurrentGun || isCurrentMantlet;
let draftMantletPitch = 0; let draftMantletPitch = 0;
if (!isVisible) return null;
function handlePointerDown( function handlePointerDown(
event: ThreeEvent<PointerEvent>, event: ThreeEvent<PointerEvent>,
) { ) {
event.stopPropagation(); event.stopPropagation();
draftMantletPitch = gunPitch;
draftMantletPitch = mantletPitch;
setOrbitControlsEnabled(false); setOrbitControlsEnabled(false);
window.addEventListener( window.addEventListener(
'pointermove', 'pointermove',
@@ -399,21 +365,16 @@ export default function Page({ params }: { params: { id: string } }) {
); );
} }
function handlePointerMove(event: PointerEvent) { function handlePointerMove(event: PointerEvent) {
event.stopPropagation();
event.preventDefault();
const rotationSpeed =
(2 * Math.PI) / canvas.current!.width;
const delta = -event.movementY * rotationSpeed;
draftMantletPitch += delta;
draftMantletPitch = clamp( draftMantletPitch = clamp(
draftMantletPitch, draftMantletPitch -
event.movementY *
(Math.PI / canvas.current!.height),
-gunModelDefinition.pitch.max * (Math.PI / 180), -gunModelDefinition.pitch.max * (Math.PI / 180),
-gunModelDefinition.pitch.min * (Math.PI / 180), -gunModelDefinition.pitch.min * (Math.PI / 180),
); );
if (mantletContainer.current) { if (gunContainer.current) {
mantletContainer.current.position gunContainer.current.position
.set(0, 0, 0) .set(0, 0, 0)
.sub(turretOrigin) .sub(turretOrigin)
.sub(gunOrigin) .sub(gunOrigin)
@@ -423,16 +384,13 @@ export default function Page({ params }: { params: { id: string } }) {
) )
.add(turretOrigin) .add(turretOrigin)
.add(gunOrigin); .add(gunOrigin);
mantletContainer.current.rotation.x = gunContainer.current.rotation.x =
draftMantletPitch; draftMantletPitch;
} }
} }
function handlePointerUp(event: PointerEvent) { function handlePointerUp() {
setOrbitControlsEnabled(true); setOrbitControlsEnabled(true);
setMantletPitch( setGunPitch(normalizeAnglePI(draftMantletPitch));
normalizeAngle180(draftMantletPitch),
);
window.removeEventListener( window.removeEventListener(
'pointermove', 'pointermove',
handlePointerMove, handlePointerMove,
@@ -443,6 +401,7 @@ export default function Page({ params }: { params: { id: string } }) {
); );
} }
if (!isVisible) return null;
return ( return (
<mesh <mesh
visible={isVisible} visible={isVisible}
@@ -489,20 +448,21 @@ export default function Page({ params }: { params: { id: string } }) {
> >
<TextField.Slot>Hull</TextField.Slot> <TextField.Slot>Hull</TextField.Slot>
<TextField.Input <TextField.Input
defaultValue={Math.round(hullYaw * (180 / Math.PI))}
onBlur={() => { onBlur={() => {
setHullYaw( const normalized = normalizeAnglePI(
normalizeAngle180( -Number(hullYawInput.current?.value) * (Math.PI / 180),
Number(hullRotationInput.current?.value) *
(Math.PI / 180),
),
); );
setHullYaw(normalized);
hullYawInput.current!.value = `${Math.round(normalized)}`;
}} }}
onKeyDown={(event) => { onKeyDown={(event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
hullRotationInput.current?.blur(); hullYawInput.current?.blur();
} }
}} }}
ref={hullRotationInput} onFocus={() => hullYawInput.current?.focus()}
ref={hullYawInput}
style={{ textAlign: 'right' }} style={{ textAlign: 'right' }}
/> />
<TextField.Slot>°</TextField.Slot> <TextField.Slot>°</TextField.Slot>
@@ -516,20 +476,24 @@ export default function Page({ params }: { params: { id: string } }) {
> >
<TextField.Slot>Turret</TextField.Slot> <TextField.Slot>Turret</TextField.Slot>
<TextField.Input <TextField.Input
defaultValue={Math.round(turretYaw * (180 / Math.PI))}
onBlur={() => { onBlur={() => {
setTurretYaw( const normalized = normalizeAnglePI(
normalizeAngle180( -Number(turretYawInput.current?.value) *
Number(turretRotationInput.current?.value) * (Math.PI / 180),
(Math.PI / 180),
),
); );
setTurretYaw(normalized);
turretYawInput.current!.value = `${Math.round(
normalized,
)}`;
}} }}
onKeyDown={(event) => { onKeyDown={(event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
turretRotationInput.current?.blur(); turretYawInput.current?.blur();
} }
}} }}
ref={turretRotationInput} onFocus={() => turretYawInput.current?.focus()}
ref={turretYawInput}
style={{ textAlign: 'right' }} style={{ textAlign: 'right' }}
/> />
<TextField.Slot>°</TextField.Slot> <TextField.Slot>°</TextField.Slot>
@@ -543,24 +507,23 @@ export default function Page({ params }: { params: { id: string } }) {
> >
<TextField.Slot>Gun</TextField.Slot> <TextField.Slot>Gun</TextField.Slot>
<TextField.Input <TextField.Input
defaultValue={-Math.round(gunPitch * (180 / Math.PI))}
onBlur={() => { onBlur={() => {
setMantletPitch( const clamped = clamp(
clamp( Number(gunPitchInput.current?.value),
normalizeAngle180( gunModelDefinition.pitch.min,
Number(gunRotationInput.current?.value) * gunModelDefinition.pitch.max,
(Math.PI / 180),
),
-gunModelDefinition.pitch.min * (Math.PI / 180),
-gunModelDefinition.pitch.max * (Math.PI / 180),
),
); );
setGunPitch(-clamped * (Math.PI / 180));
gunPitchInput.current!.value = `${Math.round(clamped)}`;
}} }}
onKeyDown={(event) => { onKeyDown={(event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
gunRotationInput.current?.blur(); gunPitchInput.current?.blur();
} }
}} }}
ref={gunRotationInput} onFocus={() => gunPitchInput.current?.focus()}
ref={gunPitchInput}
style={{ textAlign: 'right' }} style={{ textAlign: 'right' }}
/> />
<TextField.Slot>°</TextField.Slot> <TextField.Slot>°</TextField.Slot>
src/core/math/normalizeAngle180.ts
+3 -9
View File
@@ -1,12 +1,6 @@
export function normalizeAngle180(angle: number) { export function normalizeAnglePI(angle: number) {
const newAngle = angle % (2 * Math.PI); const newAngle = angle % (2 * Math.PI);
if (newAngle > Math.PI) return newAngle - 2 * Math.PI;
if (newAngle > Math.PI) { if (newAngle < -Math.PI) return newAngle + 2 * Math.PI;
return newAngle - 2 * Math.PI;
}
if (newAngle < -Math.PI) {
return newAngle + 2 * Math.PI;
}
return newAngle; return newAngle;
} }