mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 19:49:50 +02:00
hocs
This commit is contained in:
tresabhi committed
1 parent
5ea7bbd6a1
commit
ad78e45f1b
7 files changed
+41
-403
No files matched your search
@@ -0,0 +1,12 @@
|
|||||||
|
import type { ReactNode } from "react";
|
||||||
|
import { ErrorWrapper } from "../components/ErrorWrapper";
|
||||||
|
|
||||||
|
export function withErrorWrapper<Props extends {}>(
|
||||||
|
Component: (props: Props) => ReactNode,
|
||||||
|
) {
|
||||||
|
return function (props: Props) {
|
||||||
|
<ErrorWrapper>
|
||||||
|
<Component {...props} />
|
||||||
|
</ErrorWrapper>;
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import type { ReactNode } from "react";
|
||||||
|
import { LocaleProvider } from "../hooks/useLocale";
|
||||||
|
|
||||||
|
interface WithLocaleProps {
|
||||||
|
locale: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function withLocale<Props extends object>(
|
||||||
|
Component: (props: Props) => ReactNode,
|
||||||
|
) {
|
||||||
|
return function ({ locale, ...props }: Props & WithLocaleProps) {
|
||||||
|
return (
|
||||||
|
<LocaleProvider locale={locale}>
|
||||||
|
<Component {...(props as Props)} />
|
||||||
|
</LocaleProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -1,21 +1,9 @@
|
|||||||
import { AvatarControls } from "../../../components/AvatarControls";
|
import { AvatarControls } from "../../../components/AvatarControls";
|
||||||
import { AvatarsList } from "../../../components/AvatarsList";
|
import { AvatarsList } from "../../../components/AvatarsList";
|
||||||
import { Section } from "../../../components/Section";
|
import { Section } from "../../../components/Section";
|
||||||
import { LocaleProvider } from "../../../hooks/useLocale";
|
import { withLocale } from "../../../hocs/withLocale";
|
||||||
|
|
||||||
interface PageProps {
|
export const Page = withLocale(() => {
|
||||||
locale: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Page({ locale, ...props }: PageProps) {
|
|
||||||
return (
|
|
||||||
<LocaleProvider locale={locale}>
|
|
||||||
<Content {...props} />
|
|
||||||
</LocaleProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Content() {
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Section>
|
<Section>
|
||||||
@@ -27,4 +15,4 @@ function Content() {
|
|||||||
</Section>
|
</Section>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
---
|
|
||||||
import { Grade } from "@protos/blitz_static_standard_grades_enum";
|
|
||||||
import { api } from "../../../api/dynamic";
|
|
||||||
import BaseLayout from "../../../layouts/BaseLayout.astro";
|
|
||||||
|
|
||||||
export { getStaticPaths } from "../index.astro";
|
|
||||||
|
|
||||||
const { locale } = Astro.props;
|
|
||||||
const { backgrounds } = await api.backgrounds();
|
|
||||||
---
|
|
||||||
|
|
||||||
<BaseLayout {locale} accent="amber">
|
|
||||||
{
|
|
||||||
backgrounds.map((background) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h3>
|
|
||||||
{background.stuff_ui!.display_name}{" "}
|
|
||||||
{Grade[background.stuff_ui!.grade]}{" "}
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<pre>{JSON.stringify(background.profile_background, null, 2)}</pre>
|
|
||||||
|
|
||||||
{background.stuff_ui!.description && (
|
|
||||||
<p>{background.stuff_ui!.description}</p>
|
|
||||||
)}
|
|
||||||
{background.stuff_ui!.obtaining_methods && (
|
|
||||||
<p>{background.stuff_ui!.obtaining_methods}</p>
|
|
||||||
)}
|
|
||||||
{background.stuff_ui!.features && (
|
|
||||||
<p>{background.stuff_ui!.features}</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<img width="128" src={`/api/backgrounds/${background.name}.webp`} />
|
|
||||||
|
|
||||||
{background.sellable && (
|
|
||||||
<pre>{JSON.stringify(background.sellable, null, 2)}</pre>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<br />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</BaseLayout>
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
---
|
|
||||||
import { Heading } from "../../../components/Heading";
|
|
||||||
import { Section } from "../../../components/Section";
|
|
||||||
import BaseLayout from "../../../layouts/BaseLayout.astro";
|
|
||||||
|
|
||||||
export { getStaticPaths } from "../index.astro";
|
|
||||||
|
|
||||||
const { locale } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<BaseLayout {locale} accent="amber">
|
|
||||||
<Section>
|
|
||||||
<Heading>Settings</Heading>
|
|
||||||
</Section>
|
|
||||||
</BaseLayout>
|
|
||||||
@@ -1,48 +1,26 @@
|
|||||||
import { Fragment, useMemo } from "react";
|
import { Fragment, useMemo } from "react";
|
||||||
import { api } from "../../../../api/dynamic";
|
import { api } from "../../../../api/dynamic";
|
||||||
import { ErrorWrapper } from "../../../../components/ErrorWrapper";
|
|
||||||
import { TankopediaLoadout } from "../../../../components/TankopediaLoadout";
|
import { TankopediaLoadout } from "../../../../components/TankopediaLoadout";
|
||||||
|
import { withLocale } from "../../../../hocs/withLocale";
|
||||||
import { useAwait } from "../../../../hooks/useAwait";
|
import { useAwait } from "../../../../hooks/useAwait";
|
||||||
import { useCharacteristicRenderer } from "../../../../hooks/useCharacteristicRenderer";
|
import { useCharacteristicRenderer } from "../../../../hooks/useCharacteristicRenderer";
|
||||||
import { useEquipment } from "../../../../hooks/useEquipment";
|
import { useEquipment } from "../../../../hooks/useEquipment";
|
||||||
import { LocaleProvider } from "../../../../hooks/useLocale";
|
|
||||||
import { Tankopedia } from "../../../../stores/tankopedia";
|
import { Tankopedia } from "../../../../stores/tankopedia";
|
||||||
import { characteristicsOrder } from "../../../../tankopedia/characteristicsOrder";
|
import { characteristicsOrder } from "../../../../tankopedia/characteristicsOrder";
|
||||||
import { computeCharacteristics } from "../../../../tankopedia/computeCharacteristics";
|
import { computeCharacteristics } from "../../../../tankopedia/computeCharacteristics";
|
||||||
|
|
||||||
interface PageProps {
|
interface PageProps {
|
||||||
id: string;
|
id: string;
|
||||||
locale: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Page(props: PageProps) {
|
export const Page = withLocale(({ id }: PageProps) => {
|
||||||
return (
|
const protagonistTank = useAwait(() => api.tank(id), `tank-${id}`);
|
||||||
<ErrorWrapper>
|
|
||||||
<Wrapper {...props} />
|
|
||||||
</ErrorWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Wrapper({ id, locale }: PageProps) {
|
Tankopedia.useInitialization(protagonistTank);
|
||||||
const tank = useAwait(() => api.tank(id), `tank-${id}`);
|
|
||||||
|
|
||||||
Tankopedia.useInitialization(tank);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<LocaleProvider locale={locale}>
|
|
||||||
<Content />
|
|
||||||
</LocaleProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Content() {
|
|
||||||
const renderCharacteristic = useCharacteristicRenderer();
|
const renderCharacteristic = useCharacteristicRenderer();
|
||||||
|
|
||||||
const protagonist = Tankopedia.use((state) => state.protagonist);
|
const protagonist = Tankopedia.use((state) => state.protagonist);
|
||||||
const protagonistTank = useAwait(
|
|
||||||
() => api.tank(protagonist.id),
|
|
||||||
`tank-${protagonist.id}`,
|
|
||||||
);
|
|
||||||
const protagonistEquipment = useEquipment(protagonistTank.tank!);
|
const protagonistEquipment = useEquipment(protagonistTank.tank!);
|
||||||
|
|
||||||
const { characteristics } = useMemo(
|
const { characteristics } = useMemo(
|
||||||
@@ -63,105 +41,6 @@ function Content() {
|
|||||||
|
|
||||||
<TankopediaLoadout />
|
<TankopediaLoadout />
|
||||||
|
|
||||||
{/* <h2>upgrades</h2>
|
|
||||||
|
|
||||||
{protagonistTank.tank!.upgrade_lines.map((line) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h3>
|
|
||||||
{line.name} ({protagonist.upgrades[line.name]})
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
gap: 8,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{line.stages.map((stage, index) => {
|
|
||||||
if (stage.custom_picture) {
|
|
||||||
throw new Error("Custom picture not supported");
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={stage.tech_name}
|
|
||||||
onClick={() => {
|
|
||||||
Tankopedia.mutate((draft) => {
|
|
||||||
draft.protagonist.upgrades[line.name] = index;
|
|
||||||
|
|
||||||
for (const required of stage.required_upgrades) {
|
|
||||||
for (const line of protagonistTank.tank!
|
|
||||||
.upgrade_lines) {
|
|
||||||
let i = 0;
|
|
||||||
|
|
||||||
for (const stage of line.stages) {
|
|
||||||
if (stage.tech_name === required) {
|
|
||||||
draft.protagonist.upgrades[line.name] =
|
|
||||||
Math.max(
|
|
||||||
draft.protagonist.upgrades[line.name],
|
|
||||||
i,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const line of protagonistTank.tank!
|
|
||||||
.upgrade_lines) {
|
|
||||||
let i = draft.protagonist.upgrades[line.name];
|
|
||||||
|
|
||||||
while (i > 0) {
|
|
||||||
const currentStage = line.stages[i];
|
|
||||||
const valid = currentStage.required_upgrades.every(
|
|
||||||
(required) => {
|
|
||||||
for (const line of protagonistTank.tank!
|
|
||||||
.upgrade_lines) {
|
|
||||||
const idx =
|
|
||||||
draft.protagonist.upgrades[line.name];
|
|
||||||
|
|
||||||
if (
|
|
||||||
line.stages[idx]?.tech_name === required
|
|
||||||
) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
if (valid) break;
|
|
||||||
|
|
||||||
i--;
|
|
||||||
}
|
|
||||||
|
|
||||||
draft.protagonist.upgrades[line.name] = i;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
backgroundColor:
|
|
||||||
protagonist.upgrades[line.name] === index
|
|
||||||
? "green"
|
|
||||||
: undefined,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{stage.tech_name}: {Grade[stage.grade]}
|
|
||||||
{StageParameters_StageType[stage.stage_type]}
|
|
||||||
{tankEntityGameStrings[stage.display_name]}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
})} */}
|
|
||||||
|
|
||||||
<h2>characteristics</h2>
|
<h2>characteristics</h2>
|
||||||
|
|
||||||
{characteristicsOrder.map((group) => {
|
{characteristicsOrder.map((group) => {
|
||||||
@@ -189,191 +68,4 @@ function Content() {
|
|||||||
})}
|
})}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
});
|
||||||
// const parameters = aggregateParameters(
|
|
||||||
// protagonistTank.tank!,
|
|
||||||
// protagonist.upgrades,
|
|
||||||
// );
|
|
||||||
|
|
||||||
// if (parameters.modules_upgrades.length > 0) {
|
|
||||||
// throw new Error("Modules upgrades display not implemented");
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <>
|
|
||||||
// <h1>{protagonist.id}</h1>
|
|
||||||
|
|
||||||
// <br />
|
|
||||||
|
|
||||||
// <h2>upgrades</h2>
|
|
||||||
|
|
||||||
// {protagonistTank.tank!.upgrade_lines.map((line) => {
|
|
||||||
// return (
|
|
||||||
// <>
|
|
||||||
// <h3>
|
|
||||||
// {line.name} ({protagonist.upgrades[line.name]})
|
|
||||||
// </h3>
|
|
||||||
|
|
||||||
// <div
|
|
||||||
// style={{
|
|
||||||
// display: "flex",
|
|
||||||
// flexDirection: "column",
|
|
||||||
// alignItems: "flex-start",
|
|
||||||
// gap: 8,
|
|
||||||
// }}
|
|
||||||
// >
|
|
||||||
// {line.stages.map((stage, index) => {
|
|
||||||
// if (stage.custom_picture) {
|
|
||||||
// throw new Error("Custom picture not supported");
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <button
|
|
||||||
// key={stage.tech_name}
|
|
||||||
// onClick={() => {
|
|
||||||
// Tankopedia.mutate((draft) => {
|
|
||||||
// draft.protagonist.upgrades[line.name] = index;
|
|
||||||
|
|
||||||
// for (const required of stage.required_upgrades) {
|
|
||||||
// for (const line of protagonistTank.tank!
|
|
||||||
// .upgrade_lines) {
|
|
||||||
// let i = 0;
|
|
||||||
|
|
||||||
// for (const stage of line.stages) {
|
|
||||||
// if (stage.tech_name === required) {
|
|
||||||
// draft.protagonist.upgrades[line.name] =
|
|
||||||
// Math.max(
|
|
||||||
// draft.protagonist.upgrades[line.name],
|
|
||||||
// i,
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
// i++;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// for (const line of protagonistTank.tank!
|
|
||||||
// .upgrade_lines) {
|
|
||||||
// let i = draft.protagonist.upgrades[line.name];
|
|
||||||
|
|
||||||
// while (i > 0) {
|
|
||||||
// const currentStage = line.stages[i];
|
|
||||||
// const valid = currentStage.required_upgrades.every(
|
|
||||||
// (required) => {
|
|
||||||
// for (const line of protagonistTank.tank!
|
|
||||||
// .upgrade_lines) {
|
|
||||||
// const idx =
|
|
||||||
// draft.protagonist.upgrades[line.name];
|
|
||||||
|
|
||||||
// if (
|
|
||||||
// line.stages[idx]?.tech_name === required
|
|
||||||
// ) {
|
|
||||||
// return true;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return false;
|
|
||||||
// },
|
|
||||||
// );
|
|
||||||
|
|
||||||
// if (valid) break;
|
|
||||||
|
|
||||||
// i--;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// draft.protagonist.upgrades[line.name] = i;
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// }}
|
|
||||||
// style={{
|
|
||||||
// backgroundColor:
|
|
||||||
// protagonist.upgrades[line.name] === index
|
|
||||||
// ? "green"
|
|
||||||
// : undefined,
|
|
||||||
// }}
|
|
||||||
// >
|
|
||||||
// {stage.tech_name}: {Grade[stage.grade]}
|
|
||||||
// {StageParameters_StageType[stage.stage_type]}
|
|
||||||
// {tankEntityGameStrings[stage.display_name]}
|
|
||||||
// </button>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
// </div>
|
|
||||||
// </>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
|
|
||||||
// <h2>characteristics</h2>
|
|
||||||
|
|
||||||
// {}
|
|
||||||
|
|
||||||
// <h2>parameters</h2>
|
|
||||||
|
|
||||||
// <h3>attributes</h3>
|
|
||||||
|
|
||||||
// {parameters.attributes.map((attribute) => {
|
|
||||||
// return (
|
|
||||||
// <span>
|
|
||||||
// {TankAttributeChange_AttributeName[attribute.attribute_name]}:{" "}
|
|
||||||
// {attribute.value}
|
|
||||||
// </span>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
|
|
||||||
// <h3>penetration groups</h3>
|
|
||||||
|
|
||||||
// {parameters.penetration_groups_upgrades.map((upgrade) => {
|
|
||||||
// return (
|
|
||||||
// <>
|
|
||||||
// <h4>{PenetrationGroupUpgrade_TankPart[upgrade.tank_part]}</h4>
|
|
||||||
|
|
||||||
// <span>
|
|
||||||
// primary armor ({upgrade.primary_armor.length}):{" "}
|
|
||||||
// {upgrade.primary_armor}
|
|
||||||
// </span>
|
|
||||||
|
|
||||||
// <br />
|
|
||||||
|
|
||||||
// {upgrade.penetration_groups.map((group) => {
|
|
||||||
// return (
|
|
||||||
// <span>
|
|
||||||
// {group.group_name}: {group.armor} (
|
|
||||||
// {PenetrationGroup_CommonData[group.common_data]})
|
|
||||||
// </span>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
// </>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
|
|
||||||
// <h2>modules ({parameters.modules_upgrades.length})</h2>
|
|
||||||
|
|
||||||
// {parameters.modules_upgrades.map((upgrade) => {
|
|
||||||
// return (
|
|
||||||
// <span>{ModuleUpgrade_AttributeName[upgrade.attribute_name]}</span>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
|
|
||||||
// <h2>shells</h2>
|
|
||||||
|
|
||||||
// {parameters.shells_upgrades.map((upgrade) => {
|
|
||||||
// return (
|
|
||||||
// <>
|
|
||||||
// <h3>
|
|
||||||
// {upgrade.shell_id}: {ShellUpgrade_ShellType[upgrade.shell_type]}
|
|
||||||
// </h3>
|
|
||||||
|
|
||||||
// <pre>
|
|
||||||
// silver_price: {JSON.stringify(upgrade.silver_price, null, 2)}
|
|
||||||
// </pre>
|
|
||||||
|
|
||||||
// <pre>
|
|
||||||
// tray_shells: {JSON.stringify(upgrade.tray_shells, null, 2)}
|
|
||||||
// </pre>
|
|
||||||
// </>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
// </>
|
|
||||||
// );
|
|
||||||
}
|
|
||||||
@@ -5,27 +5,15 @@ import { IncrementalLoader } from "../../../components/IncrementalLoader";
|
|||||||
import { TankCard } from "../../../components/TankCard";
|
import { TankCard } from "../../../components/TankCard";
|
||||||
import { TankCards } from "../../../components/TankCards";
|
import { TankCards } from "../../../components/TankCards";
|
||||||
import { TankSearch } from "../../../components/TankSearch";
|
import { TankSearch } from "../../../components/TankSearch";
|
||||||
|
import { withLocale } from "../../../hocs/withLocale";
|
||||||
import { useAwait } from "../../../hooks/useAwait";
|
import { useAwait } from "../../../hooks/useAwait";
|
||||||
import { LocaleProvider } from "../../../hooks/useLocale";
|
|
||||||
import { useSearchableTanks } from "../../../hooks/useSearchableTanks";
|
import { useSearchableTanks } from "../../../hooks/useSearchableTanks";
|
||||||
import { useTierCompare } from "../../../hooks/useTierCompare";
|
import { useTierCompare } from "../../../hooks/useTierCompare";
|
||||||
import { TankFilters } from "../../../stores/tankFilters";
|
import { TankFilters } from "../../../stores/tankFilters";
|
||||||
|
|
||||||
const { go } = fuzzysort;
|
const { go } = fuzzysort;
|
||||||
|
|
||||||
interface PageProps {
|
export const Page = withLocale(() => {
|
||||||
locale: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Page({ locale, ...props }: PageProps) {
|
|
||||||
return (
|
|
||||||
<LocaleProvider locale={locale}>
|
|
||||||
<Content {...props} />
|
|
||||||
</LocaleProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Content() {
|
|
||||||
const tanks = useAwait(() => api.tanks(), "tanks");
|
const tanks = useAwait(() => api.tanks(), "tanks");
|
||||||
|
|
||||||
const compareTiers = useTierCompare();
|
const compareTiers = useTierCompare();
|
||||||
@@ -60,7 +48,7 @@ function Content() {
|
|||||||
<List tanks={tanksFiltered} />
|
<List tanks={tanksFiltered} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
|
||||||
interface ListProps {
|
interface ListProps {
|
||||||
tanks: string[];
|
tanks: string[];
|
||||||
|
|||||||
Reference in new issue
Block a user