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)],
)}