feat: upgrade tankopediaEphemeral

This commit is contained in:
TrèsAbhi committed 2025-09-01 18:51:04 -05:00
1 parent b6c3fdc4e9
commit ac29d1ead0
28 files changed
+165 -168

No files matched your search

@@ -13,7 +13,6 @@ export function CompareOptions(props: FlexProps) {
(state) => state.relativeAgainst,
);
const tank = Duel.use((state) => state.protagonist.tank);
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
const { strings } = useLocale();
return (
@@ -33,7 +32,7 @@ export function CompareOptions(props: FlexProps) {
size="1"
value={`${relativeAgainst}`}
onValueChange={(value) => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.relativeAgainst = Number(value) as TankopediaRelativeAgainst;
});
}}
@@ -10,7 +10,6 @@ export function StatSearch(props: FlexProps) {
const { strings } = useLocale();
const [searching, setSearching] = useState(false);
const input = useRef<HTMLInputElement>(null);
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
const count = useRef<HTMLDivElement>(null);
const [index, setIndex] = useState(0);
const search = useCallback(() => {
@@ -34,14 +33,14 @@ export function StatSearch(props: FlexProps) {
count.current.textContent = '';
setSearching(false);
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.statSearch = undefined;
});
return;
}
setSearching(false);
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.statSearch = input.current!.value;
});
}, 500),
@@ -14,7 +14,6 @@ import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
export function Skills() {
const skillLevels = TankopediaEphemeral.use((state) => state.skills);
const mutateTankopediaTemporary = TankopediaEphemeral.useMutation();
const { strings } = useLocale();
return (
@@ -46,7 +45,7 @@ export function Skills() {
variant="ghost"
color="red"
onClick={() => {
mutateTankopediaTemporary((draft) => {
TankopediaEphemeral.mutate((draft) => {
Object.keys(draft.skills).forEach((skill) => {
draft.skills[skill] = 0;
});
@@ -58,7 +57,7 @@ export function Skills() {
<Button
variant="ghost"
onClick={() => {
mutateTankopediaTemporary((draft) => {
TankopediaEphemeral.mutate((draft) => {
Object.keys(draft.skills).forEach((skill) => {
draft.skills[skill] = 7;
});
@@ -72,7 +71,7 @@ export function Skills() {
<CrewSkillManager
skillLevels={skillLevels}
onChange={(skills) => {
mutateTankopediaTemporary((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.skills = skills;
});
}}
@@ -20,7 +20,6 @@ export function CustomShellButton() {
const customShell = TankopediaEphemeral.use((state) => state.customShell);
const gun = Duel.use((state) => state.protagonist.gun);
const antagonistShell = Duel.use((state) => state.antagonist.shell);
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
const { strings } = useLocale();
return (
@@ -28,7 +27,7 @@ export function CustomShellButton() {
onOpenChange={(open) => {
if (!open || customShell) return;
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.customShell = antagonistShell;
});
}}
@@ -97,7 +96,7 @@ export function CustomShellButton() {
}
}
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.customShell = modified;
});
}}
@@ -134,7 +133,7 @@ export function CustomShellButton() {
defaultValue={customShell.caliber}
type="number"
onChange={(event) => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.customShell!.caliber = event.target.valueAsNumber;
});
}}
@@ -170,7 +169,7 @@ export function CustomShellButton() {
defaultValue={customShell.penetration.near}
type="number"
onChange={(event: ChangeEvent<HTMLInputElement>) => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.customShell!.penetration.near =
event.target.valueAsNumber;
});
@@ -226,7 +225,7 @@ export function CustomShellButton() {
onValueChange={([value]) => {
console.log('asd');
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.customShell!.normalization = value;
});
}}
@@ -255,7 +254,7 @@ export function CustomShellButton() {
step={Number.EPSILON}
defaultValue={[customShell.ricochet ?? 90]}
onValueChange={throttle(([value]) => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.customShell!.ricochet = value;
});
}, 1000)}
@@ -274,7 +273,7 @@ export function CustomShellButton() {
defaultValue={customShell.explosion_radius ?? 0}
type="number"
onChange={(event: ChangeEvent<HTMLInputElement>) => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.customShell!.explosion_radius =
event.target.valueAsNumber;
});
@@ -310,7 +309,7 @@ export function CustomShellButton() {
<Button
color="red"
onClick={() => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.customShell = antagonistShell;
});
}}
@@ -7,7 +7,6 @@ import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemera
export function DynamicArmorSwitcher() {
const tank = Duel.use((state) => state.protagonist.tank);
const mutateDuel = Duel.useMutation();
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
const isDynamicArmorActive = Duel.use((state) =>
state.protagonist.consumables.includes(73),
);
@@ -33,7 +32,7 @@ export function DynamicArmorSwitcher() {
}
}
});
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.shot = undefined;
});
}}
@@ -26,9 +26,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
(state) => state.showPrimaryArmor,
);
const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
const editStatic = TankopediaEphemeral.use((state) => state.editStatic);
const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
const { strings } = useLocale();
return (
@@ -55,7 +53,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
mutateTankopediaPersistent((draft) => {
draft.showPrimaryArmor = !draft.showPrimaryArmor;
});
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.highlightArmor = undefined;
});
}}
@@ -96,7 +94,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
mutateTankopediaPersistent((draft) => {
draft.showSpacedArmor = !draft.showSpacedArmor;
});
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.highlightArmor = undefined;
});
}}
@@ -135,7 +133,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
mutateTankopediaPersistent((draft) => {
draft.showExternalModules = !draft.showExternalModules;
});
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.highlightArmor = undefined;
});
}}
@@ -168,7 +166,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
gap="2"
style={{ cursor: 'pointer' }}
onClick={() => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.editStatic = !draft.editStatic;
draft.highlightArmor = undefined;
});
@@ -186,9 +184,9 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
size="1"
variant="ghost"
onClick={() => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.editStatic = false;
draft.model = tankopediaEphemeralStore.getInitialState().model;
draft.model = TankopediaEphemeral.initial.model;
});
}}
>
@@ -73,7 +73,6 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
const hasEnhancedArmor = useEquipment(110);
const antagonistUniqueGuns = uniqueGuns(antagonistTank.turrets);
const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
const { strings, unwrap } = useLocale();
const revealed = TankopediaEphemeral.use((state) => state.revealed);
const disturbed = TankopediaEphemeral.use((state) => state.disturbed);
@@ -196,7 +195,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
mutateDuel((draft) => {
draft.antagonist.shell = thisShell;
});
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.shot = undefined;
draft.customShell = undefined;
});
@@ -235,7 +234,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
? 0
: 1;
});
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.shot = undefined;
});
}}
@@ -260,7 +259,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
? 0
: -1;
});
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.shot = undefined;
});
}}
@@ -367,7 +366,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
variant="classic"
value={`${disturbed ? display : -1}`}
onValueChange={(value) => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.disturbed = true;
draft.display = Number(value);
});
@@ -14,14 +14,13 @@ export function Title() {
? '2rem'
: `min(16vh, ${125 / name.length}vw)`
: `min(12vh, ${75 / name.length}vw)`;
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
return (
<Flex
onPointerDown={(event) => {
event.preventDefault();
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.revealed = true;
});
}}
@@ -32,9 +32,7 @@ export function Controls({
zoomable = true,
enableRotate = true,
}: ControlsProps) {
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
const duelStore = Duel.useStore();
const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
const camera = useThree((state) => state.camera as PerspectiveCamera);
const canvas = useThree((state) => state.gl.domElement);
const orbitControls = useRef<OrbitControlsClass>(null);
@@ -102,7 +100,7 @@ export function Controls({
});
useEffect(() => {
const unsubscribeTankopediaEphemeral = tankopediaEphemeralStore.subscribe(
const unsubscribeTankopediaEphemeral = TankopediaEphemeral.on(
(state) => state.controlsEnabled,
(enabled) => {
if (orbitControls.current) orbitControls.current.enabled = enabled;
@@ -222,7 +220,7 @@ export function Controls({
}
function disturb() {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.disturbed = true;
});
}
@@ -268,7 +266,7 @@ export function Controls({
enableZoom={zoomable}
zoomSpeed={zoomable ? undefined : 0}
ref={orbitControls}
enabled={tankopediaEphemeralStore.getState().controlsEnabled}
enabled={TankopediaEphemeral.state.controlsEnabled}
enableDamping={false}
autoRotateSpeed={1 / 4}
/>
@@ -6,10 +6,9 @@ import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemera
export function InitialFogReveal() {
const fog = useThree((state) => state.scene.fog as Fog | null);
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
useEffect(() => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.revealed = true;
});
@@ -16,14 +16,12 @@ import { ModelTankWrapper } from '../../../../../Armor/components/ModelTankWrapp
export function TankModel() {
const duelStore = Duel.useStore();
const protagonist = Duel.use((draft) => draft.protagonist);
const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
const track = Duel.use((state) => state.protagonist.track);
const turret = Duel.use((state) => state.protagonist.turret);
const canvas = useThree((state) => state.gl.domElement);
const hullContainer = useRef<Group>(null);
const turretContainer = useRef<Group>(null);
const gunContainer = useRef<Group>(null);
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
const tankModelDefinition = useTankModelDefinition();
const turretModelDefinition =
tankModelDefinition.turrets[protagonist.turret.id];
@@ -63,13 +61,12 @@ export function TankModel() {
function onPointerDown(event: ThreeEvent<PointerEvent>) {
if (
isTrack &&
tankopediaEphemeralStore.getState().display ===
TankopediaDisplay.Model
TankopediaEphemeral.state.display === TankopediaDisplay.Model
) {
position.set(event.clientX, event.clientY);
event.stopPropagation();
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.controlsEnabled = false;
});
@@ -88,7 +85,7 @@ export function TankModel() {
translateTexture(deltaX + deltaY);
}
function handlePointerUp() {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.controlsEnabled = true;
});
@@ -130,10 +127,10 @@ export function TankModel() {
position.set(event.clientX, event.clientY);
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.controlsEnabled = false;
});
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.shot = undefined;
draft.highlightArmor = undefined;
});
@@ -169,7 +166,7 @@ export function TankModel() {
modelTransformEvent.dispatch({ pitch, yaw });
}
function handlePointerUp() {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.controlsEnabled = true;
});
window.removeEventListener('pointermove', handlePointerMove);
@@ -213,10 +210,10 @@ export function TankModel() {
function onPointerDown(event: ThreeEvent<PointerEvent>) {
event.stopPropagation();
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.controlsEnabled = false;
});
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.shot = undefined;
draft.highlightArmor = undefined;
});
@@ -255,7 +252,7 @@ export function TankModel() {
modelTransformEvent.dispatch({ pitch, yaw });
}
function handlePointerUp() {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.controlsEnabled = true;
});
window.removeEventListener('pointermove', handlePointerMove);
@@ -22,7 +22,6 @@ const skeletonMaterial = new ShaderMaterial({
export function TransitionSkeleton() {
const protagonist = Duel.use((draft) => draft.protagonist);
const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
const track = Duel.use((state) => state.protagonist.track);
const turret = Duel.use((state) => state.protagonist.turret);
const hullContainer = useRef<Group>(null);
@@ -34,7 +33,7 @@ export function TransitionSkeleton() {
const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
const { gltf } = useModel(protagonist.tank.id);
const nodes = Object.values(gltf.nodes);
const revealed = tankopediaEphemeralStore((state) => state.revealed);
const revealed = TankopediaEphemeral.use((state) => state.revealed);
useTankTransform(track, turret, turretContainer, gunContainer);
@@ -49,7 +49,6 @@ export const fogAnimationTime = 2.5;
export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
({ thicknessRange, naked }, ref) => {
const fog = useRef(new Fog('black', forNear1, fogFar1));
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
const canvas = useRef<HTMLCanvasElement>(null);
const hasImprovedVerticalStabilizer = useEquipment(122);
const hasDownImprovedVerticalStabilizer = useEquipment(124);
@@ -177,13 +176,13 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
useEffect(() => {
if (display !== TankopediaDisplay.DynamicArmor) {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.shot = undefined;
});
}
if (display !== TankopediaDisplay.StaticArmor) {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.highlightArmor = undefined;
});
}
@@ -201,7 +200,7 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
shadows="soft"
onPointerDown={handlePointerDown}
onPointerMissed={() => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.shot = undefined;
draft.highlightArmor = undefined;
});
@@ -38,7 +38,6 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
}, [protagonist]);
const duelStore = Duel.useStore();
const mutateDuel = Duel.useMutation();
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
useEffect(() => {
if (disturbed) {
@@ -55,7 +54,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
mutateDuel((draft) => {
draft.antagonist.shell = shells[index];
});
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.customShell = undefined;
});
}
@@ -21,7 +21,6 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
const { locale, strings } = useLocale();
const master = Duel.use((state) => state.protagonist.tank);
const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
const container = useRef<HTMLDivElement>(null);
const lines = useMemo(() => {
function extend(line: Line): Line[] {
@@ -148,7 +147,7 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
cursor: 'pointer',
}}
onClick={() => {
mutateTankopediaEphemeral((draft) => {
TankopediaEphemeral.mutate((draft) => {
draft.xpMultiplier = multiplier;
});
}}