diff --git a/.vscode/settings.json b/.vscode/settings.json index 1e6e95bca..08f2079cd 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -184,6 +184,7 @@ "TEXCOORD", "tresabhi", "tungstentip", + "Turretless", "TYPELESS", "ubjson", "Unicum", diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index 8c5cfc4f5..289509378 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -871,8 +871,8 @@ }, "ricochet": { - "safe": "Safe %s1°", - "unsafe": "Unsafe %s1°" + "safe": "Safe <%s1°", + "unsafe": "Unsafe ≥%s1°" } }, diff --git a/packages/website/public/assets/images/tankopedia/visualizers/hull-traverse/hull-only.png b/packages/website/public/assets/images/tankopedia/visualizers/hull-traverse/hull-only.png new file mode 100644 index 000000000..8413f02df Binary files /dev/null and b/packages/website/public/assets/images/tankopedia/visualizers/hull-traverse/hull-only.png differ diff --git a/packages/website/src/components/MissingShellIcon.tsx b/packages/website/src/components/MissingShellIcon.tsx index fe9754709..b4a93b57b 100644 --- a/packages/website/src/components/MissingShellIcon.tsx +++ b/packages/website/src/components/MissingShellIcon.tsx @@ -15,7 +15,7 @@ export function MissingShellIcon(props: ComponentProps<'svg'>) { stroke="currentColor" strokeWidth="4" strokeLinecap="round" - stroke-linejoin="round" + strokeLinejoin="round" /> ); diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/HullTraverseVisualizer/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/HullTraverseVisualizer/index.tsx index 099bb113d..4cf5843ab 100644 --- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/HullTraverseVisualizer/index.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/HullTraverseVisualizer/index.tsx @@ -17,6 +17,8 @@ export function HullTraverseVisualizer({ stats }: VisualizerProps) { const [rotateHull, setRotateHull] = useState(true); const [rotateTurret, setRotateTurret] = useState(true); const { strings } = useLocale(); + const isTurretless = + stats.azimuthLeft !== undefined || stats.azimuthRight !== undefined; return ( @@ -35,32 +37,34 @@ export function HullTraverseVisualizer({ stats }: VisualizerProps) { > - + {!isTurretless && ( + + )} - + {!isTurretless && ( setRotateHull((state) => !state)} - style={{ cursor: 'pointer' }} + position="absolute" + top="4" + left="50%" + gap="5" + style={{ + transform: 'translateX(-50%)', + userSelect: 'none', + }} > - - - {strings.website.tools.tankopedia.visualizers.rotator.hull} - - + setRotateHull((state) => !state)} + style={{ cursor: 'pointer' }} + > + + + {strings.website.tools.tankopedia.visualizers.rotator.hull} + + - setRotateTurret((state) => !state)} - style={{ cursor: 'pointer' }} - > - - - {strings.website.tools.tankopedia.visualizers.rotator.turret} - + setRotateTurret((state) => !state)} + style={{ cursor: 'pointer' }} + > + + + {strings.website.tools.tankopedia.visualizers.rotator.turret} + + - + )} ); } diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.css b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.css index afd1b25ed..5a8def587 100644 --- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.css +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.css @@ -9,7 +9,7 @@ } .ricochet-visualizer-penetrating-shell { - animation: penetrating-shell-slide 3s infinite; + animation: penetrating-shell-slide infinite; } @keyframes ricocheting-shell-slide { @@ -44,11 +44,11 @@ } .ricochet-visualizer-ricocheting-shell { - animation: ricocheting-shell-slide 3s infinite; + animation: ricocheting-shell-slide infinite; } .ricochet-visualizer-ricocheting-shell-container { - animation: ricocheting-shell-slide-container 3s infinite; + animation: ricocheting-shell-slide-container infinite; } @keyframes surface-impact { @@ -72,7 +72,7 @@ } .ricochet-visualizer-surface-impact { - animation: surface-impact 3s linear infinite; + animation: surface-impact linear infinite; } @keyframes puncture { @@ -94,5 +94,41 @@ } .ricochet-visualizer-puncture { - animation: puncture 3s infinite; + animation: puncture infinite; +} + +@keyframes safe { + 0% { + opacity: 0; + } + 5%, + 28% { + opacity: 1; + } + 33%, + 100% { + opacity: 0; + } +} + +.ricochet-visualizer-safe { + animation: safe infinite; +} + +@keyframes unsafe { + 0%, + 33% { + opacity: 0; + } + 38%, + 95% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +.ricochet-visualizer-unsafe { + animation: unsafe infinite; } diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.tsx index cf2c203d9..0cb147972 100644 --- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisuazlizer/index.tsx @@ -11,6 +11,7 @@ export function RicochetVisualizer({ stats }: VisualizerProps) { const ricochet = stats.shellRicochet ?? 90; const shell = Duel.use((state) => state.protagonist.shell); const { strings } = useLocale(); + const animationDuration = '6s'; return ( @@ -77,7 +79,7 @@ export function RicochetVisualizer({ stats }: VisualizerProps) { conic-gradient( from -90deg at 25% 100%, transparent ${90 - ricochet}deg, - ${Var('jade-a3')} ${90 - ricochet}deg, + ${Var('jade-a7')} ${90 - ricochet}deg, ${Var('jade-9')} ${90 + ricochet}deg, ${Var('tomato-8')} ${90 + ricochet}deg, ${Var('tomato-a3')} 180deg, @@ -121,7 +123,7 @@ export function RicochetVisualizer({ stats }: VisualizerProps) { style={{ transformOrigin: 'bottom center', transform: `translateX(-50%) rotate(-${ricochet}deg)`, - background: `repeating-linear-gradient(${Var('gray-10')}, ${Var('gray-a3')} 15px, transparent 15px, transparent 30px)`, + background: `repeating-linear-gradient(${Var('gray-11')}, ${Var('gray-a3')} 15px, transparent 15px, transparent 30px)`, }} /> @@ -134,6 +136,7 @@ export function RicochetVisualizer({ stats }: VisualizerProps) { transform: `translate(-50%, 50%) rotate(${ricochet}deg)`, background: `radial-gradient(${Var('gray-a2')}, ${Var('gray-a9')})`, borderRadius: '50%', + animationDuration, }} /> @@ -157,6 +160,7 @@ export function RicochetVisualizer({ stats }: VisualizerProps) { width: '100%', height: '100%', position: 'absolute', + animationDuration, }} /> @@ -170,6 +174,7 @@ export function RicochetVisualizer({ stats }: VisualizerProps) { bottom="0" style={{ transformOrigin: 'bottom center', + animationDuration, }} > @@ -192,11 +198,13 @@ export function RicochetVisualizer({ stats }: VisualizerProps) { left: '30%', bottom: '40%', transform: 'translateX(-50%)', + animationDuration, }} + className="ricochet-visualizer-safe" > {literals( strings.website.tools.tankopedia.visualizers.ricochet.safe, - [(2 * ricochet).toFixed(0)], + [ricochet.toFixed(0)], )} @@ -206,11 +214,13 @@ export function RicochetVisualizer({ stats }: VisualizerProps) { position: 'absolute', right: '5%', bottom: '12%', + animationDuration, }} + className="ricochet-visualizer-unsafe" > {literals( strings.website.tools.tankopedia.visualizers.ricochet.unsafe, - [(90 - ricochet).toFixed(0)], + [ricochet.toFixed(0)], )}