Charla realizada en BogotaJS acerca del desarrollo del parchis haciendo uso de esta librería.

1. Desarrollando el Juego del
Parqués/Parchís en
ReactJS/WebSockets
Jorge Rubiano
@ostjh

2. Aprendiendo a través del desarrollo de juegos
https://github.com/jorger

3. Aprendiendo ReactJS a través de Juegos
https://bit.ly/2XH11CGhttps://bit.ly/2VmrWChhttps://bit.ly/34KvpgS

4. ● Profundizar en el conocimiento de ReactJS y las
nuevas funcionalidades que esta librería nos ofrece,
por ejemplo: hooks suspense lazy, entre otras
● Hacer uso de WebSockets para jugabilidad en
tiempo real.
● Mejorar los conocimientos relacionados a CSS/CSS3
● Crear una aplicación/juego que funcione offline,
haciendo uso de ServiceWorker (PWA)
● Hacer uso de autenticación a través de redes
sociales y/o servicios, haciendo uso de PassportJS y
de las estrategias necesarias para cada uno de los
servicios utilizados (Github, Twitter y Google)
Motivación.

5. El parqués es un juego de mesa de origen Colombiano,
derivado del parchís Español y este a su vez del antiguo
pachisi o chaupar de la India.
Tanto la versión Colombiana como la Española guardan varias
similitudes en cuanto a las reglas.
El parqués/Parchís
https://es.wikipedia.org/wiki/Parqu%C3%A9s

6. ● Se utiliza un tablero en el cual pueden jugar
de dos a cuatro jugadores.
● Hace uso de dos dados.
● Cada jugador cuenta con cuatro fichas, las
cuales inician en la cárcel.
● Existen casillas que son marcadas como
seguros.
● Si una ficha de diferente color cae en una
casilla donde se encuentra otra ficha, la
enviará a la cárcel.
● Gana el jugador que lleve las 04 fichas a la
meta.
Reglas.

7. ● Para sacar a una ficha de la cárcel el jugador
deberá obtener un cinco, bien por que uno de los
dados obtuvo un cinco o porque la sumatoria de los
dos dados es cinco, se sacará una ficha, si el
usuario obtiene pares de 5 sacará dos fichas de la
cárcel.
● Si dos fichas del mismo color caen en la misma
celda, forman una barrera. Ni la ficha del jugador ni
la ficha del oponente pueden cruzar el bloqueo. Si
un jugador no puede mover ninguna ficha debido a
un bloqueo, el turno se perderá.
● Si el jugador obtiene un par, entonces el jugador se
ve obligado a romper la barrera (si existe)
Reglas.

8. ● Si existen dos fichas de diferentes colores formarán
un bloqueo en una celda segura y se aplicarán las
mismas reglas que las anteriores para eliminar las
barreras.
● Si un jugador envía una ficha a la cárcel, obtendrá
una recompensa de 20 movimientos que no se
pueden dividir entre las fichas.
● Si un jugador lleva una ficha a la meta, obtendrá una
recompensa de 10 movimientos que no se pueden
dividir entre las fichas.
● Si un jugador obtiene tres pares consecutivos, la
última ficha que haya movido será enviada a la cárcel.
Reglas.

9. https://parchisreact.herokuapp.com/
Jugar!

10. Modalidades de Juego

11. ● Modo Offline: Permite que el juego sea
jugado en un mismo dispositivo (sin requerir
conexión a internet), a su vez se puede
tener las siguientes variaciones:
1. Jugar dos, tres o cuatro jugadores.
2. Jugar versus un Bot.
3. Jugar entre bots.
Ejemplo Juego bots: https://youtu.be/l8iZHvhWtoc
Modalidades de juego.

12. Modo Online: Permite dos o cuatro jugadores puedan jugar en “tiempo real” en
su propio dispositivo, este modo hace uso de websockets/Socket.io, permitiendo
que cada usuario envíe sus movimientos a los demás jugadores.
1. Random selection.
2. Play with friends.
3. Party mode.
Modalidades de juego.

13. 1. Random selection.
Se selecciona de forma
aleatoria el contrincante.
Ejemplo Juego - cuatro jugadores: https://youtu.be/WKU4IRVuM9o
Modalidades de juego

14. 2. Play with friends.
Permite crear una sala
privada, para iniciar una
partida con un amig@
Modalidades de juego

15. 3. Party mode.
Modo especial en el cual se
fusionan los tipos offline y online,
en este caso los jugadores harán
uso de un sólo tablero y las
acciones de movimientos y
lanzamiento de dados se podrían
hacer desde un dispositivo móvil
Modalidades de juego

16. Party Mode

17. Chat/emojis
● Emojis: Permite que un jugador pueda
expresarse a través del uso de emojis y
mensajes predeterminados durante una
partida, igualmente existe la opción
para silenciar un usuario si fuese
necesario.
● Chat: Igualmente existe un chat desde
el cual los usuarios podrán conversar
durante una partida online, los
mensajes escritos no son almacenados.
Otras características

18. Stack

19. El juego está desarrollado haciendo uso de
la librería conocida como ReactJS, en este
caso se hizo uso del conocido paquete CRA
(Create React APP) el cual permite un
rápido inicio en el uso de ReactJS, debido a
que nos configura por defecto todo el
entorno, como por ejemplo configuraciones
relacionadas a WebPack, workbox para el
manejo de ServiceWorkers/PWA, entre otras
características.
Front

20. ● Reach Router: Para manejar las rutas a nivel de front.
● howler: Para el manejo de sonidos
● react-countdown-circle-timer: Para manejar un cronometro en las partidas
online.
● react-dice-complete: Para el manejo de los dados, este paquete otorga
una gran flexibilidad para manejar la animación de los dados.
● socket.io-client: Este es el cliente para la popular librería conocida como
socket.io, la cual facilita el uso de websockets
● sweetalert: Para el manejo de los mensajes/modals en el juego.
● react-app-rewired: Permite reescribir algunas reglas de CRA, sin la
necesidad de hacer un eject.
Front

21. NodeJS:
● ExpressJS
● MySql
● redis
● socket.io
● PassportJS
BackEnd

22. BackEnd - FrontEnd

23. Hooks, Suspense, Lazy
https://bhanu.io/easy-code-splitting-using-react-lazy-and-suspense-ec5295b8082e

24. Arquitectura de
Sockets

25. Arquitectura - Tiempo real

26. Arquitectura - Party mode

27. Desafíos

28. Desafíos
● Creación del escenario/board a través de CSS y ubicación de cada unas de las
celdas en el escenario de forma dinámica.
● Establecer el movimiento de las fichas en el board, validar cuando se encuentra
más de una ficha en una celda y establecer posiciones que evite que una ficha
quede sobre otra.
● Manejo del estado de cada una de las fichas, las cuales tuvieran
"conocimiento" en qué posición/celda se encuentra, el tipo de celda (salida,
seguro, meta).
● Sincronización de los eventos realizados a través de los websockets.
● Hacer distinción entre el router manejado en el front, versus el router manejado
en el backend.

29. ● Para el front se hizo uso de Reach Router para así definir diferentes tipos de páginas,
pero igualmente se hizo uso del router de ExpressJS, en algún momento existió un
conflicto entre las rutas, es decir, cuando se ponía una ruta que hacía referencia al
llamado en el backend, quien capturaba la ruta era el front, mostrando que dicha ruta
no existía, se hacía necesario crear algunas rutas con las cuales se podía hacer
referencia a llamadas del API en el backend, además de rutas necesarias para la
autenticación social.
Desafíos

30. Desafíos

31. Por defecto CRA, maneja workbox para el manejo y configuración de los
serviceworkers, esté está configurado como cache firts por lo que toda ruta y/o
assets será chacheado, esto es muy bueno ya que permite que la aplicación
pueda seguir funcionando incluso si el usuario no tiene conexión a internet, pero
al chachear todo también existía el problema que rutas relacionadas a llamados
al API y rutas relacionadas a la autenticación fueran chacheadas, para evitar esto
se podría realizar un eject de CRA exponiendo toda la configuración que éste
tiene, pero se perdería los beneficios que CRA entrega, para evitar ello existe el
paquete react-app-rewired el cual permite reescribir algunas de las reglas que
CRA tiene, sin la necesitad de realizar un eject, para ello se debe realizar el
cambio en el comando que crea el build npm run build
Desafíos

32. Desafíos

33. Desafíos

34. CRA, por defecto monta un servidor, usualmente en el puerto 3000, (aunque
puede ser cambiando PORT=3001 react-scripts start por ejemplo), en este caso
para permitir hacer la autenticación social y el manejo de sockets era necesario
tener otro servidor, CRA entrega una solución la cual es estableciendo un proxy
para hacer uso de este es necesario establecerlo en el package.json
Desafíos

35. Nueva versión de la APP

36. Lighthouse
https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https://parchisreact.herokuapp.com/

37. Conclusiones

38. ● Este tipo de aplicaciones/juegos, es posible ser desarrollado en
cualquier librería, no es exclusivo a ReactJS.
● El manejo de componentes ayudó a un rápido desarrollo del juego.
● Existe una gran variedad de paquetes/librerías que ayudan a un
rápido desarrollo.
● Aprender nuevas tecnologías/lenguajes/librerías a través de
desarrollos de este tipo de actividades es divertido y desafiante.
Conclusiones

39. Resources
● https://dev.to/jorger/recreando-el-parques-parchis-en-reactjs-primera-parte-nkk
● https://dev.to/glukmann/let-users-know-when-you-have-updated-your-service-w
orker-in-create-react-app-3il9
● https://moduscreate.com/blog/drawing-triangles-in-css/
● https://github.com/Pomax/react-onclickoutside/issues/321
● https://codepen.io/JakubHonisek/pen/qjpeeO
● https://github.com/AdamTyler/react-dice-complete
● https://overreacted.io/making-setinterval-declarative-with-react-hooks/
● https://es.wikipedia.org/wiki/Parch%C3%ADs#Sobre_el_5

40. ¿Preguntas?