Identify collisions with ball and change word on collision

Rice-Tech · Jan 28, 2024 · c348da0 · c348da0
1 parent 640bc1c
commit c348da0
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 18 deletions.
diff --git 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<RapierRigidBody>(null)
   const startAudio = async () => {
     try {
       if (!musicStarted) {
@@ -120,19 +129,19 @@ export default function MiniGame1({ ready }: Props) {
         />
 
         <Physics gravity={[0, -20, 10]} timeStep="vary">
-          {ready && <Ball position={[0, 5, 0]} />}
+          {ready && <Ball ref={ballRef} position={[0, 5, 0]} />}
           <OfficeScene scale={[6, 6, 6]} position={[5, -5, 20]} />
           <WordItem
             color="orange"
             position={new THREE.Vector3(2.75, 1.5, 0)}
-            inText={word1}
+            words={words}
             boxId={1}
             posScale={5}
           />
           <WordItem
             color="hotpink"
             position={new THREE.Vector3(-2.75, 3.5, 0)}
-            inText={word2}
+            words={words}
             boxId={2}
             posScale={-2}
           />

diff --git 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" }}
       >
         <BallCollider args={[0.5]} />
         <mesh castShadow receiveShadow>

diff --git 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<RapierRigidBody>(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}
     >
       <mesh>
@@ -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]}
+        </Text>
         <boxGeometry args={[2.5, 1, 1]} />
         <meshStandardMaterial color={color} />
       </mesh>