Build multiplayer
games in minutes

import { insertCoin, myPlayer, usePlayersList } from 'playroomkit';
import ReactNipple from 'react-nipple';

function Game(){
  // Hook that returns an array of players in the room.
  const players = usePlayersList();

  // We render all players and a joystick for current player.
  return (
    <Physics gravity={{y: 1600}}>
      {players.map((playerState) => (
        <Player key={playerState.id} player={playerState} />
      ))}

      <ReactNipple
          onEnd={()=> myPlayer().setState("dir", undefined)}
          onPlain={(e, data)=> 
            myPlayer().setState("dir", data.direction)} />
    </Physics>
  )
}

function Player({player}){
  // Playroom hooks to get and set a player's state.
  // Setting state here will automatically sync value 
  // with other players.
  const [pos, setPos] = usePlayerState(player, "position", {x: 0, y: 0});
  const [dir] = usePlayerState(player, "dir")

  const [bodyRef, setBodyRef] = useRef(null);

  useState(()=>{
    // One player acts as a host, host checks the joystick state for
    // each player, applies forces to the player and updates their pos.
    if (!isHost() || !dir) return;
    if (dir.x === "left"){
      bodyRef.current.applyForce({x: -100, y: 0});
    }
    if (dir.x === "right"){
      bodyRef.current.applyForce({x: 100, y: 0});
    }
    if (dir.y === "up"){
      bodyRef.current.applyForce({x: 0, y: -100});
    }
  }, [dir]);

  return (
    <Sprite
      ref={setBodyRef}
      x={pos.x}
      y={pos.y}
      onPositionChange={(pos)=> setPos(pos)}
      color={player.getProfile().color.hex}
    />
  )
}

// Initiates the lobby UI and resolves promise
// when the players have all connected in the same room.
insertCoin().then(()=>{
  ReactDOM.render(<Game />, document.getElementById("root"));
})