fix: hot tanks context

This commit is contained in:
tresabhi committed 2024-11-11 12:46:06 -06:00
1 parent 387a67266f
commit 970d93e7e0
2 files changed
+52 -35

No files matched your search

@@ -0,0 +1,50 @@
import { fetchAverageDefinitions, fetchTankDefinitions } from '@blitzkit/core';
import { Box, Flex, Heading } from '@radix-ui/themes';
import { TankopediaPersistent } from '../stores/tankopediaPersistent';
import { TankCard } from './TankSearch/components/TankCard';
const tankDefinitions = await fetchTankDefinitions();
const averageDefinitions = await fetchAverageDefinitions();
const tanks = Object.values(tankDefinitions.tanks);
const tankAverages = Object.entries(averageDefinitions.averages).map(
([id, average]) => ({
id: Number(id),
...average,
}),
);
// lol don't ask questions
const testTanks = tanks
.filter((tank) => tank.testing && tank.tier >= 8)
.sort((a, b) => b.tier - a.tier);
const mostPlayedTanks = tankAverages
.sort((a, b) => b.samples.d_1 - a.samples.d_1)
.map(({ id }) => tankDefinitions.tanks[id])
.filter((tank) => tank !== undefined && !tank.testing);
const popularTanks = [...testTanks, ...mostPlayedTanks].slice(0, 8);
export function HomePageHotTanks() {
return (
<TankopediaPersistent.Provider>
<Content />
</TankopediaPersistent.Provider>
);
}
function Content() {
return (
<Flex direction="column" gap="5" pt="4" pb="8">
<Heading align="center" size="5">
Popular tanks
</Heading>
<Flex justify="center" gap="4" wrap="wrap">
{popularTanks.map((tank) => (
<Box width="7rem">
<TankCard tank={tank} />
</Box>
))}
</Flex>
</Flex>
);
}
+2 -35
View File
@@ -1,9 +1,8 @@
---
import { fetchAverageDefinitions, fetchTankDefinitions } from '@blitzkit/core';
import { Box, Flex, Heading } from '@radix-ui/themes';
import HomeHero from '../components/HomeHero.astro';
import { HomePageHotTanks } from '../components/HomePageHotTanks';
import { Plugs } from '../components/Plugs.tsx';
import { TankCard } from '../components/TankSearch/components/TankCard';
import ToolCard from '../components/ToolCard.astro';
import {
compareTool,
@@ -16,26 +15,6 @@ import {
tankopediaTool,
} from '../constants/tools';
import BaseLayout from '../layouts/BaseLayout.astro';
const tankDefinitions = await fetchTankDefinitions();
const averageDefinitions = await fetchAverageDefinitions();
const tanks = Object.values(tankDefinitions.tanks);
const tankAverages = Object.entries(averageDefinitions.averages).map(
([id, average]) => ({
id: Number(id),
...average,
}),
);
// lol don't ask questions
const testTanks = tanks
.filter((tank) => tank.testing && tank.tier >= 8)
.sort((a, b) => b.tier - a.tier);
const mostPlayedTanks = tankAverages
.sort((a, b) => b.samples.d_1 - a.samples.d_1)
.map(({ id }) => tankDefinitions.tanks[id])
.filter((tank) => tank !== undefined && !tank.testing);
const popularTanks = [...testTanks, ...mostPlayedTanks].slice(0, 8);
---
<BaseLayout>
@@ -47,19 +26,7 @@ const popularTanks = [...testTanks, ...mostPlayedTanks].slice(0, 8);
<Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
<ToolCard tool={tankopediaTool} />
<Flex direction="column" gap="4" pt="4" pb="8">
<Heading align="center" size="5">Popular tanks</Heading>
<Flex justify="center" gap="4" wrap="wrap">
{
popularTanks.map((tank) => (
<Box width="7rem">
<TankCard {tank} />
</Box>
))
}
</Flex>
</Flex>
<HomePageHotTanks />
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
{/* <ToolCard tool={playerStatsTool} /> */}