diff --git a/package-lock.json b/package-lock.json index 79ad9d8..4609d5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,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", @@ -3683,9 +3683,9 @@ "integrity": "sha512-GGiIscTM+CEUNV52anj3g5FqAZKL2+eRKtvBOAlC99qGBbvJ3qTLImrUR/I3lXY7PRuLgzI6kh34quA1oUxWYQ==" }, "node_modules/@react-three/drei": { - "version": "8.8.4", - "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-8.8.4.tgz", - "integrity": "sha512-DvptFTpDODbeRbIA6miMEmIQSv7R+MTPliw92NIU/wwg+IvSNTTZSi8DBYR7qDQosAl73Cdj1E9qDfkv7+p5Gg==", + "version": "8.10.6", + "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-8.10.6.tgz", + "integrity": "sha512-G4RsL0W0CskcMTMYg8erZ/kJ31nFE/m2SA40SX5Ew33pqDDGMBK+ML0dnKiQMj8uD9bjka7TzmwEuT/n814hlQ==", "dependencies": { "@babel/runtime": "^7.11.2", "@react-spring/three": "^9.3.1", @@ -3697,10 +3697,10 @@ "react-composer": "^5.0.2", "react-merge-refs": "^1.1.0", "stats.js": "^0.17.0", + "suspend-react": "^0.0.8", "three-mesh-bvh": "^0.5.4", - "three-stdlib": "^2.8.6", - "troika-three-text": "^0.44.0", - "use-asset": "^1.0.4", + "three-stdlib": "^2.8.7", + "troika-three-text": "^0.45.0", "utility-types": "^3.10.0", "zustand": "^3.5.13" }, @@ -27243,6 +27243,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/suspend-react": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.0.8.tgz", + "integrity": "sha512-ZC3r8Hu1y0dIThzsGw0RLZplnX9yXwfItcvaIzJc2VQVi8TGyGDlu92syMB5ulybfvGLHAI5Ghzlk23UBPF8xg==", + "peerDependencies": { + "react": ">=17.0" + } + }, "node_modules/svg-arc-to-cubic-bezier": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz", @@ -27769,9 +27777,9 @@ } }, "node_modules/three-stdlib": { - "version": "2.8.6", - "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.8.6.tgz", - "integrity": "sha512-0emGIVrJG3SGmDyU/mdd4fPOwkXrDCCCwSugHiQBkN5AruAtSTS85Y7zjvexQsQaDYb5RGlJsDefH41nM9uG4Q==", + "version": "2.8.7", + "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.8.7.tgz", + "integrity": "sha512-qHqzk0k2zg4zNogTqNmZqyeYoyj1VbcczfAWEJcw5U3jwWaxeOGEDy3AHcIfwK35i3eQVdSz9DxWbPvMyPMPCA==", "dependencies": { "@babel/runtime": "^7.16.7", "@webgpu/glslang": "^0.0.15", @@ -28003,30 +28011,30 @@ } }, "node_modules/troika-three-text": { - "version": "0.44.0", - "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.44.0.tgz", - "integrity": "sha512-YwqXczjXQ4yq2a2ufO9icOIjeJutE/ODS8PHmmt/WAzVFqoiqeemclp/Ewiqm0+sdI1KnWRm6lj8df/zmhU3Og==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.45.0.tgz", + "integrity": "sha512-s/MhDYJm0+aiQU8fjO1TXl1UZESY52GMJgzyMB0HHnh2iADy+WY00oVgNsW6lU7XmC2g8MU81nV5egCDAS4/Pg==", "dependencies": { "bidi-js": "^1.0.2", - "troika-three-utils": "^0.44.0", - "troika-worker-utils": "^0.44.0" + "troika-three-utils": "^0.45.0", + "troika-worker-utils": "^0.45.0" }, "peerDependencies": { "three": ">=0.103.0" } }, "node_modules/troika-three-utils": { - "version": "0.44.0", - "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.44.0.tgz", - "integrity": "sha512-gaEpqrlWnkrVU5UgUx+YZTC8NrhsA2Tt6zEIbn3WNuom7pLtrgjuHpAM72gif7DoYdOWEyFco3Zb6rpJh9Fodg==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.45.0.tgz", + "integrity": "sha512-VJqEx8aww2El/zSbbnmjdhaAOQ4LM0CVJmKh385Vi/CzruhMmWEaunMRI/J1vh4MbbGo+dREu73FkMkr/PXypA==", "peerDependencies": { "three": ">=0.103.0" } }, "node_modules/troika-worker-utils": { - "version": "0.44.0", - "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.44.0.tgz", - "integrity": "sha512-/ETcH1rUoO9hVBL6Ifea2WOoGPw90ncrk8b8SJKTLtzcQvEWRIZ4eUxlVCtU93fLechCV+DWPs1y8+Bjh1WaJg==" + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.45.0.tgz", + "integrity": "sha512-pEO8u7+29dG5SbmGUg0wqXPEe+r+Hd0ibKf75tjH2aoR7ZPlRwUzRTvPURDlDNFF4KysDLvMCdHnyslG9IG5Hw==" }, "node_modules/trough": { "version": "1.0.5", @@ -33197,9 +33205,9 @@ "integrity": "sha512-GGiIscTM+CEUNV52anj3g5FqAZKL2+eRKtvBOAlC99qGBbvJ3qTLImrUR/I3lXY7PRuLgzI6kh34quA1oUxWYQ==" }, "@react-three/drei": { - "version": "8.8.4", - "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-8.8.4.tgz", - "integrity": "sha512-DvptFTpDODbeRbIA6miMEmIQSv7R+MTPliw92NIU/wwg+IvSNTTZSi8DBYR7qDQosAl73Cdj1E9qDfkv7+p5Gg==", + "version": "8.10.6", + "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-8.10.6.tgz", + "integrity": "sha512-G4RsL0W0CskcMTMYg8erZ/kJ31nFE/m2SA40SX5Ew33pqDDGMBK+ML0dnKiQMj8uD9bjka7TzmwEuT/n814hlQ==", "requires": { "@babel/runtime": "^7.11.2", "@react-spring/three": "^9.3.1", @@ -33211,10 +33219,10 @@ "react-composer": "^5.0.2", "react-merge-refs": "^1.1.0", "stats.js": "^0.17.0", + "suspend-react": "^0.0.8", "three-mesh-bvh": "^0.5.4", - "three-stdlib": "^2.8.6", - "troika-three-text": "^0.44.0", - "use-asset": "^1.0.4", + "three-stdlib": "^2.8.7", + "troika-three-text": "^0.45.0", "utility-types": "^3.10.0", "zustand": "^3.5.13" }, @@ -51298,6 +51306,12 @@ "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, + "suspend-react": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.0.8.tgz", + "integrity": "sha512-ZC3r8Hu1y0dIThzsGw0RLZplnX9yXwfItcvaIzJc2VQVi8TGyGDlu92syMB5ulybfvGLHAI5Ghzlk23UBPF8xg==", + "requires": {} + }, "svg-arc-to-cubic-bezier": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz", @@ -51709,9 +51723,9 @@ "requires": {} }, "three-stdlib": { - "version": "2.8.6", - "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.8.6.tgz", - "integrity": "sha512-0emGIVrJG3SGmDyU/mdd4fPOwkXrDCCCwSugHiQBkN5AruAtSTS85Y7zjvexQsQaDYb5RGlJsDefH41nM9uG4Q==", + "version": "2.8.7", + "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.8.7.tgz", + "integrity": "sha512-qHqzk0k2zg4zNogTqNmZqyeYoyj1VbcczfAWEJcw5U3jwWaxeOGEDy3AHcIfwK35i3eQVdSz9DxWbPvMyPMPCA==", "requires": { "@babel/runtime": "^7.16.7", "@webgpu/glslang": "^0.0.15", @@ -51912,25 +51926,25 @@ "dev": true }, "troika-three-text": { - "version": "0.44.0", - "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.44.0.tgz", - "integrity": "sha512-YwqXczjXQ4yq2a2ufO9icOIjeJutE/ODS8PHmmt/WAzVFqoiqeemclp/Ewiqm0+sdI1KnWRm6lj8df/zmhU3Og==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.45.0.tgz", + "integrity": "sha512-s/MhDYJm0+aiQU8fjO1TXl1UZESY52GMJgzyMB0HHnh2iADy+WY00oVgNsW6lU7XmC2g8MU81nV5egCDAS4/Pg==", "requires": { "bidi-js": "^1.0.2", - "troika-three-utils": "^0.44.0", - "troika-worker-utils": "^0.44.0" + "troika-three-utils": "^0.45.0", + "troika-worker-utils": "^0.45.0" } }, "troika-three-utils": { - "version": "0.44.0", - "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.44.0.tgz", - "integrity": "sha512-gaEpqrlWnkrVU5UgUx+YZTC8NrhsA2Tt6zEIbn3WNuom7pLtrgjuHpAM72gif7DoYdOWEyFco3Zb6rpJh9Fodg==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.45.0.tgz", + "integrity": "sha512-VJqEx8aww2El/zSbbnmjdhaAOQ4LM0CVJmKh385Vi/CzruhMmWEaunMRI/J1vh4MbbGo+dREu73FkMkr/PXypA==", "requires": {} }, "troika-worker-utils": { - "version": "0.44.0", - "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.44.0.tgz", - "integrity": "sha512-/ETcH1rUoO9hVBL6Ifea2WOoGPw90ncrk8b8SJKTLtzcQvEWRIZ4eUxlVCtU93fLechCV+DWPs1y8+Bjh1WaJg==" + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.45.0.tgz", + "integrity": "sha512-pEO8u7+29dG5SbmGUg0wqXPEe+r+Hd0ibKf75tjH2aoR7ZPlRwUzRTvPURDlDNFF4KysDLvMCdHnyslG9IG5Hw==" }, "trough": { "version": "1.0.5", diff --git a/package.json b/package.json index 29a9e8f..4c27d67 100644 --- a/package.json +++ b/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", diff --git a/src/components/VFX/Stars.tsx b/src/components/VFX/Stars.tsx index f3be10a..5c8999e 100644 --- a/src/components/VFX/Stars.tsx +++ b/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(null) const particlesRef = useRef>(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 ( - + {/* @ts-ignore */} + { {texts.map((el, i) => ( - + {el} @@ -18,3 +19,28 @@ export const MultilineText = ({ texts = ['Breakroom', 'Show'], size = 1 }) => { ) } + +export const MultilineTextPro = ({ + texts = [ + { text: 'players today', size: 0.32 }, + { text: '15,230', size: 1 }, + ], + textProps = {}, +}) => { + return ( +
+ + {texts.map(({ size, text }, i) => ( + + + + {text} + + + {i < texts.length - 1 ? null : null} + + ))} + +
+ ) +} diff --git a/src/components/VFX/components/SceneViewer.tsx b/src/components/VFX/components/SceneViewer.tsx index 8befd64..9073462 100644 --- a/src/components/VFX/components/SceneViewer.tsx +++ b/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: , - game_info_splash: null, + game_info_splash: , empty: null, question: null, answer_reveal: null, diff --git a/src/components/VFX/components/Text.tsx b/src/components/VFX/components/Text.tsx index e1627b3..b7e7356 100644 --- a/src/components/VFX/components/Text.tsx +++ b/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]) diff --git a/src/components/VFX/scenes/GameInfoSplash.tsx b/src/components/VFX/scenes/GameInfoSplash.tsx new file mode 100644 index 0000000..7e3e2ed --- /dev/null +++ b/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 ( + + ) +} diff --git a/src/containers/VFX.tsx b/src/containers/VFX.tsx index bcc83d4..887709d 100644 --- a/src/containers/VFX.tsx +++ b/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) => { {children} - + ) diff --git a/src/declarations.d.ts b/src/declarations.d.ts index ef61722..968a8f3 100644 --- a/src/declarations.d.ts +++ b/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] }