From 5d397de76628b98df3934f31b775c81a297aab30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Thu, 28 Aug 2025 18:23:02 -0500 Subject: [PATCH] feat: more progress --- ...lpingPointLight.tsx => HelpingSpotLight.tsx} | 6 +++--- .../components/TankSandbox/Title/index.tsx | 17 ++++++++--------- .../TankSandbox/components/Lighting/index.tsx | 15 +++++++++------ .../TankSandbox/components/SceneProps/index.tsx | 3 ++- 4 files changed, 22 insertions(+), 19 deletions(-) rename packages/website/src/components/{HelpingPointLight.tsx => HelpingSpotLight.tsx} (62%) diff --git a/packages/website/src/components/HelpingPointLight.tsx b/packages/website/src/components/HelpingSpotLight.tsx similarity index 62% rename from packages/website/src/components/HelpingPointLight.tsx rename to packages/website/src/components/HelpingSpotLight.tsx index 888e4d830..74451c5e7 100644 --- a/packages/website/src/components/HelpingPointLight.tsx +++ b/packages/website/src/components/HelpingSpotLight.tsx @@ -1,10 +1,10 @@ -import type { PointLightProps } from '@react-three/fiber'; +import type { SpotLightProps } from '@react-three/fiber'; -interface Props extends PointLightProps { +interface Props extends SpotLightProps { debug?: boolean; } -export function HelpingPointLight({ debug, ...props }: Props) { +export function HelpingSpotLight({ debug, ...props }: Props) { return ( <> {debug && ( diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx index de6e86168..3c063efb2 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx @@ -7,11 +7,10 @@ import { Tracker } from './components/Tracker'; export function Title() { const { unwrap } = useLocale(); const protagonist = Duel.use((state) => state.protagonist.tank); - const disturbed = TankopediaEphemeral.use((state) => state.disturbed); const revealed = TankopediaEphemeral.use((state) => state.revealed); const name = unwrap(protagonist.name); const fontSize = revealed - ? disturbed + ? revealed ? '2rem' : `min(16vh, ${125 / name.length}vw)` : `min(12vh, ${75 / name.length}vw)`; @@ -23,19 +22,19 @@ export function Title() { event.preventDefault(); mutateTankopediaEphemeral((draft) => { - draft.disturbed = true; + draft.revealed = true; }); }} direction="column" position="absolute" align="center" justify="center" - top={disturbed ? '6rem' : '50%'} + top={revealed ? '6rem' : '50%'} left="50%" width="100%" - height={disturbed ? fontSize : '100%'} + height={revealed ? fontSize : '100%'} style={{ - pointerEvents: disturbed ? 'none' : undefined, + pointerEvents: revealed ? 'none' : undefined, transitionDuration: '1s', transform: 'translate(-50%, -50%)', }} @@ -47,10 +46,10 @@ export function Title() { pointerEvents: 'none', fontSize, whiteSpace: 'nowrap', - opacity: disturbed ? 1 : 0.5, - letterSpacing: disturbed || !revealed ? 0 : '-0.03em', + opacity: revealed ? 1 : 0.5, + letterSpacing: revealed || !revealed ? 0 : '-0.03em', transition: ` - letter-spacing 1.5s ${disturbed ? '' : 'cubic-bezier(0.81, -2, 0.68, 1)'}, + letter-spacing 1.5s ${revealed ? '' : 'cubic-bezier(0.81, -2, 0.68, 1)'}, font-size 1s, -webkit-text-stroke 2s, opacity 1s diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting/index.tsx index 2d3256f82..3fb37410a 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting/index.tsx @@ -2,13 +2,14 @@ import { useHelper } from '@react-three/drei'; import { times } from 'lodash-es'; import { useRef } from 'react'; import { SpotLight, SpotLightHelper } from 'three'; -import { HelpingPointLight } from '../../../../../../HelpingPointLight'; +import { degToRad } from 'three/src/math/MathUtils.js'; +import { HelpingSpotLight } from '../../../../../../HelpingSpotLight'; const LIGHTS_COUNT = 5; -const LIGHT_DISTANCE = 8; +const LIGHT_DISTANCE = 13; const LIGHT_HEIGHT_0 = 4; const LIGHT_HEIGHT_1 = 2; -const INTENSITY = 500; +const INTENSITY = 30; export function Lighting() { const topLight = useRef(null!); @@ -21,7 +22,7 @@ export function Lighting() { <> {times(LIGHTS_COUNT, (index) => { const x = index / (LIGHTS_COUNT - 1); - const theta = 2 * Math.PI * (index / LIGHTS_COUNT) - (7 / 8) * Math.PI; + const theta = 2 * Math.PI * (index / LIGHTS_COUNT) - degToRad(152); const position = [ LIGHT_DISTANCE * Math.sin(theta), LIGHT_HEIGHT_0 * (1 - x) + LIGHT_HEIGHT_1 * x, @@ -29,10 +30,12 @@ export function Lighting() { ] as const; return ( - ); })} diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx index 4d3ad7cbf..ea0652314 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx @@ -19,8 +19,9 @@ export function SceneProps() { );