// CHECK CAREFULLY BECAUSE EVERYTHING THAT STARTS WITH "YOUR_" MEANS THAT YOU HAVE TO REPLACE IT WITH YOUR OWN DATA
====GAMES====
==to start firebase (you should use "<script type="module">"):
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
import { getDatabase, ref, onValue, set, update, get, child } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js";
import { getAuth, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js";

const firebaseConfig = {
  apiKey: "YOUR_APIKEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DB_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGEBUCKET",
  messagingSenderId: "YOUR_MSGSENDERID",
  appId: "YOUR_APPID"
};

=logic=:

const playersRef = ref(db, "players2");
let players = {}, me = {
  id: null, x: 100, y: 100,
  color: "#888", nickname: "Anon",
  avatarConfig: {}, equippedItems: {}
};
let targetX = me.x, targetY = me.y;
const speed = 3;
let currentMini = null;

// Movimiento
addEventListener("mousemove", e => {
  targetX = e.clientX;
  targetY = e.clientY;
});
addEventListener("keydown", e => {
  if (e.key === "e" && me.id) toggleEquip();
});

let userRefPath = null;
let selfRef = null;
let blocksgoldLoaded = false;
// Firebase Auth y carga de datos
onAuthStateChanged(auth, async user => {
  if (!user) return;

  me.id = user.uid;
  userRefPath = ref(db, `users/${me.id}`);
  selfRef = ref(db, `players2/${me.id}`);

  // Guardar o inicializar datos del usuario
const snap = await get(userRefPath);
if (!snap.exists()) {
  await set(userRefPath, {
    blocksgold: 0,
    avatarConfig: {},
    equippedItems: {},
    nickname: user.displayName || "Anon",
    isConnectedToGame1: true
  });
  me.blocksgold = 0;
  me.nickname = user.displayName || "Anon";
  me.avatarConfig = {};
  me.equippedItems = {};
} else {
  const data = snap.val();
  me.blocksgold = data.blocksgold ?? 0;  // ✅ solo inicializar con valor existente
  me.nickname = data.nickname || (user.displayName || "Anon");
  me.avatarConfig = data.avatarConfig || {};
  me.equippedItems = data.equippedItems || {};
}
blocksgoldLoaded = true; // ✅ marcar cargado **después** de asignar
document.getElementById("bgCount").innerText = me.blocksgold;

  // Actualizar posición inicial
  await update(selfRef, {
    x: me.x,
    y: me.y,
    nickname: me.nickname,
    avatarConfig: me.avatarConfig || {},
    equippedItems: me.equippedItems || {}
  });
// después del update(selfRef, {...})
players[me.id] = {
  x: me.x,
  y: me.y,
  nickname: me.nickname,
  avatarConfig: me.avatarConfig || {},
  equippedItems: me.equippedItems || {}
};
updateLeaderboard();
});

onValue(ref(db, 'players2'), async snap => {
  try {
    const data = snap.val();
    const uids = Object.keys(data || {}).filter(uid => uid && uid !== "undefined" && typeof uid === 'string');
    const nicknamePromises = uids.map(async (uid) => {
      if (!uid || uid === "undefined") return;
      try {
        const userSnap = await get(child(ref(db), `users/${uid}`));
        const userData = userSnap.exists() ? userSnap.val() : {};

        players[uid] = players[uid] || {};
        players[uid] = {
          ...players[uid],
          ...data[uid],
          nickname: userData.nickname || uid,
          avatarConfig: userData.avatarConfig || {},
          equippedItems: userData.equippedItems || {}
        };
      } catch(e) {
        console.warn("Error fetching user data for uid", uid, e);
      }
    });

    await Promise.all(nicknamePromises);
    updateLeaderboard();

  } catch(e) {
    console.error("Error en onValue players:", e);
  }
});

setInterval(() => {
  if (selfRef) {
    update(selfRef, { x: me.x, y: me.y }).catch(console.warn);
  }
}, 500);

// Render
function render() {
  const size = 40;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let uid in players) {
    const p = players[uid] || {};
    const px = (typeof p.x === 'number') ? p.x : (uid === me.id ? me.x : 0);
    const py = (typeof p.y === 'number') ? p.y : (uid === me.id ? me.y : 0);
    const cfg = (uid === me.id) ? (me.avatarConfig || {}) : (p.avatarConfig || {});
    const gear = (uid === me.id) ? (me.equippedItems || {}) : (p.equippedItems || {});

    // Dibuja avatar CON SUS COLORES (drawAvatarOverlay usa defaults si faltan)
    drawAvatarOverlay(px, py, cfg, gear);

    // Texto encima del avatar
    ctx.fillStyle = "#fff";
    ctx.font = "12px Arial";
    ctx.textAlign = "center";
    const name = p.nickname || (uid === me.id ? me.nickname : uid);
    ctx.fillText(name, px, py - size * 2.6);
  }

  if (currentMini && currentMini.drawZone) currentMini.drawZone();

  updatePosition();
  requestAnimationFrame(render);
}
render();

function updatePosition() {
  const dx = targetX - me.x;
  const dy = targetY - me.y;
  const dist = Math.hypot(dx, dy);
  if (dist > 1) {
    me.x += dx / dist * speed;
    me.y += dy / dist * speed;
  }
}

const itemImages = {}; // Cache de imágenes

function getItemImage(url) {
  if (!itemImages[url]) {
    const img = new Image();
    img.src = url;
    itemImages[url] = img;
  }
  return itemImages[url];
}

function drawAvatarOverlay(x, y, config, equipped) {
  const size = 40;
  const headSize = 28;

  const offs = {
    head: [0, -1.1 * size],
    torso: [0, 0],
    leftArm: [-0.6 * size, 0],
    rightArm: [0.6 * size, 0],
    leftLeg: [-0.25 * size, 1.2 * size],
    rightLeg: [0.25 * size, 1.2 * size]
  };

  const sizes = {
    head: [headSize, headSize],
    torso: [size * 0.9, size * 1.2],
    leftArm: [size * 0.35, size * 1.1],
    rightArm: [size * 0.35, size * 1.1],
    leftLeg: [size * 0.32, size * 1.15],
    rightLeg: [size * 0.32, size * 1.15]
  };

  const renderOrder = ["leftLeg", "rightLeg", "torso", "leftArm", "rightArm", "head"];
  for (let part of renderOrder) {
    const [dx, dy] = offs[part];
    const [w, h] = sizes[part];
    ctx.fillStyle = config[part] || "#555";
    ctx.fillRect(x + dx - w / 2, y + dy, w, h);
  }
  
const itemPositions = {
  head: [0, -1.1 * size],
  torso: [0, 0],
  leftArm: [-0.6 * size - 20, 0],
  rightArm: [0.6 * size + 10, 0],
  leftLeg: [-0.05 * size, 1.0 * size + 10], // aún más arriba y más a la derecha
  rightLeg: [0.25 * size, 1.2 * size + 10],
  back: [0, 10]
};

  // Dibuja cada ítem equipado
  for (let key in equipped) {
    const item = equipped[key];
    if (!item || !item.imageUrl) continue;

    const img = getItemImage(item.imageUrl); // precarga/reusa la imagen
    const pos = item.position || "torso";
    const [offsetX, offsetY] = itemPositions[pos] || [0, 0];

    // Solo dibuja si la imagen ya tiene width/height (ya cargó)
    if (img.naturalWidth) {
      ctx.drawImage(img, x + offsetX - 15, y + offsetY, 30, 30);
    }
  }
}

function updateLeaderboard() {
  let html = "<b>Players</b><br>";
  for (let uid in players) {
    html += (players[uid].nickname || uid) + "<br>";
  }
  document.getElementById("leaderboard").innerHTML = html;
}

// MINIJUEGOS
const minigames = {
  colorTile: {
    title: "Pisa el color correcto",
    start() {
      document.getElementById("minigame").style.display = "block";
      document.getElementById("mgTitle").innerText = this.title;
      document.getElementById("mgContent").innerHTML = `Presiona <b>ESPACIO</b> solo si estás sobre el <span style="color: red;">cuadro rojo</span>.`;
      document.getElementById("mgAction").onclick = () => {
        const p = players[me.id];
        const inside = p && p.x > 300 && p.x < 400 && p.y > 200 && p.y < 300;
        reward(inside ? 10 : 0);
        endMini();
      };
    },
    drawZone() {
      ctx.strokeStyle = "red";
      ctx.strokeRect(300, 200, 100, 100);
    }
  }
};

function startMinigame() {
  if (currentMini) return;
  currentMini = minigames.colorTile;
  currentMini.start();
}

function reward(amount) {
  if (amount > 0) {
    me.blocksgold += amount;
   showToast(`¡Ganaste ${amount} BLOCKSGOLD!`);
  } else {
    showToast("Fallaste, sigue intentando.");
  }
}

function endMini() {
  currentMini = null;
  document.getElementById("minigame").style.display = "none";
}

function showToast(msg) {
  const div = document.createElement("div");
  div.innerText = msg;
  Object.assign(div.style, {
    position: "fixed", bottom: "50px", left: "50%",
    transform: "translateX(-50%)", background: "#333",
    color: "#fff", padding: "10px", borderRadius: "5px",
    zIndex: "9999"
  });
  document.body.appendChild(div);
  setTimeout(() => div.remove(), 2000);
}

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const auth = getAuth(app);


to create the game (canvas):

====CATALOG====
*1st step >> init firebase.

==AUTH SYSTEM==

1st step:

write something like this:
    <h1>Register to BLOXPAST2D!</h1>

    <div id="register-box">
        <h3>Create an Account</h3>
        <input type="email" id="email" placeholder="Email">
        <input type="password" id="password" placeholder="Password">
        <!-- Aquí agregamos el widget de hCaptcha -->
        <div class="h-captcha" data-sitekey="YOUR_KEY"></div>
        <button onclick="register()">Register</button>
        <p class="message" id="message"></p>
    </div>

    <p>Already have an account? <a href="login.html">Login here</a></p>
    
and init firebase.

2nd step:
 // Función para registrar usuario
  window.register = function () {
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    const messageBox = document.getElementById('message');

    // Obtaining response of hCaptcha
    const captchaResponse = hcaptcha.getResponse();

    // CAPTCHA
    if (!captchaResponse) {
        messageBox.style.color = "red";
        messageBox.innerText = "❌ Please complete the CAPTCHA.";
        return;
    }
      
    createUserWithEmailAndPassword(auth, email, password)
      .then(async (userCredential) => {
        const user = userCredential.user;

        // Enviar correo de verificación
        await sendEmailVerification(user);

        messageBox.style.color = "green";
        messageBox.innerText = "✅ Account created! Please verify your email. Check your inbox for the verification link.";
        
        setTimeout(() => {
          window.location.href = "login.html";  // Redirects to login page.
        }, 2000);
      })
      .catch((error) => {
        messageBox.style.color = "red";
        messageBox.innerText = "❌ " + error.message;
      });
  };