- Nota: Cada pregunta se valorará como bien o como mal (valoraciones intermedias serán excepcionales).
- Nota2: Cada pregunta computará únicamente en el examen al que pertenezca (diseño o desarrollo).
- Nota3: Para aprobar cada examen hay que obtener una puntuación mínima de 5 puntos en ese examen.
- Nota4: Organice su tiempo. Si no consigue resolver un apartado pase al siguiente. El examen consta de apartados de diseño y de desarrollo que se pueden resolver por separado. Si un apartado depende de otro que no sabe resolver, siempre puede dar una solución que aunque no sea correcta, le permita seguir avanzando.
- Nota5: Para que una solución sea correcta, no sólo hay que conseguir que haga lo que se pide, sino que además todo lo que funcionaba lo tiene que seguir haciendo. La solución debe estar implementada según las prácticas de código limpio explicadas en clase. Esto incluye React, JavaScript, CSS y HTML. No debe haber errores de tipos ni de ejecución.
- Nota6: Lea completamente el examen antes de empezar y comience por lo que le parezca más fácil.
- Nota7: No se permite utilizar ninguna librería que no esté ya incluida en el fichero "package.json".
Pasos previos antes de empezar
- Clone el repositorio del enunciado
git clone https://gitlab.com/surtich/enunciado-examen-primera-2024-2025.git- Vaya al directorio del proyecto
cd enunciado-examen-primera-2024-2025- Si no lo ha hecho anteriormente, configure su usuario de git:
git config user.name "Sustituya por su nombre y apellidos"
git config user.email "Sustituya por su correo electrónico"- Cree un branch con su nombre y apellidos separados con guiones (no incluya mayúsculas, acentos o caracteres no alfabéticos, excepción hecha de los guiones). Ejemplo:
git checkout -b fulanito-perez-gomez- Compruebe que está en la rama correcta:
git status- Suba la rama al repositorio remoto:
git push origin <nombre-de-la-rama-dado-anteriormente>- Instale las dependencias del cliente y arranque el cliente:
npm install
npm run devNavegue a http://localhost:5173
- Dígale al profesor que ya ha terminado para que compruebe que todo es correcto y desconecte la red.
Nota: El examen de diseño debe hacerse modifcando únicamente el fichero index.css.
1.- (2 puntos) Modifique el tablero para que se vea como se muestra en la figura. Respete colores, tamaños, márgenes externos e internos y alineaciones.
2.- (2 puntos) Modifique el tablero para que se muestren los bordes de la imagen. El diseño de los bordes debe mantenerse para cualquier tamaño de tablero.
4.- (2 puntos) La sección de game-info tendrá el estilo mostrado. Concretamente estará centrada y tendrá columnas dinámicas.
- No se puntuarán aquellos apartados que tengan errores de funcionalidad.
- No es suficiente que se haga lo que se pide, la implementación tendrá que ser también correcta.
- Se penalizará que haya errores de ejecución en la consola.
- Se penalizará que se dejen mensajes (console.log).
- Se penalizará el código comentado.
- Nota: el examen suma 12,0 puntos. Para aprobar es necesario obtener al menos 5 puntos. La puntuación máxima es 10 puntos. Si obtiene más de 10 puntos, el exceso de los apartados 7.5 y 8.3 se le sumará a la nota del examen de desarrollo de la segunda evaluación. Por ejemplo, si obtiene 10,5 puntos y en el apartado 7.5 obtiene 1,0 puntos y en el apartado 8.3 suma 0,0 puntos, su nota en el examen de desarrollo de la primera será de 10,0 y al examen de desarrollo de la segunda evaluación se le sumarán 0,5 puntos.
const symbols = [
"X",
"O",
"Φ",
"Ω",
"☆",
"♖",
"♘",
"♙",
"♕",
"♡",
"♢",
"♤",
"♧",
"👦",
"👧",
"🍊",
"🍓",
];A partir de este array el menú config se mostrará como se indica en la figura.
Nota: Se trata de que cree lo que se le pide de forma dinámica, con JavaScript.
7.2.- (0,5 puntos) Por defecto, al cargar la aplicación, el menú tendrá seleccionados los dos primeros jugadores.
7.3.- (1 punto) El botón add game estará desactivado cuando haya menos de dos jugadores seleccionados.
Nota: Tenga en cuenta que en React el cambio de estado es asíncrono. Quizás le interese usar useEffect para hacer lo que se le pide en este apartado.
Nota: La validación de rows, cols y target debe seguir comportándose como antes.
7.4.- (2 puntos) Cuando se pulse add game se jugará con los jugadores seleccionados, usando los símbolos que correspondan.
Nota: Una vez determinado el orden, se respetará el mismo durante toda la partida.
Nota: Este apartado sustituye a la funcionalidad de la pregunta 6. Comente lo que hiciera en la pregunta 6 para implementarla.
9.1.- (1 punto) La situarse encima de una casilla, se mostrará el símbolo del jugador que tiene el turno.
Nota: Probablemente esto requiera que use JavaScript y no se pueda hacer únicamente con un hover. Para hacer el efecto de hover en React puede usar los eventos onMouseOver y onMouseOut; para cambiar el estilo del botón puede usar la propiedad style. Ejemplo:
function handleMouseOver(event: React.MouseEvent<HTMLButtonElement>) {
const button = event.currentTarget;
button.style.backgroundColor = "#fff";
}
Nota: Antes de pulsar sobre una casilla, se está mostrando con fondo blanco ya que para pulsar hay que estar sobre la casilla. Se trata de que al pulsar sobre la casilla, desaparezca el efecto hover y se muestre el fondo azul. La imagen siguiente muestra un estado incorrecto, ya que el hover no desaparece al pulsar sobre una casilla. Debe hacer lo que se muestra en las imágenes anteriores (9.1 y 9.2).
- Ejecute el siguiente comando para comprobar que está en la rama correcta y ver los ficheros que ha cambiado:
git status- Prepare los cambios para que se añadan al repositorio local:
git add .
git commit -m "completed exam"- Compruebe que no tiene más cambios que incluir:
git status-
Dígale al profesor que va a entregar el examen.
-
Conecte la red y ejecute el siguiente comando:
git push origin <nombre-de-la-rama>- Abandone el aula en silencio.