TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 18:57:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into dev

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-07-01 20:31:30 -05:00
2 parents e28408bc3a 51da286dc7
commit d6ed395716
24 files changed
+654 -355
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/compare/components/TankControl.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ export function TankControl({ index, id }: TankControlProps) {
</Dialog.Content>
</Dialog.Root>
<Link href={`/tools/tankopedia/${id}`}>
<Link href={`/tools/tankopedia/${id}`} target="_blank">
<IconButton variant="ghost">
<ExternalLinkIcon />
</IconButton>
src/app/tools/compare/page.tsx
+145 -73
View File
@@ -178,6 +178,7 @@ export default function Page() {
deltaType = 'higherIsBetter',
decimals,
deltaNominalDisplay,
indent,
}: {
name: string;
value:
@@ -191,6 +192,7 @@ export default function Page() {
deltaType?: 'higherIsBetter' | 'lowerIsBetter';
decimals?: number;
deltaNominalDisplay?: (delta: number) => string | number;
indent?: boolean;
}) {
const values = stats.map((stat) =>
typeof value === 'function' ? value(stat)! : (stat[value] as number),
@@ -199,7 +201,11 @@ export default function Page() {
return (
<Table.Row>
<Table.RowHeaderCell>
<Flex align="center" gap="2">
<Flex
align="center"
style={{ whiteSpace: 'nowrap' }}
gap={indent ? '6' : '2'}
>
<IconButton
color={sorting?.by === name ? undefined : 'gray'}
variant="ghost"
@@ -620,7 +626,7 @@ export default function Page() {
{members.length > 0 && (
<Flex justify="center">
<Box maxWidth="100%" position="relative">
<Table.Root variant="surface" style={{ maxWidth: '100%' }}>
<Table.Root size="1" variant="surface" style={{ maxWidth: '100%' }}>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell
@@ -1160,49 +1166,6 @@ export default function Page() {
</Popover.Content>
</Popover.Root>
</Flex>
<Flex mt="1">
{gun.shells.map((thisShell, shellIndex) => (
<IconButton
color={
thisShell.id === shell.id
? undefined
: 'gray'
}
variant="soft"
key={thisShell.id}
style={{
borderTopLeftRadius:
shellIndex === 0 ? undefined : 0,
borderBottomLeftRadius:
shellIndex === 0 ? undefined : 0,
borderTopRightRadius:
shellIndex === gun.shells.length - 1
? undefined
: 0,
borderBottomRightRadius:
shellIndex === gun.shells.length - 1
? undefined
: 0,
marginLeft: shellIndex === 0 ? 0 : -1,
}}
onClick={() => {
mutateCompareTemporary((draft) => {
draft.members[index].shell = thisShell;
});
}}
>
<img
alt={thisShell.name}
width={16}
height={16}
src={asset(
`icons/shells/${thisShell.icon}.webp`,
)}
/>
</IconButton>
))}
</Flex>
</Flex>
</Table.Cell>
);
@@ -1211,7 +1174,62 @@ export default function Page() {
</Table.Row>
</Table.Body>
<Title>Fire</Title>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>
<Flex height="100%" align="center">
<Heading size="4">Firepower</Heading>
</Flex>
</Table.ColumnHeaderCell>
{members.map(({ gun, shell, key }, index) => (
<Table.ColumnHeaderCell key={key}>
<Flex justify="center">
<Flex>
{gun.shells.map((thisShell, shellIndex) => (
<IconButton
color={
thisShell.id === shell.id ? undefined : 'gray'
}
variant="soft"
key={thisShell.id}
style={{
borderTopLeftRadius:
shellIndex === 0 ? undefined : 0,
borderBottomLeftRadius:
shellIndex === 0 ? undefined : 0,
borderTopRightRadius:
shellIndex === gun.shells.length - 1
? undefined
: 0,
borderBottomRightRadius:
shellIndex === gun.shells.length - 1
? undefined
: 0,
marginLeft: shellIndex === 0 ? 0 : -1,
}}
onClick={() => {
mutateCompareTemporary((draft) => {
draft.members[index].shell = thisShell;
});
}}
>
<img
alt={thisShell.name}
width={16}
height={16}
src={asset(
`icons/shells/${thisShell.icon}.webp`,
)}
/>
</IconButton>
))}
</Flex>
</Flex>
</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
<Row name="DPM" value="dpm" decimals={0} />
<Row
@@ -1243,6 +1261,14 @@ export default function Page() {
)}
<Row name="Penetration" value="penetration" decimals={0} />
<Row name="Damage" value="damage" decimals={0} />
{hasNonRegularGun && (
<Row
name="clipping potential"
indent
value="clipDamage"
decimals={0}
/>
)}
<Row name="Module damage" value="moduleDamage" decimals={0} />
<Row name="Caliber" value="caliber" decimals={0} />
<Row
@@ -1270,61 +1296,98 @@ export default function Page() {
decimals={3}
/>
<Row
name="Dispersion moving"
name="moving"
indent
value="dispersionMoving"
deltaType="lowerIsBetter"
decimals={3}
/>
<Row
name="Dispersion hull traversing"
name="hull traversing"
indent
value="dispersionHullTraversing"
deltaType="lowerIsBetter"
decimals={3}
/>
<Row
name="Dispersion turret traversing"
name="turret traversing"
indent
value="dispersionTurretTraversing"
deltaType="lowerIsBetter"
decimals={3}
/>
<Row
name="Dispersion shooting"
name="shooting"
indent
value="dispersionShooting"
deltaType="lowerIsBetter"
decimals={3}
/>
<Row
name="Dispersion gun damaged"
name="gun damaged"
indent
value="dispersionGunDamaged"
deltaType="lowerIsBetter"
decimals={3}
/>
<Row
name="maximum"
indent
value="maxDispersion"
deltaType="lowerIsBetter"
decimals={3}
/>
<Row name="Gun depression" value="gunDepression" decimals={1} />
<Row name="Gun elevation" value="gunElevation" decimals={1} />
<Row
name="elevation"
indent
value="gunElevation"
decimals={1}
/>
</Table.Body>
<Title>Maneuverability</Title>
<Table.Body>
<Row name="Speed forwards" value="speedForwards" decimals={0} />
<Row
name="Speed backwards"
name="backwards"
indent
value="speedBackwards"
decimals={0}
/>
<Row name="Engine power" value="enginePower" decimals={0} />
<Row name="Weight" value="weight" decimals={1} />
<Row
name="Power to weight ratio on hard terrain"
name="Terrain coefficient"
value="hardTerrainCoefficient"
decimals={1}
/>
<Row
name="medium terrain"
indent
value="mediumTerrainCoefficient"
decimals={1}
/>
<Row
name="soft terrain"
indent
value="softTerrainCoefficient"
decimals={1}
/>
<Row
name="Power to weight ratio"
value="powerToWeightRatioHardTerrain"
decimals={1}
/>
<Row
name="Power to weight ratio on medium terrain"
name="medium terrain"
indent
value="powerToWeightRatioMediumTerrain"
decimals={1}
/>
<Row
name="Power to weight ratio on soft terrain"
name="soft terrain"
indent
value="powerToWeightRatioSoftTerrain"
decimals={1}
/>
@@ -1334,17 +1397,19 @@ export default function Page() {
decimals={1}
/>
<Row
name="Traverse speed on hard terrain"
name="Traverse speed"
value="hullTraverseHardTerrain"
decimals={1}
/>
<Row
name="Traverse speed on medium terrain"
name="medium terrain"
indent
value="hullTraverseMediumTerrain"
decimals={1}
/>
<Row
name="Traverse speed on soft terrain"
name="soft terrain"
indent
value="hullTraverseSoftTerrain"
decimals={1}
/>
@@ -1362,19 +1427,21 @@ export default function Page() {
/>
<Row name="View range" value="viewRange" decimals={0} />
<Row
name="Camouflage still"
name="Camouflage"
value="camouflageStill"
display={(stats) => (stats.camouflageStill * 100).toFixed(0)}
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
/>
<Row
name="Camouflage moving"
name="moving"
indent
value="camouflageMoving"
display={(stats) => (stats.camouflageMoving * 100).toFixed(0)}
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
/>
<Row
name="Camouflage shooting still"
name="shooting"
indent
value="camouflageShootingStill"
display={(stats) =>
(stats.camouflageShootingStill * 100).toFixed(0)
@@ -1382,7 +1449,8 @@ export default function Page() {
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
/>
<Row
name="Camouflage shooting moving"
name="shooting & moving"
indent
value="camouflageShootingMoving"
display={(stats) =>
(stats.camouflageShootingMoving * 100).toFixed(0)
@@ -1390,7 +1458,8 @@ export default function Page() {
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
/>
<Row
name="Camouflage caught on fire"
name="caught on fire"
indent
value="camouflageCaughtOnFire"
display={(stats) =>
(stats.camouflageCaughtOnFire * 100).toFixed(0)
@@ -1398,29 +1467,32 @@ export default function Page() {
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
/>
<Row
name="Width"
name="Volume"
value="volume"
deltaType="lowerIsBetter"
decimals={1}
/>
<Row
name="width"
indent
value="width"
deltaType="lowerIsBetter"
decimals={1}
/>
<Row
name="Height"
name="height"
indent
value="height"
deltaType="lowerIsBetter"
decimals={1}
/>
<Row
name="Length"
name="length"
indent
value="length"
deltaType="lowerIsBetter"
decimals={1}
/>
<Row
name="Volume"
value="volume"
deltaType="lowerIsBetter"
decimals={1}
/>
</Table.Body>
</Table.Root>
src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+25 -1
View File
@@ -139,7 +139,7 @@ export function Characteristics() {
<Flex direction="column" gap="8" style={{ flex: 1 }}>
<Flex direction="column" gap="2">
<Flex align="center" gap="4">
<Heading size="5">Fire</Heading>
<Heading size="5">Firepower</Heading>
<Flex>
{gun.shells.map((thisShell, shellIndex) => (
@@ -297,6 +297,11 @@ export function Characteristics() {
<InfoWithDelta name="Damage" unit="hp" decimals={0}>
{stats.damage}
</InfoWithDelta>
{gun.type !== 'regular' && (
<InfoWithDelta name="Clipping potential" indent>
{stats.clipDamage!}
</InfoWithDelta>
)}
<InfoWithDelta name="Module damage" unit="hp" decimals={0}>
{stats.moduleDamage}
</InfoWithDelta>
@@ -388,6 +393,15 @@ export function Characteristics() {
>
{stats.dispersionGunDamaged}
</InfoWithDelta>
<InfoWithDelta
decimals={3}
indent
name="Maximum"
unit="m"
deltaType="lowerIsBetter"
>
{stats.maxDispersion}
</InfoWithDelta>
<Info name="Gun flexibility" unit="°" />
<InfoWithDelta decimals={1} indent name="Depression">
{stats.gunDepression}
@@ -520,6 +534,16 @@ export function Characteristics() {
>
{stats.weight}
</InfoWithDelta>
<Info name="Terrain coefficients" />
<InfoWithDelta decimals={1} indent name="Hard">
{stats.hardTerrainCoefficient}
</InfoWithDelta>
<InfoWithDelta decimals={1} indent name="Medium">
{stats.mediumTerrainCoefficient}
</InfoWithDelta>
<InfoWithDelta decimals={1} indent name="Soft">
{stats.softTerrainCoefficient}
</InfoWithDelta>
<Info name="Power to weight ratio" unit="hp/tn" />
<InfoWithDelta decimals={1} indent name="On hard terrain">
{stats.powerToWeightRatioHardTerrain}
src/app/tools/tankopedia/[id]/components/Control.tsx
+4 -4
View File
@@ -9,7 +9,7 @@ import { modelDefinitions } from '../../../../../core/blitzkit/modelDefinitions'
import { Pose, poseEvent } from '../../../../../core/blitzkit/pose';
import { useAwait } from '../../../../../hooks/useAwait';
import { useDuel } from '../../../../../stores/duel';
import { useTankopediaPersistent } from '../../../../../stores/tankopedia';
import { useTankopediaTemporary } from '../../../../../stores/tankopedia';
const poseDistances: Record<Pose, number> = {
[Pose.HullDown]: 15,
@@ -62,8 +62,8 @@ export function Controls() {
}, [camera]);
useEffect(() => {
const unsubscribeTankopedia = useTankopediaPersistent.subscribe(
(state) => state.model.visual.controlsEnabled,
const unsubscribeTankopedia = useTankopediaTemporary.subscribe(
(state) => state.controlsEnabled,
(enabled) => {
if (orbitControls.current) orbitControls.current.enabled = enabled;
},
@@ -182,7 +182,7 @@ export function Controls() {
maxDistance={20}
minDistance={5}
ref={orbitControls}
enabled={useTankopediaPersistent.getState().model.visual.controlsEnabled}
enabled={useTankopediaTemporary.getState().controlsEnabled}
rotateSpeed={0.25}
enableDamping={false}
autoRotate={autoRotate}
src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+19 -9
View File
@@ -1,6 +1,7 @@
import { ChevronLeftIcon, MixIcon } from '@radix-ui/react-icons';
import { Button, Flex, Heading, Text } from '@radix-ui/themes';
import Link from 'next/link';
import { classIcons } from '../../../../../../components/ClassIcon';
import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
import { useFullScreen } from '../../../../../../hooks/useFullScreen';
import { useWideFormat } from '../../../../../../hooks/useWideFormat';
@@ -11,14 +12,15 @@ import { TankSandbox } from './TankSandbox';
import { Options } from './components/Options';
export function HeroSection() {
const protagonistTank = useDuel((state) => state.protagonist!.tank);
const antagonistTank = useDuel((state) => state.antagonist!.tank);
const protagonist = useDuel((state) => state.protagonist!.tank);
const antagonist = useDuel((state) => state.antagonist!.tank);
const wideFormat = useWideFormat(880);
const compareTanks =
protagonistTank.id === antagonistTank.id
? [protagonistTank.id]
: [protagonistTank.id, antagonistTank.id];
protagonist.id === antagonist.id
? [protagonist.id]
: [protagonist.id, antagonist.id];
const isFullScreen = useFullScreen();
const Icon = classIcons[protagonist.class];
return (
<Flex
@@ -58,18 +60,26 @@ export function HeroSection() {
<Heading
size={wideFormat ? '9' : '8'}
align={wideFormat ? undefined : 'center'}
color={
protagonist.treeType === 'collector'
? 'blue'
: protagonist.treeType === 'premium'
? 'amber'
: undefined
}
>
{protagonistTank.nameFull ?? protagonistTank.name}
<Icon style={{ width: '0.75em', height: '0.75em' }} />{' '}
{protagonist.nameFull ?? protagonist.name}
</Heading>
<Text color="gray">
Tier {TIER_ROMAN_NUMERALS[protagonistTank.tier]}{' '}
Tier {TIER_ROMAN_NUMERALS[protagonist.tier]}{' '}
{
(strings.common.nations_adjectives as Record<string, string>)[
protagonistTank.nation
protagonist.nation
]
}{' '}
{strings.common.tank_class_short[protagonistTank.class]}
{strings.common.tank_class_short[protagonist.class]}
</Text>
<Flex gap="4" mt="-1">
src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+11 -1
View File
@@ -22,6 +22,7 @@ import { useState } from 'react';
import { ModuleButton } from '../../../../../../../components/ModuleButtons/ModuleButton';
import { SmallTankIcon } from '../../../../../../../components/SmallTankIcon';
import { resolveNearPenetration } from '../../../../../../../core/blitz/resolveNearPenetration';
import { resolvePenetrationCoefficient } from '../../../../../../../core/blitz/resolvePenetrationCoefficient';
import { asset } from '../../../../../../../core/blitzkit/asset';
import { Pose, poseEvent } from '../../../../../../../core/blitzkit/pose';
import {
@@ -113,7 +114,17 @@ export function Options() {
top: '50%',
transform: 'translateY(-50%)',
}}
align="end"
>
<Text color="gray" size={{ initial: '1', sm: '2' }}>
{(
resolvePenetrationCoefficient(
hasCalibratedShells,
antagonistShell.type,
) * resolveNearPenetration(antagonistShell.penetration)
).toFixed(0)}
mm
</Text>
<Flex direction="column">
{antagonistGun.shells.map((thisShell, shellIndex) => (
<IconButton
@@ -157,7 +168,6 @@ export function Options() {
</IconButton>
))}
</Flex>
<Flex direction="column" style={{ pointerEvents: 'auto' }}>
<IconButton
color={hasCalibratedShells ? undefined : 'gray'}
src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx
+58 -12
View File
@@ -1,6 +1,13 @@
import { ThreeEvent, useThree } from '@react-three/fiber';
import { memo, useEffect, useRef } from 'react';
import { Euler, Group, Vector2, Vector3 } from 'three';
import {
Euler,
Group,
Mesh,
MeshStandardMaterial,
Vector2,
Vector3,
} from 'three';
import { degToRad } from 'three/src/math/MathUtils';
import { I_HAT, J_HAT, K_HAT } from '../../../../../../../constants/axis';
import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
@@ -15,9 +22,7 @@ import { normalizeAngleRad } from '../../../../../../../core/math/normalizeAngle
import { useAwait } from '../../../../../../../hooks/useAwait';
import { useModel } from '../../../../../../../hooks/useModel';
import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
import mutateTankopediaPersistent, {
mutateTankopediaTemporary,
} from '../../../../../../../stores/tankopedia';
import { mutateTankopediaTemporary } from '../../../../../../../stores/tankopedia';
export const TankModel = memo(() => {
const awaitedModelDefinitions = useAwait(modelDefinitions);
@@ -117,11 +122,52 @@ export const TankModel = memo(() => {
const isWheel = node.name.startsWith('chassis_wheel_');
const isTrack = node.name.startsWith('chassis_track_');
const isVisible = isHull || isWheel || isTrack;
const position = new Vector2();
const delta = new Vector2();
if (!isVisible) return null;
function translateTexture(offset: number) {
const mesh = node.children[0] as Mesh;
const material = mesh?.material as MeshStandardMaterial;
if (!material) return;
if (material.map) material.map.offset.y += offset;
if (material.aoMap) material.aoMap.offset.y += offset;
if (material.normalMap) material.normalMap.offset.y += offset;
if (material.roughnessMap) material.roughnessMap.offset.y += offset;
if (material.metalnessMap) material.metalnessMap.offset.y += offset;
}
function onPointerDown(event: ThreeEvent<PointerEvent>) {
if (!isTrack) return;
position.set(event.clientX, event.clientY);
event.stopPropagation();
mutateTankopediaTemporary((draft) => {
draft.controlsEnabled = false;
});
window.addEventListener('pointermove', handlePointerMove);
window.addEventListener('pointerup', handlePointerUp);
}
function handlePointerMove(event: PointerEvent) {
delta.set(event.clientX, event.clientY).sub(position);
position.set(event.clientX, event.clientY);
const deltaX = delta.x / window.innerWidth;
const deltaY = delta.y / window.innerHeight;
translateTexture(deltaX + deltaY);
}
function handlePointerUp() {
mutateTankopediaTemporary((draft) => {
draft.controlsEnabled = true;
});
window.removeEventListener('pointermove', handlePointerMove);
window.removeEventListener('pointerup', handlePointerUp);
}
return jsxTree(
@@ -158,8 +204,8 @@ export const TankModel = memo(() => {
yaw = protagonist.yaw;
pitch = protagonist.pitch;
mutateTankopediaPersistent((draft) => {
draft.model.visual.controlsEnabled = false;
mutateTankopediaTemporary((draft) => {
draft.controlsEnabled = false;
});
mutateTankopediaTemporary((draft) => {
draft.shot = undefined;
@@ -194,8 +240,8 @@ export const TankModel = memo(() => {
draft.protagonist!.pitch = normalizeAngleRad(pitch);
draft.protagonist!.yaw = normalizeAngleRad(yaw);
});
mutateTankopediaPersistent((draft) => {
draft.model.visual.controlsEnabled = true;
mutateTankopediaTemporary((draft) => {
draft.controlsEnabled = true;
});
window.removeEventListener('pointermove', handlePointerMove);
window.removeEventListener('pointerup', handlePointerUp);
@@ -234,8 +280,8 @@ export const TankModel = memo(() => {
function onPointerDown(event: ThreeEvent<PointerEvent>) {
event.stopPropagation();
mutateTankopediaPersistent((draft) => {
draft.model.visual.controlsEnabled = false;
mutateTankopediaTemporary((draft) => {
draft.controlsEnabled = false;
});
mutateTankopediaTemporary((draft) => {
draft.shot = undefined;
@@ -269,8 +315,8 @@ export const TankModel = memo(() => {
modelTransformEvent.emit({ pitch, yaw });
}
function handlePointerUp() {
mutateTankopediaPersistent((draft) => {
draft.model.visual.controlsEnabled = true;
mutateTankopediaTemporary((draft) => {
draft.controlsEnabled = true;
});
mutateDuel((draft) => {
draft.protagonist!.pitch = normalizeAngleRad(pitch);
src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx
+3 -1
View File
@@ -38,7 +38,9 @@ export function RotationInputs() {
function handleTransformEvent({ pitch, yaw }: ModelTransformEventData) {
if (!pitchInput.current || !yawInput.current) return;
pitchInput.current.value = (-radToDeg(pitch)).toFixed(1);
pitchInput.current.value = (
-radToDeg(pitch) + (tankModelDefinition.turretRotation?.pitch ?? 0)
).toFixed(1);
if (yaw === undefined) return;
src/app/tools/tankopedia/[id]/components/ShotDisplaySection.tsx
+16
View File
@@ -0,0 +1,16 @@
import { Flex } from '@radix-ui/themes';
import { ShotDisplayCard } from '../../../../../components/Armor/components/ShotDisplayCard';
export function ShotDisplaySection() {
return (
<Flex
justify="center"
display={{
initial: 'flex',
sm: 'none',
}}
>
<ShotDisplayCard />
</Flex>
);
}
src/app/tools/tankopedia/[id]/page.tsx
+2
View File
@@ -11,6 +11,7 @@ import { HistorySection } from './components/HistorySection';
import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
import { HeroSection } from './components/Model/HeroSection';
import { TechTreeSection } from './components/Model/TechTreeSection';
import { ShotDisplaySection } from './components/ShotDisplaySection';
import { VideoSection } from './components/VideoSection';
export default function Page({ params }: { params: { id: string } }) {
@@ -77,6 +78,7 @@ export default function Page({ params }: { params: { id: string } }) {
{assigned && (
<>
<HeroSection />
<ShotDisplaySection />
{!exempt && <AdMidSectionResponsive />}
<CharacteristicsSection />
{!exempt && <AdMidSectionResponsive />}
src/app/tools/tankopedia/components/SearchBar.tsx
+8 -2
View File
@@ -10,9 +10,10 @@ import { Sort } from './Sort';
interface SearchBarProps {
topResult?: TankDefinition;
onSelect?: (tank: TankDefinition) => void;
}
export function SearchBar({ topResult }: SearchBarProps) {
export function SearchBar({ topResult, onSelect }: SearchBarProps) {
const router = useRouter();
const input = useRef<HTMLInputElement>(null);
const searching = useTankopediaFilters((state) => state.searching);
@@ -42,7 +43,12 @@ export function SearchBar({ topResult }: SearchBarProps) {
if (event.key !== 'Enter' || !topResult || searching) return;
event.preventDefault();
router.push(`/tools/tankopedia/${topResult.id}`);
if (onSelect) {
onSelect(topResult);
} else {
router.push(`/tools/tankopedia/${topResult.id}`);
}
},
[topResult],
);
src/app/tools/tankopedia/components/Sort.tsx
+11 -1
View File
@@ -43,7 +43,17 @@ export function Sort() {
});
}}
>
DPM
Standard DPM
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dpmPremium'}
onClick={() => {
mutateTankopediaFilters((draft) => {
draft.sort.by = 'fire.dpmPremium';
});
}}
>
Premium DPM
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.reload'}
src/app/tools/tankopedia/components/TankCard.tsx
+2
View File
@@ -51,6 +51,8 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
return gun.dispersion.base.toFixed(3);
case 'fire.dpm':
return resolveDpm(gun, shell0).toFixed(0);
case 'fire.dpmPremium':
return shell1 ? resolveDpm(gun, shell1).toFixed(0) : '--';
case 'fire.reload':
return resolveReload(gun).toFixed(2);
case 'fire.standardPenetration':
src/app/tools/tankopedia/components/TankSearch/index.tsx
+21 -2
View File
@@ -69,7 +69,8 @@ export const TankSearch = memo<TankSearchProps>(
(a, b) =>
awaitedGameDefinitions.nations.indexOf(b.nation) -
awaitedGameDefinitions.nations.indexOf(a.nation),
);
)
.sort((a, b) => a.tier - b.tier);
break;
case 'survivability.health': {
@@ -179,6 +180,24 @@ export const TankSearch = memo<TankSearchProps>(
);
break;
case 'fire.dpmPremium':
sorted = filtered.sort(
(a, b) =>
(a.turrets.at(-1)!.guns.at(-1)!.shells[1]
? resolveDpm(
a.turrets.at(-1)!.guns.at(-1)!,
a.turrets.at(-1)!.guns.at(-1)!.shells[1],
)
: 0) -
(b.turrets.at(-1)!.guns.at(-1)!.shells[1]
? resolveDpm(
b.turrets.at(-1)!.guns.at(-1)!,
b.turrets.at(-1)!.guns.at(-1)!.shells[1],
)
: 0),
);
break;
case 'fire.reload':
sorted = filtered.sort(
(a, b) =>
@@ -360,7 +379,7 @@ export const TankSearch = memo<TankSearchProps>(
return (
<Flex direction="column" gap="4" flexGrow="1" {...props}>
<SearchBar topResult={tanks?.[0]} />
<SearchBar topResult={tanks?.[0]} onSelect={onSelect} />
{!filters.search && !filters.searching && (
<FilterControl compact={compact} />
src/components/Armor/components/ShotDisplay.tsx
+15 -227
View File
@@ -1,39 +1,17 @@
import { Card, Flex, Inset, Separator, Text } from '@radix-ui/themes';
import { Box, Flex, Text } from '@radix-ui/themes';
import { Html } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';
import { ComponentProps, useRef } from 'react';
import { Euler, Mesh, Quaternion } from 'three';
import { radToDeg } from 'three/src/math/MathUtils';
import { J_HAT } from '../../../constants/axis';
import {
ShotLayer,
ShotLayerNonExternal,
ShotStatus,
useTankopediaTemporary,
} from '../../../stores/tankopedia';
import { ArmorType } from './SpacedArmorScene';
import { ExternalModuleVariant } from './SpacedArmorSceneComponent';
import { ShotDisplayCard } from './ShotDisplayCard';
const layerTypeNames: Record<ArmorType | 'null', string> = {
[ArmorType.Core]: 'Core',
[ArmorType.Spaced]: 'Spaced',
[ArmorType.External]: 'External',
null: 'Gap',
};
const externalLayerNames: Record<ExternalModuleVariant, string> = {
gun: 'Gun',
track: 'Tracks',
};
const shotStatusNames: Record<ShotStatus, string> = {
blocked: 'Blocked',
ricochet: 'Ricochet',
penetration: 'penetration',
splash: 'splash',
};
const shotStatusColors: Record<
export const shotStatusColors: Record<
ShotStatus,
ComponentProps<typeof Text>['color']
> = {
@@ -44,93 +22,10 @@ const shotStatusColors: Record<
};
const SURFACE_POINT_SIZE = 12;
const LENGTH_INFINITY = 4;
export const SHOT_DISPLAY_LENGTH_INFINITY = 4;
const TRACER_THICK = 1 / 32;
const TRACER_THIN = TRACER_THICK / 2;
function LayerEntry({
layerIndex,
shotStatusColor,
layerName,
layer,
angle,
}: {
layerIndex?: string;
shotStatusColor: ComponentProps<typeof Text>['color'];
layerName: string;
layer: ShotLayer;
angle?: number;
}) {
return (
<Flex align="center" gap="2">
<Text
size="1"
color="gray"
style={{
width: 12,
}}
>
{layerIndex}
</Text>
<Text size="2" color={shotStatusColor} style={{ width: 47 }}>
{layerName}
</Text>
{layer.type === null && (
<>
<Text
size="2"
color={shotStatusColor}
style={{
width: 64,
}}
>
{Math.round(layer.distance * 1000).toLocaleString()}
<Text size="1">mm</Text>
</Text>
<Text size="2" color="gray">
{Math.max(-100, Math.round(-50 * layer.distance))}% penetration
</Text>
</>
)}
{layer.type === ArmorType.External && (
<Text
size="2"
color={shotStatusColor}
style={{
width: 64,
}}
>
{Math.round(layer.thickness).toLocaleString()}
<Text size="1">mm</Text>
</Text>
)}
{(layer.type === ArmorType.Core || layer.type === ArmorType.Spaced) && (
<>
<Text
size="2"
color={shotStatusColor}
style={{
width: 80,
}}
>
{Math.round(layer.thicknessAngled).toLocaleString()}
<Text size="1">{`mm${angle === undefined ? '' : ` ${Math.round(radToDeg(angle))}°`}`}</Text>
</Text>
<Text size="2" color="gray">
{Math.round(layer.thickness).toLocaleString()}
<Text size="1">mm</Text> nominal
</Text>
</>
)}
</Flex>
);
}
export function ShotDisplay() {
const shot = useTankopediaTemporary((state) => state.shot);
const inTracer = useRef<Mesh>(null);
@@ -157,13 +52,13 @@ export function ShotDisplay() {
shot.in.layers.reduce((accumulator, layer) => {
if (layer.type === null) return accumulator + layer.distance;
return accumulator;
}, 0) + LENGTH_INFINITY;
}, 0) + SHOT_DISPLAY_LENGTH_INFINITY;
const outLength =
shot.out && shot.out.layers.length > 0
? (shot.in.layers.at(-1) as ShotLayerNonExternal).point.distanceTo(
(shot.out.layers.at(-1) as ShotLayerNonExternal).point,
)
: LENGTH_INFINITY;
: SHOT_DISPLAY_LENGTH_INFINITY;
const inLast = shot.in.layers.findLast(
(layer) => layer.type !== null,
) as ShotLayerNonExternal;
@@ -181,122 +76,15 @@ export function ShotDisplay() {
transform: 'translateY(-50%)',
}}
>
<Card ml="9" style={{ width: 300 }}>
<Flex direction="column" gap="2">
<Flex direction="column" gap="1">
<Text color={inTitleColor} weight="bold">
{shot.in.status !== 'blocked' &&
shot.in.status !== 'ricochet' && (
<>
{Math.round(shot.damage).toLocaleString()}
<Text size="1">hp</Text>
</>
)}
{` ${shotStatusNames[shot.in.status]} `}
</Text>
<Flex direction="column">
{shot.in.layers.map((layer, index) => {
const layerName =
layer.type === ArmorType.External
? externalLayerNames[layer.variant]
: layerTypeNames[`${layer.type}`];
const layerIndex =
layer.type === null
? undefined
: `${(shot.containsGaps ? index / 2 : index) + 1}.`;
const shotStatusColor =
shot.in.status === 'splash'
? shotStatusColors.splash
: shotStatusColors[layer.status];
return (
<LayerEntry
key={index}
layer={layer}
layerIndex={layerIndex}
layerName={layerName}
shotStatusColor={shotStatusColor}
angle={
layer.type === ArmorType.Core ||
layer.type === ArmorType.Spaced
? layer.angle
: undefined
}
/>
);
})}
</Flex>
</Flex>
{shot.out && shot.out.layers.length > 0 && (
<>
<Inset side="x">
<Flex align="center" gap="2">
<Separator
style={{
flex: 1,
}}
/>
<Text size="1" color="gray">
ricochet (-25% penetration)
</Text>
<Separator
style={{
flex: 1,
}}
/>
</Flex>
</Inset>
<Text color={outTitleColor} weight="bold">
{shot.out.status !== 'blocked' &&
shot.out.status !== 'ricochet' && (
<>
{Math.round(shot.damage).toLocaleString()}
<Text size="1">hp</Text>
</>
)}
{` ${shotStatusNames[shot.out.status]} `}
</Text>
<Flex direction="column">
{shot.out.layers.map((layer, index) => {
const layerName =
layer.type === ArmorType.External
? externalLayerNames[layer.variant]
: layerTypeNames[`${layer.type}`];
const shiftedIndex = index + shot.out!.layers.length;
const layerIndex =
layer.type === null
? undefined
: `${(shot.containsGaps ? shiftedIndex / 2 : shiftedIndex) + 1}.`;
const shotStatusColor =
shot.out!.status === 'splash'
? shotStatusColors.splash
: shotStatusColors[layer.status];
return (
<LayerEntry
key={index}
layer={layer}
layerIndex={layerIndex}
layerName={layerName}
shotStatusColor={shotStatusColor}
angle={
layer.type === ArmorType.Core ||
layer.type === ArmorType.Spaced
? layer.angle
: undefined
}
/>
);
})}
</Flex>
</>
)}
</Flex>
</Card>
<Box
pl="9"
display={{
initial: 'none',
sm: 'block',
}}
>
<ShotDisplayCard />
</Box>
</Html>
{[...shot.in.layers, ...(shot.out?.layers ?? [])].map((layer, index) => {
src/components/Armor/components/ShotDisplayCard.tsx
+242
View File
@@ -0,0 +1,242 @@
import { Card, Flex, Inset, Separator, Text } from '@radix-ui/themes';
import { ComponentProps } from 'react';
import { radToDeg } from 'three/src/math/MathUtils';
import {
ShotLayer,
ShotStatus,
useTankopediaTemporary,
} from '../../../stores/tankopedia';
import { shotStatusColors } from './ShotDisplay';
import { ArmorType } from './SpacedArmorScene';
import { ExternalModuleVariant } from './SpacedArmorSceneComponent';
const layerTypeNames: Record<ArmorType | 'null', string> = {
[ArmorType.Core]: 'Core',
[ArmorType.Spaced]: 'Spaced',
[ArmorType.External]: 'External',
null: 'Gap',
};
const externalLayerNames: Record<ExternalModuleVariant, string> = {
gun: 'Gun',
track: 'Tracks',
};
const shotStatusNames: Record<ShotStatus, string> = {
blocked: 'Blocked',
ricochet: 'Ricochet',
penetration: 'penetration',
splash: 'splash',
};
function LayerEntry({
layerIndex,
shotStatusColor,
layerName,
layer,
angle,
}: {
layerIndex?: string;
shotStatusColor: ComponentProps<typeof Text>['color'];
layerName: string;
layer: ShotLayer;
angle?: number;
}) {
return (
<Flex align="center" gap="2">
<Text
size="1"
color="gray"
style={{
width: 12,
}}
>
{layerIndex}
</Text>
<Text size="2" color={shotStatusColor} style={{ width: 47 }}>
{layerName}
</Text>
{layer.type === null && (
<>
<Text
size="2"
color={shotStatusColor}
style={{
width: 64,
}}
>
{Math.round(layer.distance * 1000).toLocaleString()}
<Text size="1">mm</Text>
</Text>
<Text size="2" color="gray">
{Math.max(-100, Math.round(-50 * layer.distance))}% penetration
</Text>
</>
)}
{layer.type === ArmorType.External && (
<Text
size="2"
color={shotStatusColor}
style={{
width: 64,
}}
>
{Math.round(layer.thickness).toLocaleString()}
<Text size="1">mm</Text>
</Text>
)}
{(layer.type === ArmorType.Core || layer.type === ArmorType.Spaced) && (
<>
<Text
size="2"
color={shotStatusColor}
style={{
width: 80,
}}
>
{Math.round(layer.thicknessAngled).toLocaleString()}
<Text size="1">{`mm${angle === undefined ? '' : ` ${Math.round(radToDeg(angle))}°`}`}</Text>
</Text>
<Text size="2" color="gray">
{Math.round(layer.thickness).toLocaleString()}
<Text size="1">mm</Text> nominal
</Text>
</>
)}
</Flex>
);
}
export function ShotDisplayCard() {
const shot = useTankopediaTemporary((state) => state.shot);
if (!shot) return null;
const outTitleColor = shot.out
? shotStatusColors[shot.out.status]
: undefined;
const inTitleColor = shotStatusColors[shot.in.status];
return (
<Card style={{ width: 300 }}>
<Flex direction="column" gap="2">
<Flex direction="column" gap="1">
<Text color={inTitleColor} weight="bold">
{shot.in.status !== 'blocked' && shot.in.status !== 'ricochet' && (
<>
{Math.round(shot.damage).toLocaleString()}
<Text size="1">hp</Text>
</>
)}
{` ${shotStatusNames[shot.in.status]} `}
</Text>
<Flex direction="column">
{shot.in.layers.map((layer, index) => {
const layerName =
layer.type === ArmorType.External
? externalLayerNames[layer.variant]
: layerTypeNames[`${layer.type}`];
const layerIndex =
layer.type === null
? undefined
: `${(shot.containsGaps ? index / 2 : index) + 1}.`;
const shotStatusColor =
shot.in.status === 'splash'
? shotStatusColors.splash
: shotStatusColors[layer.status];
return (
<LayerEntry
key={index}
layer={layer}
layerIndex={layerIndex}
layerName={layerName}
shotStatusColor={shotStatusColor}
angle={
layer.type === ArmorType.Core ||
layer.type === ArmorType.Spaced
? layer.angle
: undefined
}
/>
);
})}
</Flex>
</Flex>
{shot.out && shot.out.layers.length > 0 && (
<>
<Inset side="x">
<Flex align="center" gap="2">
<Separator
style={{
flex: 1,
}}
/>
<Text size="1" color="gray">
ricochet (-25% penetration)
</Text>
<Separator
style={{
flex: 1,
}}
/>
</Flex>
</Inset>
<Text color={outTitleColor} weight="bold">
{shot.out.status !== 'blocked' &&
shot.out.status !== 'ricochet' && (
<>
{Math.round(shot.damage).toLocaleString()}
<Text size="1">hp</Text>
</>
)}
{` ${shotStatusNames[shot.out.status]} `}
</Text>
<Flex direction="column">
{shot.out.layers.map((layer, index) => {
const layerName =
layer.type === ArmorType.External
? externalLayerNames[layer.variant]
: layerTypeNames[`${layer.type}`];
const shiftedIndex = index + shot.out!.layers.length;
const layerIndex =
layer.type === null
? undefined
: `${(shot.containsGaps ? shiftedIndex / 2 : shiftedIndex) + 1}.`;
const shotStatusColor =
shot.out!.status === 'splash'
? shotStatusColors.splash
: shotStatusColors[layer.status];
return (
<LayerEntry
key={index}
layer={layer}
layerIndex={layerIndex}
layerName={layerName}
shotStatusColor={shotStatusColor}
angle={
layer.type === ArmorType.Core ||
layer.type === ArmorType.Spaced
? layer.angle
: undefined
}
/>
);
})}
</Flex>
</>
)}
</Flex>
</Card>
);
}
src/components/Navbar/index.tsx
+5 -1
View File
@@ -143,7 +143,11 @@ export default function Navbar() {
<PersonIcon style={{ cursor: 'pointer' }} />
</Popover.Trigger>
<Popover.Content align="end" width="320px">
<Popover.Content
align="end"
width="320px"
onOpenAutoFocus={(event) => event.preventDefault()}
>
{(logins.patreon || logins.wargaming) && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
src/core/blitzkit/tankCharacteristics.ts
+28 -16
View File
@@ -1,4 +1,5 @@
import { EquipmentMatrix } from '../../stores/duel';
import { isExplosive } from '../blitz/isExplosive';
import { resolveNearPenetration } from '../blitz/resolveNearPenetration';
import { resolvePenetrationCoefficient } from '../blitz/resolvePenetrationCoefficient';
import { coefficient } from './coefficient';
@@ -359,11 +360,20 @@ export function tankCharacteristics(
const penetration =
resolveNearPenetration(shell.penetration) * penetrationCoefficient;
const damage = shell.damage.armor * damageCoefficient;
const clipDamage = gun.type === 'regular' ? undefined : gun.count * damage;
const moduleDamage = shell.damage.module * damageCoefficient;
const explosionRadius = shell.explosionRadius;
const shellVelocity = shell.speed * shellVelocityCoefficient;
const aimTime = gun.aimTime * aimTimeCoefficient;
const dispersion = gun.dispersion.base * dispersionStillCoefficient;
const maxDispersion =
gun.dispersion.base *
Math.sqrt(
((gun.dispersion.traverse * turret.traverseSpeed) ** 2 +
(track.dispersion.traverse * track.traverseSpeed) ** 2 +
track.dispersion.move * tank.speed.forwards) **
2,
);
const dispersionMoving = track.dispersion.move * dispersionMovingCoefficient;
const dispersionHullTraversing =
track.dispersion.traverse * dispersionHullTraverseCoefficient;
@@ -396,40 +406,37 @@ export function tankCharacteristics(
const speedForwards = tank.speed.forwards + speedForwardsSum;
const speedBackwards = tank.speed.backwards + speedBackwardsSum;
const enginePower = resolvedEnginePower;
const hardTerrainCoefficient =
track.resistance.hard * resistanceHardCoefficient;
const mediumTerrainCoefficient =
track.resistance.medium * resistanceMediumCoefficient;
const softTerrainCoefficient =
track.resistance.soft * resistanceSoftCoefficient;
const powerToWeightRatioHardTerrain =
resolvedEnginePower /
weightTons /
(track.resistance.hard * resistanceHardCoefficient);
resolvedEnginePower / weightTons / hardTerrainCoefficient;
const powerToWeightRatioMediumTerrain =
resolvedEnginePower /
weightTons /
(track.resistance.medium * resistanceMediumCoefficient);
resolvedEnginePower / weightTons / mediumTerrainCoefficient;
const powerToWeightRatioSoftTerrain =
resolvedEnginePower /
weightTons /
(track.resistance.soft * resistanceSoftCoefficient);
resolvedEnginePower / weightTons / softTerrainCoefficient;
const weight = weightTons;
const turretTraverseSpeed = turret.traverseSpeed * turretTraverseCoefficient;
const hullTraverseHardTerrain =
(resolvedEnginePower / stockEngine.power) *
track.traverseSpeed *
hullTraverseCoefficient *
(track.resistance.hard /
(track.resistance.hard * resistanceHardCoefficient)) *
(track.resistance.hard / hardTerrainCoefficient) *
(stockWeight / weightKg);
const hullTraverseMediumTerrain =
(resolvedEnginePower / stockEngine.power) *
track.traverseSpeed *
hullTraverseCoefficient *
(track.resistance.hard /
(track.resistance.medium * resistanceMediumCoefficient)) *
(track.resistance.hard / mediumTerrainCoefficient) *
(stockWeight / weightKg);
const hullTraverseSoftTerrain =
(resolvedEnginePower / stockEngine.power) *
track.traverseSpeed *
hullTraverseCoefficient *
(track.resistance.hard /
(track.resistance.soft * resistanceSoftCoefficient)) *
(track.resistance.hard / softTerrainCoefficient) *
(stockWeight / weightKg);
const health = (tank.health + turret.health) * healthCoefficient;
const fireChance = engine.fireChance * fireChanceCoefficient;
@@ -453,7 +460,7 @@ export function tankCharacteristics(
const length = size[1];
const volume = width * height * length;
const shellNormalization = shell.normalization ?? 0;
const shellRicochet = shell.ricochet;
const shellRicochet = isExplosive(shell.type) ? undefined : shell.ricochet;
return {
shellNormalization,
@@ -469,11 +476,13 @@ export function tankCharacteristics(
caliber,
penetration,
damage,
clipDamage,
moduleDamage,
explosionRadius,
shellVelocity,
aimTime,
dispersion,
maxDispersion,
dispersionMoving,
dispersionHullTraversing,
dispersionTurretTraversing,
@@ -489,6 +498,9 @@ export function tankCharacteristics(
azimuthRight,
speedForwards,
speedBackwards,
hardTerrainCoefficient,
mediumTerrainCoefficient,
softTerrainCoefficient,
enginePower,
powerToWeightRatioHardTerrain,
powerToWeightRatioMediumTerrain,
src/hooks/useAdExempt.ts
+3
View File
@@ -15,6 +15,9 @@ export function useAdExempt() {
`/api/patreon/membership/${patreon.token}`,
{ cache: 'force-cache' },
);
if (!response.ok) return resolve(false);
const json = await response.json();
const exempt = typeof json === 'boolean' && json;
cache[patreon.token] = exempt;
src/stores/tankopedia.ts
+5 -2
View File
@@ -20,7 +20,6 @@ export interface TankopediaPersistent {
wireframe: boolean;
opaque: boolean;
environment: (typeof ENVIRONMENTS)[number];
controlsEnabled: boolean;
showGrid: boolean;
greenPenetration: boolean;
showEnvironment: boolean;
@@ -45,6 +44,7 @@ export interface TankopediaPersistent {
interface TankopediaTemporary {
shot?: Shot;
skills: Record<string, number>;
controlsEnabled: boolean;
}
export interface ShotLayerBase {
@@ -114,7 +114,8 @@ export const SORT_NAMES = {
'survivability.camouflageShooting': 'camouflage shooting',
'survivability.volume': 'volume',
'survivability.length': 'length',
'fire.dpm': 'DPM',
'fire.dpm': 'standard DPM',
'fire.dpmPremium': 'premium DPM',
'fire.reload': 'reload',
'fire.caliber': 'caliber',
'fire.standardPenetration': 'standard penetration',
@@ -143,6 +144,7 @@ export const SORT_UNITS: Record<TankopediaSortBy, string | undefined> = {
'fire.dispersionMoving': 'm',
'fire.dispersionStill': 'm',
'fire.dpm': undefined,
'fire.dpmPremium': undefined,
'fire.gunDepression': '°',
'fire.gunElevation': '°',
'fire.premiumPenetration': 'mm',
@@ -199,6 +201,7 @@ export const useTankopediaPersistent = create<TankopediaPersistent>()(
export const useTankopediaTemporary = create<TankopediaTemporary>()(
subscribeWithSelector<TankopediaTemporary>(() => ({
skills: {},
controlsEnabled: true,
})),
);
src/stores/tankopediaFilters.ts
-1
View File
@@ -24,7 +24,6 @@ export const useTankopediaFilters = create<TankopediaFilters>()(() => ({
by: 'meta.none',
direction: 'descending',
},
tier: 10,
searching: false,
}));