diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/DispersionVisualizer.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/DispersionVisualizer.tsx new file mode 100644 index 000000000..aa7b84e71 --- /dev/null +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/DispersionVisualizer.tsx @@ -0,0 +1,95 @@ +import { Button, Card, Code, Flex, Switch, Text } from '@radix-ui/themes'; +import { useEffect, useRef, useState } from 'react'; +import type { TankCharacteristics } from '../../../../../../core/blitzkit/tankCharacteristics'; + +interface DispersionVisualizerProps { + stats: TankCharacteristics; +} + +const refreshRate = 1000 / 60; // ms + +export function DispersionVisualizer({ stats }: DispersionVisualizerProps) { + const aInfinity = stats.dispersion; + const tau = stats.aimTime; + const timeText = useRef(null); + const aText = useRef(null); + const [a0, setA0] = useState(stats.dispersionMoving); + const [stateDiscriminator, setStateDiscriminator] = useState(0); + const [gunBroken, setGunBroken] = useState(false); + + useEffect(() => { + let t = 0; + const interval = setInterval(() => { + if (!timeText.current || !aText.current) return; + + t += refreshRate / 1000; // ms -> s + const a = aInfinity + a0 * Math.exp(-t / tau); + + timeText.current.innerText = `t = ${t.toFixed(1)}s`; + aText.current.innerText = `a = ${a.toFixed(3)}m`; + }, refreshRate); + + return () => { + clearInterval(interval); + }; + }, [aInfinity, tau, a0]); + + return ( + + + + + + + + + + + setGunBroken(checked as boolean)} + /> + Gun broken + + + + + t = 0s + + + + a = {(aInfinity + a0).toFixed(3)}m + + + + + ); +} diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx index 7f67c23da..8d6064481 100644 --- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx @@ -30,6 +30,7 @@ import { useEquipment } from '../../../../../hooks/useEquipment'; import { useTankModelDefinition } from '../../../../../hooks/useTankModelDefinition'; import { Duel } from '../../../../../stores/duel'; import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral'; +import { DispersionVisualizer } from './components/DispersionVisualizer'; import { Info } from './components/Info'; import { InfoWithDelta } from './components/InfoWithDelta'; @@ -397,6 +398,7 @@ export function Characteristics() { value="aimTime" /> +