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

feat: new layout

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-06-18 14:28:20 -05:00
1 parent 7554f1ffed
commit eb53b59e32
10 files changed
+334 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ export function HeroSection() {
}}
>
<Heading size={wideFormat ? '9' : '8'}>
{protagonistTank.name}
{protagonistTank.nameFull ?? protagonistTank.name}
</Heading>
<Text color="gray">
src/app/tools/tankopedia/components/TankSearch/constants.tsx
+7
View File
@@ -0,0 +1,7 @@
import { TreeType } from '../../../../../components/Tanks';
export const treeTypeOrder: TreeType[] = [
'researchable',
'premium',
'collector',
];
src/app/tools/tankopedia/components/TankSearch/index.tsx
+1 -3
View File
@@ -14,7 +14,6 @@ import {
import { go } from 'fuzzysort';
import { use, useEffect, useMemo, useRef, useState } from 'react';
import { isMobileOnly } from 'react-device-detect';
import { TreeType } from '../../../../../components/Tanks';
import { TANK_CLASSES } from '../../../../../components/Tanks/components/Item/constants';
import { resolveNearPenetration } from '../../../../../core/blitz/resolveNearPenetration';
import { modelDefinitions } from '../../../../../core/blitzkit/modelDefinitions';
@@ -35,6 +34,7 @@ import { PageTurner } from '../PageTurner';
import { Options } from './components/Options';
import { Results } from './components/Results';
import { Sort } from './components/Sort';
import { treeTypeOrder } from './constants';
interface TankSearchProps {
compact?: boolean;
@@ -42,8 +42,6 @@ interface TankSearchProps {
onSelectAll?: (tanks: TankDefinition[]) => void;
}
const treeTypeOrder: TreeType[] = ['researchable', 'premium', 'collector'];
export function TankSearch({
compact,
onSelect = () => {},
src/app/tools/tankopedia/page.tsx
+151 -23
View File
@@ -1,32 +1,160 @@
'use client';
import { Flex } from '@radix-ui/themes';
import { times } from 'lodash';
import { useRouter } from 'next/navigation';
import { Ad, AdType } from '../../../components/Ad';
import { CaretRightIcon } from '@radix-ui/react-icons';
import { Button, Flex, Heading, Text, TextField } from '@radix-ui/themes';
import { range } from 'lodash';
import { use } from 'react';
import { classIcons } from '../../../components/ClassIcon';
import { Link } from '../../../components/Link';
import PageWrapper from '../../../components/PageWrapper';
import { useAdExempt } from '../../../hooks/useAdExempt';
import { TankSearch } from './components/TankSearch';
import { TANK_CLASSES } from '../../../components/Tanks/components/Item/constants';
import { asset } from '../../../core/blitzkit/asset';
import {
NATIONS,
Tier,
tanksDefinitionsArray,
} from '../../../core/blitzkit/tankDefinitions';
import { TIER_ROMAN_NUMERALS } from '../../../core/blitzkit/tankDefinitions/constants';
import { tankIcon } from '../../../core/blitzkit/tankIcon';
import { treeTypeOrder } from './components/TankSearch/constants';
export default function Page() {
const router = useRouter();
const exempt = useAdExempt();
const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
const awaitedNations = use(NATIONS);
return (
<PageWrapper size={1200} color="purple">
<TankSearch
onSelect={(tank) => {
router.push(`./tankopedia/${tank.id}`);
}}
/>
<PageWrapper color="purple">
<TextField.Root size="3" placeholder="Search tanks...">
<TextField.Slot />
{!exempt && (
<Flex justify="center" wrap="wrap">
{times(2, (index) => (
<Ad key={index} type={AdType.MediumRectangleHorizontalPurple} />
))}
</Flex>
)}
<TextField.Slot>
<Button size="3" variant="ghost">
M48 Patton <CaretRightIcon />
</Button>
</TextField.Slot>
</TextField.Root>
<Flex direction="column" gap="8" mt="4">
{range(10, 0).map((tierUntyped) => {
const tier = tierUntyped as Tier;
const tierTanks = awaitedTanksDefinitionsArray.filter(
(tank) => tank.tier === tier,
);
return (
<Flex key={tier} direction="column" gap="4">
<Heading>Tier {TIER_ROMAN_NUMERALS[tier]}</Heading>
<Flex direction="column" gap="4">
{awaitedNations.map((nation, nationIndex) => {
const nationTanks = tierTanks
.filter((tank) => tank.nation === nation)
.sort(
(a, b) =>
treeTypeOrder.indexOf(a.treeType) -
treeTypeOrder.indexOf(b.treeType),
)
.sort(
(a, b) =>
TANK_CLASSES.indexOf(a.class) -
TANK_CLASSES.indexOf(b.class),
);
if (nationTanks.length === 0) return null;
return (
<>
{nationIndex > 0 && (
<div
style={{
height: '0.5px',
background: 'var(--gray-6)',
}}
/>
)}
<Flex key={nation} align="center">
<img
alt={nation}
src={asset(`flags/scratched/${nation}.webp`)}
width={128}
height={64}
style={{
objectFit: 'contain',
}}
/>
<Flex wrap="wrap" gap="2">
{nationTanks.map((tank) => {
const Icon = classIcons[tank.class];
return (
<Link
size="1"
color={
tank.treeType === 'collector'
? 'blue'
: tank.treeType === 'premium'
? 'amber'
: 'gray'
}
highContrast={tank.treeType === 'researchable'}
underline="hover"
key={tank.id}
href={`/tools/tankopedia/${tank.id}`}
>
<Flex
direction="column"
align="center"
width="80px"
>
<img
alt={tank.name}
src={tankIcon(tank.id)}
width={64}
height={64}
style={{
objectFit: 'contain',
}}
/>
<Flex
justify="center"
gap="1"
align="center"
overflow="hidden"
width="100%"
>
<Icon
style={{
width: '1em',
height: '1em',
minWidth: '1em',
minHeight: '1em',
}}
/>
<Text
align="center"
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{tank.name}
</Text>
</Flex>
</Flex>
</Link>
);
})}
</Flex>
</Flex>
</>
);
})}
</Flex>
</Flex>
);
})}
</Flex>
</PageWrapper>
);
}
src/components/ClassIcon/components/ClassHeavy.tsx
+58
View File
@@ -0,0 +1,58 @@
import { ComponentProps } from 'react';
export function ClassHeavy(props: ComponentProps<'svg'>) {
return (
<svg
width="64"
height="64"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clip-path="url(#clip0_70_177)">
<g clip-path="url(#clip1_70_177)">
<rect
y="32"
width="45.2548"
height="12.4183"
rx="6.20914"
transform="rotate(-45 0 32)"
fill="currentColor"
/>
<rect
x="11.6095"
y="43.6095"
width="45.2548"
height="12.4183"
rx="6.20914"
transform="rotate(-45 11.6095 43.6095)"
fill="currentColor"
/>
<rect
x="23.2189"
y="55.219"
width="45.2548"
height="12.4183"
rx="6.20914"
transform="rotate(-45 23.2189 55.219)"
fill="currentColor"
/>
</g>
</g>
<defs>
<clipPath id="clip0_70_177">
<rect width="64" height="64" fill="white" />
</clipPath>
<clipPath id="clip1_70_177">
<rect
width="45.2548"
height="45.2548"
fill="white"
transform="translate(0 32) rotate(-45)"
/>
</clipPath>
</defs>
</svg>
);
}
src/components/ClassIcon/components/ClassLight.tsx
+23
View File
@@ -0,0 +1,23 @@
import { ComponentProps } from 'react';
export function ClassLight(props: ComponentProps<'svg'>) {
return (
<svg
width="64"
height="64"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect
y="32"
width="45.2548"
height="45.2548"
rx="8"
transform="rotate(-45 0 32)"
fill="currentColor"
/>
</svg>
);
}
src/components/ClassIcon/components/ClassMedium.tsx
+49
View File
@@ -0,0 +1,49 @@
import { ComponentProps } from 'react';
export function ClassMedium(props: ComponentProps<'svg'>) {
return (
<svg
width="64"
height="64"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clip-path="url(#clip0_70_149)">
<g clip-path="url(#clip1_70_149)">
<rect
y="32"
width="45.2548"
height="20.6274"
rx="8"
transform="rotate(-45 0 32)"
fill="currentColor"
/>
<rect
x="17.4142"
y="49.4142"
width="45.2548"
height="20.6274"
rx="8"
transform="rotate(-45 17.4142 49.4142)"
fill="currentColor"
/>
</g>
</g>
<defs>
<clipPath id="clip0_70_149">
<rect width="64" height="64" fill="white" />
</clipPath>
<clipPath id="clip1_70_149">
<rect
width="45.2548"
height="45.2548"
fill="white"
transform="translate(0 32) rotate(-45)"
/>
</clipPath>
</defs>
</svg>
);
}
src/components/ClassIcon/components/ClassTankDestroyer.tsx
+19
View File
@@ -0,0 +1,19 @@
import { ComponentProps } from 'react';
export function ClassTankDestroyer(props: ComponentProps<'svg'>) {
return (
<svg
width="64"
height="64"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M36.6355 54.572C34.7073 57.886 29.9201 57.8861 27.992 54.572L4.68577 14.5145C2.74639 11.1812 5.15107 7 9.00751 7H55.6199C59.4764 7 61.881 11.1812 59.9417 14.5145L36.6355 54.572Z"
fill="currentColor"
/>
</svg>
);
}
src/components/ClassIcon/index.ts
+16
View File
@@ -0,0 +1,16 @@
import { ComponentProps, ReactNode } from 'react';
import { TankClass } from '../Tanks';
import { ClassHeavy } from './components/ClassHeavy';
import { ClassLight } from './components/ClassLight';
import { ClassMedium } from './components/ClassMedium';
import { ClassTankDestroyer } from './components/ClassTankDestroyer';
export const classIcons: Record<
TankClass,
(props: ComponentProps<'svg'>) => ReactNode
> = {
'AT-SPG': ClassTankDestroyer,
heavyTank: ClassHeavy,
lightTank: ClassLight,
mediumTank: ClassMedium,
};
src/core/blitzkit/tankDefinitions/constants.ts
+9
View File
@@ -19,18 +19,27 @@ export const GUN_TYPE_NAMES: Record<GunDefinition['type'], string> = {
autoLoader: 'Auto loader',
autoReloader: 'Auto reloader',
};
/**
* @deprecated use svg
*/
export const TANK_ICONS: Record<TankClass, string> = {
'AT-SPG': 'https://i.imgur.com/BIHSEH0.png',
lightTank: 'https://i.imgur.com/CSNha5V.png',
mediumTank: 'https://i.imgur.com/wvf3ltm.png',
heavyTank: 'https://i.imgur.com/ECeqlZa.png',
};
/**
* @deprecated use svg
*/
export const TANK_ICONS_PREMIUM: Record<TankClass, string> = {
'AT-SPG': 'https://i.imgur.com/TCu3EdR.png',
lightTank: 'https://i.imgur.com/zdkpTRb.png',
mediumTank: 'https://i.imgur.com/3z7eHX6.png',
heavyTank: 'https://i.imgur.com/P3vbmyA.png',
};
/**
* @deprecated use svg
*/
export const TANK_ICONS_COLLECTOR: Record<TankClass, string> = {
'AT-SPG': 'https://i.imgur.com/WTjeirB.png',
lightTank: 'https://i.imgur.com/EwhtKkU.png',