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 - -> 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).* - -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 -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 - -## 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/). - +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/index.html deleted file mode 100644 index 4cd0c49..0000000 --- a/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - Hello World with Typescript - - -
-

Hello World with Typescript

- -
- Hello Rigo -
-

Hello Rigo

-

-
-
-
- - - diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..fad99d1 --- /dev/null +++ b/src/index.html @@ -0,0 +1,284 @@ + + + + + + Gestor de Asientos de Cine + + + + + + +
+ +
+
+

Gestor de Asientos del Cine

+

+ Selecciona asientos, confirma tu reserva y gestiona ocupación de forma visual. +

+
+ +
+
+
+ PANTALLA +
+ +
+
+
+ +
+
+ + Libre +
+
+ + Ocupado +
+
+ + Seleccionado +
+
+
+ + +
+
+ + + + diff --git a/src/main.ts b/src/main.ts index 1aec760..d66b062 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,12 +1,149 @@ -if (typeof document !== "undefined") { - import("./style.css").then(() => { - const app = document.querySelector("#app"); - if (app) { - app.textContent = "If you can see this, Tailwind is working."; +/*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 < filasReal; row++){ + cineInicial[row] = [] + for(let colum = 0; colum < columnasReal ; colum++){ + cineInicial[row][colum] = 0; } - }); + } + return cineInicial; } -console.log("Hello from src/main.ts"); -export {}; + +/*Función para mostrar la sala de cine*/ + +function mostrarSala(sala:number[][]): string { + 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"; + } + return actualSala; +} + + + +/*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}`); + }else if(sala[row][colum] === 1){ + console.log(`El asiento en la fila ${fila} y columna ${columna} ya está ocupado`); + } + } + } + } + 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}; +} + +/* 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); +