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

feat: glow and shells

Browse Source
This commit is contained in:
tresabhi committed 2025-04-29 00:10:42 -05:00
1 parent a99cce07dc
commit 8a5a4bf696
5 files changed
+143 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/public/assets/images/tankopedia/visualizers/reload/shell.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Shell.tsx
+45 -15
View File
@@ -4,6 +4,7 @@ import { useEffect, useRef } from 'react';
import { reloadUpdate, type ReloadUpdateData } from '..';
import { Var } from '../../../../../../../../core/radix/var';
import type { StatsAcceptorProps } from '../../HullTraverseVisualizer';
import { ShellBorder } from './ShellBorder';
interface ShellProps {
index: number;
@@ -33,29 +34,58 @@ export function Shell({ index, stats }: ShellProps & StatsAcceptorProps) {
position: 'absolute',
top: '50%',
left: '50%',
transform: `translate(-50%, -50%) rotate(${(index - Math.floor(stats.shells / 2)) * 10}deg)`,
transform: `translate(-50%, -50%) rotate(${7 * (index - (stats.shells - 1) / 2) + 135}deg)`,
}}
>
<Flex
justify="end"
<Box
left="50%"
position="absolute"
ml="calc(25% + 2.5rem)"
width="1.25rem"
height="1.25rem"
style={{
position: 'absolute',
left: '50%',
marginLeft: 'calc(25% + 2rem)',
width: '1.25rem',
height: '0.5rem',
borderRadius: '0.25rem',
overflow: 'hidden',
outline: `1px solid ${Var('jade-6')}`,
transform: 'translate(-50%, -50%)',
}}
>
<Box
ref={bar}
<ShellBorder
width="100%"
height="100%"
style={{
background: Var('jade-9'),
position: 'absolute',
top: 0,
left: 0,
color: Var('jade-8'),
}}
/>
</Flex>
<Flex
position="absolute"
top="0"
left="0"
width="100%"
height="100%"
justify="end"
style={{
borderRadius: '0.25rem',
overflow: 'hidden',
maskImage:
'url(/assets/images/tankopedia/visualizers/reload/shell.png)',
// maskComposite: 'exclude',
maskSize: 'contain',
maskRepeat: 'no-repeat',
maskPosition: 'center',
// background: 'red',
}}
>
<Box
ref={bar}
style={{
width: '100%',
background: Var('jade-9'),
}}
/>
</Flex>
</Box>
</Box>
);
}
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx
+21
View File
@@ -0,0 +1,21 @@
import type { ComponentProps } from 'react';
export function ShellBorder(props: ComponentProps<'svg'>) {
return (
<svg
width="159"
height="60"
viewBox="0 0 159 60"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M149.917 7.5L151.5 9.91406V50.085L149.917 52.5H134.674C133.504 51.6657 132.116 51.1813 130.673 51.1133L130.319 51.1045H93.085C91.8919 51.1046 90.7173 51.3895 89.6582 51.9336L89.4482 52.0459L88.6494 52.4883C48.806 52.0806 22.9344 39.046 11.1416 30C22.9344 20.954 48.806 7.91846 88.6494 7.51074L89.4482 7.9541C90.5611 8.57122 91.8125 8.89543 93.085 8.89551H130.319C131.888 8.89551 133.409 8.40216 134.674 7.5H149.917Z"
stroke="currentColor"
stroke-width="15"
stroke-linejoin="round"
/>
</svg>
);
}
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Target.tsx
+22
View File
@@ -0,0 +1,22 @@
import { Box } from '@radix-ui/themes';
export function Target() {
return (
<Box
style={{
background:
'url(/assets/images/tankopedia/visualizers/reload/background.jpg)',
backgroundSize: '25rem',
backgroundPosition: 'center',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '100%',
height: '100%',
objectFit: 'cover',
filter: 'blur(0.2rem) contrast(1.2) brightness(0.5) saturate(0.8)',
}}
/>
);
}
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx
+55 -21
View File
@@ -5,6 +5,7 @@ import { useEffect, useRef } from 'react';
import { Var } from '../../../../../../../core/radix/var';
import type { StatsAcceptorProps } from '../HullTraverseVisualizer';
import { Shell } from './components/Shell';
import { Target } from './components/Target';
export interface ReloadUpdateData {
reload: number;
@@ -15,8 +16,8 @@ export const reloadUpdate = new Quicklime<ReloadUpdateData>();
export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
const reloadCircle = useRef<HTMLDivElement>(null);
const size = `${stats.shells === 1 ? 66 : 58}%`;
const reloadCore = useRef<HTMLDivElement>(null);
const reloadGlow = useRef<HTMLDivElement>(null);
useEffect(() => {
let cancel = false;
@@ -46,11 +47,14 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
const handleReloadUpdate: QuicklimeCallback<ReloadUpdateData> = ({
data,
}) => {
if (!reloadCircle.current) return;
if (!reloadCircle.current || !reloadCore.current || !reloadGlow.current)
return;
const reloadAngle = data.reload * 2 * Math.PI;
reloadCircle.current.style.background = `conic-gradient(${Var('amber-9')} 0 ${reloadAngle}rad, ${Var('red-7')} ${reloadAngle}rad)`;
reloadCircle.current.style.background = `conic-gradient(${Var('amber-9')} 0 ${reloadAngle}rad, ${Var('orange-7')} ${reloadAngle}rad)`;
reloadCore.current.style.background = `conic-gradient(${Var('amber-4')} 0 ${reloadAngle}rad, ${Var('orange-3')} ${reloadAngle}rad)`;
reloadGlow.current.style.background = `conic-gradient(${Var('amber-9')} 0 ${reloadAngle}rad, transparent ${reloadAngle}rad)`;
};
reloadUpdate.on(handleReloadUpdate);
@@ -63,19 +67,7 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
return (
<Card variant="classic" mb="6" style={{ aspectRatio: '1 / 1' }}>
<Box position="absolute" top="0" left="0" width="100%" height="100%">
<img
src="/assets/images/tankopedia/visualizers/reload/background.jpg"
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '100%',
height: '100%',
objectFit: 'cover',
filter: 'blur(0.2rem) contrast(1.2) brightness(0.5) saturate(0.8)',
}}
/>
<Target />
<Box
position="absolute"
@@ -94,17 +86,59 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
position="absolute"
top="50%"
left="50%"
width={size}
height={size}
width="12rem"
height="12rem"
className="reload"
ref={reloadGlow}
style={{
transform: 'translate(-50%, -50%)',
borderRadius: '50%',
background: Var('red-7'),
filter: 'blur(0.5rem)',
}}
/>
<Box
p="1"
position="absolute"
top="50%"
left="50%"
width="12rem"
height="12rem"
className="reload"
ref={reloadCircle}
style={{
transform: 'translate(-50%, -50%)',
borderRadius: '50%',
background: Var('red-7'),
maskImage: `radial-gradient(transparent 65%, black 68%)`,
}}
/>
>
<Box
width="100%"
height="100%"
style={{
borderRadius: '50%',
background: 'black',
overflow: 'hidden',
}}
position="relative"
>
<Target />
<Box
ref={reloadCore}
width="100%"
height="100%"
position="absolute"
top="0"
left="0"
style={{
borderRadius: '50%',
maskImage: 'radial-gradient(transparent 25%, black 100%)',
}}
/>
</Box>
</Box>
<img
src="/assets/images/tankopedia/visualizers/reload/caret.png"