mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-22 03:07:04 +02:00
feat: banner
This commit is contained in:
TrèsAbhi committed
1 parent
12d07e7dab
commit
1195f078c7
2 files changed
+9
-305
No files matched your search
+6
-305
@@ -1,82 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
CaretRightIcon,
|
||||
Cross2Icon,
|
||||
MagnifyingGlassIcon,
|
||||
} from '@radix-ui/react-icons';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Flex,
|
||||
Heading,
|
||||
IconButton,
|
||||
Link,
|
||||
Spinner,
|
||||
Text,
|
||||
TextField,
|
||||
} from '@radix-ui/themes';
|
||||
import { go } from 'fuzzysort';
|
||||
import { debounce } from 'lodash';
|
||||
import { useRef, useState } from 'react';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import { NAVBAR_HEIGHT } from '../../components/Navbar';
|
||||
import { UNLOCALIZED_REGION_NAMES_SHORT } from '../../constants/regions';
|
||||
import searchPlayersAcrossRegions, {
|
||||
AccountListWithServer,
|
||||
} from '../../core/blitz/searchPlayersAcrossRegions';
|
||||
import {
|
||||
TankDefinition,
|
||||
tankDefinitions,
|
||||
tankNames,
|
||||
} from '../../core/blitzkit/tankDefinitions';
|
||||
import { TIER_ROMAN_NUMERALS } from '../../core/blitzkit/tankDefinitions/constants';
|
||||
import { useWideFormat } from '../../hooks/useWideFormat';
|
||||
import { Flex, Heading, Text } from '@radix-ui/themes';
|
||||
import { imgur } from '../../core/blitzkit/imgur';
|
||||
import { theme } from '../../stitches.config';
|
||||
|
||||
const DISCRIMINATOR_WIDTH = 32;
|
||||
|
||||
// https://i.imgur.com/rUPie9G.jpeg
|
||||
|
||||
export function Hero() {
|
||||
const wideFormat = useWideFormat(512);
|
||||
const [showSearch, setShowSearch] = useState(false);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [searchResults, setSearchResults] = useState<null | {
|
||||
tanks: TankDefinition[];
|
||||
players: AccountListWithServer;
|
||||
}>();
|
||||
const search = useRef<HTMLInputElement>(null);
|
||||
|
||||
const performSearch = debounce(async () => {
|
||||
if (!search.current) return;
|
||||
|
||||
const sanitized = search.current.value.trim();
|
||||
const awaitedTankDefinitions = await tankDefinitions;
|
||||
const awaitedTankNames = await tankNames;
|
||||
const tanks = go(sanitized, awaitedTankNames, {
|
||||
keys: ['combined'],
|
||||
limit: 6,
|
||||
});
|
||||
const players = await searchPlayersAcrossRegions(sanitized, 6);
|
||||
|
||||
setSearchResults({
|
||||
tanks: tanks.map((tank) => awaitedTankDefinitions[tank.obj.id]),
|
||||
players,
|
||||
});
|
||||
setSearching(false);
|
||||
}, 500);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{
|
||||
height: `calc(75vh - ${NAVBAR_HEIGHT}px)`,
|
||||
minHeight: 320,
|
||||
position: 'relative',
|
||||
}}
|
||||
p="4"
|
||||
px="4"
|
||||
py="9"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
@@ -85,7 +20,7 @@ export function Hero() {
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: 'url(/assets/banners/home.webp)',
|
||||
background: `url(${imgur('rUPie9G', { format: 'jpeg' })})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
@@ -113,244 +48,10 @@ export function Hero() {
|
||||
<Heading size="9" weight="bold" align="center">
|
||||
BlitzKit
|
||||
</Heading>
|
||||
<Text color="gray" align="center">
|
||||
<Text color="gray" align="center" size="4">
|
||||
Everything World of Tanks Blitz
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<div
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
position: 'relative',
|
||||
width: showSearch ? 640 : 320,
|
||||
transition: 'width 0.2s ease',
|
||||
}}
|
||||
>
|
||||
<TextField.Root
|
||||
size="3"
|
||||
placeholder="Search players or tanks..."
|
||||
style={{
|
||||
width: '100%',
|
||||
}}
|
||||
ref={search}
|
||||
onChange={() => {
|
||||
if (!search.current) return;
|
||||
|
||||
const sanitized = search.current.value.trim();
|
||||
|
||||
if (sanitized.length > 0) {
|
||||
setShowSearch(true);
|
||||
setSearching(true);
|
||||
performSearch();
|
||||
} else {
|
||||
setShowSearch(false);
|
||||
}
|
||||
}}
|
||||
onFocus={() => {
|
||||
if (!search.current || !isMobile) return;
|
||||
|
||||
const sanitized = search.current.value.trim();
|
||||
setShowSearch(sanitized.length > 0);
|
||||
|
||||
window.scrollTo({
|
||||
top:
|
||||
search.current.getBoundingClientRect().top -
|
||||
NAVBAR_HEIGHT -
|
||||
32,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<TextField.Slot>
|
||||
<MagnifyingGlassIcon />
|
||||
</TextField.Slot>
|
||||
|
||||
{showSearch && (
|
||||
<TextField.Slot>
|
||||
<IconButton
|
||||
variant="ghost"
|
||||
color="gray"
|
||||
onClick={() => {
|
||||
if (!search.current) return;
|
||||
|
||||
search.current.value = '';
|
||||
setShowSearch(false);
|
||||
}}
|
||||
>
|
||||
<Cross2Icon />
|
||||
</IconButton>
|
||||
</TextField.Slot>
|
||||
)}
|
||||
</TextField.Root>
|
||||
|
||||
{showSearch && (
|
||||
<Card
|
||||
mt="3"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{searching && (
|
||||
<Flex justify="center">
|
||||
<Spinner />
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
{!searching && searchResults && (
|
||||
<>
|
||||
<Flex
|
||||
gap={wideFormat ? '6' : '2'}
|
||||
justify="center"
|
||||
direction={wideFormat ? 'row' : 'column'}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
gap="2"
|
||||
style={{
|
||||
flex: 1,
|
||||
maxWidth: wideFormat ? '50%' : undefined,
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
underline="hover"
|
||||
href="/tools/tankopedia"
|
||||
color="gray"
|
||||
style={{
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
style={{
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
Tankopedia
|
||||
<CaretRightIcon />
|
||||
</Flex>
|
||||
</Link>
|
||||
|
||||
<Flex direction="column" px="2">
|
||||
{searchResults.tanks.map((tank) => (
|
||||
<Text>
|
||||
<Link
|
||||
underline="none"
|
||||
style={{ color: 'inherit' }}
|
||||
href={`/tools/tankopedia/${tank.id}`}
|
||||
>
|
||||
<Button
|
||||
tabIndex={-1}
|
||||
size="2"
|
||||
variant="ghost"
|
||||
color="gray"
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
width: '100%',
|
||||
color: 'inherit',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
<Flex align="center" gap="2">
|
||||
<Text
|
||||
color="gray"
|
||||
size="1"
|
||||
style={{
|
||||
width: DISCRIMINATOR_WIDTH,
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
{TIER_ROMAN_NUMERALS[tank.tier]}
|
||||
</Text>
|
||||
|
||||
{tank.name}
|
||||
</Flex>
|
||||
</Button>
|
||||
</Link>
|
||||
</Text>
|
||||
))}
|
||||
|
||||
{searchResults.tanks.length === 0 && (
|
||||
<Text color="gray" size="2">
|
||||
No tanks found
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex
|
||||
direction="column"
|
||||
gap="2"
|
||||
style={{
|
||||
flex: 1,
|
||||
maxWidth: wideFormat ? '50%' : undefined,
|
||||
}}
|
||||
>
|
||||
<Text color="gray">Players</Text>
|
||||
|
||||
<Flex direction="column">
|
||||
{searchResults.players.map((player) => (
|
||||
<Text>
|
||||
<Link
|
||||
underline="none"
|
||||
style={{ color: 'inherit' }}
|
||||
href={`/tools/session/?id=${player.account_id}`}
|
||||
>
|
||||
<Button
|
||||
tabIndex={-1}
|
||||
size="2"
|
||||
variant="ghost"
|
||||
color="gray"
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
width: '100%',
|
||||
color: 'inherit',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
<Flex align="center" gap="2">
|
||||
<Text
|
||||
color="gray"
|
||||
size="1"
|
||||
style={{
|
||||
width: DISCRIMINATOR_WIDTH,
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
{
|
||||
UNLOCALIZED_REGION_NAMES_SHORT[
|
||||
player.region
|
||||
]
|
||||
}
|
||||
</Text>
|
||||
|
||||
{player.nickname}
|
||||
</Flex>
|
||||
</Button>
|
||||
</Link>
|
||||
</Text>
|
||||
))}
|
||||
|
||||
{searchResults.players.length === 0 && (
|
||||
<Text color="gray" size="2">
|
||||
No players found
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@@ -4,10 +4,13 @@ import Link from 'next/link';
|
||||
import PageWrapper from '../components/PageWrapper';
|
||||
import { TOOLS } from '../constants/tools';
|
||||
import { imgur } from '../core/blitzkit/imgur';
|
||||
import { Hero } from './components/Hero';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<Hero />
|
||||
|
||||
<PageWrapper size={1028}>
|
||||
<Grid
|
||||
p="4"
|
||||
|
||||
Reference in new issue
Block a user