Vfx

package.json

@@ -21,7 +21,7 @@
         "@radix-ui/react-aspect-ratio": "^0.1.3",
         "@radix-ui/react-dialog": "0.1.5",
         "@radix-ui/react-scroll-area": "0.1.3",
-        "@react-three/drei": "^8.7.5",
+        "@react-three/drei": "^8.10.6",
         "@react-three/fiber": "^7.0.25",
         "@react-three/flex": "^0.7.0",
         "@solana/wallet-adapter-base": "^0.7.0",

src/components/VFX/Stars.tsx

@@ -1,5 +1,6 @@
-import { Point, Points } from '@react-three/drei'
+import { Box, Point, Points } from '@react-three/drei'
 import { useFrame, useThree } from '@react-three/fiber'
+import Random from 'canvas-sketch-util/random'
 import { ComponentRef, Suspense, useMemo, useRef } from 'react'
 import { AdditiveBlending, Color, Vector3 } from 'three'
 
@@ -21,20 +22,21 @@ export function Stars({ count = 40, depth = 10, size = 800, color }: StarsProps)
     const shaderRef = useRef<AnimatedGalaxyMaterialRef>(null)
     const particlesRef = useRef<ComponentRef<typeof Points>>(null)
 
-    const { dpr, width, height } = useThree(({ viewport }) => viewport)
+    const { dpr } = useThree(({ viewport }) => viewport)
 
     const pointsArray = useMemo(
         () =>
-            Array.from({ length: count }, () => ({
-                position: new Vector3(
-                    (Math.random() - 0.5) * depth,
-                    (Math.random() - 0.5) * height * 2,
-                    (Math.random() - 0.5) * width * 2,
-                ),
-                scale: Math.random(),
-                color: color ?? new Color(selectRandom(colors.trivia)),
-            })),
-        [color, count, depth, height, width],
+            Array.from({ length: count }, () => {
+                const radius = (Math.random() - 0.5) * depth
+                const [x, z] = Random.onCircle(radius)
+                const y = Math.abs(radius) * Math.tan((37.5 * Math.PI) / 180)
+                return {
+                    position: new Vector3(x, y * (Math.random() - 0.5) * 2, z),
+                    scale: Math.random(),
+                    color: color ?? new Color(selectRandom(colors.trivia)),
+                }
+            }),
+        [color, count, depth],
     )
 
     useFrame((state, delta) => {
@@ -43,14 +45,14 @@ export function Stars({ count = 40, depth = 10, size = 800, color }: StarsProps)
 
         const coef = 0.01 * speed
 
-        particlesRef.current.rotation.x = state.clock.getElapsedTime() * coef
         particlesRef.current.rotation.y = state.clock.getElapsedTime() * -coef
         shaderRef.current.uTime += delta * coef
     })
 
     return (
         <Suspense fallback={null}>
-            <Points ref={particlesRef}>
+            {/* @ts-ignore */}
+            <Points ref={particlesRef} limit={count}>
                 <animatedGalaxyMaterial
                     vertexColors
                     depthWrite={false}

src/components/VFX/components/MultilineText.tsx

@@ -1,3 +1,4 @@
+import { Center } from '@react-three/drei'
 import { Box, Flex } from '@react-three/flex'
 
 import { Text } from './Text'
@@ -8,7 +9,7 @@ export const MultilineText = ({ texts = ['Breakroom', 'Show'], size = 1 }) => {
             {texts.map((el, i) => (
                 <group key={i}>
                     <Box height={size * 0.5}>
-                        <Text size={size} dontAlign>
+                        <Text size={size} vAlign="bottom">
                             {el}
                         </Text>
                     </Box>
@@ -18,3 +19,28 @@ export const MultilineText = ({ texts = ['Breakroom', 'Show'], size = 1 }) => {
         </Flex>
     )
 }
+
+export const MultilineTextPro = ({
+    texts = [
+        { text: 'players today', size: 0.32 },
+        { text: '15,230', size: 1 },
+    ],
+    textProps = {},
+}) => {
+    return (
+        <Center>
+            <Flex justifyContent="center">
+                {texts.map(({ size, text }, i) => (
+                    <group key={i}>
+                        <Box height={size * 0.5}>
+                            <Text size={size} vAlign="bottom" {...textProps}>
+                                {text}
+                            </Text>
+                        </Box>
+                        {i < texts.length - 1 ? <Box padding={0.1 * size}>null</Box> : null}
+                    </group>
+                ))}
+            </Flex>
+        </Center>
+    )
+}

src/components/VFX/components/SceneViewer.tsx

@@ -1,13 +1,14 @@
 import { Suspense, useState } from 'react'
 
 import { GameEvent } from '../../../types'
+import { GameInfoSplash } from '../scenes/GameInfoSplash'
 import { QuestionFact } from '../scenes/QuestionFact'
 import { Splash } from '../scenes/Splash'
 import { AnimatePresence } from './AnimatePresence'
 
 const scenes = {
     intro_splash: <Splash />,
-    game_info_splash: null,
+    game_info_splash: <GameInfoSplash />,
     empty: null,
     question: null,
     answer_reveal: null,

src/components/VFX/components/Text.tsx

@@ -4,7 +4,7 @@ import { useLayoutEffect, useMemo, useRef } from 'react'
 import { Mesh, Vector3 } from 'three'
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
 
-import matcap from '../assets/matcap_texture.png'
+import initialMatcap from '../assets/matcap_texture.png'
 
 const defaultConfig = {
     size: 0.5,
@@ -25,6 +25,7 @@ export const Text = ({
     config = defaultConfig,
     color = '',
     dontAlign = false,
+    matcap = initialMatcap,
     ...props
 }) => {
     const font = useLoader(FontLoader, './fonts/Blacker.json')
@@ -65,7 +66,7 @@ export const Text = ({
                 }
 
                 mesh.current.position.x = xPos
-                if (!dontAlign) mesh.current.position.y = yPos
+                mesh.current.position.y = yPos
             }
         }
     }, [children, dontAlign, hAlign, vAlign])

src/components/VFX/scenes/GameInfoSplash.tsx

@@ -0,0 +1,20 @@
+import { useReplay } from '../../../pages/Landing/useReplay'
+import matcap from '../assets/matcap_texture_white.png'
+import { MultilineTextPro } from '../components/MultilineText'
+
+export const GameInfoSplash = () => {
+    const { event } = useReplay()
+    // const playersCount = event?.type === 'game_info_splash' && event.players
+    const prizefund = event?.type === 'game_info_splash' && event.prize_fund_usd
+    return (
+        <MultilineTextPro
+            texts={[
+                // { text: 'players today', size: 0.32 },
+                // { text: String(playersCount || 100), size: 1 },
+                { text: 'Prize Fund', size: 0.32 },
+                { text: `$${String(prizefund || 100)}`, size: 1 },
+            ]}
+            textProps={{ matcap }}
+        />
+    )
+}

src/containers/VFX.tsx

@@ -1,6 +1,6 @@
 import '../components/VFX/extend'
 
-import { ReactNode } from 'react'
+import { ReactNode, useEffect } from 'react'
 
 import { Canvas } from '../components/VFX/components/Canvas'
 import { SceneViewer } from '../components/VFX/components/SceneViewer'
@@ -21,7 +21,7 @@ export const VFX = ({ event, offset, children }: VFXProps) => {
             <Canvas>
                 {children}
                 <SceneViewer event={event} offset={offset} />
-                <Stars count={300} />
+                <Stars depth={800} size={500} count={2520} />
             </Canvas>
         </Box>
     )

src/declarations.d.ts

@@ -1,4 +1,5 @@
 declare module 'canvas-sketch-util/random' {
     export function onSphere(radius = 1): [number, number, number]
     export function insideSphere(radius = 1): [number, number, number]
+    export function onCircle(radius = 1): [number, number]
 }