Dev

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1,59 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test

BACKLOG.md

@@ -0,0 +1,41 @@
+# Backlog
+
+El objetivos de este documento es dejar claro el rumbo del proyecto y nuestro compromiso con las entregas.
+
+Es un documento muy vivo, por lo que te recomendamos que lo revises cada poco tiempo. COmo minimo este Guild se compromete a actualziarlo al principio y al final de cada sprint.
+
+#### Backlog producto
+
+Aquí se definen todas las funcionalidades que componen nuestro producto final.
+
+- **{{Funcionalidad Nombre}}:** {{Descripción Corta}}
+- ...
+
+
+#### Backlog técnico
+
+Aquí se definen todas las funcionaldiades de caracter tecnico que necsitamos desarrollar/integrar en nuestro producto
+
+- **{{Funcionalidad Nombre}}:** {{Descripción Corta}}
+- ...
+
+#### Otros elementos
+
+Aquí se definen todos lso elemntos que no forman parte de del desarrollo del prodcuto tecnológico pero sí de su ciclo de vida como por ejemplo campañas promocionales en redes sociales, branding, etc...
+
+- **{{Nombre elemento}}:** {{Descripción Corta}}
+- ...
+
+
+#### Roadmap
+
+Aquí definimos lo que esperamos implementar de manera "muy generica" en próximas releases
+
+
+**{{Nombre de la release}} {{Número de Sprint}}:**
+- Objetivos:
+  - {{elemento}}
+  - ...
+
+...
+

CODE_OF_CONDUCT.md

@@ -0,0 +1,45 @@
+# Código de Conducta para Contributors
+
+## Nuestro compromiso
+
+Con el interés de fomentar una comunidad abierta y acogedora, nosotros como contributors y administradores nos comprometemos a hacer de la participación en nuestro proyecto y nuestra comunidad una experiencia libre de acoso para todos, independientemente de la edad, dimensión corporal, discapacidad, etnia, identidad y expresión de género, nivel de experiencia, nacionalidad, apariencia física, raza, religión, identidad u orientación sexual. 
+
+## Nuestros estándares
+
+Ejemplos de comportamiento que contribuyen a crear un ambiente positivo:
+
+* Uso de lenguaje amable e inclusivo
+* Respeto a diferentes puntos de vista y experiencias
+* Aceptación de críticas constructivas
+* Enfocarse en lo que es mejor para la comunidad
+* Mostrar empatía a otros miembros de la comunidad
+
+Ejemplos de comportamiento inaceptable por participantes:
+
+* Uso de lenguaje o imágenes sexuales y atención sexual no deseada
+* Comentarios insultantes o despectivos (*trolling*) y ataques personales o políticos
+* Acoso público o privado
+* Publicación de información privada de terceros sin su consentimiento, como direcciones físicas o electrónicas
+* Otros tipos de conducta que pudieran considerarse inapropiadas en un entorno profesional.
+
+## Nuestras responsabilidades
+
+Los administradores del proyecto son responsables de clarificar los estándares de comportamiento aceptable y se espera que tomen medidas correctivas y apropiadas en respuesta a situaciones de conducta inaceptable. 
+
+Los administradores del proyecto tienen el derecho y la responsabilidad de eliminar, editar o rechazar comentarios, *commits*, código, ediciones de documentación, *issues*, y otras contribuciones que no estén alineadas con este Código de Conducta, o de prohibir temporal o permanentemente a cualquier colaborador cuyo comportamiento sea inapropiado, amenazante, ofensivo o perjudicial.
+
+## Alcance
+
+Este código de conducta aplica tanto a espacios del proyecto como a espacios públicos donde un individuo esté en representación del proyecto o comunidad. Ejemplos de esto incluye el uso de la cuenta oficial de correo electrónico, publicaciones a través de las redes sociales oficiales, o presentaciones con personas designadas en eventos *online* u *offline*. La representación del proyecto puede ser clarificada explícitamente por los administradores del proyecto.
+
+## Aplicación
+
+Ejemplos de abuso, acoso u otro tipo de comportamiento inaceptable puede ser reportado al equipo del proyecto en {{INSERTE CORREO AQUÍ}}. Todas las quejas serán revisadas e investigadas, generando un resultado apropiado a las circunstancias. El equipo del proyecto está obligado a mantener confidencialidad de la persona que reportó el incidente. Detalles específicos acerca de las políticas de aplicación pueden ser publicadas por separado.
+
+Administradores que no sigan o que no hagan cumplir este Código de Conducta pueden ser eliminados de forma temporal o permanente del equipo administrador. 
+
+## Atribución
+
+Este Código de Conducta es una adaptación del [Contributor Covenant][homepage], versión 1.4, disponible en https://www.contributor-covenant.org/es/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org

CONTRIBUTING.md

@@ -0,0 +1,91 @@
+### Formas de contribuir a rolgame
+
+- [Reportar un error(bug)](#reportar-un-error)
+- [Iniciar una conversacion sobre el proyecto](#hablar-con-el-equipo)
+- [Subir una aportación de código](#mandar-un-pr)
+- [Ayudar sin programar ni código](#hablar-con-el-equipo)
+- [Proponer una nueva funcionalidad](#hablar-con-el-equipo)
+- [¡Quiero unirme al equipo!](#hablar-con-el-equipo)
+
+### ¿Cómo vamos a trabajar?
+
+Estamos ante un proyecto muy grande, con muchos colaboradores, por lo que la organización va a ser muy importante para que podamos avanzar con el proyecto.
+
+Vamos a organizarnos utilizando las siguientes herramientas de Github: **Projects, Milestones e Issues. **
+
+**Projects:** Aquí es donde vamos a organizar nuestros proyectos. Puedes acceder a esta sección en las pestañas superiores.
+Cada proyecto consiste en un dashboard o tablero estilo Kanban, dividido en columnas personalizables. En cada columna podemos incluir diferentes tarjetas que pueden contener anotaciones o issues. Las tarjetas se pueden mover entre columnas arrastrándolas con el ratón.
+
+Nosotros trabajaremos con dos proyectos paralelos: uno de **Front** y otro de **Back**. Cada tablero estará dividido en las siguientes columnas:
+1. – Pendiente: Aquí se colocarán todos los issues que contengan todo lo que hay por desarrollar y que están sin asignar
+2. – Tareas asignadas pero que no se han empezado a desarrollar.
+3. – Tareas en proceso de desarrollo.
+4. – Aquí colocaremos cualquier incidencia, necesite revisión o simplemente todo aquello que no nos encaje en otra columna.
+5. – Tareas terminadas.
+6. – Tareas revisadas y aprobadas.
+
+
+**Milestones:** Podemos definirlo como nuestras “metas” o nuestro control de versiones y/o funcionalidades.
+Los Milestones se crean en la misma pestaña que los issues y se incluirán en cada issue (más abajo explicamos como se incluyen)
+
+**Issues:** Crearemos un issue por cada funcionalidad o característica necesaria para el proyecto. Cada Issue consistirá en un título, descripción y asignación de Milestone y Project (ambos se asignan en la parte derecha del issue)
+
+### ¿Cómo trabajamos aquí?
+
+El primer paso será utilizar [este issue](https://github.com/OSWeekends/rolgame/issues/6) para anotar todas las funcionalidades que creamos necesarias.
+Una vez haya consenso con las funcionalidades crearemos un issue a a partir de cada una de ellas, asignándole un Milestone y un Proyecto.
+Sentíos libres de asignaros las issues que, o bien consideréis que podéis desarrollar o aquellas que os gustaría hacer porque supongan un resto u os vayan a servir para aprender. Un issue puede estar asignado a varias personas y en cualquier momento se puede pedir ayuda o colaboración en caso de que sea necesario.
+
+Una vez tengamos todas las Issues creadas, las colocaremos en cada proyecto. Para esto hay que acceder al apartado de proyectos y en la parte derecha, al lado del buscador hay que hacer click en Add cards. Ahí aparecerán todos los issues creados para poder arrastrarlos a la columna que queramos.
+
+Al empezar el desarrollo de un Issue, crearemos una nueva rama. Los nombres de las ramas se asignarán en función del desarrollo que alberguen:
+Feature/NºIssue-… - Para desarrollo de funcionalidades
+Hotfix/NºIssue… - Para arreglos críticos
+Dev/NºIssue-… - Para otros desarrollos
+
+El pull lo haremos de Dev. Recuerda hacer pull frecuentemente.
+Cuando la funcionalidad esté terminada se hará un pull request a develop.
+
+Una buena forma de aprender es que otro miembro del equipo revise el código. Sentíos libres de pedir a cualquier compañero revisión y ayuda. Recordad que lo principal es disfrutar y aprender.
+<!-- 
+**Testing**
+
+{{Añadir y definir si es relevante}}
+
+**Guía de estilos**
+
+{{Añadir referencia a la documentación si es relevante}}
+
+**Utilizamos Git Flow y esperamos gestionar los cambios con Pull Resquest(PR)**
+
+{{Añadir más detalles si se considera necesario}}
+
+**Tenemos algunas convenciones que... ¡deberías saber!**
+
+{{Añadir más detalles si se considera necesario}}
+
+**También utilizamos robots como Travis**
+
+{{Añadir más detalles sobre las tareas... y como afectan al workflow}} -->
+
+### Reportar un error
+Por favor, crea un [issue](/issues/new) donde especifiques lo siguiente:
+- Resumen del problema (240-500 carácteres)
+- Pasos para reproducirlo (¿Qué tengo que hacer para generar ese error de nuevo?)
+- Comportamiento esperado (¿Qué debería de pasar si ese bug no existiera?)
+- Resultado final (¿Qué paso cuando se disparó el bug?)
+- Más información (Cualquier detalle relevante que nos ayude)
+
+### Hablar con el equipo
+
+Tanto si deseas hablar con nosotros sobre el proyecto como si deseas unirte... lo más sencillo es unirte a nuestro canal de Slack.
+
+1. Unirte al slack de [OSWeekends](https://osweekends.com) en [este enlace](https://slack.osweekends.com)
+2. Una vez dentro de nuestro slack busca el canal `#proyecto_rol_gaming` y únete. _Todo el equipo estará allí_
+
+### Mandar un PR
+
+Antes de hacer nada... es muy recomendado pasar un tiempo leyendo ["¿Cómo trabajamos aquí?"](#cómo-trabajamos-aquí)
+
+
+Para cualquier duda podéis contactar con @josheriff @jacintoj  @vickysolo o @jbaumann

README.md

@@ -1,19 +1,38 @@
 # rolgame
 
-## Español
+Proyecto que pretende crear una herramienta para jugar al rol.
 
-Proyecto que pretende crear una herramienta para que varias personas puedan jugar al Rol desde sus casas
-como si estuvieran todas en la misma habitación.
+## Equipo
+- [ Jose ](https://github.com/Josheriff) (Leader)
+- [ Luis ](https://github.com/luisddm) (contributor)
+- [ Teresa ](https://github.com/teresamadruga) (contributor)
 
-El avance del proyecto se discutirá en las distintas reuniones de Open Source Weekends, o si es necesaria una actuación "urgente" se combocará reunion extraordinaria a traves del canal de slack.
+Para participar, entrar al slack de Open Source Weekends o asistir a las reuniones mensuales. El avance del proyecto se discutirá en ambos medios entre todos los interesados y con la intención principal de aprender nuevas tecnologías o maneras de hacer las cosas. Avanzar a buen ritmo y obtener un producto usable son objetivos deseables pero secundarios.
 
-### A tener en cuenta:
+### Necesitamos
 
-- Se ha decidido utilizar en cada funcionalidad la tecnología mínima necesaria para evitar sobre complicaciones.
-- Si en algún momento se llega a un punto en el que la elección de estas tecnologías limita el avance, se tomará una decisión (reescribir parte o todo o hacer un workaround).
-- Todos estamos de acuerdo que lo que cuesta es escribirlo la primera vez, reahacer algo de ser necesario no es tán complejo y no tomaría tanto tiempo.
-- Esto se hace para poder avanzar a un ritmo normal y no dejarnos cegar por el brillo de tecnologías sexis.
+Cualquier tipo de perfil es bienvenido.
 
-### Para participar
+- Frontenders: desarrollo de las pantallas e interacciones
+- Backenders: desarrollo de la persistencia 
+- Diseñadores: diseño de tableros, personajes, etc 
 
-Entrar al slack de Open Source Weekends y comunicar intención de ayuda, ya veremos como nos apañamos a partir de ahí.
+## Demo
+
+No disponible.
+
+## Ejecución
+
+```
+$ cd board
+$ yarn install
+$ yarn start
+```
+
+## Estado del proyecto.
+
+Se está construyendo el tablero.
+
+### Cómo contribuir en el proyecto
+
+**Más informacion en [CONTRIBUTING.md](CONTRIBUTING.md)**

board/.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  "extends": "standard",
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "d3": true
+  }
+};

board/README.md

@@ -0,0 +1,6 @@
+# Inicio
+
+```
+$ npm install
+$ npm start
+```

board/grid.js

@@ -0,0 +1,61 @@
+// Define constants
+const NUM_ROWS = 15
+const NUM_COLS = 15
+const R = 30
+
+// Define utility functions
+const round2Dec = x => (Math.round(x * 100)) / 100
+const getArrayFromZeroTo = x => Array(x)
+  .fill()
+  .map((_, i) => i)
+
+// Get angles (in radians) of each vertix
+const vertixAngles = getArrayFromZeroTo(6)
+  .map(position => (position * Math.PI / 3) + (Math.PI / 6))
+
+// Transform to cartesian coordinates
+const cartesianPolygonPoints = vertixAngles
+  .map(angle => ({
+    x: round2Dec(R * Math.cos(angle)),
+    y: round2Dec(R * Math.sin(angle))
+  }))
+
+// Serialize the hexagon vertices into a string
+const points = cartesianPolygonPoints.reduce((prev, curr) => `${prev} ${curr.x},${curr.y}`, '')
+
+// Calculate the length of the apothem
+const apothem = round2Dec(R * Math.cos(Math.PI / 6))
+
+// Get an array with the coordinates of all the hexagons to draw.
+// Example: [{x: 0, y: 0}, {x: 1, y: 0}, {x: 2, y: 0}, ...]
+const coords = []
+for (let row = 0; row < NUM_ROWS; row++) {
+  for (let col = 0; col < NUM_COLS; col++) {
+    coords.push({ x: row, y: col })
+  }
+}
+
+// Replace the previous coordinates with the displacement of each polygon
+const cells = coords.map(coord => ({
+  ...coord,
+  tx: 2 * coord.x * apothem + (apothem * (coord.y % 2)),
+  ty: (3 / 2) * coord.y * R
+}))
+
+// Draw chart canvas
+const chart = d3.select('#chart')
+  .append('svg')
+  .attr('width', 2 * R * NUM_ROWS)
+  .attr('height', 2 * R * NUM_COLS)
+
+// Draw the hexagonal grid
+chart.selectAll('polygon')
+  .data(cells)
+  .enter()
+  .append('polygon')
+  .attr('points', points)
+  .attr('transform', cell => `translate(${R + cell.tx}, ${R + cell.ty})`)
+  .attr('stroke', 'black')
+  .attr('fill', '#dedede')
+  .attr('stroke-width', 2)
+  .on('click', cell => console.log(cell))