feat:(game) adding multiplayer

src/components/Experience.jsx

@@ -23,16 +23,32 @@ import { ItemBox } from "./models/misc/Gift";
 import { useStore } from "./store";
 import { Shell } from "./models/items/Mario_shell_red";
 import { Coin } from "./models/misc/Super_mario_bros_coin";
+import { RPC, insertCoin, myPlayer, onPlayerJoin, useMultiplayerState } from "playroomkit";
+import { PlayerDummies } from "./PlayerDummies";
+import { useEffect } from "react";
+import { useFrame } from "@react-three/fiber";
 
 export const Experience = () => {
   const onCollide = (event) => {
     console.log(event);
   };
-  const { bananas, shells} = useStore();
+  const { bananas, shells, players, id, actions} = useStore();
+  const [networkBananas, setNetworkBananas] = useMultiplayerState("bananas", []);
+
+  const [networkShells, setNetworkShells] = useMultiplayerState("shells", []);
+
 
   return (
     <>
-      <PlayerController />
+    {players.map((player) => (
+      <PlayerController key={player.id} player={player} userPlayer={player.id === myPlayer()?.id} />
+    ))}
+
+      {players.map((player) => (
+        <PlayerDummies key={player.id} player={player} userPlayer={player.id === myPlayer()?.id} />
+      ))}
+
+    
       <Paris position={[0, 0, 0]} />
       <Banana onCollide={onCollide} position={[-10, 1.8, -119]} />
       {/* <Shell position={[-20, 2, -119]} /> */}
@@ -44,7 +60,7 @@ export const Experience = () => {
 
 
 
-      {bananas.map((banana) => (
+      {/* {bananas.map((banana) => (
         <Banana
           key={banana.id}
           position={banana.position}
@@ -52,7 +68,7 @@ export const Experience = () => {
           id={banana.id}
           // rotation={banana.rotation}
         />
-      ))}
+      ))} */}
 
       {shells.map((shell) => (
         <Shell