From 9f2ced6bfdea60879fc01ed56878085b4549b151 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Thu, 1 Feb 2024 11:52:48 -0600 Subject: [PATCH] feat: new layout --- .../Characteristics/components/Info.tsx | 15 +- .../[id]/components/Characteristics/index.tsx | 409 ++++++++---------- src/app/tools/tankopedia/[id]/page.tsx | 16 +- src/core/blitzkrieg/eventManager.ts | 2 +- src/core/blitzkrieg/tankDefinitions.ts | 6 + 5 files changed, 223 insertions(+), 225 deletions(-) diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx index d75d6e3eb..5e991ef7f 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx @@ -5,7 +5,7 @@ import { theme } from '../../../../../../../stitches.config'; interface InfoProps { name: string; children: ReactNode; - unit: string; + unit?: string; indent?: boolean; highlight?: boolean; } @@ -24,10 +24,15 @@ export function Info({ gap="4" > - {name}{' '} - - {unit} - + {name} + {unit != undefined && ( + <> + {' '} + + {unit} + + + )}
- - - Configure - Statistics - - - - - - Survivability - - {tank.health + turret.health} - - - {Math.round(engine.fire_chance * 100)} - - - {turret.view_range} - - - {(tank.camouflage.still * 100).toFixed(2)} - - - {(tank.camouflage.moving * 100).toFixed(2)} - - - {(tank.camouflage.still * gun.camouflageLoss * 100).toFixed(2)} - - - {(tank.camouflage.moving * gun.camouflageLoss * 100).toFixed(2)} - - - {(tank.camouflage.onFire * 100).toFixed(2)} - - - {size.map((component) => component.toFixed(2)).join(' x ')} - - - - - Fire - - {dpm.toFixed(0)} - - {gun.type === 'auto_reloader' && ( - <> - - TODO - - - TODO - - - )} - {gun.type === 'auto_reloader' ? ( - gun.reload.map((reload, index) => ( - 0} - name={ - index > 0 ? `Shell ${index + 1}` : 'Reload on shell 1' - } - unit="s" - > - {reload.toFixed(2)} - - )) - ) : ( - - {gun.reload.toFixed(2)} - - )} - - {shell.caliber} - - {gun.shells.map((shell, index) => ( - 0} - name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' penetration' : ''}`} - unit="mm" - > - {resolveNearPenetration(shell.penetration)} - - ))} - {gun.shells.map((shell, index) => ( - 0} - name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' damage' : ''}`} - unit="hp" - > - {shell.damage.armor} - - ))} - {gun.shells.map((shell, index) => ( - 0} - name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' module damage' : ''}`} - unit="hp" - > - {shell.damage.module} - - ))} - {gun.shells.map((shell, index) => ( - 0} - name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' velocity' : ''}`} - unit="m/s" - > - {shell.speed} - - ))} - - TODO - - - TODO - - - TODO - - - TODO - - - TODO - - - TODO - - - {gunModelDefinition.pitch.max} - - - {-gunModelDefinition.pitch.min} - - {gunModelDefinition.pitch.front && ( - <> - - {gunModelDefinition.pitch.front.max} - - - {-gunModelDefinition.pitch.front.min} - - - )} - {gunModelDefinition.pitch.back && ( - <> - - {gunModelDefinition.pitch.back.max} - - - {-gunModelDefinition.pitch.back.min} - - - )} - {turretModelDefinition.yaw && ( - - {-turretModelDefinition.yaw.min},{' '} - {turretModelDefinition.yaw.max} - - )} - - - - Maneuverability - - TODO - - - TODO - - - TODO - - - TODO - - - TODO - - - TODO - - - TODO - - - TODO - - - TODO - - - TODO - - - - - - - - - - - - - - - + + + Survivability + + {tank.health + turret.health} + + + {Math.round(engine.fire_chance * 100)} + + + {turret.view_range} + + + {(tank.camouflage.still * 100).toFixed(2)} + + + {(tank.camouflage.moving * 100).toFixed(2)} + + + {(tank.camouflage.still * gun.camouflageLoss * 100).toFixed(2)} + + + {(tank.camouflage.moving * gun.camouflageLoss * 100).toFixed(2)} + + + {(tank.camouflage.onFire * 100).toFixed(2)} + + + {size.map((component) => component.toFixed(2)).join(' x ')} + - + + + Fire + {GUN_TYPE_NAMES[gun.type]} + + {dpm.toFixed(0)} + + {gun.type === 'auto_reloader' && ( + <> + + TODO + + + TODO + + + )} + {gun.type === 'auto_reloader' ? ( + gun.reload.map((reload, index) => ( + 0} + name={index > 0 ? `Shell ${index + 1}` : 'Reload on shell 1'} + unit="s" + > + {reload.toFixed(2)} + + )) + ) : ( + + {gun.reload.toFixed(2)} + + )} + + {shell.caliber} + + {gun.shells.map((shell, index) => ( + 0} + name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' penetration' : ''}`} + unit="mm" + > + {resolveNearPenetration(shell.penetration)} + + ))} + {gun.shells.map((shell, index) => ( + 0} + name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' damage' : ''}`} + unit="hp" + > + {shell.damage.armor} + + ))} + {gun.shells.map((shell, index) => ( + 0} + name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' module damage' : ''}`} + unit="hp" + > + {shell.damage.module} + + ))} + {gun.shells.map((shell, index) => ( + 0} + name={`${SHELL_NAMES[shell.type]}${index === 0 ? ' velocity' : ''}`} + unit="m/s" + > + {shell.speed} + + ))} + + TODO + + + TODO + + + TODO + + + TODO + + + TODO + + + TODO + + + {gunModelDefinition.pitch.max} + + + {-gunModelDefinition.pitch.min} + + {gunModelDefinition.pitch.front && ( + <> + + {gunModelDefinition.pitch.front.max} + + + {-gunModelDefinition.pitch.front.min} + + + )} + {gunModelDefinition.pitch.back && ( + <> + + {gunModelDefinition.pitch.back.max} + + + {-gunModelDefinition.pitch.back.min} + + + )} + {turretModelDefinition.yaw && ( + + {-turretModelDefinition.yaw.min}, {turretModelDefinition.yaw.max} + + )} + + + + Maneuverability + + TODO + + + TODO + + + TODO + + + TODO + + + TODO + + + TODO + + + TODO + + + TODO + + + TODO + + + TODO + + + ); } diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx index 91196a963..9ecf0053c 100644 --- a/src/app/tools/tankopedia/[id]/page.tsx +++ b/src/app/tools/tankopedia/[id]/page.tsx @@ -8,6 +8,12 @@ import { mutateDuel, useDuel } from '../../../../stores/duel'; import { mutateTankopediaTemporary } from '../../../../stores/tankopedia'; import { AntagonistBar } from './components/AntagonistBar'; import { Characteristics } from './components/Characteristics'; +import { Camouflage } from './components/Characteristics/components/Camouflage'; +import { Consumables } from './components/Characteristics/components/Consumables'; +import { Crew } from './components/Characteristics/components/Crew'; +import { Equipments } from './components/Characteristics/components/Equipments'; +import { Modules } from './components/Characteristics/components/Modules'; +import { Provisions } from './components/Characteristics/components/Provisions'; import { TankSandbox } from './components/Model/TankSandbox'; import { Title } from './components/Title'; @@ -92,13 +98,21 @@ export default function Page({ params }: { params: { id: string } }) { direction="column" style={{ flex: 1, - position: wideFormat ? 'sticky' : undefined, width: '100%', top: 64, }} > + + + + + + + + + diff --git a/src/core/blitzkrieg/eventManager.ts b/src/core/blitzkrieg/eventManager.ts index 8486e920c..80eb1de76 100644 --- a/src/core/blitzkrieg/eventManager.ts +++ b/src/core/blitzkrieg/eventManager.ts @@ -5,7 +5,7 @@ export class EventManager { this.callbacks.add(callback); } off(callback: (data: Type) => void) { - this.callbacks.delete(callback); + return this.callbacks.delete(callback); } emit(data: Type) { diff --git a/src/core/blitzkrieg/tankDefinitions.ts b/src/core/blitzkrieg/tankDefinitions.ts index 0b60d986d..13756d85b 100644 --- a/src/core/blitzkrieg/tankDefinitions.ts +++ b/src/core/blitzkrieg/tankDefinitions.ts @@ -91,6 +91,12 @@ export type ShellDefinition = { explosionRadius?: number; }; +export const GUN_TYPE_NAMES: Record = { + regular: 'Regular', + auto_loader: 'Auto loader', + auto_reloader: 'Auto reloader', +}; + export const tankDefinitions = fetch(asset('definitions/tanks.json'), { cache: 'no-cache', }).then(async (response) => response.json() as Promise);