TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-23 11:39:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade rest of them

Browse Source
This commit is contained in:
TrèsAbhi committed 2025-09-02 16:24:13 -05:00
1 parent fe4afdcbf0
commit 30e87743fc
63 files changed
+824 -1123
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx
+2 -3
View File
@@ -20,7 +20,6 @@ import { ArmorType } from "./SpacedArmorScene";
export function ArmorPlateDisplay() {
const highlightArmor = Tankopedia.use((state) => state.highlightArmor);
const developerMode = App.useDeferred((state) => state.developerMode, false);
const duelStore = Duel.useStore();
const input = useRef<HTMLInputElement>(null);
if (highlightArmor === undefined) return null;
@@ -93,7 +92,7 @@ export function ArmorPlateDisplay() {
Tankopedia.mutate((draft) => {
draft.highlightArmor = undefined;
const { protagonist } = duelStore.getState();
const { protagonist } = Duel.state;
const tank = draft.model;
const turret = tank.turrets[protagonist.turret.id];
const gun = turret.guns[protagonist.gun.id];
@@ -142,7 +141,7 @@ export function ArmorPlateDisplay() {
draft.highlightArmor = undefined;
const initialState = Tankopedia.initial;
const { protagonist } = duelStore.getState();
const { protagonist } = Duel.state;
const tank = draft.model;
const initialTank = initialState.model;
const turret = tank.turrets[protagonist.turret.id];
packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/index.tsx
+27 -31
View File
@@ -41,8 +41,6 @@ export function PrimaryArmorSceneComponent({
node,
thickness,
}: PrimaryArmorSceneComponentProps) {
const tankopediaPersistentStore = TankopediaPersistent.useStore();
const duelStore = Duel.useStore();
const material = new ShaderMaterial({
fragmentShader,
vertexShader,
@@ -80,9 +78,9 @@ export function PrimaryArmorSceneComponent({
useEffect(() => {
function handleShellChange() {
const duel = duelStore.getState();
const tankopediaEphemeral = Tankopedia.state;
const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
const shell =
tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
material.uniforms.caliber.value = shell.caliber;
material.uniforms.ricochet.value = degToRad(
@@ -96,8 +94,14 @@ export function PrimaryArmorSceneComponent({
material.uniforms.damage.value = shell.armor_damage;
material.uniforms.explosionRadius.value = shell.explosion_radius;
handleProtagonistEquipmentChange(duel.protagonist.equipmentMatrix, true);
handleAntagonistEquipmentChange(duel.antagonist.equipmentMatrix, true);
handleProtagonistEquipmentChange(
Duel.state.protagonist.equipmentMatrix,
true
);
handleAntagonistEquipmentChange(
Duel.state.antagonist.equipmentMatrix,
true
);
invalidate();
}
@@ -118,10 +122,9 @@ export function PrimaryArmorSceneComponent({
equipment: EquipmentMatrix,
noInvalidate = false
) {
const duel = duelStore.getState();
const hasEnhancedArmor = hasEquipment(
110,
duel.protagonist.tank.equipment_preset,
Duel.state.protagonist.tank.equipment_preset,
equipment
);
material.uniforms.thickness.value = hasEnhancedArmor
@@ -134,13 +137,13 @@ export function PrimaryArmorSceneComponent({
equipment: EquipmentMatrix,
noInvalidate = false
) {
const duel = duelStore.getState();
const tankopediaEphemeral = Tankopedia.state;
const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
const shell =
tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
const penetration = shell.penetration.near;
const hasCalibratedShells = hasEquipment(
103,
duel.antagonist.tank.equipment_preset,
Duel.state.antagonist.tank.equipment_preset,
equipment
);
@@ -151,40 +154,33 @@ export function PrimaryArmorSceneComponent({
if (!noInvalidate) invalidate();
}
const initialState = tankopediaPersistentStore.getState();
handleShellChange();
handleGreenPenetrationChange(initialState.greenPenetration);
handleAdvancedHighlightingChange(initialState.advancedHighlighting);
handleOpaqueChange(initialState.opaque);
handleWireframeChange(initialState.wireframe);
handleProtagonistEquipmentChange(
duelStore.getState().protagonist.equipmentMatrix
);
handleAntagonistEquipmentChange(
duelStore.getState().antagonist.equipmentMatrix
handleGreenPenetrationChange(TankopediaPersistent.state.greenPenetration);
handleAdvancedHighlightingChange(
TankopediaPersistent.state.advancedHighlighting
);
handleOpaqueChange(TankopediaPersistent.state.opaque);
handleWireframeChange(TankopediaPersistent.state.wireframe);
handleProtagonistEquipmentChange(Duel.state.protagonist.equipmentMatrix);
handleAntagonistEquipmentChange(Duel.state.antagonist.equipmentMatrix);
const unsubscribes = [
duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
Duel.on((state) => state.antagonist.shell, handleShellChange),
Tankopedia.on((state) => state.customShell, handleShellChange),
tankopediaPersistentStore.subscribe(
TankopediaPersistent.on(
(state) => state.greenPenetration,
handleGreenPenetrationChange
),
tankopediaPersistentStore.subscribe(
TankopediaPersistent.on(
(state) => state.advancedHighlighting,
handleAdvancedHighlightingChange
),
tankopediaPersistentStore.subscribe(
(state) => state.opaque,
handleOpaqueChange
),
duelStore.subscribe(
TankopediaPersistent.on((state) => state.opaque, handleOpaqueChange),
Duel.on(
(state) => state.protagonist.equipmentMatrix,
(equipment) => handleProtagonistEquipmentChange(equipment)
),
duelStore.subscribe(
Duel.on(
(state) => state.antagonist.equipmentMatrix,
(equipment) => handleAntagonistEquipmentChange(equipment)
),
packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubExternal/index.tsx
+11 -17
View File
@@ -29,7 +29,6 @@ export function SpacedArmorSubExternal({
variant,
clip,
}: SpacedArmorSubExternalProps) {
const duelStore = Duel.useStore();
const material = new ShaderMaterial({
fragmentShader,
vertexShader,
@@ -48,16 +47,15 @@ export function SpacedArmorSubExternal({
useEffect(() => {
function handleShellChange() {
const duel = duelStore.getState();
const tankopediaEphemeral = Tankopedia.state;
const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
const shell =
tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
material.uniforms.penetration.value = shell.penetration.near;
}
function handleProtagonistEquipmentChange(equipment: EquipmentMatrix) {
const duel = duelStore.getState();
const hasEnhancedArmor = hasEquipment(
110,
duel.protagonist.tank.equipment_preset,
Duel.state.protagonist.tank.equipment_preset,
equipment
);
material.uniforms.thickness.value = hasEnhancedArmor
@@ -65,13 +63,13 @@ export function SpacedArmorSubExternal({
: thickness;
}
function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
const duel = duelStore.getState();
const tankopediaEphemeral = Tankopedia.state;
const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
const shell =
tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
const penetration = shell.penetration.near;
const hasCalibratedShells = hasEquipment(
103,
duel.antagonist.tank.equipment_preset,
Duel.state.antagonist.tank.equipment_preset,
equipment
);
@@ -81,21 +79,17 @@ export function SpacedArmorSubExternal({
}
handleShellChange();
handleProtagonistEquipmentChange(
duelStore.getState().protagonist.equipmentMatrix
);
handleAntagonistEquipmentChange(
duelStore.getState().antagonist.equipmentMatrix
);
handleProtagonistEquipmentChange(Duel.state.protagonist.equipmentMatrix);
handleAntagonistEquipmentChange(Duel.state.antagonist.equipmentMatrix);
const unsubscribes = [
duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
Duel.on((state) => state.antagonist.shell, handleShellChange),
Tankopedia.on((state) => state.customShell, handleShellChange),
duelStore.subscribe(
Duel.on(
(state) => state.protagonist.equipmentMatrix,
handleProtagonistEquipmentChange
),
duelStore.subscribe(
Duel.on(
(state) => state.antagonist.equipmentMatrix,
handleAntagonistEquipmentChange
),
packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubSpaced/index.tsx
+11 -17
View File
@@ -30,7 +30,6 @@ export function SpacedArmorSubSpaced({
node,
thickness,
}: SpacedArmorSubSpacedProps) {
const duelStore = Duel.useStore();
const material = new ShaderMaterial({
fragmentShader,
vertexShader,
@@ -50,9 +49,9 @@ export function SpacedArmorSubSpaced({
useEffect(() => {
function handleShellChange() {
const duel = duelStore.getState();
const tankopediaEphemeral = Tankopedia.state;
const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
const shell =
tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
material.uniforms.penetration.value = shell.penetration.near;
material.uniforms.caliber.value = shell.caliber;
@@ -64,10 +63,9 @@ export function SpacedArmorSubSpaced({
);
}
function handleProtagonistEquipmentChange(equipment: EquipmentMatrix) {
const duel = duelStore.getState();
const hasEnhancedArmor = hasEquipment(
110,
duel.protagonist.tank.equipment_preset,
Duel.state.protagonist.tank.equipment_preset,
equipment
);
material.uniforms.thickness.value = hasEnhancedArmor
@@ -75,13 +73,13 @@ export function SpacedArmorSubSpaced({
: thickness;
}
function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
const duel = duelStore.getState();
const tankopediaEphemeral = Tankopedia.state;
const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
const shell =
tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
const penetration = shell.penetration.near;
const hasCalibratedShells = hasEquipment(
103,
duel.antagonist.tank.equipment_preset,
Duel.state.antagonist.tank.equipment_preset,
equipment
);
@@ -91,21 +89,17 @@ export function SpacedArmorSubSpaced({
}
handleShellChange();
handleProtagonistEquipmentChange(
duelStore.getState().protagonist.equipmentMatrix
);
handleAntagonistEquipmentChange(
duelStore.getState().antagonist.equipmentMatrix
);
handleProtagonistEquipmentChange(Duel.state.protagonist.equipmentMatrix);
handleAntagonistEquipmentChange(Duel.state.antagonist.equipmentMatrix);
const unsubscribes = [
duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
Duel.on((state) => state.antagonist.shell, handleShellChange),
Tankopedia.on((state) => state.customShell, handleShellChange),
duelStore.subscribe(
Duel.on(
(state) => state.protagonist.equipmentMatrix,
handleProtagonistEquipmentChange
),
duelStore.subscribe(
Duel.on(
(state) => state.antagonist.equipmentMatrix,
handleAntagonistEquipmentChange
),
packages/website/src/components/Armor/components/SpacedArmorSceneComponent/index.tsx
+5 -7
View File
@@ -76,7 +76,6 @@ export function SpacedArmorSceneComponent({
clip,
...props
}: SpacedArmorSceneComponentProps) {
const duelStore = Duel.useStore();
const camera = useThree((state) => state.camera);
const shoot = useCallback(
@@ -86,9 +85,8 @@ export function SpacedArmorSceneComponent({
allowRicochet: boolean,
remainingPenetrationInput?: number
) => {
const { antagonist, protagonist } = duelStore.getState();
const { customShell } = Tankopedia.state;
const shell = customShell ?? antagonist.shell;
const shell = customShell ?? Duel.state.antagonist.shell;
const cameraNormal = camera.position.clone().sub(point).normalize();
const shot: Shot = {
splashRadius:
@@ -104,13 +102,13 @@ export function SpacedArmorSceneComponent({
const hasCalibratedShells = hasEquipment(
103,
antagonist.tank.equipment_preset,
antagonist.equipmentMatrix
Duel.state.antagonist.tank.equipment_preset,
Duel.state.antagonist.equipmentMatrix
);
const hasEnhancedArmor = hasEquipment(
110,
protagonist.tank.equipment_preset,
protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const penetration =
shell.penetration.near *
packages/website/src/components/Armor/components/StaticArmor.tsx
+13 -16
View File
@@ -46,7 +46,7 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
const turretOrigin = correctZYTuple(tankModelDefinition.turret_origin);
const gunOrigin = correctZYTuple(turretModelDefinition.gun_origin);
const canvas = useThree((state) => state.gl.domElement);
const duelStore = Duel.useStore();
const maskOrigin =
gunModelDefinition.mask === undefined
? undefined
@@ -165,16 +165,15 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
window.addEventListener("pointerup", handlePointerUp);
}
function handlePointerMove(event: PointerEvent) {
const duel = duelStore.getState();
const hasImprovedVerticalStabilizer = hasEquipment(
122,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const hasDownImprovedVerticalStabilizer = hasEquipment(
124,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const boundingRect = canvas.getBoundingClientRect();
@@ -258,16 +257,15 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
window.addEventListener("pointerup", handlePointerUp);
}
function handlePointerMove(event: PointerEvent) {
const duel = duelStore.getState();
const hasImprovedVerticalStabilizer = hasEquipment(
122,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const hasDownImprovedVerticalStabilizer = hasEquipment(
124,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const boundingRect = canvas.getBoundingClientRect();
delta.set(event.clientX, event.clientY).sub(position);
@@ -339,16 +337,15 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
window.addEventListener("pointerup", handlePointerUp);
}
function handlePointerMove(event: PointerEvent) {
const duel = duelStore.getState();
const hasImprovedVerticalStabilizer = hasEquipment(
122,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const hasDownImprovedVerticalStabilizer = hasEquipment(
124,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const boundingRect = canvas.getBoundingClientRect();
delta.set(event.clientX, event.clientY).sub(position);
packages/website/src/components/Checks/index.tsx
+30 -34
View File
@@ -1,19 +1,19 @@
import { assertSecret, idToRegion } from '@blitzkit/core';
import { Button, Flex, Heading, Text } from '@radix-ui/themes';
import { useEffect, useState } from 'react';
import { assertSecret, idToRegion } from "@blitzkit/core";
import { Button, Flex, Heading, Text } from "@radix-ui/themes";
import { useEffect, useState } from "react";
import {
LocaleProvider,
useLocale,
type LocaleAcceptorProps,
} from '../../hooks/useLocale';
import { App } from '../../stores/app';
import { CURRENT_POLICIES_AGREEMENT_INDEX } from '../../stores/app/constants';
import { LinkI18n } from '../LinkI18n';
import './index.css';
} from "../../hooks/useLocale";
import { App } from "../../stores/app";
import { CURRENT_POLICIES_AGREEMENT_INDEX } from "../../stores/app/constants";
import { LinkI18n } from "../LinkI18n";
import "./index.css";
type Extension =
| {
status: 'ok';
status: "ok";
data: {
access_token: string;
account_id: number;
@@ -21,15 +21,13 @@ type Extension =
};
}
| {
status: 'error';
status: "error";
};
export function Checks({ locale }: LocaleAcceptorProps) {
return (
<LocaleProvider locale={locale}>
<App.Provider>
<Content />
</App.Provider>
<Content />
</LocaleProvider>
);
}
@@ -40,19 +38,17 @@ export function Checks({ locale }: LocaleAcceptorProps) {
function Content() {
const { locale } = useLocale();
const logins = App.use((state) => state.logins);
const mutateApp = App.useMutation();
const appStore = App.useStore();
const policiesAgreementIndex = App.use(
(state) => state.policiesAgreementIndex,
(state) => state.policiesAgreementIndex
);
const isLegal = window.location.pathname.startsWith('/legal');
const isLegal = window.location.pathname.startsWith("/legal");
const [showPoliciesAgreement, setShowPoliciesAgreement] = useState(false);
useEffect(() => {
function unsubscribe() {
window.removeEventListener('scroll', show);
window.removeEventListener('pointermove', show);
window.removeEventListener('pointerdown', show);
window.removeEventListener("scroll", show);
window.removeEventListener("pointermove", show);
window.removeEventListener("pointerdown", show);
}
function show() {
@@ -64,9 +60,9 @@ function Content() {
policiesAgreementIndex !== CURRENT_POLICIES_AGREEMENT_INDEX &&
!isLegal
) {
window.addEventListener('scroll', show);
window.addEventListener('pointermove', show);
window.addEventListener('pointerdown', show);
window.addEventListener("scroll", show);
window.addEventListener("pointermove", show);
window.addEventListener("pointerdown", show);
}
return unsubscribe;
@@ -78,25 +74,25 @@ function Content() {
const expiresInDays = expiresIn / 1000 / 60 / 60 / 24;
if (expiresInDays < 0) {
mutateApp((draft) => {
App.mutate((draft) => {
draft.logins.wargaming = undefined;
});
} else if (expiresInDays < 7) {
const { wargaming } = appStore.getState().logins;
const { wargaming } = App.state.logins;
if (!wargaming) return;
fetch(
`https://api.worldoftanks.${idToRegion(
wargaming.id,
wargaming.id
)}/wot/auth/prolongate/?application_id=${assertSecret(
import.meta.env.PUBLIC_WARGAMING_APPLICATION_ID,
)}&access_token=${wargaming.token}`,
import.meta.env.PUBLIC_WARGAMING_APPLICATION_ID
)}&access_token=${wargaming.token}`
)
.then((response) => response.json() as Promise<Extension>)
.then((json) => {
mutateApp((draft) => {
if (json.status === 'error') {
App.mutate((draft) => {
if (json.status === "error") {
draft.logins.wargaming = undefined;
} else {
draft.logins.wargaming = {
@@ -126,11 +122,11 @@ function Content() {
<Text>
This website utilizes cookies to perform analytics and personalize
your experience. You can learn more through{' '}
your experience. You can learn more through{" "}
<LinkI18n locale={locale} href="/docs/legal/privacy-policy">
our privacy policy
</LinkI18n>
. By using BlitzKit, you also agree to our{' '}
. By using BlitzKit, you also agree to our{" "}
<LinkI18n locale={locale} href="/docs/legal/terms-of-service">
terms of service
</LinkI18n>
@@ -141,8 +137,8 @@ function Content() {
<Button
mt="2"
onClick={() => {
appStore.setState({
policiesAgreementIndex: CURRENT_POLICIES_AGREEMENT_INDEX,
App.mutate((draft) => {
draft.policiesAgreementIndex = CURRENT_POLICIES_AGREEMENT_INDEX;
});
setShowPoliciesAgreement(false);
}}
packages/website/src/components/Embeds/Boolean.tsx
+4 -6
View File
@@ -1,16 +1,14 @@
import { Switch } from '@radix-ui/themes';
import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
import { EmbedState } from '../../stores/embedState';
import { Switch } from "@radix-ui/themes";
import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
import { EmbedState } from "../../stores/embedState";
export function Boolean({ configKey }: EmbedPreviewControllerProps) {
const mutateEmbedState = EmbedState.useMutation();
return (
<Switch
variant="classic"
checked={EmbedState.use((state) => state[configKey] as boolean)}
onCheckedChange={() => {
mutateEmbedState((draft) => {
EmbedState.mutate((draft) => {
draft[configKey] = !draft[configKey];
});
}}
packages/website/src/components/Embeds/Color.tsx
+4 -5
View File
@@ -1,16 +1,15 @@
import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
import { EmbedState } from '../../stores/embedState';
import { ColorControllerRaw } from './ColorControllerRaw';
import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
import { EmbedState } from "../../stores/embedState";
import { ColorControllerRaw } from "./ColorControllerRaw";
export function Color({ configKey }: EmbedPreviewControllerProps) {
const mutateEmbedState = EmbedState.useMutation();
const color = EmbedState.use((state) => state[configKey] as string);
return (
<ColorControllerRaw
value={color}
onValueChange={(value) => {
mutateEmbedState((draft) => {
EmbedState.mutate((draft) => {
draft[configKey] = value;
});
}}
packages/website/src/components/Embeds/Enum.tsx
+6 -7
View File
@@ -1,11 +1,11 @@
import { Select } from '@radix-ui/themes';
import { useLocale } from '../../hooks/useLocale';
import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
import { EmbedState } from '../../stores/embedState';
import { Select } from "@radix-ui/themes";
import { useLocale } from "../../hooks/useLocale";
import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
import { EmbedState } from "../../stores/embedState";
import type {
EmbedConfigItemType,
EmbedItemType,
} from '../../stores/embedState/constants';
} from "../../stores/embedState/constants";
export function Enum({
configKey,
@@ -13,14 +13,13 @@ export function Enum({
}: EmbedPreviewControllerProps & {
config: EmbedConfigItemType<EmbedItemType.Enum>;
}) {
const mutateEmbedState = EmbedState.useMutation();
const { locale } = useLocale();
return (
<Select.Root
value={EmbedState.use((state) => state[configKey] as string)}
onValueChange={(value) => {
mutateEmbedState((draft) => {
EmbedState.mutate((draft) => {
draft[configKey] = value;
});
}}
packages/website/src/components/Embeds/GenerateURL.tsx
+21 -24
View File
@@ -2,9 +2,9 @@ import {
searchPlayersAcrossRegions,
type AccountListItem,
type AccountListWithServer,
} from '@blitzkit/core';
import { literals } from '@blitzkit/i18n/src/literals';
import { CaretLeftIcon, Link2Icon, PersonIcon } from '@radix-ui/react-icons';
} from "@blitzkit/core";
import { literals } from "@blitzkit/i18n/src/literals";
import { CaretLeftIcon, Link2Icon, PersonIcon } from "@radix-ui/react-icons";
import {
Button,
Dialog,
@@ -13,15 +13,15 @@ import {
Spinner,
Text,
TextField,
} from '@radix-ui/themes';
import { debounce } from 'lodash-es';
import { useCallback, useRef, useState } from 'react';
import { stringify } from 'urlon';
import type { embedConfigurations } from '../../constants/embeds';
import { useLocale } from '../../hooks/useLocale';
import { EmbedState, type EmbedStateStore } from '../../stores/embedState';
import { CopyButton } from '../CopyButton';
import { SearchResults } from '../SearchResults';
} from "@radix-ui/themes";
import { debounce } from "lodash-es";
import { useCallback, useRef, useState } from "react";
import { stringify } from "urlon";
import type { embedConfigurations } from "../../constants/embeds";
import { useLocale } from "../../hooks/useLocale";
import { EmbedState, type EmbedStateStore } from "../../stores/embedState";
import { CopyButton } from "../CopyButton";
import { SearchResults } from "../SearchResults";
interface GenerateURLProps {
embed: keyof typeof embedConfigurations;
@@ -31,7 +31,6 @@ export function GenerateURL({ embed }: GenerateURLProps) {
const [searchDialogOpen, setSearchDialogOpen] = useState(false);
const [copyDialogOpen, setCopyDialogOpen] = useState(false);
const [copyUser, setCopyUser] = useState<AccountListItem | null>(null);
const embedStateStore = EmbedState.useStore();
const input = useRef<HTMLInputElement>(null);
const [searching, setSearching] = useState(false);
const [results, setResults] = useState<AccountListWithServer>([]);
@@ -52,7 +51,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
setSearching(false);
setResults(results);
}, 500),
[],
[]
);
const handleChange = useCallback(() => {
if (!input.current) return;
@@ -94,7 +93,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
<TextField.Root
variant="classic"
mt="4"
style={{ width: '20rem' }}
style={{ width: "20rem" }}
placeholder={strings.website.common.player_search.hint}
ref={input}
onChange={handleChange}
@@ -136,7 +135,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
</Flex>
<Dialog.Close>
<Button color="red" variant="outline" style={{ width: '100%' }}>
<Button color="red" variant="outline" style={{ width: "100%" }}>
{strings.website.tools.embed.configuration.export.generate.cancel}
</Button>
</Dialog.Close>
@@ -144,7 +143,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
</Dialog.Root>
<Dialog.Root open={copyDialogOpen} onOpenChange={setCopyDialogOpen}>
<Dialog.Content style={{ width: 'fit-content' }}>
<Dialog.Content style={{ width: "fit-content" }}>
<Flex direction="column" gap="1">
<Heading size="5">
{
@@ -156,7 +155,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
{literals(
strings.website.tools.embed.configuration.export.generate
.success.info,
[`${copyUser?.nickname}`],
[`${copyUser?.nickname}`]
)}
</Text>
</Flex>
@@ -170,7 +169,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
setSearchDialogOpen(true);
}}
>
<CaretLeftIcon />{' '}
<CaretLeftIcon />{" "}
{
strings.website.tools.embed.configuration.export.generate
.success.back
@@ -181,12 +180,10 @@ export function GenerateURL({ embed }: GenerateURLProps) {
copy={() => {
if (!copyUser) return;
const state = embedStateStore.getState();
const initial = embedStateStore.getInitialState();
const shallowState: EmbedStateStore = {};
Object.entries(state).forEach(([key, value]) => {
if (value !== initial[key]) {
Object.entries(EmbedState.state).forEach(([key, value]) => {
if (value !== EmbedState.initial[key]) {
shallowState[key] = value;
}
});
@@ -202,7 +199,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
return `${location.origin}/embed/${embed}/host?${searchParams.toString()}`;
}}
>
<Link2Icon />{' '}
<Link2Icon />{" "}
{
strings.website.tools.embed.configuration.export.generate
.success.copy
packages/website/src/components/Embeds/Import.tsx
+8 -9
View File
@@ -6,17 +6,16 @@ import {
Text,
TextField,
Tooltip,
} from '@radix-ui/themes';
import { useRef, useState } from 'react';
import { parse } from 'urlon';
import { useLocale } from '../../hooks/useLocale';
import { EmbedState } from '../../stores/embedState';
} from "@radix-ui/themes";
import { useRef, useState } from "react";
import { parse } from "urlon";
import { useLocale } from "../../hooks/useLocale";
import { EmbedState } from "../../stores/embedState";
export function Import() {
const importInput = useRef<HTMLInputElement>(null);
const [showInvalidURLPrompt, setShowInvalidURLPrompt] = useState(false);
const [showConfirmation, setConfirmation] = useState(false);
const mutateEmbedState = EmbedState.useMutation();
const { strings } = useLocale();
return (
@@ -64,15 +63,15 @@ export function Import() {
try {
const url = new URL(importInput.current.value);
const state = url.searchParams.get('state');
const state = url.searchParams.get("state");
if (state === null) throw undefined;
const json = parse(state);
mutateEmbedState((draft) => {
EmbedState.mutate((draft) => {
Object.assign(draft, json);
});
importInput.current.value = '';
importInput.current.value = "";
setConfirmation(true);
setTimeout(() => setConfirmation(false), 2000);
} catch {
packages/website/src/components/Embeds/Radius.tsx
+6 -8
View File
@@ -1,10 +1,8 @@
import { Slider } from '@radix-ui/themes';
import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
import { EmbedState, type RadixRadius } from '../../stores/embedState';
import { Slider } from "@radix-ui/themes";
import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
import { EmbedState, type RadixRadius } from "../../stores/embedState";
export function Radius({ configKey }: EmbedPreviewControllerProps) {
const mutateEmbedState = EmbedState.useMutation();
return (
<Slider
variant="classic"
@@ -13,12 +11,12 @@ export function Radius({ configKey }: EmbedPreviewControllerProps) {
value={[
EmbedState.use((state) => {
const radius = state[configKey] as RadixRadius;
return radius === 'full' ? 5 : parseInt(radius);
return radius === "full" ? 5 : parseInt(radius);
}),
]}
onValueChange={([value]) => {
mutateEmbedState((draft) => {
draft[configKey] = value === 5 ? 'full' : `${value}`;
EmbedState.mutate((draft) => {
draft[configKey] = value === 5 ? "full" : `${value}`;
});
}}
/>
packages/website/src/components/Embeds/RichText.tsx
+13 -16
View File
@@ -1,21 +1,18 @@
import { FontBoldIcon, FontSizeIcon } from '@radix-ui/react-icons';
import { Flex, Slider, Text } from '@radix-ui/themes';
import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
import { EmbedState, type RadixSizeWithout0 } from '../../stores/embedState';
import { FontBoldIcon, FontSizeIcon } from "@radix-ui/react-icons";
import { Flex, Slider, Text } from "@radix-ui/themes";
import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
import { EmbedState, type RadixSizeWithout0 } from "../../stores/embedState";
import {
radixTextWeights,
type EmbedConfigItemType,
type EmbedItemType,
} from '../../stores/embedState/constants';
import { ColorControllerRaw } from './ColorControllerRaw';
} from "../../stores/embedState/constants";
import { ColorControllerRaw } from "./ColorControllerRaw";
export function RichText({ configKey }: EmbedPreviewControllerProps) {
const mutateEmbedState = EmbedState.useMutation();
const state = EmbedState.use(
(state) =>
state[
configKey
] as EmbedConfigItemType<EmbedItemType.RichText>['default'],
state[configKey] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
);
return (
@@ -24,11 +21,11 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
<ColorControllerRaw
value={state.color}
onValueChange={(value) => {
mutateEmbedState((draft) => {
EmbedState.mutate((draft) => {
(
draft[
configKey
] as EmbedConfigItemType<EmbedItemType.RichText>['default']
] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
).color = value;
});
}}
@@ -45,11 +42,11 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
max={9}
value={[Number(state.size)]}
onValueChange={([value]) => {
mutateEmbedState((draft) => {
EmbedState.mutate((draft) => {
(
draft[
configKey
] as EmbedConfigItemType<EmbedItemType.RichText>['default']
] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
).size = `${value}` as RadixSizeWithout0;
});
}}
@@ -66,11 +63,11 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
max={radixTextWeights.length - 1}
value={[radixTextWeights.indexOf(state.weight)]}
onValueChange={([value]) => {
mutateEmbedState((draft) => {
EmbedState.mutate((draft) => {
(
draft[
configKey
] as EmbedConfigItemType<EmbedItemType.RichText>['default']
] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
).weight = radixTextWeights[value];
});
}}
packages/website/src/components/Embeds/Size.tsx
+4 -6
View File
@@ -1,10 +1,8 @@
import { Slider } from '@radix-ui/themes';
import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
import { EmbedState, type RadixSize } from '../../stores/embedState';
import { Slider } from "@radix-ui/themes";
import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
import { EmbedState, type RadixSize } from "../../stores/embedState";
export function Size({ configKey }: EmbedPreviewControllerProps) {
const mutateEmbedState = EmbedState.useMutation();
return (
<Slider
variant="classic"
@@ -14,7 +12,7 @@ export function Size({ configKey }: EmbedPreviewControllerProps) {
EmbedState.use((state) => parseInt(state[configKey] as RadixSize)),
]}
onValueChange={([value]) => {
mutateEmbedState((draft) => {
EmbedState.mutate((draft) => {
draft[configKey] = `${value}`;
});
}}
packages/website/src/components/Embeds/SizeWithout0.tsx
+5 -7
View File
@@ -1,10 +1,8 @@
import { Slider } from '@radix-ui/themes';
import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
import { EmbedState, type RadixSizeWithout0 } from '../../stores/embedState';
import { Slider } from "@radix-ui/themes";
import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
import { EmbedState, type RadixSizeWithout0 } from "../../stores/embedState";
export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) {
const mutateEmbedState = EmbedState.useMutation();
return (
<Slider
variant="classic"
@@ -12,11 +10,11 @@ export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) {
max={9}
value={[
EmbedState.use((state) =>
parseInt(state[configKey] as RadixSizeWithout0),
parseInt(state[configKey] as RadixSizeWithout0)
),
]}
onValueChange={([value]) => {
mutateEmbedState((draft) => {
EmbedState.mutate((draft) => {
draft[configKey] = `${value}`;
});
}}
packages/website/src/components/Embeds/Slider.tsx
+5 -7
View File
@@ -1,10 +1,10 @@
import { Slider as RadixSlider } from '@radix-ui/themes';
import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
import { EmbedState, type RadixSize } from '../../stores/embedState';
import { Slider as RadixSlider } from "@radix-ui/themes";
import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
import { EmbedState, type RadixSize } from "../../stores/embedState";
import type {
EmbedConfigItemType,
EmbedItemType,
} from '../../stores/embedState/constants';
} from "../../stores/embedState/constants";
export function Slider({
configKey,
@@ -12,8 +12,6 @@ export function Slider({
}: EmbedPreviewControllerProps & {
config: EmbedConfigItemType<EmbedItemType.Slider>;
}) {
const mutateEmbedState = EmbedState.useMutation();
return (
<RadixSlider
variant="classic"
@@ -23,7 +21,7 @@ export function Slider({
EmbedState.use((state) => parseInt(state[configKey] as RadixSize)),
]}
onValueChange={([value]) => {
mutateEmbedState((draft) => {
EmbedState.mutate((draft) => {
draft[configKey] = value;
});
}}
packages/website/src/components/Embeds/TextController.tsx
+4 -6
View File
@@ -1,17 +1,15 @@
import { TextField } from '@radix-ui/themes';
import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
import { EmbedState } from '../../stores/embedState';
import { TextField } from "@radix-ui/themes";
import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
import { EmbedState } from "../../stores/embedState";
export function TextController({ configKey }: EmbedPreviewControllerProps) {
const mutateEmbedState = EmbedState.useMutation();
return (
<TextField.Root
variant="classic"
placeholder="Empty"
value={EmbedState.use((state) => state[configKey] as string)}
onChange={(event) => {
mutateEmbedState((draft) => {
EmbedState.mutate((draft) => {
draft[configKey] = event.target.value;
});
}}
packages/website/src/components/GuessBackground/index.tsx
+1 -2
View File
@@ -17,10 +17,9 @@ const [modelDefinitions, provisionDefinitions] = await Promise.all([
export function GuessBackground() {
const guessState = Guess.use((state) => state.guessState);
const tank = Guess.use((state) => state.tank);
const mutateDuel = Duel.useMutation();
useEffect(() => {
mutateDuel((state) => {
Duel.mutate((state) => {
state.protagonist = tankToDuelMember(tank, provisionDefinitions);
});
Tankopedia.mutate((state) => {
packages/website/src/components/HomePageHotTanks.tsx
+9 -12
View File
@@ -1,15 +1,14 @@
import { literals } from '@blitzkit/i18n/src/literals';
import { EyeOpenIcon } from '@radix-ui/react-icons';
import { Box, Flex, Heading, Text } from '@radix-ui/themes';
import { awaitablePopularTanks } from '../core/awaitables/popularTanks';
import { awaitableTankDefinitions } from '../core/awaitables/tankDefinitions';
import { literals } from "@blitzkit/i18n/src/literals";
import { EyeOpenIcon } from "@radix-ui/react-icons";
import { Box, Flex, Heading, Text } from "@radix-ui/themes";
import { awaitablePopularTanks } from "../core/awaitables/popularTanks";
import { awaitableTankDefinitions } from "../core/awaitables/tankDefinitions";
import {
LocaleProvider,
useLocale,
type LocaleAcceptorProps,
} from '../hooks/useLocale';
import { TankopediaPersistent } from '../stores/tankopediaPersistent';
import { TankCard } from './TankCard';
} from "../hooks/useLocale";
import { TankCard } from "./TankCard";
const [tankDefinitions, popularTanks] = await Promise.all([
awaitableTankDefinitions,
@@ -19,9 +18,7 @@ const [tankDefinitions, popularTanks] = await Promise.all([
export function HomePageHotTanks({ locale }: LocaleAcceptorProps) {
return (
<LocaleProvider locale={locale}>
<TankopediaPersistent.Provider>
<Content />
</TankopediaPersistent.Provider>
<Content />
</LocaleProvider>
);
}
@@ -35,7 +32,7 @@ function Content() {
{strings.website.home.hot_tanks.title}
</Heading>
<Text color="gray" align="center" mb="5" size="2">
{literals(strings.website.home.hot_tanks.subtitle, ['7'])}
{literals(strings.website.home.hot_tanks.subtitle, ["7"])}
</Text>
<Flex justify="center" gap="4" wrap="wrap">
packages/website/src/components/NavbarAccount/index.tsx
+60 -73
View File
@@ -1,4 +1,4 @@
import { PersonIcon } from '@radix-ui/react-icons';
import { PersonIcon } from "@radix-ui/react-icons";
import {
Button,
Flex,
@@ -6,91 +6,78 @@ import {
Popover,
Skeleton,
Text,
} from '@radix-ui/themes';
import { Suspense } from 'react';
import { App } from '../../stores/app';
import { BlitzKitTheme } from '../BlitzKitTheme';
import { WargamingAccountName } from '../WargamingAccountName';
import { WargamingIcon } from '../WargamingIcon';
import { WargamingLoginButton } from '../WargamingLoginButton';
} from "@radix-ui/themes";
import { Suspense } from "react";
import { App } from "../../stores/app";
import { BlitzKitTheme } from "../BlitzKitTheme";
import { WargamingAccountName } from "../WargamingAccountName";
import { WargamingIcon } from "../WargamingIcon";
import { WargamingLoginButton } from "../WargamingLoginButton";
export function NavbarAccount() {
return (
<App.Provider>
<Content />
</App.Provider>
);
}
function Content() {
const logins = App.use((state) => state.logins);
const mutateApp = App.useMutation();
return (
<App.Provider>
<Popover.Root>
<Popover.Trigger>
<IconButton variant="ghost" color="gray">
<PersonIcon />
</IconButton>
</Popover.Trigger>
<Popover.Root>
<Popover.Trigger>
<IconButton variant="ghost" color="gray">
<PersonIcon />
</IconButton>
</Popover.Trigger>
<BlitzKitTheme style={{ display: 'contents' }}>
<Popover.Content
align="end"
width="320px"
onOpenAutoFocus={(event) => event.preventDefault()}
>
{logins.wargaming && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Logged in accounts
</Text>
<BlitzKitTheme style={{ display: "contents" }}>
<Popover.Content
align="end"
width="320px"
onOpenAutoFocus={(event) => event.preventDefault()}
>
{logins.wargaming && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Logged in accounts
</Text>
{logins.wargaming && (
<Flex align="center" gap="2" justify="center">
<WargamingIcon width={15} height={15} />
<Text>
<Suspense
fallback={<Skeleton height="1em" width="5rem" />}
>
<WargamingAccountName />
</Suspense>
</Text>
<Button
color="red"
variant="ghost"
onClick={() => {
mutateApp((draft) => {
draft.logins.wargaming = undefined;
});
}}
>
Logout
</Button>
</Flex>
)}
</Flex>
)}
{logins.wargaming && (
<Flex align="center" gap="2" justify="center">
<WargamingIcon width={15} height={15} />
<Text>
<Suspense fallback={<Skeleton height="1em" width="5rem" />}>
<WargamingAccountName />
</Suspense>
</Text>
<Button
color="red"
variant="ghost"
onClick={() => {
App.mutate((draft) => {
draft.logins.wargaming = undefined;
});
}}
>
Logout
</Button>
</Flex>
)}
</Flex>
)}
{/* {!logins. !== !logins.wargaming && (
{/* {!logins. !== !logins.wargaming && (
<Inset side="x">
<Separator my="4" size="4" />
</Inset>
)} */}
{!logins.wargaming && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Log in with...
</Text>
{!logins.wargaming && (
<Flex direction="column" gap="2">
<Text align="center" color="gray">
Log in with...
</Text>
{!logins.wargaming && <WargamingLoginButton />}
</Flex>
)}
</Popover.Content>
</BlitzKitTheme>
</Popover.Root>
</App.Provider>
{!logins.wargaming && <WargamingLoginButton />}
</Flex>
)}
</Popover.Content>
</BlitzKitTheme>
</Popover.Root>
);
}
packages/website/src/components/Performance/Header.tsx
+14 -10
View File
@@ -2,16 +2,15 @@ import {
CaretDownIcon,
CaretSortIcon,
CaretUpIcon,
} from '@radix-ui/react-icons';
import { Button, Flex, Table } from '@radix-ui/themes';
import { useLocale } from '../../hooks/useLocale';
import { TankPerformanceSort } from '../../stores/tankPerformanceSort';
import { TankPerformanceSortTypeNamesArray } from '../../stores/tankPerformanceSort/constants';
import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
} from "@radix-ui/react-icons";
import { Button, Flex, Table } from "@radix-ui/themes";
import { useLocale } from "../../hooks/useLocale";
import { TankPerformanceSort } from "../../stores/tankPerformanceSort";
import { TankPerformanceSortTypeNamesArray } from "../../stores/tankPerformanceSort/constants";
import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
export function Header() {
const sort = TankPerformanceSort.use();
const store = TankPerformanceSort.useStore();
const { strings } = useLocale();
return (
@@ -34,13 +33,18 @@ export function Header() {
<Flex align="center" gap="1">
<Button
variant="ghost"
color={isSelected ? undefined : 'gray'}
color={isSelected ? undefined : "gray"}
highContrast={!isSelected}
onClick={() => {
if (isSelected) {
store.setState({ direction: -sort.direction as 1 | -1 });
TankPerformanceSort.mutate((draft) => {
draft.direction *= -1;
});
} else {
store.setState({ type, direction: -1 });
TankPerformanceSort.mutate((draft) => {
draft.type = type;
draft.direction = -1;
});
}
}}
>
packages/website/src/components/Plugs.tsx
+8 -17
View File
@@ -1,20 +1,11 @@
import { assertSecret } from '@blitzkit/core';
import { ArrowRightIcon } from '@radix-ui/react-icons';
import { Button, Code, Flex, Link, Text } from '@radix-ui/themes';
import { App } from '../stores/app';
import { assertSecret } from "@blitzkit/core";
import { ArrowRightIcon } from "@radix-ui/react-icons";
import { Button, Code, Flex, Link, Text } from "@radix-ui/themes";
export function Plugs() {
return (
<App.Provider>
<Content />
</App.Provider>
);
}
function Content() {
const promoteOpentest =
assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === 'true' &&
assertSecret(import.meta.env.PUBLIC_BRANCH) !== 'opentest';
assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === "true" &&
assertSecret(import.meta.env.PUBLIC_BRANCH) !== "opentest";
const promotions = [promoteOpentest];
if (promotions.every((promotion) => !promotion)) return null;
@@ -31,11 +22,11 @@ function Content() {
{promoteOpentest && (
<Flex direction="column" gap="3" align="center">
<Text size="5">
BlitzKit{' '}
BlitzKit{" "}
<Code variant="outline" size="4" color="gray">
opentest
</Code>{' '}
is available now{' '}
</Code>{" "}
is available now{" "}
</Text>
<Link href="https://opentest.blitzkit.app/" target="_blank">
packages/website/src/components/TankCard/index.tsx
+21 -21
View File
@@ -3,16 +3,16 @@ import {
fetchTankDefinitions,
TankType,
type TankDefinition,
} from '@blitzkit/core';
import { Flex, Text, type TextProps } from '@radix-ui/themes';
import { uniq } from 'lodash-es';
import { forwardRef, type ReactNode } from 'react';
import { useLocale } from '../../hooks/useLocale';
import { TankopediaPersistent } from '../../stores/tankopediaPersistent';
import { classIcons } from '../ClassIcon';
import { LinkI18n } from '../LinkI18n';
import { MAX_RECENTLY_VIEWED } from '../TankSearch/constants';
import './index.css';
} from "@blitzkit/core";
import { Flex, Text, type TextProps } from "@radix-ui/themes";
import { uniq } from "lodash-es";
import { forwardRef, type ReactNode } from "react";
import { useLocale } from "../../hooks/useLocale";
import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
import { classIcons } from "../ClassIcon";
import { LinkI18n } from "../LinkI18n";
import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants";
import "./index.css";
type TankCardProps = TextProps & {
tank: TankDefinition;
@@ -33,11 +33,11 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
style,
...props
}: TankCardProps,
ref,
ref
) => {
const { unwrap, locale } = useLocale();
const provideLink = !noLink && onSelect === undefined;
const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
const Icon = classIcons[tank.class];
return (
@@ -47,15 +47,15 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
size="2"
color={
tank.type === TankType.COLLECTOR
? 'blue'
? "blue"
: tank.type === TankType.PREMIUM
? 'amber'
: 'gray'
? "amber"
: "gray"
}
highContrast={tank.type === TankType.RESEARCHABLE}
onClick={() => {
onSelect?.(tank);
mutateTankopediaPersistent((draft) => {
TankopediaPersistent.mutate((draft) => {
draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
.filter((id) => id in tankDefinitions.tanks)
.slice(0, MAX_RECENTLY_VIEWED);
@@ -73,7 +73,7 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
locale={locale}
className="link"
underline="hover"
href={provideLink ? `/tanks/${tank.slug}` : '#'}
href={provideLink ? `/tanks/${tank.slug}` : "#"}
onClick={(event) => {
if (!provideLink) event.preventDefault();
}}
@@ -104,9 +104,9 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
color="gray"
align="center"
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{discriminator}
@@ -115,5 +115,5 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
</LinkI18n>
</Text>
);
},
}
);
packages/website/src/components/TankSearch/components/RecentlyViewed.tsx
+3 -4
View File
@@ -12,12 +12,11 @@ import { TankCardWrapper } from "./TankCardWrapper";
const tankDefinitions = await awaitableTankDefinitions;
export function RecentlyViewed() {
const tankopediaPersistentStore = TankopediaPersistent.useStore();
const filters = TankFilters.use();
// non-reactive because it is a little weird that it updates instantly even before the page loads
const recentlyViewed = tankopediaPersistentStore
.getState()
.recentlyViewed.filter((id) => id in tankDefinitions.tanks);
const recentlyViewed = TankopediaPersistent.state.recentlyViewed.filter(
(id) => id in tankDefinitions.tanks
);
const hasFilters = useMemo(
() =>
Object.entries(filters).some(([key, value]) => {
packages/website/src/components/TankSearch/index.tsx
+2 -2
View File
@@ -54,7 +54,7 @@ const [gameDefinitions, modelDefinitions, tankDefinitions, tankNames] =
export const TankSearch = memo<TankSearchProps>(
({ compact, onSelect, onSelectAll, skeleton, ...props }) => {
const { strings, locale } = useLocale();
const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
const awaitedTanksDefinitionsArray = Object.values(tankDefinitions.tanks);
const tankopediaSort = TankSort.use();
const tankFilters = TankFilters.use();
@@ -443,7 +443,7 @@ export const TankSearch = memo<TankSearchProps>(
onClick={(event) => {
event.preventDefault();
onSelectAll(tanksFiltered);
mutateTankopediaPersistent((draft) => {
TankopediaPersistent.mutate((draft) => {
draft.recentlyViewed = uniq([
...tanksFiltered.map(({ id }) => id),
...draft.recentlyViewed,
packages/website/src/components/Tankopedia/CalloutsSection.tsx
+13 -14
View File
@@ -1,24 +1,23 @@
import { assertSecret, fetchTankDefinitions } from '@blitzkit/core';
import { MinusCircledIcon } from '@radix-ui/react-icons';
import { Callout, Flex } from '@radix-ui/themes';
import { uniq } from 'lodash-es';
import { useEffect } from 'react';
import { Duel } from '../../stores/duel';
import { TankopediaPersistent } from '../../stores/tankopediaPersistent';
import { AesonPlug } from '../AesonPlug';
import { ExperimentIcon } from '../ExperimentIcon';
import { MAX_RECENTLY_VIEWED } from '../TankSearch/constants';
import { assertSecret, fetchTankDefinitions } from "@blitzkit/core";
import { MinusCircledIcon } from "@radix-ui/react-icons";
import { Callout, Flex } from "@radix-ui/themes";
import { uniq } from "lodash-es";
import { useEffect } from "react";
import { Duel } from "../../stores/duel";
import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
import { AesonPlug } from "../AesonPlug";
import { ExperimentIcon } from "../ExperimentIcon";
import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants";
const tankDefinitions = await fetchTankDefinitions();
export function CalloutsSection() {
const tank = Duel.use((state) => state.protagonist.tank);
const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
const promoteAeson =
assertSecret(import.meta.env.PUBLIC_BRANCH) === 'preview';
assertSecret(import.meta.env.PUBLIC_BRANCH) === "preview";
useEffect(() => {
mutateTankopediaPersistent((draft) => {
TankopediaPersistent.mutate((draft) => {
draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
.filter((id) => id in tankDefinitions.tanks)
.slice(0, MAX_RECENTLY_VIEWED);
@@ -45,7 +44,7 @@ export function CalloutsSection() {
{tank.testing && (
<Callout.Root color="red">
<Callout.Icon>
<ExperimentIcon style={{ width: '1em', height: '1em' }} />
<ExperimentIcon style={{ width: "1em", height: "1em" }} />
</Callout.Icon>
<Callout.Text>
Tanks in testing are subject to change and may not represent the
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/AssaultRangesVisualizer/components/Cursor/index.tsx
+28 -29
View File
@@ -1,14 +1,14 @@
import { DragHandleDots2Icon } from '@radix-ui/react-icons';
import { Box, Flex, Text } from '@radix-ui/themes';
import { useEffect, useRef, useState } from 'react';
import { clamp } from 'three/src/math/MathUtils.js';
import { DragHandleDots2Icon } from "@radix-ui/react-icons";
import { Box, Flex, Text } from "@radix-ui/themes";
import { useEffect, useRef, useState } from "react";
import { clamp } from "three/src/math/MathUtils.js";
import {
fakeLogSquishyHigh,
fakeLogSquishyHighInverse,
} from '../../../../../../../../../core/blitzkit/fakeLog';
import { Var } from '../../../../../../../../../core/radix/var';
import { Duel } from '../../../../../../../../../stores/duel';
import './index.css';
} from "../../../../../../../../../core/blitzkit/fakeLog";
import { Var } from "../../../../../../../../../core/radix/var";
import { Duel } from "../../../../../../../../../stores/duel";
import "./index.css";
interface Props {
maxDistance: number;
@@ -17,11 +17,10 @@ interface Props {
export function AssaultCursor({ maxDistance, maxFakeDistance }: Props) {
const assaultDistance = Duel.use(
(state) => state.protagonist.assaultDistance,
(state) => state.protagonist.assaultDistance
);
const [x, setX] = useState(fakeLogSquishyHigh(assaultDistance / maxDistance));
const cursor = useRef<HTMLDivElement>(null);
const mutateDuel = Duel.useMutation();
useEffect(() => {
let localX = x;
@@ -32,8 +31,8 @@ export function AssaultCursor({ maxDistance, maxFakeDistance }: Props) {
lastX = event.clientX;
window.addEventListener('pointermove', handlePointerMove);
window.addEventListener('pointerup', handlePointerUp);
window.addEventListener("pointermove", handlePointerMove);
window.addEventListener("pointerup", handlePointerUp);
}
function handlePointerMove(event: PointerEvent) {
@@ -54,21 +53,21 @@ export function AssaultCursor({ maxDistance, maxFakeDistance }: Props) {
}
function handlePointerUp() {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.assaultDistance =
fakeLogSquishyHighInverse(localX * maxFakeDistance) * maxDistance;
});
window.removeEventListener('pointermove', handlePointerMove);
window.removeEventListener('pointerup', handlePointerUp);
window.removeEventListener("pointermove", handlePointerMove);
window.removeEventListener("pointerup", handlePointerUp);
}
cursor.current?.addEventListener('pointerdown', handlePointerDown);
cursor.current?.addEventListener("pointerdown", handlePointerDown);
return () => {
cursor.current?.removeEventListener('pointerdown', handlePointerDown);
window.removeEventListener('pointermove', handlePointerMove);
window.removeEventListener('pointerup', handlePointerUp);
cursor.current?.removeEventListener("pointerdown", handlePointerDown);
window.removeEventListener("pointermove", handlePointerMove);
window.removeEventListener("pointerup", handlePointerUp);
};
}, []);
@@ -82,9 +81,9 @@ export function AssaultCursor({ maxDistance, maxFakeDistance }: Props) {
width="2pt"
id="assault-cursor"
style={{
touchAction: 'none',
transform: 'translateX(-50%)',
backgroundColor: Var('accent-11'),
touchAction: "none",
transform: "translateX(-50%)",
backgroundColor: Var("accent-11"),
}}
>
<Flex
@@ -93,19 +92,19 @@ export function AssaultCursor({ maxDistance, maxFakeDistance }: Props) {
position="absolute"
left="50%"
bottom="100%"
style={{ transform: 'translateX(-50%)' }}
style={{ transform: "translateX(-50%)" }}
>
<Flex
align="center"
justify="center"
style={{
width: '1.5rem',
height: '1.5rem',
backgroundColor: Var('accent-9'),
borderRadius: `50% 50% ${Var('radius-1')} ${Var('radius-1')}`,
width: "1.5rem",
height: "1.5rem",
backgroundColor: Var("accent-9"),
borderRadius: `50% 50% ${Var("radius-1")} ${Var("radius-1")}`,
}}
>
<Text style={{ display: 'flex' }} highContrast color="purple">
<Text style={{ display: "flex" }} highContrast color="purple">
<DragHandleDots2Icon />
</Text>
</Flex>
@@ -114,7 +113,7 @@ export function AssaultCursor({ maxDistance, maxFakeDistance }: Props) {
height="0.5rem"
width="2pt"
style={{
backgroundColor: Var('accent-11'),
backgroundColor: Var("accent-11"),
}}
/>
</Flex>
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Firepower.tsx
+26 -27
View File
@@ -1,24 +1,23 @@
import { asset, isExplosive } from '@blitzkit/core';
import { literals } from '@blitzkit/i18n';
import { Flex, Heading, IconButton, Tooltip } from '@radix-ui/themes';
import { useLocale } from '../../../../../../hooks/useLocale';
import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
import { Duel } from '../../../../../../stores/duel';
import type { MaybeSkeletonComponentProps } from '../../../../../../types/maybeSkeletonComponentProps';
import { AssaultRangesVisualizer } from './AssaultRangesVisualizer';
import { GunFlexibilityVisualizer } from './GunFlexibilityVisualizer';
import { Info } from './Info';
import { InfoWithDelta } from './InfoWithDelta';
import { ReloadVisualizer } from './ReloadVisualizer';
import { RicochetVisualizer } from './RicochetVisualizer';
import { StatsTableWrapper } from './StatsTableWrapper';
import type { StatsAcceptorProps } from './TraverseVisualizer';
import { asset, isExplosive } from "@blitzkit/core";
import { literals } from "@blitzkit/i18n";
import { Flex, Heading, IconButton, Tooltip } from "@radix-ui/themes";
import { useLocale } from "../../../../../../hooks/useLocale";
import { useTankModelDefinition } from "../../../../../../hooks/useTankModelDefinition";
import { Duel } from "../../../../../../stores/duel";
import type { MaybeSkeletonComponentProps } from "../../../../../../types/maybeSkeletonComponentProps";
import { AssaultRangesVisualizer } from "./AssaultRangesVisualizer";
import { GunFlexibilityVisualizer } from "./GunFlexibilityVisualizer";
import { Info } from "./Info";
import { InfoWithDelta } from "./InfoWithDelta";
import { ReloadVisualizer } from "./ReloadVisualizer";
import { RicochetVisualizer } from "./RicochetVisualizer";
import { StatsTableWrapper } from "./StatsTableWrapper";
import type { StatsAcceptorProps } from "./TraverseVisualizer";
export function Firepower({
stats,
skeleton,
}: StatsAcceptorProps & MaybeSkeletonComponentProps) {
const mutateDuel = Duel.useMutation();
const { strings, unwrap } = useLocale();
const turret = Duel.use((state) => state.protagonist.turret);
const gun = Duel.use((state) => state.protagonist.gun);
@@ -41,8 +40,8 @@ export function Firepower({
return (
<Tooltip content={unwrap(thisShell.name)} key={thisShell.id}>
<IconButton
color={selected ? undefined : 'gray'}
variant={selected ? 'solid' : 'soft'}
color={selected ? undefined : "gray"}
variant={selected ? "solid" : "soft"}
highContrast={selected}
style={{
borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
@@ -54,7 +53,7 @@ export function Firepower({
marginLeft: shellIndex === 0 ? 0 : -1,
}}
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.shell = thisShell;
});
}}
@@ -79,7 +78,7 @@ export function Firepower({
</Info>
<InfoWithDelta stats={stats} decimals={0} value="dpm" />
<InfoWithDelta stats={stats} decimals={0} value="damage" />
{gun.gun_type!.$case !== 'regular' && (
{gun.gun_type!.$case !== "regular" && (
<InfoWithDelta stats={stats} indent decimals={0} value="clipDamage" />
)}
<InfoWithDelta stats={stats} decimals={0} value="moduleDamage" />
@@ -89,13 +88,13 @@ export function Firepower({
<AssaultRangesVisualizer stats={stats} ranges={gun.assault_ranges} />
)}
{gun.gun_type!.$case === 'auto_reloader' && (
{gun.gun_type!.$case === "auto_reloader" && (
<InfoWithDelta stats={stats} decimals={0} indent value="dpmEffective" />
)}
{gun.gun_type!.$case !== 'regular' && (
{gun.gun_type!.$case !== "regular" && (
<InfoWithDelta stats={stats} value="shells" />
)}
{gun.gun_type!.$case === 'auto_reloader' ? (
{gun.gun_type!.$case === "auto_reloader" ? (
<>
<Info
indent
@@ -120,7 +119,7 @@ export function Firepower({
name={literals(
strings.website.tools.tankopedia.characteristics.values
.shell_index,
[`${index + 1}`],
[`${index + 1}`]
)}
decimals={2}
deltaType="lowerIsBetter"
@@ -137,8 +136,8 @@ export function Firepower({
value="shellReload"
/>
)}
{(gun.gun_type!.$case === 'auto_loader' ||
gun.gun_type!.$case === 'auto_reloader') && (
{(gun.gun_type!.$case === "auto_loader" ||
gun.gun_type!.$case === "auto_reloader") && (
<InfoWithDelta
stats={stats}
indent
@@ -192,7 +191,7 @@ export function Firepower({
name={literals(
strings.website.tools.tankopedia.characteristics.values
.dispersion_at_distance,
['100'],
["100"]
)}
/>
<InfoWithDelta
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/index.tsx
+43 -48
View File
@@ -1,22 +1,22 @@
import { literals } from '@blitzkit/i18n';
import { Box, Card, Flex } from '@radix-ui/themes';
import { clamp } from 'lodash-es';
import { useRef, useState } from 'react';
import { degToRad, radToDeg } from 'three/src/math/MathUtils.js';
import { awaitableModelDefinitions } from '../../../../../../../core/awaitables/modelDefinitions';
import { literals } from "@blitzkit/i18n";
import { Box, Card, Flex } from "@radix-ui/themes";
import { clamp } from "lodash-es";
import { useRef, useState } from "react";
import { degToRad, radToDeg } from "three/src/math/MathUtils.js";
import { awaitableModelDefinitions } from "../../../../../../../core/awaitables/modelDefinitions";
import {
DEFAULT_PITCH_TRANSITION,
applyPitchYawLimits,
} from '../../../../../../../core/blitz/applyPitchYawLimits';
import { hasEquipment } from '../../../../../../../core/blitzkit/hasEquipment';
import { modelTransformEvent } from '../../../../../../../core/blitzkit/modelTransform';
import { Var } from '../../../../../../../core/radix/var';
import { useLocale } from '../../../../../../../hooks/useLocale';
import { Duel } from '../../../../../../../stores/duel';
import type { MaybeSkeletonComponentProps } from '../../../../../../../types/maybeSkeletonComponentProps';
import { VisualizerCard } from '../VisualizerCard';
import { VisualizerCornerStat } from '../VisualizerCornerStat';
import { FlexibilityCanvas } from './components/FlexibilityCanvas';
} from "../../../../../../../core/blitz/applyPitchYawLimits";
import { hasEquipment } from "../../../../../../../core/blitzkit/hasEquipment";
import { modelTransformEvent } from "../../../../../../../core/blitzkit/modelTransform";
import { Var } from "../../../../../../../core/radix/var";
import { useLocale } from "../../../../../../../hooks/useLocale";
import { Duel } from "../../../../../../../stores/duel";
import type { MaybeSkeletonComponentProps } from "../../../../../../../types/maybeSkeletonComponentProps";
import { VisualizerCard } from "../VisualizerCard";
import { VisualizerCornerStat } from "../VisualizerCornerStat";
import { FlexibilityCanvas } from "./components/FlexibilityCanvas";
const ANGLE_COEFFICIENT = 1 / 10;
@@ -40,7 +40,6 @@ export function GunFlexibilityVisualizer({
}: MaybeSkeletonComponentProps) {
const { strings } = useLocale();
const duelStore = Duel.useStore();
const tank = Duel.use((state) => state.protagonist.tank);
const turret = Duel.use((state) => state.protagonist.turret);
const gun = Duel.use((state) => state.protagonist.gun);
@@ -52,10 +51,10 @@ export function GunFlexibilityVisualizer({
const [yaw, setYaw] = useState(0);
const [pitch, setPitch] = useState(0);
const [minPitch, setMinPitch] = useState(
-degToRad(gunModel.pitch.front?.max ?? gunModel.pitch.max),
-degToRad(gunModel.pitch.front?.max ?? gunModel.pitch.max)
);
const [maxPitch, setMaxPitch] = useState(
-degToRad(gunModel.pitch.front?.min ?? gunModel.pitch.min),
-degToRad(gunModel.pitch.front?.min ?? gunModel.pitch.min)
);
const container = useRef<HTMLDivElement>(null);
@@ -68,7 +67,7 @@ export function GunFlexibilityVisualizer({
const b = p.back;
const t = gunModel.pitch.transition ?? DEFAULT_PITCH_TRANSITION;
let d = '';
let d = "";
// right
const mo = mag(p.max);
@@ -169,10 +168,10 @@ export function GunFlexibilityVisualizer({
return (
<Flex direction="column-reverse" gap="0">
<Box mt="-3" px="2">
<Card variant="classic" style={{ height: '10rem' }}>
<Card variant="classic" style={{ height: "10rem" }}>
<Box
style={{
background: 'linear-gradient(var(--gray-1), var(--gray-3))',
background: "linear-gradient(var(--gray-1), var(--gray-3))",
}}
position="absolute"
width="100%"
@@ -195,8 +194,8 @@ export function GunFlexibilityVisualizer({
transparent,
transparent ${Math.PI / 2 - maxPitch}rad,
${Var('cyan-a4')} ${Math.PI / 2 - maxPitch}rad,
${Var('jade-a4')} ${Math.PI / 2 - minPitch}rad,
${Var("cyan-a4")} ${Math.PI / 2 - maxPitch}rad,
${Var("jade-a4")} ${Math.PI / 2 - minPitch}rad,
transparent ${Math.PI / 2 - minPitch}rad,
transparent 180deg
@@ -209,7 +208,7 @@ export function GunFlexibilityVisualizer({
<VisualizerCard
ref={container}
style={{ touchAction: 'none' }}
style={{ touchAction: "none" }}
onPointerMove={(event) => {
event.preventDefault();
@@ -221,19 +220,15 @@ export function GunFlexibilityVisualizer({
const v = event.clientY - rect.top - rect.height / 2;
let yaw = Math.atan2(u, -v);
const {
equipmentMatrix,
tank: { equipment_preset },
} = duelStore.getState().protagonist;
const hasImprovedVerticalStabilizer = hasEquipment(
122,
equipment_preset,
equipmentMatrix,
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const hasDownImprovedVerticalStabilizer = hasEquipment(
124,
equipment_preset,
equipmentMatrix,
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const min = applyPitchYawLimits(
@@ -242,7 +237,7 @@ export function GunFlexibilityVisualizer({
p,
y,
hasImprovedVerticalStabilizer,
hasDownImprovedVerticalStabilizer,
hasDownImprovedVerticalStabilizer
);
const max = applyPitchYawLimits(
Math.PI,
@@ -250,7 +245,7 @@ export function GunFlexibilityVisualizer({
p,
y,
hasImprovedVerticalStabilizer,
hasDownImprovedVerticalStabilizer,
hasDownImprovedVerticalStabilizer
);
yaw = min[1];
@@ -276,8 +271,8 @@ export function GunFlexibilityVisualizer({
width="100%"
height="100%"
style={{
borderRadius: Var('radius-2'),
overflow: 'hidden',
borderRadius: Var("radius-2"),
overflow: "hidden",
}}
>
<Box
@@ -286,18 +281,18 @@ export function GunFlexibilityVisualizer({
style={{
opacity: 2 ** -3,
backgroundImage: `url(/assets/images/tankopedia/visualizers/ricochet/armor-hash.png)`,
boxShadow: 'inset 0 0 4rem 1rem black',
boxShadow: "inset 0 0 4rem 1rem black",
}}
/>
</Box>
<svg
style={{
position: 'absolute',
position: "absolute",
top: 0,
left: 0,
width: 'calc(100%)',
height: 'calc(100%)',
width: "calc(100%)",
height: "calc(100%)",
}}
viewBox="-1 -1 2 2"
>
@@ -340,11 +335,11 @@ export function GunFlexibilityVisualizer({
width="1pt"
height="14rem"
style={{
borderRadius: Var('radius-1'),
background: `linear-gradient(${Var('gray-a11')}, ${Var('gray-a6')})`,
borderRadius: Var("radius-1"),
background: `linear-gradient(${Var("gray-a11")}, ${Var("gray-a6")})`,
boxShadow:
'var(--white-a12) -0.25rem 0 1rem, var(--black-a12) 0.25rem 0 1rem',
transform: 'translateX(-50%)',
"var(--white-a12) -0.25rem 0 1rem, var(--black-a12) 0.25rem 0 1rem",
transform: "translateX(-50%)",
}}
/>
</Box>
@@ -356,9 +351,9 @@ export function GunFlexibilityVisualizer({
width="0.25rem"
height="0.25rem"
style={{
borderRadius: '50%',
backgroundColor: Var('gray-12'),
transform: 'translate(-50%, 50%)',
borderRadius: "50%",
backgroundColor: Var("gray-12"),
transform: "translate(-50%, 50%)",
}}
/>
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisualizer/components/ShellSwitcher.tsx
+11 -11
View File
@@ -1,12 +1,12 @@
import { asset } from '@blitzkit/core';
import { Flex, IconButton, Tooltip } from '@radix-ui/themes';
import { useLocale } from '../../../../../../../../hooks/useLocale';
import { Duel } from '../../../../../../../../stores/duel';
import { asset } from "@blitzkit/core";
import { Flex, IconButton, Tooltip } from "@radix-ui/themes";
import { useLocale } from "../../../../../../../../hooks/useLocale";
import { Duel } from "../../../../../../../../stores/duel";
export function ShellSwitcher() {
const gun = Duel.use((state) => state.protagonist.gun);
const shell = Duel.use((state) => state.protagonist.shell);
const mutateDuel = Duel.useMutation();
const { unwrap } = useLocale();
return (
@@ -18,26 +18,26 @@ export function ShellSwitcher() {
<Tooltip content={unwrap(thisShell.name)} key={thisShell.id}>
<IconButton
size="3"
color={selected ? undefined : 'gray'}
variant={selected ? 'solid' : 'soft'}
color={selected ? undefined : "gray"}
variant={selected ? "solid" : "soft"}
highContrast={selected}
style={{
borderTopLeftRadius: 0,
borderBottomLeftRadius: shellIndex === 0 ? '50%' : 0,
borderBottomLeftRadius: shellIndex === 0 ? "50%" : 0,
borderTopRightRadius: 0,
borderBottomRightRadius:
shellIndex === gun.shells.length - 1 ? '50%' : 0,
shellIndex === gun.shells.length - 1 ? "50%" : 0,
marginLeft: shellIndex === 0 ? 0 : -1,
}}
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.shell = thisShell;
});
}}
>
<img
alt={unwrap(thisShell.name)}
style={{ width: '1.125rem', height: '1.125rem' }}
style={{ width: "1.125rem", height: "1.125rem" }}
src={asset(`icons/shells/${thisShell.icon}.webp`)}
/>
</IconButton>
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Consumables.tsx
+16 -17
View File
@@ -1,5 +1,5 @@
import { checkConsumableProvisionInclusivity } from '@blitzkit/core/src/blitzkit/checkConsumableProvisionInclusivity';
import { InfoCircledIcon } from '@radix-ui/react-icons';
import { checkConsumableProvisionInclusivity } from "@blitzkit/core/src/blitzkit/checkConsumableProvisionInclusivity";
import { InfoCircledIcon } from "@radix-ui/react-icons";
import {
Button,
Flex,
@@ -7,31 +7,30 @@ import {
IconButton,
Popover,
Text,
} from '@radix-ui/themes';
import { awaitableConsumableDefinitions } from '../../../../core/awaitables/consumableDefinitions';
import { useEquipment } from '../../../../hooks/useEquipment';
import { useLocale } from '../../../../hooks/useLocale';
import { Duel } from '../../../../stores/duel';
import { ConsumablesManager } from '../../../ConsumablesManager';
import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
} from "@radix-ui/themes";
import { awaitableConsumableDefinitions } from "../../../../core/awaitables/consumableDefinitions";
import { useEquipment } from "../../../../hooks/useEquipment";
import { useLocale } from "../../../../hooks/useLocale";
import { Duel } from "../../../../stores/duel";
import { ConsumablesManager } from "../../../ConsumablesManager";
import { ConfigurationChildWrapper } from "./ConfigurationChildWrapper";
const consumableDefinitions = await awaitableConsumableDefinitions;
export function Consumables() {
const mutateDuel = Duel.useMutation();
const protagonist = Duel.use((state) => state.protagonist);
const consumables = Duel.use((state) => state.protagonist.consumables);
const consumablesList = Object.values(
consumableDefinitions.consumables,
consumableDefinitions.consumables
).filter((consumable) =>
checkConsumableProvisionInclusivity(
consumable,
protagonist.tank,
protagonist.gun,
),
protagonist.gun
)
);
const cooldownBooster = Duel.use(
(state) => state.protagonist.cooldownBooster,
(state) => state.protagonist.cooldownBooster
);
const hasConsumableDeliverySystem = useEquipment(118);
const hasHighEndConsumables = useEquipment(101);
@@ -67,7 +66,7 @@ export function Consumables() {
variant="ghost"
color="red"
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.consumables = [];
});
}}
@@ -85,11 +84,11 @@ export function Consumables() {
hasHighEndConsumables={hasHighEndConsumables}
timers
onConsumablesChange={(consumables) => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.consumables = consumables;
});
}}
justify={{ initial: 'center', sm: 'start' }}
justify={{ initial: "center", sm: "start" }}
/>
</ConfigurationChildWrapper>
);
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equipment.tsx
+9 -10
View File
@@ -1,19 +1,18 @@
import { Button, Flex, Heading } from '@radix-ui/themes';
import { awaitableEquipmentDefinitions } from '../../../../core/awaitables/equipmentDefinitions';
import { useLocale } from '../../../../hooks/useLocale';
import { Duel } from '../../../../stores/duel';
import { EquipmentManager } from '../../../EquipmentManager';
import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
import { Button, Flex, Heading } from "@radix-ui/themes";
import { awaitableEquipmentDefinitions } from "../../../../core/awaitables/equipmentDefinitions";
import { useLocale } from "../../../../hooks/useLocale";
import { Duel } from "../../../../stores/duel";
import { EquipmentManager } from "../../../EquipmentManager";
import { ConfigurationChildWrapper } from "./ConfigurationChildWrapper";
const equipmentDefinitions = await awaitableEquipmentDefinitions;
export function Equipment() {
const mutateDuel = Duel.useMutation();
const protagonist = Duel.use((state) => state.protagonist);
const equipmentPreset =
equipmentDefinitions.presets[protagonist.tank.equipment_preset];
const equipmentMatrix = Duel.use(
(state) => state.protagonist.equipmentMatrix,
(state) => state.protagonist.equipmentMatrix
);
const { strings } = useLocale();
@@ -27,7 +26,7 @@ export function Equipment() {
variant="ghost"
color="red"
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.equipmentMatrix.forEach((row) => {
row.forEach((_, index) => {
row[index] = 0;
@@ -44,7 +43,7 @@ export function Equipment() {
matrix={equipmentMatrix}
preset={equipmentPreset}
onChange={(matrix) => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.equipmentMatrix = matrix;
});
}}
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Miscellaneous.tsx
+18 -19
View File
@@ -1,15 +1,14 @@
import { asset } from '@blitzkit/core';
import { Flex, Heading } from '@radix-ui/themes';
import { useLocale } from '../../../../hooks/useLocale';
import { Duel } from '../../../../stores/duel';
import { GenericTankComponentButton } from '../../../ModuleButtons/GenericTankComponentButton';
import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
import { asset } from "@blitzkit/core";
import { Flex, Heading } from "@radix-ui/themes";
import { useLocale } from "../../../../hooks/useLocale";
import { Duel } from "../../../../stores/duel";
import { GenericTankComponentButton } from "../../../ModuleButtons/GenericTankComponentButton";
import { ConfigurationChildWrapper } from "./ConfigurationChildWrapper";
export function Miscellaneous() {
const mutateDuel = Duel.useMutation();
const camouflage = Duel.use((state) => state.protagonist.camouflage);
const cooldownBooster = Duel.use(
(state) => state.protagonist.cooldownBooster,
(state) => state.protagonist.cooldownBooster
);
const { tank } = Duel.use((state) => state.protagonist);
const { strings } = useLocale();
@@ -23,37 +22,37 @@ export function Miscellaneous() {
<Flex gap="2" align="center">
{!tank.fixed_camouflage && (
<GenericTankComponentButton
icon={asset('icons/camo.webp')}
icon={asset("icons/camo.webp")}
selected={camouflage}
iconStyles={{
top: '50%',
left: '50%',
transform: 'translate(calc(-50% + 4px), calc(-50% + 4px))',
top: "50%",
left: "50%",
transform: "translate(calc(-50% + 4px), calc(-50% + 4px))",
}}
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.camouflage = !camouflage;
});
}}
/>
)}
<GenericTankComponentButton
icon={asset('icons/boosters/equipment.webp')}
icon={asset("icons/boosters/equipment.webp")}
selected={cooldownBooster > 0}
banner={
cooldownBooster === 0
? undefined
: cooldownBooster === 1
? '#afb0abc0'
? "#afb0abc0"
: cooldownBooster === 2
? '#5f72cbc0'
: '#9b3cc0c0'
? "#5f72cbc0"
: "#9b3cc0c0"
}
iconStyles={{
transform: 'translate(-50%, -50%) scale(0.8)',
transform: "translate(-50%, -50%) scale(0.8)",
}}
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.cooldownBooster++;
if (draft.protagonist.cooldownBooster === 4)
draft.protagonist.cooldownBooster = 0;
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Modules.tsx
+44 -45
View File
@@ -10,7 +10,7 @@ import {
TurretDefinition,
type TankDefinition,
type Unlock,
} from '@blitzkit/core';
} from "@blitzkit/core";
import {
Button,
ChevronDownIcon,
@@ -18,12 +18,12 @@ import {
Heading,
IconButton,
Text,
} from '@radix-ui/themes';
import { awaitableTankDefinitions } from '../../../../core/awaitables/tankDefinitions';
import { useLocale } from '../../../../hooks/useLocale';
import { Duel } from '../../../../stores/duel';
import { LinkI18n } from '../../../LinkI18n';
import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
} from "@radix-ui/themes";
import { awaitableTankDefinitions } from "../../../../core/awaitables/tankDefinitions";
import { useLocale } from "../../../../hooks/useLocale";
import { Duel } from "../../../../stores/duel";
import { LinkI18n } from "../../../LinkI18n";
import { ConfigurationChildWrapper } from "./ConfigurationChildWrapper";
type ModuleDefinition =
| TurretDefinition
@@ -32,7 +32,7 @@ type ModuleDefinition =
| EngineDefinition;
function extractModule(raw: ModuleDefinition | TankDefinition) {
if ('gun_type' in raw) {
if ("gun_type" in raw) {
return raw;
} else
return raw as Exclude<ModuleDefinition | TankDefinition, GunDefinition>;
@@ -43,11 +43,11 @@ interface ModuleWithUnlocks {
}
const moduleTypeTypeIconName: Record<ModuleType, string> = {
[ModuleType.VEHICLE]: '',
[ModuleType.ENGINE]: 'engine',
[ModuleType.TRACKS]: 'chassis',
[ModuleType.TURRET]: 'turret',
[ModuleType.GUN]: 'gun',
[ModuleType.VEHICLE]: "",
[ModuleType.ENGINE]: "engine",
[ModuleType.TRACKS]: "chassis",
[ModuleType.TURRET]: "turret",
[ModuleType.GUN]: "gun",
};
function ModuleButton({
@@ -70,11 +70,11 @@ function ModuleButton({
<IconButton
size="4"
radius="small"
variant={selected ? 'surface' : 'soft'}
color={top ? 'amber' : selected ? undefined : 'gray'}
variant={selected ? "surface" : "soft"}
color={top ? "amber" : selected ? undefined : "gray"}
onClick={onClick}
style={{
position: 'relative',
position: "relative",
width: isTank ? 72 : undefined,
height: isTank ? 72 : undefined,
}}
@@ -83,7 +83,7 @@ function ModuleButton({
size="1"
color="gray"
style={{
position: 'absolute',
position: "absolute",
left: isTank ? 8 : 4,
top: isTank ? 8 : 4,
}}
@@ -94,13 +94,13 @@ function ModuleButton({
{unlock.cost.value > 0 && (
<Flex
style={{
position: 'absolute',
left: '50%',
position: "absolute",
left: "50%",
bottom: 4,
transform: 'translateX(-50%)',
transform: "translateX(-50%)",
}}
align="center"
gap={isTank ? '1' : undefined}
gap={isTank ? "1" : undefined}
>
<Text size="1" color="gray">
{formatCompact(locale, unlock.cost.value)}
@@ -112,7 +112,7 @@ function ModuleButton({
style={{
width: 12,
height: 12,
objectFit: 'contain',
objectFit: "contain",
}}
/>
</Flex>
@@ -128,7 +128,7 @@ function ModuleButton({
style={{
width: isTank ? 64 : 32,
height: isTank ? 64 : 32,
objectFit: 'contain',
objectFit: "contain",
}}
/>
</IconButton>
@@ -149,7 +149,6 @@ function ModuleButton({
const tankDefinitions = await awaitableTankDefinitions;
export function Modules() {
const mutateDuel = Duel.useMutation();
const tank = Duel.use((state) => state.protagonist.tank);
const hasUpgrades =
tank.turrets.length > 1 ||
@@ -171,15 +170,15 @@ export function Modules() {
const { strings } = useLocale();
function setByUnlock(unlock: Unlock) {
mutateDuel((draft) => {
Duel.mutate((draft) => {
if (unlock.type === ModuleType.TURRET) {
draft.protagonist.turret = draft.protagonist.tank.turrets.find(
(turret) => turret.id === unlock.id,
(turret) => turret.id === unlock.id
)!;
if (
!draft.protagonist.turret.guns.some(
(gun) => gun.id === draft.protagonist.gun.id,
(gun) => gun.id === draft.protagonist.gun.id
)
) {
draft.protagonist.gun = draft.protagonist.turret.guns.at(-1)!;
@@ -187,7 +186,7 @@ export function Modules() {
}
} else if (unlock.type === ModuleType.GUN) {
const gunInTurret = draft.protagonist.turret.guns.find(
(gun) => gun.id === unlock.id,
(gun) => gun.id === unlock.id
);
if (gunInTurret) {
draft.protagonist.gun = gunInTurret;
@@ -195,10 +194,10 @@ export function Modules() {
} else {
// TODO: warn somehow?
const suitableTurret = draft.protagonist.tank.turrets.find((turret) =>
turret.guns.some((gun) => gun.id === unlock.id),
turret.guns.some((gun) => gun.id === unlock.id)
)!;
const gunInSuitableTurret = suitableTurret.guns.find(
(gun) => gun.id === unlock.id,
(gun) => gun.id === unlock.id
)!;
draft.protagonist.turret = suitableTurret;
@@ -207,11 +206,11 @@ export function Modules() {
}
} else if (unlock.type === ModuleType.ENGINE) {
draft.protagonist.engine = draft.protagonist.tank.engines.find(
(engine) => engine.id === unlock.id,
(engine) => engine.id === unlock.id
)!;
} else if (unlock.type === ModuleType.TRACKS) {
draft.protagonist.track = draft.protagonist.tank.tracks.find(
(track) => track.id === unlock.id,
(track) => track.id === unlock.id
)!;
}
});
@@ -235,7 +234,7 @@ export function Modules() {
} else if (unlock.type === ModuleType.GUN) {
module = tank.turrets
.find((turret) =>
turret.guns.some((gun) => gun.id === unlock.id),
turret.guns.some((gun) => gun.id === unlock.id)
)!
.guns.find((gun) => gun.id === unlock.id)!;
} else if (unlock.type === ModuleType.VEHICLE) {
@@ -257,12 +256,12 @@ export function Modules() {
{unlocks.length > 1 && (
<div
style={{
backgroundColor: 'currentcolor',
backgroundColor: "currentcolor",
width: `calc(${central ? 100 : 50}% + ${
central ? 8 : 4
}px)`,
height: 1,
position: 'absolute',
position: "absolute",
right: first ? 0 : undefined,
left: last ? 0 : undefined,
transform: `translateX(${first ? 4 : last ? -4 : 0}px)`,
@@ -279,14 +278,14 @@ export function Modules() {
>
<div
style={{
backgroundColor: 'currentcolor',
backgroundColor: "currentcolor",
width: 1,
height: 8,
}}
/>
<ChevronDownIcon
style={{
transform: 'translateY(-7px)',
transform: "translateY(-7px)",
}}
/>
</Flex>
@@ -326,7 +325,7 @@ export function Modules() {
1 && (
<div
style={{
backgroundColor: 'currentcolor',
backgroundColor: "currentcolor",
width: 1,
height: 8,
marginBottom: -8,
@@ -337,7 +336,7 @@ export function Modules() {
{(extractModule(module) as ModuleWithUnlocks).unlocks &&
tree(
type,
(extractModule(module) as ModuleWithUnlocks).unlocks!,
(extractModule(module) as ModuleWithUnlocks).unlocks!
)}
</Flex>
);
@@ -359,7 +358,7 @@ export function Modules() {
variant="ghost"
color="red"
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.turret = draft.protagonist.tank.turrets[0];
draft.protagonist.gun = draft.protagonist.turret.guns[0];
draft.protagonist.shell = draft.protagonist.gun.shells[0];
@@ -373,7 +372,7 @@ export function Modules() {
<Button
variant="ghost"
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.turret =
draft.protagonist.tank.turrets.at(-1)!;
draft.protagonist.gun = draft.protagonist.turret.guns.at(-1)!;
@@ -394,28 +393,28 @@ export function Modules() {
<Flex gap="2" wrap="wrap" gapY="6">
{tree(ModuleType.ENGINE, [
{
cost: { type: 'xp', value: 0 },
cost: { type: "xp", value: 0 },
id: engine0.id,
type: ModuleType.ENGINE,
},
])}
{tree(ModuleType.TRACKS, [
{
cost: { type: 'xp', value: 0 },
cost: { type: "xp", value: 0 },
id: track0.id,
type: ModuleType.TRACKS,
},
])}
{tree(ModuleType.TURRET, [
{
cost: { type: 'xp', value: 0 },
cost: { type: "xp", value: 0 },
id: turret0.id,
type: ModuleType.TURRET,
},
])}
{tree(ModuleType.GUN, [
{
cost: { type: 'xp', value: 0 },
cost: { type: "xp", value: 0 },
id: gun0.id,
type: ModuleType.GUN,
},
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Provisions.tsx
+9 -10
View File
@@ -1,15 +1,14 @@
import { availableProvisions } from '@blitzkit/core';
import { Button, Flex, Heading } from '@radix-ui/themes';
import { awaitableProvisionDefinitions } from '../../../../core/awaitables/provisionDefinitions';
import { useLocale } from '../../../../hooks/useLocale';
import { Duel } from '../../../../stores/duel';
import { ProvisionsManager } from '../../../ProvisionsManager';
import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
import { availableProvisions } from "@blitzkit/core";
import { Button, Flex, Heading } from "@radix-ui/themes";
import { awaitableProvisionDefinitions } from "../../../../core/awaitables/provisionDefinitions";
import { useLocale } from "../../../../hooks/useLocale";
import { Duel } from "../../../../stores/duel";
import { ProvisionsManager } from "../../../ProvisionsManager";
import { ConfigurationChildWrapper } from "./ConfigurationChildWrapper";
const provisionDefinitions = await awaitableProvisionDefinitions;
export function Provisions() {
const mutateDuel = Duel.useMutation();
const { tank, gun } = Duel.use((state) => state.protagonist);
const provisions = Duel.use((state) => state.protagonist.provisions);
const provisionsList = availableProvisions(tank, gun, provisionDefinitions);
@@ -25,7 +24,7 @@ export function Provisions() {
variant="ghost"
color="red"
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.provisions = [];
});
}}
@@ -39,7 +38,7 @@ export function Provisions() {
selected={provisions}
disabled={tank.max_provisions === provisions.length}
onChange={(provisions) => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.provisions = provisions;
});
}}
packages/website/src/components/Tankopedia/HeroSection/components/Options/components/DynamicArmorSwitcher.tsx
+1 -2
View File
@@ -6,7 +6,6 @@ import { Tankopedia } from "../../../../../../stores/tankopedia";
export function DynamicArmorSwitcher() {
const tank = Duel.use((state) => state.protagonist.tank);
const mutateDuel = Duel.useMutation();
const isDynamicArmorActive = Duel.use((state) =>
state.protagonist.consumables.includes(73)
);
@@ -20,7 +19,7 @@ export function DynamicArmorSwitcher() {
variant="soft"
size={{ initial: "2", sm: "3" }}
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
if (draft.protagonist.consumables.includes(73)) {
draft.protagonist.consumables =
draft.protagonist.consumables.filter((id) => id !== 73);
packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx
+3 -4
View File
@@ -25,7 +25,6 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
const showPrimaryArmor = TankopediaPersistent.use(
(state) => state.showPrimaryArmor
);
const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
const editStatic = Tankopedia.use((state) => state.editStatic);
const { strings } = useLocale();
@@ -50,7 +49,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
gap="2"
style={{ opacity: showPrimaryArmor ? 1 : 0.5, cursor: "pointer" }}
onClick={() => {
mutateTankopediaPersistent((draft) => {
TankopediaPersistent.mutate((draft) => {
draft.showPrimaryArmor = !draft.showPrimaryArmor;
});
Tankopedia.mutate((draft) => {
@@ -91,7 +90,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
gap="2"
style={{ opacity: showSpacedArmor ? 1 : 0.5, cursor: "pointer" }}
onClick={() => {
mutateTankopediaPersistent((draft) => {
TankopediaPersistent.mutate((draft) => {
draft.showSpacedArmor = !draft.showSpacedArmor;
});
Tankopedia.mutate((draft) => {
@@ -130,7 +129,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
gap="2"
style={{ opacity: showExternalModules ? 1 : 0.5, cursor: "pointer" }}
onClick={() => {
mutateTankopediaPersistent((draft) => {
TankopediaPersistent.mutate((draft) => {
draft.showExternalModules = !draft.showExternalModules;
});
Tankopedia.mutate((draft) => {
packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
+6 -8
View File
@@ -69,10 +69,8 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
const antagonistTank = Duel.use((state) => state.antagonist.tank);
const hasCalibratedShells = useEquipment(103, true);
const [tab, setTab] = useState("search");
const mutateDuel = Duel.useMutation();
const hasEnhancedArmor = useEquipment(110);
const antagonistUniqueGuns = uniqueGuns(antagonistTank.turrets);
const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
const { strings, unwrap } = useLocale();
const revealed = Tankopedia.use((state) => state.revealed);
const disturbed = Tankopedia.use((state) => state.disturbed);
@@ -151,7 +149,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
module="gun"
key={gun.id}
onClick={() =>
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.antagonist.turret = turret;
draft.antagonist.gun = gun;
draft.antagonist.shell = gun.shells[0];
@@ -192,7 +190,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
size={{ initial: "2", sm: "3" }}
radius="none"
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.antagonist.shell = thisShell;
});
Tankopedia.mutate((draft) => {
@@ -229,7 +227,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
size={{ initial: "2", sm: "3" }}
radius="none"
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.antagonist.equipmentMatrix[0][0] = hasCalibratedShells
? 0
: 1;
@@ -254,7 +252,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
size={{ initial: "2", sm: "3" }}
radius="none"
onClick={() => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.protagonist.equipmentMatrix[1][1] = hasEnhancedArmor
? 0
: -1;
@@ -303,7 +301,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
mb="1"
style={{ cursor: "pointer" }}
onClick={() => {
mutateTankopediaPersistent((draft) => {
TankopediaPersistent.mutate((draft) => {
draft.advancedHighlighting = !draft.advancedHighlighting;
});
}}
@@ -343,7 +341,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
<TankSearch
compact
onSelect={(tank) => {
mutateDuel((draft) => {
Duel.mutate((draft) => {
draft.antagonist.tank = tank;
draft.antagonist.engine = tank.engines.at(-1)!;
draft.antagonist.track = tank.tracks.at(-1)!;
packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx
+4 -6
View File
@@ -32,7 +32,6 @@ export function Controls({
zoomable = true,
enableRotate = true,
}: ControlsProps) {
const duelStore = Duel.useStore();
const camera = useThree((state) => state.camera as PerspectiveCamera);
const canvas = useThree((state) => state.gl.domElement);
const orbitControls = useRef<OrbitControlsClass>(null);
@@ -108,16 +107,15 @@ export function Controls({
);
function handlePoseEvent(event: Pose) {
const duel = duelStore.getState();
const hasImprovedVerticalStabilizer = hasEquipment(
122,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const hasDownImprovedVerticalStabilizer = hasEquipment(
124,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
switch (event) {
packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx
+8 -11
View File
@@ -14,7 +14,6 @@ import { TankopediaDisplay } from "../../../../../../stores/tankopediaPersistent
import { ModelTankWrapper } from "../../../../../Armor/components/ModelTankWrapper";
export function TankModel() {
const duelStore = Duel.useStore();
const protagonist = Duel.use((draft) => draft.protagonist);
const track = Duel.use((state) => state.protagonist.track);
const turret = Duel.use((state) => state.protagonist.turret);
@@ -135,16 +134,15 @@ export function TankModel() {
window.addEventListener("pointerup", handlePointerUp);
}
function handlePointerMove(event: PointerEvent) {
const duel = duelStore.getState();
const hasImprovedVerticalStabilizer = hasEquipment(
122,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const hasDownImprovedVerticalStabilizer = hasEquipment(
124,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const boundingRect = canvas.getBoundingClientRect();
@@ -223,16 +221,15 @@ export function TankModel() {
window.addEventListener("pointerup", handlePointerUp);
}
function handlePointerMove(event: PointerEvent) {
const duel = duelStore.getState();
const hasImprovedVerticalStabilizer = hasEquipment(
122,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const hasDownImprovedVerticalStabilizer = hasEquipment(
124,
duel.protagonist.tank.equipment_preset,
duel.protagonist.equipmentMatrix
Duel.state.protagonist.tank.equipment_preset,
Duel.state.protagonist.equipmentMatrix
);
const boundingRect = canvas.getBoundingClientRect();
delta.set(event.clientX, event.clientY).sub(position);
packages/website/src/components/Tankopedia/HeroSection/index.tsx
+6 -7
View File
@@ -36,8 +36,6 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
return { value } satisfies ThicknessRange;
}, [protagonist]);
const duelStore = Duel.useStore();
const mutateDuel = Duel.useMutation();
useEffect(() => {
if (disturbed) {
@@ -47,12 +45,13 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
useEffect(() => {
function handleKeyDown(event: KeyboardEvent) {
const { shells } = duelStore.getState().antagonist.gun;
times(3, (index) => {
if (event.key === `${index + 1}` && shells.length > index) {
mutateDuel((draft) => {
draft.antagonist.shell = shells[index];
if (
event.key === `${index + 1}` &&
Duel.state.antagonist.gun.shells.length > index
) {
Duel.mutate((draft) => {
draft.antagonist.shell = Duel.state.antagonist.gun.shells[index];
});
Tankopedia.mutate((draft) => {
draft.customShell = undefined;
packages/website/src/components/Tankopedia/MetaSection/components/Votes/components/VoteCaster.tsx
+26 -27
View File
@@ -1,5 +1,5 @@
import type { BlitzkitResponse, StarsInt } from '@blitzkit/core';
import { PaperPlaneIcon } from '@radix-ui/react-icons';
import type { BlitzkitResponse, StarsInt } from "@blitzkit/core";
import { PaperPlaneIcon } from "@radix-ui/react-icons";
import {
AlertDialog,
Button,
@@ -7,15 +7,14 @@ import {
Flex,
Spinner,
Text,
} from '@radix-ui/themes';
import { useState } from 'react';
import { useLocale } from '../../../../../../hooks/useLocale';
import { App } from '../../../../../../stores/app';
import { Duel } from '../../../../../../stores/duel';
import { Stars } from '../../Stars';
} from "@radix-ui/themes";
import { useState } from "react";
import { useLocale } from "../../../../../../hooks/useLocale";
import { App } from "../../../../../../stores/app";
import { Duel } from "../../../../../../stores/duel";
import { Stars } from "../../Stars";
export function VoteCaster() {
const appStore = App.useStore();
const tank = Duel.use((state) => state.protagonist.tank);
const [easiness, setEasiness] = useState<StarsInt | null>(null);
const [firepower, setFirepower] = useState<StarsInt | null>(null);
@@ -42,28 +41,28 @@ export function VoteCaster() {
<Flex direction="column" mt="4">
<Flex align="center" justify="between">
<Text>
Easiness{' '}
Easiness{" "}
<Text color="gray" size="2">
{easiness === null ? '(empty)' : `(${easiness})`}
{easiness === null ? "(empty)" : `(${easiness})`}
</Text>
</Text>
<Stars stars={easiness} size="5" onCast={setEasiness} />
</Flex>
<Flex align="center" justify="between">
<Text>
Firepower{' '}
Firepower{" "}
<Text color="gray" size="2">
{firepower === null ? '(empty)' : `(${firepower})`}
{firepower === null ? "(empty)" : `(${firepower})`}
</Text>
</Text>
<Stars stars={firepower} size="5" onCast={setFirepower} />
</Flex>
<Flex align="center" justify="between">
<Text>
Maneuverability{' '}
Maneuverability{" "}
<Text color="gray" size="2">
{maneuverability === null
? '(empty)'
? "(empty)"
: `(${maneuverability})`}
</Text>
</Text>
@@ -75,9 +74,9 @@ export function VoteCaster() {
</Flex>
<Flex align="center" justify="between">
<Text>
Survivability{' '}
Survivability{" "}
<Text color="gray" size="2">
{survivability === null ? '(empty)' : `(${survivability})`}
{survivability === null ? "(empty)" : `(${survivability})`}
</Text>
</Text>
<Stars stars={survivability} size="5" onCast={setSurvivability} />
@@ -100,7 +99,7 @@ export function VoteCaster() {
survivability === null)
}
onClick={() => {
const { wargaming } = appStore.getState().logins;
const { wargaming } = App.state.logins;
if (!wargaming) {
return setShowDialogue(false);
@@ -110,26 +109,26 @@ export function VoteCaster() {
fetch(
`/api/tank-voting/${tank.id}/cast?${
easiness === null ? '' : `easiness=${easiness}&`
}${firepower === null ? '' : `firepower=${firepower}&`}${
easiness === null ? "" : `easiness=${easiness}&`
}${firepower === null ? "" : `firepower=${firepower}&`}${
maneuverability === null
? ''
? ""
: `maneuverability=${maneuverability}&`
}${
survivability === null
? ''
? ""
: `survivability=${survivability}&`
}player=${wargaming.id}&token=${wargaming.token}`,
}player=${wargaming.id}&token=${wargaming.token}`
)
.then(
(response) => response.json() as Promise<BlitzkitResponse>,
(response) => response.json() as Promise<BlitzkitResponse>
)
.then((json) => {
setShowDialogue(false);
setPostVote(json.status === 'ok');
setPostVote(json.status === "ok");
if (json.status === 'error') {
console.error('vote failed', json);
if (json.status === "error") {
console.error("vote failed", json);
}
});
}}