From fa70a79261089140f52226b4715da6c38663b892 Mon Sep 17 00:00:00 2001
From: JChuck0 <110050395+JChuck0@users.noreply.github.com>
Date: Tue, 4 Aug 2026 17:34:28 +0000
Subject: [PATCH 1/7] Creando funcion crearSala

---
 src/main.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index 1aec760..5a0df51 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,3 +10,17 @@ if (typeof document !== "undefined") {
 console.log("Hello from src/main.ts");
 
 export {};
+
+
+function crearSala(filas:number , columnas:number): number[][] {
+  let cineInicial:number[][] = [];
+  for(let row = 0; row < filas; row++){
+    cineInicial[row] = []
+    for(let colum = 0; colum < columnas ; colum++){
+      cineInicial[row][colum] = 0;
+    }
+  }
+  return cineInicial;
+}
+let prueba = crearSala(5,8)
+console.log(prueba)
\ No newline at end of file

From e90ad655bfee0d654abab5837126f5c02b583ed2 Mon Sep 17 00:00:00 2001
From: JChuck0 <110050395+JChuck0@users.noreply.github.com>
Date: Wed, 5 Aug 2026 08:17:44 +0000
Subject: [PATCH 2/7] =?UTF-8?q?Crear=20la=20funci=C3=B3n=20mostrarSala?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts | 45 +++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 5a0df51..3da4c69 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,16 +11,53 @@ console.log("Hello from src/main.ts");
 
 export {};
 
+/*Creamos la sala de cine para 8 filas y 10 columnas*/ 
+let filas: number = 8;
+let columnas: number = 10;
+
+const filasReal: number = filas + 1;
+const columnasReal: number = columnas + 1;
+
 
 function crearSala(filas:number , columnas:number): number[][] {
   let cineInicial:number[][] = [];
-  for(let row = 0; row < filas; row++){
+  for(let row = 0; row < filasReal; row++){
     cineInicial[row] = []
-    for(let colum = 0; colum < columnas ; colum++){
+    for(let colum = 0; colum < columnasReal ; colum++){
       cineInicial[row][colum] = 0;
     }
   }
   return cineInicial;
 }
-let prueba = crearSala(5,8)
-console.log(prueba)
\ No newline at end of file
+
+/*Función para mostrar la sala de cine*/
+
+function mostrarSala(sala:number[][]): void {
+  let actualSala: string = "";
+  let numeroFila: number = 1;
+  let numeroColumna: number = 1;
+  for(let row = 0; row < sala.length; row++){
+    for(let colum = 0; colum < sala[row].length; colum++){
+      if (row === 0 && colum === 0) {
+        actualSala += "  ";
+      }else if (row === 0) {
+        actualSala += numeroColumna.toString() + " ";
+        numeroColumna++;
+      }else if (colum === 0) {
+        actualSala += numeroFila.toString() + " ";
+        numeroFila++;
+      }else if(sala[row][colum] === 0){
+        actualSala += "L ";
+      }else{
+        actualSala += "X ";
+      }
+    }
+    actualSala += "\n";
+  }
+  console.log(actualSala);
+}
+
+let salaInicial = crearSala(filasReal, columnasReal);
+mostrarSala(salaInicial);
+
+/*Función para reservar un asiento*/
\ No newline at end of file

From 52cf53f81d9932a96a1b1e5d3aa8cf5379fb59e9 Mon Sep 17 00:00:00 2001
From: JChuck0 <110050395+JChuck0@users.noreply.github.com>
Date: Wed, 5 Aug 2026 08:48:12 +0000
Subject: [PATCH 3/7] =?UTF-8?q?Crear=20la=20funci=C3=B3n=20reservarAsiento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 3da4c69..9a26cc5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -32,7 +32,7 @@ function crearSala(filas:number , columnas:number): number[][] {
 
 /*Función para mostrar la sala de cine*/
 
-function mostrarSala(sala:number[][]): void {
+function mostrarSala(sala:number[][]): string {
   let actualSala: string = "";
   let numeroFila: number = 1;
   let numeroColumna: number = 1;
@@ -54,10 +54,28 @@ function mostrarSala(sala:number[][]): void {
     }
     actualSala += "\n";
   }
-  console.log(actualSala);
+  return actualSala;
 }
 
-let salaInicial = crearSala(filasReal, columnasReal);
-mostrarSala(salaInicial);
+/*Función para reservar un asiento*/
+
+function reservarAsiento(sala:number[][], fila:number, columna:number): number[][] {
+  for(let row = 0; row < sala.length; row++){
+    for(let colum = 0; colum < sala[row].length; colum++){
+      if(row === fila && colum === columna){
+        if(sala[row][colum] === 0){
+          sala[row][colum] = 1;
+          console.log(`Asiento reservado en la fila ${fila} y columna ${columna}`);
+        }
+      }
+    }
+  }
+  return sala;
+}
 
-/*Función para reservar un asiento*/
\ No newline at end of file
+
+let salaInicial = crearSala(filasReal, columnasReal);
+let salaActual = mostrarSala(salaInicial);
+console.log(salaActual);
+let primeraReserva = reservarAsiento(salaInicial, 7, 7);
+console.log(mostrarSala(primeraReserva));
\ No newline at end of file

From f413c63385e6d513350660c88fdd0c4e377854da Mon Sep 17 00:00:00 2001
From: JChuck0 <110050395+JChuck0@users.noreply.github.com>
Date: Wed, 5 Aug 2026 09:00:49 +0000
Subject: [PATCH 4/7] =?UTF-8?q?Crear=20la=20funci=C3=B3n=20contarAsientos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index 9a26cc5..d976b93 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -66,6 +66,8 @@ function reservarAsiento(sala:number[][], fila:number, columna:number): number[]
         if(sala[row][colum] === 0){
           sala[row][colum] = 1;
           console.log(`Asiento reservado en la fila ${fila} y columna ${columna}`);
+        }else if(sala[row][colum] === 1){
+          console.log(`El asiento en la fila ${fila} y columna ${columna} ya está ocupado`);
         }
       }
     }
@@ -73,9 +75,30 @@ function reservarAsiento(sala:number[][], fila:number, columna:number): number[]
   return sala;
 }
 
+/* Función para contar asientos libres y ocupados */
+function contarAsientos(sala:number[][]): {libres: number, ocupados: number} {
+  let libres: number = 0;
+  let ocupados: number = 0;
+  for(let row = 0; row< sala.length; row++){
+    for (let colum = 0; colum < sala[row].length; colum++){
+      if(sala[row][colum] === 1){
+        ocupados++;
+      } else if(sala[row][colum] === 0){
+        libres++;
+      }
+    }
+  }
+  return {libres, ocupados};
+}
+
+
 
 let salaInicial = crearSala(filasReal, columnasReal);
 let salaActual = mostrarSala(salaInicial);
 console.log(salaActual);
 let primeraReserva = reservarAsiento(salaInicial, 7, 7);
-console.log(mostrarSala(primeraReserva));
\ No newline at end of file
+console.log(mostrarSala(primeraReserva));
+let segundaReserva = reservarAsiento(salaInicial, 7, 7);
+console.log(mostrarSala(segundaReserva));
+let checkAsientos = contarAsientos(segundaReserva);
+console.log(`Asientos libres: ${checkAsientos.libres}, Asientos ocupados: ${checkAsientos.ocupados}`);

From 32cd0279ce61fc788cb51f10027dd0fd7f05c004 Mon Sep 17 00:00:00 2001
From: JChuck0 <110050395+JChuck0@users.noreply.github.com>
Date: Wed, 5 Aug 2026 09:38:55 +0000
Subject: [PATCH 5/7] =?UTF-8?q?Crear=20la=20funci=C3=B3n=20buscarAsientosC?=
 =?UTF-8?q?onsecutivos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index d976b93..7cd7db4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,7 +11,10 @@ console.log("Hello from src/main.ts");
 
 export {};
 
+
+
 /*Creamos la sala de cine para 8 filas y 10 columnas*/ 
+
 let filas: number = 8;
 let columnas: number = 10;
 
@@ -30,6 +33,8 @@ function crearSala(filas:number , columnas:number): number[][] {
   return cineInicial;
 }
 
+
+
 /*Función para mostrar la sala de cine*/
 
 function mostrarSala(sala:number[][]): string {
@@ -57,6 +62,8 @@ function mostrarSala(sala:number[][]): string {
   return actualSala;
 }
 
+
+
 /*Función para reservar un asiento*/
 
 function reservarAsiento(sala:number[][], fila:number, columna:number): number[][] {
@@ -75,7 +82,11 @@ function reservarAsiento(sala:number[][], fila:number, columna:number): number[]
   return sala;
 }
 
+
+
+
 /* Función para contar asientos libres y ocupados */
+
 function contarAsientos(sala:number[][]): {libres: number, ocupados: number} {
   let libres: number = 0;
   let ocupados: number = 0;
@@ -91,14 +102,64 @@ function contarAsientos(sala:number[][]): {libres: number, ocupados: number} {
   return {libres, ocupados};
 }
 
+/* Función para cancelar una reserva */
+function cancelarReserva(sala:number[][], fila:number, columna:number): number[][] {
+  for(let row = 0; row < sala.length; row++){
+    for(let colum = 0; colum < sala[row].length; colum++){
+      if(row === fila && colum === columna){
+        if(sala[row][colum] === 1){
+          sala[row][colum] = 0;
+          console.log(`Reserva de asiento cancelada en la fila ${fila} y columna ${columna}`);
+        }
+        }
+      }
+    }
+    return sala;
+  }
+
+
+
+
+
+  /* Función para buscar dos asientos libres consecutivos */
+
+function buscarAsientosConsecutivos(sala:number[][]): string | null {
+  let asientosConsecutivos: string = "";
+  let asientosLibres: number = contarAsientos(sala).libres;
+  for(let row = 1; row < sala.length; row++){
+    for(let colum = 1; colum < sala[row].length - 1; colum++){
+      if(sala[row][colum] === 0 && sala[row][colum + 1] === 0){
+        asientosConsecutivos += `Hay asientos libres consecutivos en la fila ${row} y columnas ${colum} y ${colum + 1}.`;
+        return asientosConsecutivos;
+      } else if(asientosLibres < 2){
+        console.log(`No hay asientos libres consecutivos`);
+        return null;
+      }
+    }
+  }
+  return asientosConsecutivos.length > 0 ? asientosConsecutivos : null;
+}
+
+
 
 
 let salaInicial = crearSala(filasReal, columnasReal);
 let salaActual = mostrarSala(salaInicial);
 console.log(salaActual);
+
 let primeraReserva = reservarAsiento(salaInicial, 7, 7);
 console.log(mostrarSala(primeraReserva));
+
 let segundaReserva = reservarAsiento(salaInicial, 7, 7);
 console.log(mostrarSala(segundaReserva));
+
 let checkAsientos = contarAsientos(segundaReserva);
 console.log(`Asientos libres: ${checkAsientos.libres}, Asientos ocupados: ${checkAsientos.ocupados}`);
+
+//let cancelarReserva1 = cancelarReserva(segundaReserva, 7, 7);
+//console.log(mostrarSala(cancelarReserva1));
+
+let buscarAsientos = buscarAsientosConsecutivos(segundaReserva);
+console.log(buscarAsientos);
+
+/*                Qué pasa con el console.log si se devuelve null                       */

From c0a0e521f380bd88219fa419a9d57a30314c8f4f Mon Sep 17 00:00:00 2001
From: JChuck0 <110050395+JChuck0@users.noreply.github.com>
Date: Wed, 5 Aug 2026 10:35:46 +0000
Subject: [PATCH 6/7] Crear HTML y retocar codigo .ts para que funcione
 correctamente

---
 index.html  | 292 +++++++++++++++++++++++++++++++++++++++++++++++++---
 src/main.ts |  33 ++----
 2 files changed, 284 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index 4cd0c49..fad99d1 100644
--- a/index.html
+++ b/index.html
@@ -1,26 +1,284 @@
 <!doctype html>
-<html lang="en">
+<html lang="es">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hello World with Typescript</title>
+    <title>Gestor de Asientos de Cine</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap"
+      rel="stylesheet"
+    />
   </head>
-  <body class="min-h-screen bg-slate-100 text-slate-900">
-    <main class="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center gap-6 p-6">
-      <h1 class="text-4xl font-bold tracking-tight">Hello World with Typescript</h1>
-
-      <section class="w-full max-w-md overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
-        <img
-          src="/rigo-baby.jpg"
-          alt="Hello Rigo"
-          class="h-64 w-full bg-slate-50 object-contain p-2"
-        />
-        <div class="p-5">
-          <h2 class="text-xl font-semibold text-slate-900">Hello Rigo</h2>
-          <p id="app" class="mt-2 text-sm text-slate-600"></p>
-        </div>
+  <body class="min-h-screen bg-gradient-to-br from-rose-100 via-amber-50 to-sky-100 text-slate-700 [font-family:'Quicksand',sans-serif]">
+    <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(255,255,255,0.65),transparent_40%),radial-gradient(circle_at_80%_0%,rgba(255,255,255,0.55),transparent_30%),radial-gradient(circle_at_50%_100%,rgba(255,255,255,0.5),transparent_35%)]"></div>
+
+    <main class="relative mx-auto flex min-h-screen w-full max-w-6xl flex-col gap-6 p-4 md:p-8">
+      <header class="rounded-3xl border border-white/70 bg-white/70 p-6 shadow-lg shadow-rose-100/60 backdrop-blur">
+        <h1 class="text-3xl font-bold text-slate-800 md:text-4xl">Gestor de Asientos del Cine</h1>
+        <p class="mt-2 text-sm text-slate-600 md:text-base">
+          Selecciona asientos, confirma tu reserva y gestiona ocupación de forma visual.
+        </p>
+      </header>
+
+      <section class="grid gap-6 lg:grid-cols-[1.7fr_1fr]">
+        <article class="rounded-3xl border border-white/70 bg-white/75 p-4 shadow-lg shadow-sky-100/60 backdrop-blur md:p-6">
+          <div class="mb-4 rounded-full bg-gradient-to-r from-slate-700 to-slate-500 p-2 text-center text-xs font-semibold tracking-[0.35em] text-white md:text-sm">
+            PANTALLA
+          </div>
+
+          <div class="overflow-auto rounded-2xl bg-rose-50/70 p-3 md:p-4">
+            <div id="seat-map" class="mx-auto grid w-max gap-2"></div>
+          </div>
+
+          <div class="mt-5 grid gap-3 text-xs font-semibold md:grid-cols-3 md:text-sm">
+            <div class="flex items-center gap-2 rounded-xl bg-emerald-100/80 p-2 text-emerald-700">
+              <span class="inline-block h-4 w-4 rounded-md bg-emerald-300"></span>
+              Libre
+            </div>
+            <div class="flex items-center gap-2 rounded-xl bg-rose-100/80 p-2 text-rose-700">
+              <span class="inline-block h-4 w-4 rounded-md bg-rose-300"></span>
+              Ocupado
+            </div>
+            <div class="flex items-center gap-2 rounded-xl bg-amber-100/90 p-2 text-amber-700">
+              <span class="inline-block h-4 w-4 rounded-md bg-amber-300"></span>
+              Seleccionado
+            </div>
+          </div>
+        </article>
+
+        <aside class="rounded-3xl border border-white/70 bg-white/75 p-4 shadow-lg shadow-indigo-100/60 backdrop-blur md:p-6">
+          <h2 class="text-xl font-bold text-slate-800">Controles</h2>
+
+          <div class="mt-4 grid gap-3">
+            <button id="confirm-btn" class="rounded-xl bg-emerald-300 px-4 py-2.5 font-semibold text-emerald-900 transition hover:bg-emerald-400">
+              Confirmar reserva
+            </button>
+            <button id="clear-selection-btn" class="rounded-xl bg-amber-200 px-4 py-2.5 font-semibold text-amber-900 transition hover:bg-amber-300">
+              Cancelar seleccionados
+            </button>
+            <button id="count-btn" class="rounded-xl bg-sky-200 px-4 py-2.5 font-semibold text-sky-900 transition hover:bg-sky-300">
+              Contar asientos
+            </button>
+            <button id="find-consecutive-btn" class="rounded-xl bg-violet-200 px-4 py-2.5 font-semibold text-violet-900 transition hover:bg-violet-300">
+              Buscar 2 consecutivos
+            </button>
+            <button id="reset-btn" class="rounded-xl bg-rose-200 px-4 py-2.5 font-semibold text-rose-900 transition hover:bg-rose-300">
+              Reiniciar sala
+            </button>
+          </div>
+
+          <div class="mt-5 rounded-2xl bg-slate-50 p-4">
+            <h3 class="font-bold text-slate-700">Cancelar una reserva puntual</h3>
+            <div class="mt-3 grid grid-cols-2 gap-2">
+              <input id="cancel-row" type="number" min="1" max="8" placeholder="Fila" class="rounded-lg border border-slate-200 bg-white px-3 py-2" />
+              <input id="cancel-col" type="number" min="1" max="10" placeholder="Columna" class="rounded-lg border border-slate-200 bg-white px-3 py-2" />
+            </div>
+            <button id="cancel-seat-btn" class="mt-3 w-full rounded-xl bg-orange-200 px-4 py-2.5 font-semibold text-orange-900 transition hover:bg-orange-300">
+              Cancelar reserva del asiento
+            </button>
+          </div>
+
+          <div class="mt-4 rounded-2xl bg-indigo-50/70 p-4 text-sm text-slate-700">
+            <p id="stats">Libres: 0 | Ocupados: 0 | Seleccionados: 0</p>
+            <p id="message" class="mt-2 text-slate-600">Elige un asiento libre para comenzar.</p>
+          </div>
+        </aside>
       </section>
     </main>
-    <script type="module" src="/src/main.ts"></script>
+
+    <script>
+      const FILAS = 8;
+      const COLUMNAS = 10;
+      const ESTADO = {
+        LIBRE: "free",
+        OCUPADO: "occupied",
+        SELECCIONADO: "selected",
+      };
+
+      const salaInicial = Array.from({ length: FILAS }, () => Array.from({ length: COLUMNAS }, () => ESTADO.LIBRE));
+
+      let sala = structuredClone(salaInicial);
+
+      const seatMap = document.getElementById("seat-map");
+      const statsEl = document.getElementById("stats");
+      const messageEl = document.getElementById("message");
+      const confirmBtn = document.getElementById("confirm-btn");
+      const clearSelectionBtn = document.getElementById("clear-selection-btn");
+      const countBtn = document.getElementById("count-btn");
+      const findConsecutiveBtn = document.getElementById("find-consecutive-btn");
+      const resetBtn = document.getElementById("reset-btn");
+      const cancelSeatBtn = document.getElementById("cancel-seat-btn");
+      const cancelRowInput = document.getElementById("cancel-row");
+      const cancelColInput = document.getElementById("cancel-col");
+
+      function setMessage(texto) {
+        messageEl.textContent = texto;
+      }
+
+      function contarAsientos() {
+        let libres = 0;
+        let ocupados = 0;
+        let seleccionados = 0;
+
+        for (let row = 0; row < FILAS; row++) {
+          for (let col = 0; col < COLUMNAS; col++) {
+            if (sala[row][col] === ESTADO.LIBRE) libres++;
+            if (sala[row][col] === ESTADO.OCUPADO) ocupados++;
+            if (sala[row][col] === ESTADO.SELECCIONADO) seleccionados++;
+          }
+        }
+
+        statsEl.textContent = `Libres: ${libres} | Ocupados: ${ocupados} | Seleccionados: ${seleccionados}`;
+        return { libres, ocupados, seleccionados };
+      }
+
+      function classesPorEstado(estado) {
+        if (estado === ESTADO.OCUPADO) {
+          return "bg-rose-300 text-rose-900 cursor-not-allowed";
+        }
+        if (estado === ESTADO.SELECCIONADO) {
+          return "bg-amber-300 text-amber-900 ring-2 ring-amber-500";
+        }
+        return "bg-emerald-300 text-emerald-900 hover:bg-emerald-400";
+      }
+
+      function renderSala() {
+        seatMap.style.gridTemplateColumns = `repeat(${COLUMNAS}, minmax(0, 1fr))`;
+        seatMap.innerHTML = "";
+
+        for (let row = 0; row < FILAS; row++) {
+          for (let col = 0; col < COLUMNAS; col++) {
+            const estado = sala[row][col];
+            const seat = document.createElement("button");
+            seat.type = "button";
+            seat.className = `h-9 w-9 rounded-lg text-xs font-bold transition ${classesPorEstado(estado)}`;
+            seat.dataset.row = String(row);
+            seat.dataset.col = String(col);
+            seat.textContent = `${row + 1}-${col + 1}`;
+            seat.title = `Fila ${row + 1}, Columna ${col + 1}`;
+
+            seat.addEventListener("click", () => {
+              if (estado === ESTADO.OCUPADO) {
+                setMessage("Ese asiento ya esta ocupado.");
+                return;
+              }
+
+              sala[row][col] = estado === ESTADO.LIBRE ? ESTADO.SELECCIONADO : ESTADO.LIBRE;
+              renderSala();
+              contarAsientos();
+            });
+
+            seatMap.appendChild(seat);
+          }
+        }
+      }
+
+      function confirmarReserva() {
+        let cambios = 0;
+        for (let row = 0; row < FILAS; row++) {
+          for (let col = 0; col < COLUMNAS; col++) {
+            if (sala[row][col] === ESTADO.SELECCIONADO) {
+              sala[row][col] = ESTADO.OCUPADO;
+              cambios++;
+            }
+          }
+        }
+
+        if (cambios === 0) {
+          setMessage("No hay asientos seleccionados para confirmar.");
+        } else {
+          setMessage(`Reserva confirmada para ${cambios} asiento(s).`);
+        }
+
+        renderSala();
+        contarAsientos();
+      }
+
+      function cancelarSeleccionados() {
+        let cambios = 0;
+        for (let row = 0; row < FILAS; row++) {
+          for (let col = 0; col < COLUMNAS; col++) {
+            if (sala[row][col] === ESTADO.SELECCIONADO) {
+              sala[row][col] = ESTADO.LIBRE;
+              cambios++;
+            }
+          }
+        }
+
+        setMessage(cambios > 0 ? `Se quitaron ${cambios} seleccion(es).` : "No habia asientos seleccionados.");
+        renderSala();
+        contarAsientos();
+      }
+
+      function cancelarReservaPuntual() {
+        const fila = Number(cancelRowInput.value);
+        const columna = Number(cancelColInput.value);
+
+        if (!Number.isInteger(fila) || !Number.isInteger(columna) || fila < 1 || fila > FILAS || columna < 1 || columna > COLUMNAS) {
+          setMessage("Ingresa una fila y columna validas.");
+          return;
+        }
+
+        const rowIndex = fila - 1;
+        const colIndex = columna - 1;
+
+        if (sala[rowIndex][colIndex] === ESTADO.OCUPADO) {
+          sala[rowIndex][colIndex] = ESTADO.LIBRE;
+          setMessage(`Se cancelo la reserva del asiento ${fila}-${columna}.`);
+        } else if (sala[rowIndex][colIndex] === ESTADO.SELECCIONADO) {
+          sala[rowIndex][colIndex] = ESTADO.LIBRE;
+          setMessage(`El asiento ${fila}-${columna} estaba seleccionado y se libero.`);
+        } else {
+          setMessage("Ese asiento ya estaba libre.");
+        }
+
+        renderSala();
+        contarAsientos();
+      }
+
+      function buscarConsecutivos() {
+        for (let row = 0; row < FILAS; row++) {
+          for (let col = 0; col < COLUMNAS - 1; col++) {
+            if (sala[row][col] === ESTADO.LIBRE && sala[row][col + 1] === ESTADO.LIBRE) {
+              sala[row][col] = ESTADO.SELECCIONADO;
+              sala[row][col + 1] = ESTADO.SELECCIONADO;
+              setMessage(`Encontrados 2 asientos consecutivos en fila ${row + 1}, columnas ${col + 1} y ${col + 2}.`);
+              renderSala();
+              contarAsientos();
+              return;
+            }
+          }
+        }
+
+        setMessage("No hay dos asientos libres consecutivos.");
+      }
+
+      function reiniciarSala() {
+        sala = structuredClone(salaInicial);
+        setMessage("Sala reiniciada al estado inicial.");
+        renderSala();
+        contarAsientos();
+      }
+
+      confirmBtn.addEventListener("click", confirmarReserva);
+      clearSelectionBtn.addEventListener("click", cancelarSeleccionados);
+      countBtn.addEventListener("click", contarAsientos);
+      findConsecutiveBtn.addEventListener("click", buscarConsecutivos);
+      resetBtn.addEventListener("click", reiniciarSala);
+      cancelSeatBtn.addEventListener("click", cancelarReservaPuntual);
+
+      renderSala();
+      contarAsientos();
+    </script>
   </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index 7cd7db4..3afad07 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,18 +1,3 @@
-if (typeof document !== "undefined") {
-  import("./style.css").then(() => {
-    const app = document.querySelector<HTMLParagraphElement>("#app");
-    if (app) {
-      app.textContent = "If you can see this, Tailwind is working.";
-    }
-  });
-}
-
-console.log("Hello from src/main.ts");
-
-export {};
-
-
-
 /*Creamos la sala de cine para 8 filas y 10 columnas*/ 
 
 let filas: number = 8;
@@ -145,21 +130,21 @@ function buscarAsientosConsecutivos(sala:number[][]): string | null {
 
 let salaInicial = crearSala(filasReal, columnasReal);
 let salaActual = mostrarSala(salaInicial);
-console.log(salaActual);
+//console.log(salaActual);
 
-let primeraReserva = reservarAsiento(salaInicial, 7, 7);
-console.log(mostrarSala(primeraReserva));
+//let primeraReserva = reservarAsiento(salaInicial, 7, 7);
+//console.log(mostrarSala(primeraReserva));
 
-let segundaReserva = reservarAsiento(salaInicial, 7, 7);
-console.log(mostrarSala(segundaReserva));
+//let segundaReserva = reservarAsiento(salaInicial, 7, 7);
+//console.log(mostrarSala(segundaReserva));
 
-let checkAsientos = contarAsientos(segundaReserva);
-console.log(`Asientos libres: ${checkAsientos.libres}, Asientos ocupados: ${checkAsientos.ocupados}`);
+//let checkAsientos = contarAsientos(segundaReserva);
+//console.log(`Asientos libres: ${checkAsientos.libres}, Asientos ocupados: ${checkAsientos.ocupados}`);
 
 //let cancelarReserva1 = cancelarReserva(segundaReserva, 7, 7);
 //console.log(mostrarSala(cancelarReserva1));
 
-let buscarAsientos = buscarAsientosConsecutivos(segundaReserva);
-console.log(buscarAsientos);
+//let buscarAsientos = buscarAsientosConsecutivos(segundaReserva);
+//console.log(buscarAsientos);
 
 /*                Qué pasa con el console.log si se devuelve null                       */

From 54996b069e9ecd5ff05e21b61e6d7bb4bb063eac Mon Sep 17 00:00:00 2001
From: JChuck0 <110050395+JChuck0@users.noreply.github.com>
Date: Thu, 6 Aug 2026 09:45:42 +0000
Subject: [PATCH 7/7] Actualizo el README

---
 .vscode/settings.json        |   5 +-
 README.md                    | 118 +++++++++++++++++------------------
 index.html => src/index.html |   0
 src/main.ts                  |   1 -
 4 files changed, 59 insertions(+), 65 deletions(-)
 rename index.html => src/index.html (100%)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e3c454c..93ce622 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,4 @@
-{
-  "files.autoSave": "off"
+{
+  "files.autoSave": "off",
+  "liveServer.settings.port": 5501
 }
diff --git a/README.md b/README.md
index 968e03c..954efee 100644
--- a/README.md
+++ b/README.md
@@ -1,112 +1,106 @@
-# Hello World with Typescript
+# Gestor de Asientos de Cine
 
-<!-- hide -->
-> By [@ehiber](https://github.com/ehiber) and contributors at [4Geeks Academy](https://4geeksacademy.com/)
+Proyecto desarrollado con TypeScript, HTML, CSS, Vite y Tailwind CSS para simular la gestion de una sala de cine de 8 filas por 10 columnas.
 
-[![build by developers](https://img.shields.io/badge/build_by-Developers-blue)](https://4geeks.com)
-[![twitter](https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter)](https://twitter.com/4geeksacademy)
+El repositorio contiene dos implementaciones del mismo problema:
 
-*Estas instrucciones estan disponibles en [espanol](./README.es.md).*
-<!-- endhide -->
-Start coding a TypeScript/HTML/CSS website in 30 seconds by opening this template using 4Geeks' [One-Click Coding](https://s.4geeks.com/start?repo=https://github.com/4GeeksAcademy/typescript-hello) or locally on your computer.
+- una version en TypeScript orientada a consola en `src/main.ts`
+- una version visual e interactiva en `src/index.html`
 
-## Before you begin
+## Tecnologias
 
-Install the packages by typing:
+- TypeScript
+- Vite
+- Tailwind CSS
+- HTML y JavaScript del lado del navegador
+
+## Como ejecutar el proyecto
+
+Instala las dependencias:
 
 ```bash
 npm install
 ```
 
-## How do I run my website to see live changes?
-
-Type on the command line:
+Inicia el entorno de desarrollo:
 
 ```bash
 npm run start
 ```
 
-Then open your local URL in the browser (usually `http://localhost:5173`).
+Valida solamente TypeScript:
 
-## How do I run this in GitHub Codespaces?
+```bash
+npm run typecheck
+```
 
-Run the same development server:
+Ejecuta la version de consola:
 
 ```bash
-npm run start
+npm run console
 ```
 
-Vite is configured to listen on `0.0.0.0`, so Codespaces can detect and forward port `5173` automatically.
+## Estructura principal
 
-## How do I run only the TypeScript check?
+- `src/main.ts`: logica de la sala en TypeScript para pruebas desde consola.
+- `src/index.html`: interfaz visual para reservar, cancelar y consultar asientos.
+- `src/style.css`: importacion de Tailwind CSS.
+- `vite.config.ts`: configuracion del servidor Vite.
 
-Use this command to validate only TypeScript without starting Vite:
+## Implementaciones
 
-```bash
-npm run typecheck
-```
+### 1. Crear sala
 
-## How do I run `main.ts` from the terminal?
+La funcion `crearSala` genera una matriz bidimensional que representa la sala de cine. Cada posicion inicia en `0`, lo que significa que el asiento esta libre.
 
-If you want to execute `./src/main.ts` directly and see `console.log` output in the terminal, run:
-
-```bash
-npm run console
-```
+### 2. Mostrar sala
 
-This command is already wired to `./src/main.ts`.
+La funcion `mostrarSala` transforma la matriz en un texto legible para consola. Agrega numeracion de filas y columnas, usa `L` para asientos libres y `X` para asientos ocupados.
 
-## Where do I write my code?
+### 3. Reservar asiento
 
-It depends on the language:
+La funcion `reservarAsiento` marca un asiento como ocupado cuando estaba disponible. Si el asiento ya estaba reservado, muestra un mensaje indicandolo.
 
-- `./src/main.ts` for TypeScript logic.
-- `./src/style.css` for styles (Tailwind CSS v4 is already imported).
-- `./index.html` for the HTML shell.
+### 4. Contar asientos
 
-You can add more files as needed, just make sure to import them from `main.ts`.
+La funcion `contarAsientos` recorre toda la sala y devuelve cuántos asientos estan libres y cuántos ocupados. Sirve para llevar control del estado general de la sala.
 
-Note: if you can see the "Hello Rigo" card and the message "If you can see this, Tailwind is working.", Tailwind is configured correctly.
+### 5. Cancelar reserva
 
-## Troubleshooting
+La funcion `cancelarReserva` libera un asiento previamente ocupado, cambiando su estado nuevamente a disponible.
 
-### I don't see my changes...
+### 6. Buscar asientos consecutivos
 
-Every time you change any file inside `./src`, the website refreshes automatically (hot reload).
+La funcion `buscarAsientosConsecutivos` recorre la sala para detectar dos asientos libres uno al lado del otro. Es util cuando se necesita reservar lugares contiguos.
 
-If changes still don't appear, refresh clearing cache:
+### 7. Interfaz visual de reservas
 
-- Mac: `Cmd + Shift + R`
-- Windows/Linux: `Ctrl + Shift + R`
+En `src/index.html` se implementa una version grafica del sistema. Cada asiento se dibuja como un boton y cambia de color segun su estado:
 
-## How do I include more images in my project?
+- libre
+- ocupado
+- seleccionado
 
-Add them inside `./public` and reference them in HTML using `/your-image-name.ext`.
+### 8. Confirmar reserva desde la interfaz
 
-Example:
+La interfaz permite seleccionar uno o varios asientos y luego confirmarlos. Los asientos seleccionados pasan a estado ocupado y el sistema muestra un mensaje con la cantidad confirmada.
 
-```html
-<img src="/rigo-baby.jpg" alt="Rigo" />
-```
+### 9. Cancelar seleccionados
 
-## How do I include more TypeScript files?
+Existe un control para quitar todas las selecciones actuales antes de confirmar la reserva. Esto devuelve los asientos a estado libre.
 
-Add files into `./src` and import them from `main.ts`.
+### 10. Cancelar una reserva puntual
 
-Example:
+La interfaz permite escribir fila y columna para liberar un asiento especifico. Tambien contempla el caso en que el asiento ya este libre o solo estuviera seleccionado.
 
-```ts
-import { myVar } from "./file2";
-```
+### 11. Buscar dos asientos consecutivos en pantalla
 
-## How do I publish the website?
+Desde la interfaz se puede ejecutar una busqueda automatica de dos asientos libres consecutivos. Si se encuentran, el sistema los resalta como seleccionados.
 
-This boilerplate is compatible with Vercel in one step.
+### 12. Reiniciar la sala
 
-<!-- hide -->
-## Contributors
+La opcion de reinicio restaura toda la sala a su estado inicial, dejando todos los asientos libres.
 
-This template was built as part of the [4Geeks Academy Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [ehiber](https://github.com/ehiber) and contributors. Find out more about our [AI Engineering Course](https://4geeksacademy.com/us/coding-bootcamps/ai-engineering), [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).
+## Resumen
 
-You can find other templates and resources like this at the [school's GitHub page](https://github.com/4geeksacademy/).
-<!-- endhide -->
+Este proyecto resuelve el problema de gestion de asientos de cine en dos niveles: una logica base en TypeScript y una experiencia interactiva en navegador. Eso permite practicar estructuras de datos, recorridos de matrices, validaciones y manipulacion del DOM en un mismo ejercicio.
diff --git a/index.html b/src/index.html
similarity index 100%
rename from index.html
rename to src/index.html
diff --git a/src/main.ts b/src/main.ts
index 3afad07..d66b062 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -147,4 +147,3 @@ let salaActual = mostrarSala(salaInicial);
 //let buscarAsientos = buscarAsientosConsecutivos(segundaReserva);
 //console.log(buscarAsientos);
 
-/*                Qué pasa con el console.log si se devuelve null                       */