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

feat: deltas

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-02-09 18:47:53 -06:00
1 parent 01dc3137d8
commit 6ef0448d9f
3 files changed
+230 -142
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx
+28 -2
View File
@@ -1,13 +1,17 @@
import { CaretDownIcon, CaretUpIcon } from '@radix-ui/react-icons';
import { Flex, Text } from '@radix-ui/themes';
import { ReactNode } from 'react';
import { theme } from '../../../../../../../stitches.config';
interface InfoProps {
export interface InfoProps {
name: ReactNode;
children?: ReactNode;
unit?: string;
indent?: boolean;
highlight?: boolean;
delta?: number;
decimals?: number;
prefix?: string;
}
export function Info({
@@ -16,6 +20,9 @@ export function Info({
unit,
indent = false,
highlight,
delta,
decimals,
prefix,
}: InfoProps) {
return (
<Flex
@@ -48,7 +55,26 @@ export function Info({
)}
{children !== undefined && (
<Text color={highlight ? 'amber' : undefined}>{children}</Text>
<Flex align="center" gap="1">
{delta !== undefined && delta !== 0 && (
<>
<Text color={delta > 0 ? 'green' : 'tomato'}>
{decimals !== undefined
? Math.abs(delta).toFixed(decimals)
: Math.abs(delta)}
</Text>
<Text color={delta > 0 ? 'green' : 'tomato'}>
{delta > 0 ? <CaretUpIcon /> : <CaretDownIcon />}
</Text>
</>
)}
<Text color={highlight ? 'amber' : undefined}>
{prefix}
{decimals !== undefined && typeof children === 'number'
? children.toFixed(decimals)
: children}
</Text>
</Flex>
)}
</Flex>
);
src/app/tools/tankopedia/[id]/components/Characteristics/components/InfoWithDelta.tsx
+20
View File
@@ -0,0 +1,20 @@
import { useEffect, useRef } from 'react';
import { Info, InfoProps } from './Info';
interface InfoWithDeltaProps extends InfoProps {
children: number;
}
export function InfoWithDelta({ children, ...props }: InfoWithDeltaProps) {
const lastValue = useRef(children);
useEffect(() => {
lastValue.current = children;
});
return (
<Info {...props} delta={children - lastValue.current}>
{children}
</Info>
);
}
src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+182 -140
View File
@@ -12,6 +12,7 @@ import { unionBoundingBox } from '../../../../../../core/blitzkrieg/unionBoundin
import { useEquipment } from '../../../../../../core/blitzkrieg/useEquipmentEquipped';
import { useDuel } from '../../../../../../stores/duel';
import { Info } from './components/Info';
import { InfoWithDelta } from './components/InfoWithDelta';
export function Characteristics() {
const awaitedModelDefinitions = use(modelDefinitions);
@@ -47,68 +48,65 @@ export function Characteristics() {
<Flex direction="column" gap="4" style={{ width: '100%' }}>
<Flex direction="column" gap="2">
<Heading size="5">Survivability</Heading>
<Info name="Health" unit="hp">
<InfoWithDelta name="Health" unit="hp">
{tank.health + turret.health}
</Info>
<Info name="Fire chance" unit="%">
</InfoWithDelta>
<InfoWithDelta name="Fire chance" unit="%">
{Math.round(engine.fireChance * 100)}
</Info>
<Info name="View range" unit="m">
</InfoWithDelta>
<InfoWithDelta name="View range" unit="m">
{turret.viewRange}
</Info>
</InfoWithDelta>
<Info name="Camouflage" unit="%" />
<Info indent name="Still">
{(tank.camouflage.still * 100).toFixed(2)}
</Info>
<Info indent name="Moving">
{(tank.camouflage.moving * 100).toFixed(2)}
</Info>
<Info indent name="Shooting still">
{(tank.camouflage.still * gun.camouflageLoss * 100).toFixed(2)}
</Info>
<Info indent name="Shooting on move">
{(tank.camouflage.moving * gun.camouflageLoss * 100).toFixed(2)}
</Info>
<Info indent name="On fire">
{(tank.camouflage.onFire * tank.camouflage.still * 100).toFixed(2)}
</Info>
<InfoWithDelta indent name="Still" decimals={2}>
{tank.camouflage.still * 100}
</InfoWithDelta>
<InfoWithDelta indent name="Moving" decimals={2}>
{tank.camouflage.moving * 100}
</InfoWithDelta>
<InfoWithDelta indent name="Shooting still" decimals={2}>
{tank.camouflage.still * gun.camouflageLoss * 100}
</InfoWithDelta>
<InfoWithDelta indent name="Shooting on move" decimals={2}>
{tank.camouflage.moving * gun.camouflageLoss * 100}
</InfoWithDelta>
<InfoWithDelta indent name="On fire" decimals={2}>
{tank.camouflage.onFire * tank.camouflage.still * 100}
</InfoWithDelta>
<Info name="Size" unit="m">
{size.map((component) => component.toFixed(2)).join(' x ')}
{size[0].toFixed(2)} x {size[2].toFixed(2)} x {size[1].toFixed(2)}
</Info>
</Flex>
<Flex direction="column" gap="2">
<Heading size="5">Fire</Heading>
<Info name="Gun type">{GUN_TYPE_NAMES[gun.type]}</Info>
<Info name="Damage per minute" unit="hp / min">
{resolveDpm(gun, shell, hasRammer).toFixed(0)}
</Info>
<InfoWithDelta name="Damage per minute" decimals={0} unit="hp / min">
{resolveDpm(gun, shell, hasRammer)}
</InfoWithDelta>
{gun.type === 'autoReloader' && (
<>
<Info indent name="Maximum" unit="hp / min">
<InfoWithDelta decimals={0} indent name="Maximum" unit="hp / min">
{gun.reload.at(-1)! < gun.reload.at(-2)!
? (
(shell.damage.armor /
(gun.reload.at(-1)! + gun.interClip)) *
60
).toFixed(0)
: ((shell.damage.armor / gun.reload[0]) * 60).toFixed(0)}
</Info>
<Info indent name="Effective at 60s" unit="hp / min">
? (shell.damage.armor / (gun.reload.at(-1)! + gun.interClip)) *
60
: (shell.damage.armor / gun.reload[0]) * 60}
</InfoWithDelta>
<InfoWithDelta
decimals={0}
indent
name="Effective at 60s"
unit="hp / min"
>
{gun.reload.at(-1)! < gun.reload.at(-2)!
? (
(shell.damage.armor /
(gun.reload.at(-1)! + gun.interClip)) *
(60 -
(gun.reload.slice(0, -1).length - 1) * gun.interClip) +
shell.damage.armor * gun.reload.slice(0, -1).length
).toFixed(0)
: (
(shell.damage.armor / (gun.reload[0] + gun.interClip)) *
(60 - (gun.reload.slice(1).length - 1) * gun.interClip) +
shell.damage.armor * gun.reload.slice(1).length
).toFixed(0)}
</Info>
? (shell.damage.armor / (gun.reload.at(-1)! + gun.interClip)) *
(60 -
(gun.reload.slice(0, -1).length - 1) * gun.interClip) +
shell.damage.armor * gun.reload.slice(0, -1).length
: (shell.damage.armor / (gun.reload[0] + gun.interClip)) *
(60 - (gun.reload.slice(1).length - 1) * gun.interClip) +
shell.damage.armor * gun.reload.slice(1).length}
</InfoWithDelta>
<Info
indent
name={
@@ -127,153 +125,197 @@ export function Characteristics() {
)}
{gun.type === 'autoReloader' ? (
gun.reload.map((reload, index) => (
<Info
<InfoWithDelta
key={index}
indent={index > 0}
name={index > 0 ? `Shell ${index + 1}` : 'Reload on shell 1'}
unit="s"
decimals={2}
>
{reload.toFixed(2)}
</Info>
{reload}
</InfoWithDelta>
))
) : (
<Info name="Reload" unit="s">
{(gun.reload * (hasRammer ? 0.93 : 1)).toFixed(2)}
</Info>
<InfoWithDelta decimals={2} name="Reload" unit="s">
{gun.reload * (hasRammer ? 0.93 : 1)}
</InfoWithDelta>
)}
<Info name="Caliber" unit="mm">
<InfoWithDelta name="Caliber" decimals={0} unit="mm">
{shell.caliber}
</Info>
</InfoWithDelta>
<Info name="Penetration" unit="mm" />
{gun.shells.map((shell) => (
<Info key={shell.type} indent name={SHELL_NAMES[shell.type]}>
<InfoWithDelta
decimals={0}
key={shell.type}
indent
name={SHELL_NAMES[shell.type]}
>
{resolveNearPenetration(shell.penetration)}
</Info>
</InfoWithDelta>
))}
<Info name="Damage" unit="hp" />
{gun.shells.map((shell) => (
<Info key={shell.type} indent name={SHELL_NAMES[shell.type]}>
<InfoWithDelta
decimals={0}
key={shell.type}
indent
name={SHELL_NAMES[shell.type]}
>
{shell.damage.armor}
</Info>
</InfoWithDelta>
))}
<Info name="Module damage" unit="hp" />
{gun.shells.map((shell, index) => (
<Info key={shell.type} indent name={SHELL_NAMES[shell.type]}>
<InfoWithDelta
decimals={0}
key={shell.type}
indent
name={SHELL_NAMES[shell.type]}
>
{shell.damage.module}
</Info>
</InfoWithDelta>
))}
<Info name="Shell velocity" unit="m/s" />
{gun.shells.map((shell, index) => (
<Info key={shell.type} indent name={SHELL_NAMES[shell.type]}>
{gun.shells.map((shell) => (
<InfoWithDelta
decimals={0}
key={shell.type}
indent
name={SHELL_NAMES[shell.type]}
>
{shell.speed}
</Info>
</InfoWithDelta>
))}
<Info name="Aim time" unit="s">
{gun.aimTime.toFixed(2)}
</Info>
<InfoWithDelta decimals={2} name="Aim time" unit="s">
{gun.aimTime}
</InfoWithDelta>
<Info name="Dispersion at 100m" />
<Info indent name="Still" unit="m">
{gun.dispersion.base.toFixed(3)}
</Info>
<Info indent name="Moving" unit="s">
+ {track.dispersion.move.toFixed(3)}
</Info>
<Info indent name="Hull traversing" unit="°">
+ {track.dispersion.traverse.toFixed(3)}
</Info>
<Info indent name="Turret traversing" unit="°">
+ {gun.dispersion.traverse.toFixed(3)}
</Info>
<Info indent name="After shooting" unit="m">
+ {gun.dispersion.shot.toFixed(3)}
</Info>
<Info indent name="Gun damaged" unit="scalar">
x {gun.dispersion.damaged.toFixed(3)}
</Info>
<InfoWithDelta decimals={3} indent name="Still" unit="m">
{gun.dispersion.base}
</InfoWithDelta>
<InfoWithDelta prefix="+ " decimals={3} indent name="Moving" unit="s">
{track.dispersion.move}
</InfoWithDelta>
<InfoWithDelta
decimals={3}
prefix="+ "
indent
name="Hull traversing"
unit="°"
>
{track.dispersion.traverse}
</InfoWithDelta>
<InfoWithDelta
decimals={0}
prefix="+ "
indent
name="Turret traversing"
unit="°"
>
{gun.dispersion.traverse}
</InfoWithDelta>
<InfoWithDelta
decimals={3}
prefix="+ "
indent
name="After shooting"
unit="m"
>
{gun.dispersion.shot}
</InfoWithDelta>
<InfoWithDelta
decimals={3}
prefix="x "
indent
name="Gun damaged"
unit="scalar"
>
{gun.dispersion.damaged}
</InfoWithDelta>
<Info name="Gun flexibility" unit="°" />
<Info indent name="Depression">
{gunModelDefinition.pitch.max.toFixed(1)}
</Info>
<Info indent name="Elevation">
{(-gunModelDefinition.pitch.min).toFixed(1)}
</Info>
<InfoWithDelta decimals={1} indent name="Depression">
{gunModelDefinition.pitch.max}
</InfoWithDelta>
<InfoWithDelta decimals={1} indent name="Elevation">
{-gunModelDefinition.pitch.min}
</InfoWithDelta>
{gunModelDefinition.pitch.front && (
<>
<Info indent name="Frontal depression">
<InfoWithDelta decimals={1} indent name="Frontal depression">
{gunModelDefinition.pitch.front.max}
</Info>
<Info indent name="Frontal elevation">
</InfoWithDelta>
<InfoWithDelta decimals={1} indent name="Frontal elevation">
{-gunModelDefinition.pitch.front.min}
</Info>
</InfoWithDelta>
</>
)}
{gunModelDefinition.pitch.back && (
<>
<Info indent name="Rear depression">
<InfoWithDelta decimals={1} indent name="Rear depression">
{gunModelDefinition.pitch.back.max}
</Info>
<Info indent name="Rear elevation">
</InfoWithDelta>
<InfoWithDelta decimals={1} indent name="Rear elevation">
{-gunModelDefinition.pitch.back.min}
</Info>
</InfoWithDelta>
</>
)}
{turretModelDefinition.yaw && (
<Info indent name="Azimuth">
{-turretModelDefinition.yaw.min}, {turretModelDefinition.yaw.max}
</Info>
<>
<InfoWithDelta decimals={1} indent name="Azimuth left">
{-turretModelDefinition.yaw.min}
</InfoWithDelta>
<InfoWithDelta decimals={1} indent name="Azimuth right">
{turretModelDefinition.yaw.max}
</InfoWithDelta>
</>
)}
</Flex>
<Flex direction="column" gap="2">
<Heading size="5">Maneuverability</Heading>
<Info name="Speed" unit="km/hr" />
<Info indent name="Forwards">
{tank.speed.forwards.toFixed(0)}
</Info>
<Info indent name="Backwards">
{tank.speed.backwards.toFixed(0)}
</Info>
<Info name="Power" unit="hp">
<InfoWithDelta decimals={0} indent name="Forwards">
{tank.speed.forwards}
</InfoWithDelta>
<InfoWithDelta decimals={0} indent name="Backwards">
{tank.speed.backwards}
</InfoWithDelta>
<InfoWithDelta decimals={0} name="Power" unit="hp">
{engine.power}
</Info>
</InfoWithDelta>
<Info name="Power to weight ratio" unit="hp/mt" />
<Info indent name="On hard terrain">
{(engine.power / weightMt / track.resistance.hard).toFixed(1)}
</Info>
<Info indent name="On medium terrain">
{(engine.power / weightMt / track.resistance.medium).toFixed(1)}
</Info>
<Info indent name="On soft terrain">
{(engine.power / weightMt / track.resistance.soft).toFixed(1)}
</Info>
<Info name="Weight" unit="mt">
{weightMt.toFixed(1)}
</Info>
<InfoWithDelta decimals={1} indent name="On hard terrain">
{engine.power / weightMt / track.resistance.hard}
</InfoWithDelta>
<InfoWithDelta decimals={1} indent name="On medium terrain">
{engine.power / weightMt / track.resistance.medium}
</InfoWithDelta>
<InfoWithDelta decimals={1} indent name="On soft terrain">
{engine.power / weightMt / track.resistance.soft}
</InfoWithDelta>
<InfoWithDelta decimals={1} name="Weight" unit="mt">
{weightMt}
</InfoWithDelta>
<Info name="Effective traverse speed" unit="°/s" />
<Info indent name="On hard terrain">
{(
(engine.power / stockEngine.power) *
<InfoWithDelta decimals={1} indent name="On hard terrain">
{(engine.power / stockEngine.power) *
track.traverseSpeed *
(track.resistance.hard / track.resistance.hard) *
(stockWeight / weight)
).toFixed(1)}
</Info>
<Info indent name="On medium terrain">
{(
(engine.power / stockEngine.power) *
(stockWeight / weight)}
</InfoWithDelta>
<InfoWithDelta decimals={1} indent name="On medium terrain">
{(engine.power / stockEngine.power) *
track.traverseSpeed *
(track.resistance.hard / track.resistance.medium) *
(stockWeight / weight)
).toFixed(1)}
</Info>
<Info indent name="On soft terrain">
{(
(engine.power / stockEngine.power) *
(stockWeight / weight)}
</InfoWithDelta>
<InfoWithDelta decimals={1} indent name="On soft terrain">
{(engine.power / stockEngine.power) *
track.traverseSpeed *
(track.resistance.hard / track.resistance.soft) *
(stockWeight / weight)
).toFixed(1)}
</Info>
(stockWeight / weight)}
</InfoWithDelta>
</Flex>
</Flex>
);