diff --git a/src/MiniGame1.tsx b/src/MiniGame1.tsx index 629ccac..01938e9 100644 --- a/src/MiniGame1.tsx +++ b/src/MiniGame1.tsx @@ -1,10 +1,10 @@ import { Plane, useTexture } from "@react-three/drei"; import { Canvas } from "@react-three/fiber"; import { EffectComposer, N8AO, ToneMapping } from "@react-three/postprocessing"; -import { Physics, RigidBody } from "@react-three/rapier"; -import { useState } from "react"; +import { Physics, RapierRigidBody, RigidBody } from "@react-three/rapier"; +import { useRef, useState } from "react"; import * as THREE from "three"; -import { proxy, useSnapshot } from "valtio"; +import { proxy } from "valtio"; import officeLoop from "./resources/office game loop 1.mp3"; import pingSound from "./resources/ping.mp3"; import whoo1Sound from "./resources/whoo.mp3"; @@ -59,7 +59,17 @@ export const state = proxy({ reset: () => (state.count = 0), }, }); - +const words = [ + "hello", + "world", + "typescript", + "three", + "fiber", + "random", + "word", + "stack", + "overflow", +]; // Function to generate a random word function generateRandomWord() { const words = [ @@ -79,9 +89,8 @@ interface Props { ready: boolean; } export default function MiniGame1({ ready }: Props) { - const { word1, word2 } = useSnapshot(state); const [musicStarted, setMusicStarted] = useState(false); - + const ballRef = useRef(null) const startAudio = async () => { try { if (!musicStarted) { @@ -120,19 +129,19 @@ export default function MiniGame1({ ready }: Props) { /> - {ready && } + {ready && } diff --git a/src/components/Ball.tsx b/src/components/Ball.tsx index b19d3ee..24a2895 100644 --- a/src/components/Ball.tsx +++ b/src/components/Ball.tsx @@ -18,7 +18,6 @@ export function Ball(props: Props) { } const ball = rigidBodyRef.current; if (ball.translation().y < -3) { - console.log(ball.translation().y); rigidBodyRef.current.setTranslation({ x: 0, y: 5, z: 0 }, true); rigidBodyRef.current.setLinvel({ x: 0, y: 5, z: 0 }, true); state.api.reset(); @@ -34,6 +33,7 @@ export function Ball(props: Props) { canSleep={false} colliders={false} enabledTranslations={[true, true, false]} + userData={{ id: "ball" }} > diff --git a/src/components/WordItem.tsx b/src/components/WordItem.tsx index e38634f..5868899 100644 --- a/src/components/WordItem.tsx +++ b/src/components/WordItem.tsx @@ -1,21 +1,25 @@ import { Text } from "@react-three/drei"; -import { RapierRigidBody, RigidBody } from "@react-three/rapier"; -import { useCallback, useRef } from "react"; +import { + ContactForcePayload, + RapierRigidBody, + RigidBody, +} from "@react-three/rapier"; +import { useCallback, useRef, useState } from "react"; import * as THREE from "three"; import { state } from "@/MiniGame1"; interface WordItemProps { position: THREE.Vector3; color: string; - inText: string; + words: string[]; boxId: number; posScale: number; } -export function WordItem({ position, color, inText, boxId }: WordItemProps) { +export function WordItem({ position, color, words, boxId }: WordItemProps) { const api = useRef(null); - - const contactForce = useCallback(() => { + const [wordIndex, setWordIndex] = useState(0); + const contactForce = useCallback((payload: ContactForcePayload) => { if (boxId === 1) { state.api.soundEnemy1(); state.api.changeEnemy1Text(); @@ -35,6 +39,20 @@ export function WordItem({ position, color, inText, boxId }: WordItemProps) { canSleep={false} ref={api} onContactForce={contactForce} + onCollisionEnter={(event) => { + if (!event.other.rigidBody) { + return; + } + const userData = event.other.rigidBody.userData as any; + //const id2 = event.rigidBody?.userData as any; + const id = userData.id; + if (id == "ball") { + setWordIndex((wordIndex + 1) % words.length); + console.log("Ball"); + } else { + console.log("Something else"); + } + }} position={position} > @@ -44,9 +62,10 @@ export function WordItem({ position, color, inText, boxId }: WordItemProps) { rotation={[0, 0, 0]} position={[0, 0, 0.7]} fontSize={0.6} - children={inText} color={"red"} - /> + > + {words[wordIndex]} +