Skip to content

Resolver ejercicio 67 intermedio #250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
anndreloopez012 merged 1 commit into from
Aug 5, 2026
Merged

Resolver ejercicio 67 intermedio #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions intermedio/ejercicios/67-marcador-pingpong-dom/resoluciones/maria-montepeque/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Marcador pingpong</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="marcador-container">
<h1>Marcador de pingpong</h1>
<p id="marcador-actual">0 - 0</p>
<p id="sets-info">Sets: 0 - 0</p>
<p id="ganador-info"></p>
<div class="botones">
<button id="boton-punto-a">Punto A</button>
<button id="boton-punto-b">Punto B</button>
<button id="boton-reset-marcador">Reiniciar</button>
</div>
</main>
<script src="maria-montepeque.js"></script>
</body>
</html>
126 changes: 126 additions & 0 deletions ...dio/ejercicios/67-marcador-pingpong-dom/resoluciones/maria-montepeque/maria-montepeque.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
// 67. Marcador pingpong DOM - Resolucion Maria Montepeque

const PUNTOS_PARA_GANAR_SET = 11;
const SETS_PARA_GANAR_PARTIDO = 3;

function crearEstadoInicial() {
return {
puntosJugadorA: 0,
puntosJugadorB: 0,
setsJugadorA: 0,
setsJugadorB: 0,
historialSets: [],
ganadorPartido: null
};
}

function esJugadorValido(jugador) {
return jugador === 'A' || jugador === 'B';
}

function haGanadoSet(puntosA, puntosB) {
const maximo = Math.max(puntosA, puntosB);
const diferencia = Math.abs(puntosA - puntosB);
return maximo >= PUNTOS_PARA_GANAR_SET && diferencia >= 2;
}

function sumarPunto(estado, jugador) {
if (!esJugadorValido(jugador) || estado.ganadorPartido) return estado;

const estadoConPunto =
jugador === 'A' ? { ...estado, puntosJugadorA: estado.puntosJugadorA + 1 } : { ...estado, puntosJugadorB: estado.puntosJugadorB + 1 };

if (!haGanadoSet(estadoConPunto.puntosJugadorA, estadoConPunto.puntosJugadorB)) {
return estadoConPunto;
}

const ganadorSet = estadoConPunto.puntosJugadorA > estadoConPunto.puntosJugadorB ? 'A' : 'B';
const setsJugadorA = estadoConPunto.setsJugadorA + (ganadorSet === 'A' ? 1 : 0);
const setsJugadorB = estadoConPunto.setsJugadorB + (ganadorSet === 'B' ? 1 : 0);

return {
puntosJugadorA: 0,
puntosJugadorB: 0,
setsJugadorA,
setsJugadorB,
historialSets: [
...estadoConPunto.historialSets,
{ puntosA: estadoConPunto.puntosJugadorA, puntosB: estadoConPunto.puntosJugadorB, ganador: ganadorSet }
],
ganadorPartido: setsJugadorA >= SETS_PARA_GANAR_PARTIDO ? 'A' : setsJugadorB >= SETS_PARA_GANAR_PARTIDO ? 'B' : null
};
}

function simularSecuenciaPuntos(secuenciaJugadores) {
let estado = crearEstadoInicial();

secuenciaJugadores.forEach((jugador) => {
estado = sumarPunto(estado, jugador);
});

return { estadoFinal: estado, totalPuntosProcesados: secuenciaJugadores.length };
}

function renderizarMarcador(estado) {
if (typeof document === 'undefined') return;
const marcador = document.querySelector('#marcador-actual');
const setsInfo = document.querySelector('#sets-info');
const ganadorInfo = document.querySelector('#ganador-info');
if (!marcador) return;

marcador.textContent = `${estado.puntosJugadorA} - ${estado.puntosJugadorB}`;
if (setsInfo) setsInfo.textContent = `Sets: ${estado.setsJugadorA} - ${estado.setsJugadorB}`;
if (ganadorInfo) ganadorInfo.textContent = estado.ganadorPartido ? `Gana el partido: Jugador ${estado.ganadorPartido}` : '';
}

function inicializarMarcador() {
if (typeof document === 'undefined') return;

let estado = crearEstadoInicial();
renderizarMarcador(estado);

const botonPuntoA = document.querySelector('#boton-punto-a');
const botonPuntoB = document.querySelector('#boton-punto-b');
const botonReset = document.querySelector('#boton-reset-marcador');

if (botonPuntoA) {
botonPuntoA.addEventListener('click', () => {
estado = sumarPunto(estado, 'A');
renderizarMarcador(estado);
});
}

if (botonPuntoB) {
botonPuntoB.addEventListener('click', () => {
estado = sumarPunto(estado, 'B');
renderizarMarcador(estado);
});
}

if (botonReset) {
botonReset.addEventListener('click', () => {
estado = crearEstadoInicial();
renderizarMarcador(estado);
});
}
}

console.log('Caso 1: jugador A gana el primer set 11-0');
const secuenciaSetLimpio = Array(11).fill('A');
console.log(JSON.stringify(simularSecuenciaPuntos(secuenciaSetLimpio), null, 2));

console.log('\nCaso 2: set con deuce (empate en 10-10, gana A por diferencia de 2 puntos, 13-11)');
const secuenciaDeuce = [
...Array(10).fill('A'),
...Array(10).fill('B'),
'A',
'B',
'A',
'A'
];
console.log(JSON.stringify(simularSecuenciaPuntos(secuenciaDeuce), null, 2));

console.log('\nCaso 2b: jugador invalido ("C") es ignorado sin romper el estado');
console.log(JSON.stringify(simularSecuenciaPuntos(['A', 'A', 'C', 'B']), null, 2));

inicializarMarcador();
44 changes: 44 additions & 0 deletions intermedio/ejercicios/67-marcador-pingpong-dom/resoluciones/maria-montepeque/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
body {
font-family: sans-serif;
background-color: #10131a;
color: #eef1f7;
display: flex;
justify-content: center;
padding: 3rem;
}

.marcador-container {
text-align: center;
}

#marcador-actual {
font-size: 3rem;
font-weight: bold;
margin: 0.5rem 0;
}

#sets-info {
color: #9fb4d4;
}

#ganador-info {
color: #4cd964;
font-weight: bold;
min-height: 1.5rem;
}

.botones {
display: flex;
gap: 0.5rem;
justify-content: center;
margin-top: 1rem;
}

.botones button {
padding: 0.6rem 1rem;
border-radius: 4px;
border: none;
background-color: #4c9aff;
color: #10131a;
cursor: pointer;
}
Loading