TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 18:57:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

hocs

Browse Source
This commit is contained in:
tresabhi committed 2026-05-20 12:17:09 -05:00
1 parent 5ea7bbd6a1
commit ad78e45f1b
7 files changed
+41 -403
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website-ue/src/hocs/withErrorWrapper.tsx
+12
View File
@@ -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>;
};
}
packages/website-ue/src/hocs/withLocale.tsx
+18
View File
@@ -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>
);
};
}
packages/website-ue/src/pages/[...locale]/avatars/_index.tsx
+3 -15
View File
@@ -1,21 +1,9 @@
import { AvatarControls } from "../../../components/AvatarControls";
import { AvatarsList } from "../../../components/AvatarsList";
import { Section } from "../../../components/Section";
import { LocaleProvider } from "../../../hooks/useLocale";
import { withLocale } from "../../../hocs/withLocale";
interface PageProps {
locale: string;
}
export function Page({ locale, ...props }: PageProps) {
return (
<LocaleProvider locale={locale}>
<Content {...props} />
</LocaleProvider>
);
}
function Content() {
export const Page = withLocale(() => {
return (
<>
<Section>
@@ -27,4 +15,4 @@ function Content() {
</Section>
</>
);
}
});
packages/website-ue/src/pages/[...locale]/backgrounds/index.astro
-45
View File
@@ -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>
packages/website-ue/src/pages/[...locale]/settings/index.astro
-15
View File
@@ -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>
packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
+5 -313
View File
@@ -1,48 +1,26 @@
import { Fragment, useMemo } from "react";
import { api } from "../../../../api/dynamic";
import { ErrorWrapper } from "../../../../components/ErrorWrapper";
import { TankopediaLoadout } from "../../../../components/TankopediaLoadout";
import { withLocale } from "../../../../hocs/withLocale";
import { useAwait } from "../../../../hooks/useAwait";
import { useCharacteristicRenderer } from "../../../../hooks/useCharacteristicRenderer";
import { useEquipment } from "../../../../hooks/useEquipment";
import { LocaleProvider } from "../../../../hooks/useLocale";
import { Tankopedia } from "../../../../stores/tankopedia";
import { characteristicsOrder } from "../../../../tankopedia/characteristicsOrder";
import { computeCharacteristics } from "../../../../tankopedia/computeCharacteristics";
interface PageProps {
id: string;
locale: string;
}
export function Page(props: PageProps) {
return (
<ErrorWrapper>
<Wrapper {...props} />
</ErrorWrapper>
);
}
export const Page = withLocale(({ id }: PageProps) => {
const protagonistTank = useAwait(() => api.tank(id), `tank-${id}`);
function Wrapper({ id, locale }: PageProps) {
const tank = useAwait(() => api.tank(id), `tank-${id}`);
Tankopedia.useInitialization(protagonistTank);
Tankopedia.useInitialization(tank);
return (
<LocaleProvider locale={locale}>
<Content />
</LocaleProvider>
);
}
function Content() {
const renderCharacteristic = useCharacteristicRenderer();
const protagonist = Tankopedia.use((state) => state.protagonist);
const protagonistTank = useAwait(
() => api.tank(protagonist.id),
`tank-${protagonist.id}`,
);
const protagonistEquipment = useEquipment(protagonistTank.tank!);
const { characteristics } = useMemo(
@@ -63,105 +41,6 @@ function Content() {
<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>
{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>
// </>
// );
// })}
// </>
// );
}
});
packages/website-ue/src/pages/[...locale]/tanks/_index.tsx
+3 -15
View File
@@ -5,27 +5,15 @@ import { IncrementalLoader } from "../../../components/IncrementalLoader";
import { TankCard } from "../../../components/TankCard";
import { TankCards } from "../../../components/TankCards";
import { TankSearch } from "../../../components/TankSearch";
import { withLocale } from "../../../hocs/withLocale";
import { useAwait } from "../../../hooks/useAwait";
import { LocaleProvider } from "../../../hooks/useLocale";
import { useSearchableTanks } from "../../../hooks/useSearchableTanks";
import { useTierCompare } from "../../../hooks/useTierCompare";
import { TankFilters } from "../../../stores/tankFilters";
const { go } = fuzzysort;
interface PageProps {
locale: string;
}
export function Page({ locale, ...props }: PageProps) {
return (
<LocaleProvider locale={locale}>
<Content {...props} />
</LocaleProvider>
);
}
function Content() {
export const Page = withLocale(() => {
const tanks = useAwait(() => api.tanks(), "tanks");
const compareTiers = useTierCompare();
@@ -60,7 +48,7 @@ function Content() {
<List tanks={tanksFiltered} />
</>
);
}
});
interface ListProps {
tanks: string[];