Hay un nuevo avance de Xhelos, el modulo de construccion y mantenimiento de tu colonia. Esta te permite construir y actualizar edificaciones en tu colonia. Aunque esta en fase de prueba ya pueden ir curioseando en la cuenta demo ( o la tuya si ya creaste una cuenta en Xhelos!).

Y de que trata esto?

Esta nueva vista te permite jalar las construcciones de la derecha, y soltarlas en el mapa ( si, si , se que no se ve como un mapa, usen su imaginacion esta ves :D )de la izquierda.

Al jalar la construccion encima del mapa, las celdas que ocupara el mismo se iluminan dependiendo del tamaña que ocupe la construccion en el mapa.

Como no puedes construir encima de otras construcciones, el juego te lo muestra intuitivamente cambiando a color rojo las zonas prohibidas para construir.

Por ahora podras construir en cualquiera de las 3 zonas posibles ( aire, tierra, agua), pero iremos mejorando esto segun la necesidad.


Y como se hizo todo esto?

Todo esto fue hecho con la increible extension de Jquery, la libreria Jquery UI. Jquery UI te da un soporte increible para hacer Drag y Drop. Si conoces Javascript y Jquery, te aseguro que te resultara muy facil implementar esto. Pero enumerare los pasos para darles una idea de lo que trata esto.

1. Creas una lista de items y le das el comportamiento draggable usando:
   

   $( "#selector" ).draggable();

2. Adicionalmente le cambie la apariencia del dragabble por una version mas pequeña de la construccion usando la opcion helper
3. Despues le indico que quiero que los cuadraditos sean una posibilidad de droppable usando
   

   $( ".miscuadraditos" ).droppable();

Y ya estaria casi todo... casi todo.


Problemas y Gotchas

Pero bueno no todo es color de rosa. Actualmente cuento con 2 problemas no muy graves.

• Se pone lento si es que le das el comportamiento droppable a muchos elementos. En mi caso cada cuadrado del mapa es un posible Droppable, con un tamaño de 30 * 20, esto hace un total de 600 cuadrados donde puedes hacer Drag a una construccion. Lo van a sentir cuando intenten jalar un edificio, esto se demora unos 2 segundos, algo nada intuitivo. Al parecer la solucion es darle un comportamiento Drop al contenedor de estos cuadraditos, y obtener el cuadradito afectado de alguna otra manera.
• Si se dan cuenta no coloco realmente el img tag de la construccion encima del html del cuadradito receptor, esto deformaria todo el mapa ya que la construccion es mas grande que el cuadradito receptor. Lo que hago realmente es cambiarle el background a todos los cuadrados alrededor del cuadradito receptor para que se mantenga el mismo tamaño. Probe usando CSS para poner una img con posicion absolute encima de mi mapa, perdi 1 dia haciendo esto!, pero bueno descubri un bug en Firefox 4 asi que supongo que algo bueno salio de todo esto.