Multijugador en Phaser con Firebase

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Configuración del cliente

1. En el fichero package.json añadiremos el siguiente código para poder cargar nuestro formulario HTML:

/package.json

dom: {
    createContainer: true,
},

2. Definimos el formulario HTML que vamos a cargar en nuestro juego:

<label for="roomId">Escribe el id de la sala</label
><input
  type="text"
  name="roomId"
  placeholder="roomId"
  id="roomId"
  style="font-size: 32px"
/>
<button id="conectar" name="conectar">Conectar</button>

<p style="color: white">
  O dale este ID a un amigo: <span id="currentRoomId"></span>
</p>

3. Debemos precargar el HTML anterior en nuestro juego:

preload() {
    this.load.html("roomForm", "/assets/main.html");
}

4. Cargaremos la escena anterior en nuestro juego mediante el siguiente código de la escena Game:

import { Scene } from "phaser";
import { createRoom, getRoomById } from "../services/room";

export class Game extends Scene {
  constructor() {
    super("Game");
  }

  create() {
    const f = async () => {
      const currentRoomId = await createRoom();
      const form = this.add.dom(400, 100).createFromCache("roomForm");

      const roomInput = form.getChildByID("roomId");
      const playButton = form.getChildByID("conectar");

      roomInput.textContent = currentRoomId;

      playButton.onclick = async (event) => {
        if (event.target.name === "conectar") {
          const roomId = roomInput.value;
          const room = await getRoomById(roomId);
          if (!room) {
            alert("No existe una room con este id");
          } else {
            this.scene.start("Karate");
          }
        }
      };
    };
    f();
  }
}

5. El código anterior está llamando a un documento que se conecta con firebase:

import { db, getDocs, collection, query, where } from "./firebase";

// CREATE
export const createRoom = async () => {
  const colRef = collection(db, "rooms");
  const ms = new Date().getTime();
  console.log(ms);
  const obj = {
    date: ms,
    id: 1234,
  };
  await addDoc(colRef, obj);
  return obj.id;
};

export const getRoomById = async (roomId) => {
  const colRef = collection(db, "rooms");
  const result = await getDocs(
    query(colRef, where("id", "==", Number(roomId)))
  );
  const doc = getArrayFromCollection(result);
  return doc[0];
};

const getArrayFromCollection = (collection) => {
  return collection.docs.map((doc) => {
    return { ...doc.data(), id: doc.id };
  });
};