Proyecto: El puente de un HTML plano a un proyecto real

# ════════════════════════════════════════════════════════════════════════════
# NIVEL OK — "que funcione": arrancar un proyecto de verdad con Vite
#
# Andamiar el proyecto, meter el código en src/ y verlo correr en el dev server.
# Esto sustituye a "abrir index.html a pelo".
# ════════════════════════════════════════════════════════════════════════════

# 1) Comprueba que tienes Node (incluye npm). Si no, instálalo desde nodejs.org.
node --version    # debe dar v20.x o superior
npm --version

# 2) Andamia un proyecto Vite "vanilla" (JS sin framework) y entra en él.
npm create vite@latest team-builder -- --template vanilla
cd team-builder

# 3) Instala las dependencias que Vite declara en el package.json generado.
npm install

# 4) Arranca el servidor de desarrollo. Abre la URL que imprime (localhost:5173).
npm run dev

# ────────────────────────────────────────────────────────────────────────────
# Qué hacer a continuación (en tu editor, mientras dev server corre):
#
#   a) Borra los ficheros de demo que genera Vite: src/counter.js, public/vite.svg, etc.
#   b) Copia tus módulos del starter (datos.js, formato.js, render.js) dentro de src/.
#   c) Renombra o reemplaza src/main.js con el contenido de tu index.js del starter.
#      (Solo importa datos y llama a renderHeroes, sin cambiar nada más.)
#   d) Guarda. El dev server recarga solo: la lista de héroes aparece en localhost:5173.
#
# Por qué esto ya es mejor que abrir index.html:
#   - El servidor resuelve los módulos sin errores de CORS.
#   - Recargas automáticas al guardar: no más F5.
#   - El proyecto tiene un punto de entrada declarado y reproducible.
# ────────────────────────────────────────────────────────────────────────────

{
  "//": "NIVEL MEJOR — entender el package.json, generar un build y proteger el repo.",
  "//1": "",
  "//2": "Por qué supera a OK:",
  "//3": "  OK arranca el dev server pero no sabe leer lo que tiene delante.",
  "//4": "  Aqui entiendes cada bloque del package.json y completas el flujo:",
  "//5": "    dev (trabajar) -> build (producir) -> preview (revisar antes de subir).",
  "//6": "  Ademas anades .gitignore. Sin el, un 'git add .' sube node_modules/ al repo:",
  "//7": "  cientos de megas, miles de ficheros, que nadie deberia versionar.",
  "//8": "  Con .gitignore, el repo solo tiene tu codigo; npm install lo reconstruye.",
  "//9": "",

  "//10": "-- package.json comentado ---------------------------------------------------",

  "//11": "name e version describen el proyecto. 'type: module' activa import/export ES.",
  "name": "team-builder",
  "version": "0.0.0",
  "type": "module",

  "//12": "scripts: atajos ejecutados con 'npm run <nombre>'.",
  "//13": "  dev     -> arranca el servidor de desarrollo con recarga en caliente.",
  "//14": "  build   -> genera dist/ con el codigo optimizado y minificado.",
  "//15": "  preview -> sirve dist/ localmente para revisar el resultado antes de subir.",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

  "//16": "dependencies: paquetes que la app necesita EN PRODUCCION (van al bundle final).",
  "//17": "Se instalan con 'npm install <paquete>' y el usuario los recibe en su navegador.",
  "dependencies": {},

  "//18": "devDependencies: herramientas que solo usas AL DESARROLLAR (no van al bundle).",
  "//19": "Se instalan con 'npm install -D <paquete>'. Vite es la mas importante ahora.",
  "devDependencies": {
    "vite": "^6.0.0"
  },

  "//20": "",
  "//21": "-- .gitignore minimo -------------------------------------------------------",
  "//22": "Crea un fichero .gitignore en la raiz del proyecto con este contenido:",
  "//23": "  node_modules/",
  "//24": "  dist/",
  "//25": "",
  "//26": "node_modules/ es enorme y reconstruible con 'npm install': nunca se versiona.",
  "//27": "dist/ es generado por 'npm run build': se reconstruye con ese comando.",
  "//28": "Solo tu codigo fuente va a Git; lo generado y lo instalado se reconstruye.",

  "//29": "",
  "//30": "-- flujo de trabajo completo -----------------------------------------------",
  "//31": "  npm run dev      -> a programar (recarga automatica al guardar)",
  "//32": "  npm run build    -> genera dist/ cuando quieres desplegar",
  "//33": "  npm run preview  -> revisa dist/ antes de subirlo al servidor"
}

# ════════════════════════════════════════════════════════════════════════════
# NIVEL EXCELENTE — cierre real del Nivel 3
#
# Por que supera a Mejor:
#   Mejor monta el proyecto y aprende la herramienta (Vite, package.json).
#   Excelente usa lo que enseno todo el Nivel 3:
#     - fetch + async/await para cargar datos de un JSON externo (no hardcoded).
#     - Intl.NumberFormat para formatear el winrate con la locale del usuario.
#     - try/catch para manejar el error de carga y no dejar la app muda.
#     - Barril (modulos.js) que centraliza las exportaciones publicas.
#     - .gitignore para no versionar lo generado (node_modules/, dist/).
#   La app ya no tiene los datos pegados en el codigo: los carga en runtime,
#   igual que lo hara de una API real en cualquier proyecto profesional.
# ════════════════════════════════════════════════════════════════════════════

# ────────────────────────────────────────────────────────────────────────────
# Estructura final del proyecto
# ────────────────────────────────────────────────────────────────────────────
#
# team-builder/
# ├── index.html              <- HTML de entrada (Vite lo gestiona)
# ├── package.json            <- manifiesto con scripts y devDependencies
# ├── package-lock.json       <- versiones exactas instaladas (va a Git)
# ├── .gitignore              <- excluye node_modules/ y dist/
# ├── node_modules/           <- dependencias instaladas (NO va a Git)
# ├── dist/                   <- build de produccion (NO va a Git)
# ├── public/
# │   └── heroes.json         <- datos de heroes servidos como fichero estatico
# └── src/
#     ├── main.js             <- punto de entrada: orquesta la carga y el render
#     ├── formato.js          <- modulo de formato: Intl.NumberFormat para el winrate
#     ├── render.js           <- modulo de presentacion: pinta y muestra errores
#     └── modulos.js          <- barril: re-exporta lo publico en un punto unico

# ────────────────────────────────────────────────────────────────────────────
# public/heroes.json  (datos fuera del codigo; fetch los carga en runtime)
# ────────────────────────────────────────────────────────────────────────────
# Crea la carpeta public/ en la raiz del proyecto y pon este fichero dentro.
# Vite sirve public/ tal cual: fetch('/heroes.json') lo encuentra sin bundlear.
#
# [
#   { "nombre": "Tracer",    "rol": "Dano",   "partidas": 120, "victorias": 78  },
#   { "nombre": "Mercy",     "rol": "Apoyo",  "partidas": 200, "victorias": 130 },
#   { "nombre": "Reinhardt", "rol": "Tanque", "partidas": 90,  "victorias": 51  },
#   { "nombre": "Genji",     "rol": "Dano",   "partidas": 150, "victorias": 72  },
#   { "nombre": "Ana",       "rol": "Apoyo",  "partidas": 110, "victorias": 66  },
#   { "nombre": "Winston",   "rol": "Tanque", "partidas": 80,  "victorias": 38  }
# ]

# ────────────────────────────────────────────────────────────────────────────
# src/formato.js
# ────────────────────────────────────────────────────────────────────────────
#
# // Modulo de formato: calcula y presenta los datos de un heroe.
#
# // INTERNO: calcula el winrate como numero entre 0 y 1.
# // No se exporta: solo lo usa fichaHeroe; nadie de fuera necesita el numero crudo.
# function winrateDe(heroe) {
#   return heroe.partidas === 0 ? 0 : heroe.victorias / heroe.partidas;
# }
#
# // Formateador Intl reutilizable: porcentaje con un decimal, locale del usuario.
# // Se crea UNA VEZ fuera de la funcion para no recrearlo en cada llamada al map.
# var formatoPct = new Intl.NumberFormat("es-ES", {
#   style: "percent",
#   minimumFractionDigits: 1,
#   maximumFractionDigits: 1,
# });
#
# // API PUBLICA: devuelve la linea de texto lista para mostrar.
# // Usa Intl en lugar de toFixed para respetar la locale del usuario.
# export default function fichaHeroe(heroe) {
#   return heroe.nombre + " (" + heroe.rol + ") — " + formatoPct.format(winrateDe(heroe));
# }

# ────────────────────────────────────────────────────────────────────────────
# src/render.js
# ────────────────────────────────────────────────────────────────────────────
#
# // Modulo de presentacion: solo sabe de DOM. No carga datos ni calcula nada.
# import fichaHeroe from "./formato.js";
#
# // Pinta la lista de heroes en el contenedor del HTML.
# export function renderHeroes(lista) {
#   var app = document.getElementById("app");
#   if (!app) return;
#   var items = lista.map(function(h) { return "<li>" + fichaHeroe(h) + "</li>"; }).join("");
#   app.innerHTML = "<h2>Estadisticas del equipo</h2><ul>" + items + "</ul>";
# }
#
# // Muestra un aviso de error en lugar de dejar la pagina en blanco.
# // Error visible es siempre mejor que silencio para quien usa la app.
# export function renderError(mensaje) {
#   var app = document.getElementById("app");
#   if (!app) return;
#   app.innerHTML = "<p>Error al cargar los heroes: " + mensaje + "</p>";
# }

# ────────────────────────────────────────────────────────────────────────────
# src/modulos.js  (barril)
# ────────────────────────────────────────────────────────────────────────────
#
# // Barril: re-exporta las piezas publicas en un punto unico.
# // Quien importe de aqui no necesita conocer la estructura interna de src/.
# // Cuando src/ crezca, solo hay que actualizar este fichero; los consumidores no cambian.
# export { renderHeroes, renderError } from "./render.js";
# export { default as fichaHeroe } from "./formato.js";

# ────────────────────────────────────────────────────────────────────────────
# src/main.js
# ────────────────────────────────────────────────────────────────────────────
#
# // Punto de entrada: orquesta la carga y el render.
# // Importa del barril para no depender de rutas internas de src/.
# import { renderHeroes, renderError } from "./modulos.js";
#
# // Funcion asincrona que carga heroes desde el JSON estatico en public/.
# async function cargarYRenderizar() {
#   try {
#     // fetch devuelve una promesa; await espera la respuesta sin bloquear el hilo.
#     var respuesta = await fetch("/heroes.json");
#     // Si el servidor respondio con un error HTTP (404, 500...), lo tratamos como fallo.
#     if (!respuesta.ok) {
#       throw new Error("El servidor respondio con estado " + respuesta.status);
#     }
#     // .json() tambien es asincrono: parsea el cuerpo de la respuesta.
#     var heroes = await respuesta.json();
#     // Con los datos listos, los pasamos al modulo de render.
#     renderHeroes(heroes);
#   } catch (error) {
#     // Si fetch fallo (red caida, JSON malformado, error HTTP), mostramos el mensaje.
#     renderError(error.message);
#   }
# }
#
# // Arrancamos la carga en cuanto el modulo se ejecuta.
# cargarYRenderizar();

# ════════════════════════════════════════════════════════════════════════════
# Comandos para montar el proyecto
# ════════════════════════════════════════════════════════════════════════════

# Andamia el proyecto y entra en el directorio.
npm create vite@latest team-builder -- --template vanilla
cd team-builder

# Instala las dependencias del package.json generado.
npm install

# Crea la carpeta public/ y el fichero de datos (luego copia el JSON de arriba).
mkdir -p public

# Arranca el servidor de desarrollo.
npm run dev

# Cuando quieras revisar el build de produccion:
npm run build
npm run preview

# .gitignore (crea este fichero en la raiz):
printf "node_modules/\ndist/\n" > .gitignore