Interfaces de Usuario 2c2011 Trabajo Práctico

Esferas en camino

La Tierra esta nuevamente en peligro, y cómo no podía ser de otra forma nuestros héroes vendrán al rescate. Para poder salvar al planeta necesitarán ayuda de los legendarios objetos poderosos conocidos como “Esferas del Dragón”.

Las esferas del dragón se encuentran esparcidas por toda la tierra y nuestros personajes intentarán encontrarlas, para esto se sabe que existe un mapa donde se indica la posición de cada uno de estos objetos.

Un personaje es aquel que esta interesado en recorrer la distancia que lo separa desde donde se encuentra hasta la esfera del dragón que le interesa.

Estos son ejemplos de representaciones del mapa:

Podemos notar que un mapa se conforma de casilleros, cada casillero puede contener un solo objeto que pueden ser ubicados en él. Hay distintos objetos:

- esfera: el objetivo que nos interesa alcanzar.

- personaje: será el interesado en buscar las esferas, cada personaje puede recorrer una cierta distancia que es propia de cada uno,

Lo que se espera del sistemas es poder conocer si un personaje puede llegar a un determinado objeto, es decir si la distancia que puede recorrer el personaje alcanza para llegar hasta la esfera desde donde se encuentra ubicado.

Adicionalmente nos gustaria que un personaje pueda llamar a Sheng Long. Esto sucede si un personaje puede alcanzar 7 esferas del mapa.

TP1

Enunciado

1. Setup del mapa: Poder definir el tamaño del mapa con el que vamos a jugar.
2. Creacion de objetos: Codificar una pantalla que permita crear tanto esferas como personajes, de ambas cosas debemos de poder seleccionar en que lugar del mapa las ubicaremos. Particularmente para los personajes se debe de poder decir cual es la distancia que podrán recorrer.
3. Visualización del contenido: Crear una vista que sea una tabla donde las columnas sean Posición y Descripción y se detalle por cada posición del mapa la descripción de su contenido. (Más adelante tienen un ejemplo de una posible forma de visualizar el mapa)
4. Poder saber si un personaje puede alcanzar una esfera. Esto pasa cuando la distancia a la que se encuentra la esfera del personaje es menor o igual a la máxima distancia que puede recorrer.

Iteraciones sugeridas

A continuación enumeramos iteraciones sugeridas para ir desarrollando el TP de forma incremental aprovechando los conceptos que vamos viendo en clase.

Visualizacion y Consulta de Personaje-Esfera

• Poder visualizar un mapa, su estado. Es decir, dónde estan los personajes y las esferas.
  • Un ejemplo de visualización sería la siguiente pantalla:

• Poder consultar si un personaje dado puede alcanzar una esfera dada. El usuario deberá poder elegir uno de los personajes (presentes en el tablero, claro), y una esfera (también presente en el tablero). Y hacer la consulta. (Un ejemplo de lograr esto es, mirando la imagen anterior la parte de abajo donde nos deja seleccionar un personaje y una esfera y en vez de un botón buscar, que diga algo como... "¿Llega?" )
• Debería indicar de alguna forma si el persona no puede alcanzar la esfera.
• Aclaraciones:
  • Dibujo del tablero:
    • No hace falta que el tablero se muestre de forma gráfica. De hecho con Arena no van a poder hacerlo.
    • Opciones:
      • un label y hacerle un toString() con texto
      • hacer una grilla
      • rebuscarselas :)

Obtener esferas y llamar a Sheng Long

• Ahora queremos darle más comportamiento.
• Ya no queremos saber si un personaje puede alcanzar una esfera, sino de hecho decirle que vaya a buscarla.
• Una vez que un persona obtuvo una esfera, ésta se saca del tablero y pasa a formar parte del inventario del personaje.
• Además, un persona que poseea todas las esferas podrá llamar a Sheng Long.
• Validación:
  • En caso de que la esfera no se encuentre dentro de su rango de alcance debería notificar al usuario.

Crear Personajes, Esferas y Tablero

• Hacer una Dialog para crear personajes.
  • Un personaje tiene un nombre y rango de alcance (distancia máxima que recorre).
• Crear Tablero:
  • Al crear el tablero se seleccionan personas o esferas y se ubican dentro del tablero especificando la posición.

Vale también agregar como BONUS algún caso extra como la persistencia del tablero o re-posicionar las cosas ya creadas o crear un juego random.

TP2

Mejorar el diseño planteado para el TP1 usando herramientas de desarrollo web (html, css, jsp, servlets, javascript, ajax ...)

• En lugar de la tabla con los objetos creados, que muestre una grilla (una representación gráfica del tablero más realista). De modo que los personajes y las esferas sean mostrados como imágenes. La grilla debe ser generada de forma dinámica con el contenido del tablero.
• Poder agregar objetos al tablero y visualizar estos cambios.
• Generar un layout que sea respetado durante toda la navegación del tp. Diseñando:
  • Header con el nombre del sitio que ustedes generen
  • Footer, debe contener al menos el nombre del alumno, nombre de la materia, facultad, cuatrimestre y año
  • Link al home

El layout debe de ser respetado y mostrado en todas las páginas del sitio. Se define como home la pantalla donde se muestra el contenido del tablero.

Iteraciones sugeridas

Antes que nada si no están familiarizados les recomendamos jugar un poco con los componentes html y con sus estilos, separando siempre lo que es estilos (css) de los tags html.

No se vuelvan locos haciendo que el tp funcione (y se vea) bien en todos los navegadores del planeta, les recomendamos (mucho) que elijan un browser y se enfoquen en ese.

Tambien les recomendamos que usen algunas herramientas para desarrollo web como firebug para firefox y sus equivalentes en otros navegadores como ie developer tools para IE, firebug para chrome (que algunas versiones ya lo traen instalado y todo).

1. Visualizar el contenido del tablero de forma dinámica con JSP y Servlets.
2. Agregar objetos al tablero. Tener en cuenta que se debe validar que:
   1. No se agregue más de un objeto al mismo casillero
   2. No se creen personajes sin nombre o distancia máxima
3. Definición del header
4. Definición del footer
5. Vista del tablero
6. Vista del tablero, mejora de la visualización.

Bonus

Cuando se modifica el tablero hacer que solamente se refresque la grilla que lo representa.

Hacer que sea posible posicionar los objetos en el tablero haciendo drag and drop de las imagenes que representan a los objetos sobre las celdas del tablero.

TP3

En la tecnología elegida (Seaside o Wicket) modelar el juego de las esferas del Dragón con las mismas reglas que antes. Se debe de poder:

• Definir un tablero: entendiendo como definir un tablero darle las dimesiones. Todos nuestros tableros (o mapas del dragón) son (al menos) bidimensionales.
• Crear Personajes: Los datos para la creación de un personaje son:
  • Nombre (obligatorio)
  • Distancia maxima que puede recorrer (obligatorio)
  • Imagen con la que se mostrará (opcional). La imagen puede ser seleccionada de un "catálogo de imagenes", en caso de no seleccionar ninguna que se muestre con una imagen cualquiera. Sobre esto, dos puntos bonus:
    • permitirle al usuario que crea el personaje que suba la imagen con la que se va a mostrar el personaje si no encuentra ninguna que le agrade.
    • que solamente muestre las imagenes que no fueron usadas por otro personaje
• Crear Esferas: Los datos para la creación de esferas son:
  • Cantidad de estrellas. Obligatorio con valores del 1 al 7 no puediendo haber 2 esferas con la misma cantidad de estrellas en todo el juego.
• Ubicar cosas en el tablero: una cosa puede ser una esfera o un personaje, se debe de poder decir cuál es la posición del tablero en la que estará ubicado. Tener en cuenta que no puede haber en una misma posición dos cosas (ni dos personajes, ni dos esferas ni una esfera y un personaje)
• Visualizar el tablero: poder ver el tablero (por lo menos) en forma bidimensional. En el casillero donde se encuentre un personaje o una esfera se debe de visualizar su imagen asociada.
• Ir a buscar esfera: Que sea posible seleccionar un personaje y una esfera (ubicada en el mapa) para que nuestro personaje la vaya a buscar. En caso de que no pueda llegar que informe el error, si puede ir a buscarla debe suceder que:
  • el personaje tiene una nueva ubicación: la posicion donde estaba la esfera
  • el personaje incorpora esa esfera como propia (es decir ahora la lleva en el conjunto de las esferas que pudo conseguir)
  • la esfera ya no es visible desde el tablero y ningún otro personaje puede ir a buscarla.
• Visualizar el status de los personajes: debe de ser posible por cada personaje visualizar las esferas que lleva. En la pantalla debe de mostrarse la imagen que representa el personaje junto con su nombre y distancia maxima que puede recorrer y las imagenes de todas las esferas que pudo conseguir. En caso de que tenga las 7 esferas del dragón se debe de habilitar un botón con el label "Llamar a Sheng Long" que abra una ventana modal con una imagen de Sheng Long, al cerrar esta ventana modal deben de redistribuirse las esferas en los casilleros disponibles del mapa y el personaje no las cuenta más como sus esferas conseguidas.
• Redistribuir esferas: que sea posible expropiar todas las esferas de los personajes y redistribuirlas de forma alatorea entre los casilleros disponibles del tablero.