feat: functional armor type toggling

This commit is contained in:
TrèsAbhi committed 2024-07-29 19:59:07 -05:00
1 parent 0aca2dab6c
commit c4b5baf6cc
6 files changed
+52 -33

No files matched your search

@@ -70,9 +70,6 @@ export function Options({ thicknessRange }: OptionsProps) {
const wireframe = TankopediaPersistent.use(
(state) => state.model.visual.wireframe,
);
const showSpacedArmor = TankopediaPersistent.use(
(state) => state.model.visual.showSpacedArmor,
);
const opaque = TankopediaPersistent.use((state) => state.model.visual.opaque);
const fullScreenAvailable = useFullscreenAvailability();
const environment = TankopediaPersistent.use(
@@ -537,24 +534,10 @@ export function Options({ thicknessRange }: OptionsProps) {
</DropdownMenu.Trigger>
<DropdownMenu.Content>
{display !== TankopediaDisplay.Model && (
{display === TankopediaDisplay.DynamicArmor && (
<>
<DropdownMenu.Label>Armor</DropdownMenu.Label>
<DropdownMenu.CheckboxItem
checked={showSpacedArmor}
onCheckedChange={(checked) => {
mutateTankopediaPersistent((draft) => {
draft.model.visual.showSpacedArmor = checked;
});
mutateTankopediaEphemeral((draft) => {
draft.shot = undefined;
});
}}
>
Spaced armor
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={greenPenetration}
onCheckedChange={(checked) => {
@@ -1,6 +1,7 @@
import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
import { Box, Flex, Text } from '@radix-ui/themes';
import { ThicknessRange } from '../../../../../components/StaticArmor/components/StaticArmorScene';
import * as TankopediaEphemeral from '../../../../../stores/tankopediaEphemeral';
import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
interface ThicknessesProps {
@@ -18,6 +19,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
(state) => state.model.visual.showCoreArmor,
);
const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
return (
<Flex
@@ -25,7 +27,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
right="0"
top="50%"
mr="4"
style={{ transform: 'translateY(-50%)' }}
style={{ transform: 'translateY(-50%)', userSelect: 'none' }}
direction="column"
gap="2"
align="end"
@@ -39,6 +41,9 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
draft.model.visual.showCoreArmor =
!draft.model.visual.showCoreArmor;
});
mutateTankopediaEphemeral((draft) => {
draft.highlightArmor = undefined;
});
}}
>
<Flex direction="column" align="end" justify="between">
@@ -73,6 +78,9 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
draft.model.visual.showSpacedArmor =
!draft.model.visual.showSpacedArmor;
});
mutateTankopediaEphemeral((draft) => {
draft.highlightArmor = undefined;
});
}}
>
<Flex direction="column" align="end" justify="between">
@@ -106,6 +114,9 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
draft.model.visual.showExternalModules =
!draft.model.visual.showExternalModules;
});
mutateTankopediaEphemeral((draft) => {
draft.highlightArmor = undefined;
});
}}
>
<Flex direction="column" align="end" justify="between">
@@ -48,7 +48,6 @@ export function CoreArmorSceneComponent({
explosionRadius: { value: null },
greenPenetration: { value: null },
opaque: { value: null },
useSpacedArmor: { value: null },
inverseProjectionMatrix: { value: null },
resolution: { value: new Vector2() },
@@ -80,7 +79,6 @@ export function CoreArmorSceneComponent({
) {
material.uniforms.greenPenetration.value = visual.greenPenetration;
material.uniforms.opaque.value = visual.opaque || visual.wireframe;
material.uniforms.useSpacedArmor.value = visual.showSpacedArmor;
material.wireframe = visual.wireframe;
}
async function handleProtagonistEquipmentChange(
@@ -13,7 +13,6 @@ uniform float damage;
uniform float explosionRadius;
uniform bool greenPenetration;
uniform bool opaque;
uniform bool useSpacedArmor;
uniform mat4 inverseProjectionMatrix;
uniform highp sampler2D spacedArmorBuffer;
@@ -49,7 +48,7 @@ void main() {
float coreArmorDistance = depthToDistance(gl_FragCoord.z);
float distanceFromSpacedArmor = coreArmorDistance - spacedArmorDistance;
if (canSplash && useSpacedArmor && isUnderSpacedArmor) {
if (canSplash && isUnderSpacedArmor) {
float spacedArmorThickness = spacedArmorBufferFragment.r * penetration;
float finalDamage = 0.5 * damage * (1.0 - distanceFromSpacedArmor / explosionRadius) - 1.1 * (finalThickness + spacedArmorThickness);
@@ -58,7 +57,7 @@ void main() {
} else {
float remainingPenetration = penetration;
if (useSpacedArmor && isUnderSpacedArmor) {
if (isUnderSpacedArmor) {
float spacedArmorThickness = spacedArmorBufferFragment.r * penetration;
remainingPenetration -= spacedArmorThickness;
@@ -149,7 +149,7 @@ export function SpacedArmorSceneComponent({
if (selectedName === undefined) {
// nothing selected, go back to defaults
material.opacity = opacity;
material.transparent = opacity < 1;
// material.transparent = opacity < 1;
material.color = color;
material.depthWrite = props.type !== ArmorType.External;
material.side = FrontSide;
@@ -164,14 +164,14 @@ export function SpacedArmorSceneComponent({
) {
// this selected, stand out!
material.opacity = 1;
material.transparent = false;
// material.transparent = false;
material.color = color;
material.depthWrite = true;
material.side = DoubleSide;
} else {
// something else selected, become background
material.opacity = 1 / 4;
material.transparent = true;
// material.transparent = true;
material.color = unselectedColor;
material.depthWrite = props.type !== ArmorType.External;
material.side = FrontSide;
@@ -188,7 +188,7 @@ export function SpacedArmorSceneComponent({
return jsxTree(node, {
material,
renderOrder,
// renderOrder,
userData: {
type: props.type,
variant: props.type === ArmorType.External ? props.variant : 'gun',
@@ -8,6 +8,7 @@ import { useModel } from '../../../hooks/useModel';
import { useModelDefinitions } from '../../../hooks/useModelDefinitions';
import { useTankTransform } from '../../../hooks/useTankTransform';
import * as Duel from '../../../stores/duel';
import * as TankopediaPersistent from '../../../stores/tankopediaPersistent';
import { ModelTankWrapper } from '../../Armor/components/ModelTankWrapper';
import { ArmorType } from '../../Armor/components/SpacedArmorScene';
import { SpacedArmorSceneComponent } from '../../Armor/components/SpacedArmorSceneComponent';
@@ -47,6 +48,15 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
gunModelDefinition.mask === undefined
? undefined
: gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
const showCoreArmor = TankopediaPersistent.use(
(state) => state.model.visual.showCoreArmor,
);
const showSpacedArmor = TankopediaPersistent.use(
(state) => state.model.visual.showSpacedArmor,
);
const showExternalModules = TankopediaPersistent.use(
(state) => state.model.visual.showExternalModules,
);
useTankTransform(protagonist, turretContainer, gunContainer);
@@ -62,7 +72,13 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
armorId,
);
if (!isVisible || thickness === undefined) return null;
if (
!isVisible ||
thickness === undefined ||
(!showCoreArmor && !spaced) ||
(!showSpacedArmor && spaced)
)
return null;
return (
<SpacedArmorSceneComponent
@@ -83,7 +99,7 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
const isTrack = node.name.startsWith('chassis_track_');
const isVisible = isWheel || isTrack;
if (!isVisible) return null;
if (!isVisible || !showExternalModules) return null;
return (
<SpacedArmorSceneComponent
@@ -111,7 +127,13 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
armorId,
);
if (!isVisible || thickness === undefined) return null;
if (
!isVisible ||
thickness === undefined ||
(!showCoreArmor && !spaced) ||
(!showSpacedArmor && spaced)
)
return null;
return (
<group position={hullOrigin}>
@@ -142,7 +164,13 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
armorId,
);
if (!isVisible || thickness === undefined) return null;
if (
!isVisible ||
thickness === undefined ||
(!showCoreArmor && !spaced) ||
(!showSpacedArmor && spaced)
)
return null;
return (
<group position={hullOrigin}>
@@ -170,7 +198,7 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
: node.name === gunString;
const isVisible = isCurrentGun;
if (!isVisible) return null;
if (!isVisible || !showExternalModules) return null;
return (
<SpacedArmorSceneComponent