Enable pull request for reviewing #1
Conversation
|
mñn por la mñn me pongo con ello. Te aviso en cuanto lo tenga |
There was a problem hiding this comment.
Feedback general!
- Mola mucho que hayas incluido los Mocks!
- Espero tu charla de Phaser en OSW :liada:
- Creo que has forzado un poco la naturaleza de Firebase al meter un enfoque POO tan puro, pero la implementación de tu idea es muy correcta. Es más un tema de arquitectura en lo que podrías enfocarte para evolucionar tu proyecto.
- Sería bueno incluir las reglas de seguridad en tu propio repo. Asé tienes el control de versiones también extendido a esa parte.
- Sería bueno mejorar el contraste en la parte de la puntuación durante el juego.
- Me sigue pareciendo un proyecto muy creativo!
- En una versión mejorada me gustaría que cambiaran el orden de las palabras y que fueran un poco más random.
- Sacaría un fichero de configuración con los parámetros del juego (tipo letra, fondos, etc..) para que se pudiera customizar mejor
- Es un gran proyecto y muestra claramente lo mucho que has crecido técnicamente en estos meses 👏👏👏
- Un ejercicio interesante sería replantearte el proyecto con un enfoque distinto con la arquitectura. Sería muy productivo explorar la idea detrás de los "estados de aplicaciones" en JavaScript... algo como Redux podría ayudarte con esto.
import { createStore } from 'redux';
/**
* Esto es un reducer, una función pura con el formato
* (state, action) => newState. Describe como una acción transforma el estado
* en el nuevo estado.
*
* La forma del estado depende de tí: puede ser un primitivo, un array, un
* objeto, o incluso una estructura de datos de Immutable.js. La única parte
* importante es que no debes modificar el objeto del estado, en vez de eso
* devolver una nuevo objeto si el estado cambió.
*
* En este ejemplo, usamos `switch` y strings, pero puedes usar cualquier forma
* que desees si tiene sentido para tu proyecto.
*/
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// Creamos un store de Redux almacenando el estado de la aplicación.
// Su API es { subscribe, dispatch, getState }.
let store = createStore(counter);
// Puedes suscribirte manualmente a los cambios, o conectar tu vista
// directamente
store.subscribe(() => {
console.log(store.getState())
});
// La única forma de modificar el estado interno es despachando acciones.
// Las acciones pueden ser serializadas, registradas o almacenadas luego para
// volver a ejecutarlas.
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1| @@ -0,0 +1,11 @@ | |||
| # flash-typer | |||
There was a problem hiding this comment.
Puedes incluir un poco más de info sobre el funcionamiento en el README ;-)
| @@ -0,0 +1,10 @@ | |||
| { | |||
| "hosting": { | |||
| "public": "dist", | |||
There was a problem hiding this comment.
Bien jugado ajustar la salida a dist
| "public": "dist", | ||
| "ignore": [ | ||
| "firebase.json", | ||
| "**/.*", |
There was a problem hiding this comment.
Buena programación defensiva! Evitando leaks! 💪
|
|
||
| ## To play in production | ||
| Visit https://flash-typer.firebaseapp.com/. | ||
|
|
There was a problem hiding this comment.
Añadiría también una referencia a los mocks y el arte. Has invertido un buen tiempo en el diseño y deberías mostrar también esa parte de investigación ;-)
| create() { | ||
| let canvarXMiddle = this.game.canvas.width / 2; | ||
| let titleText = this.add.text(canvarXMiddle, this.game.canvas.height / 4, 'Flash Typer', { | ||
| fontSize: '32px', |
There was a problem hiding this comment.
Todos estos valores serían más efectivos en un fichero de configuración facilmente modificables
| } | ||
|
|
||
| update() { | ||
| // ÑapaScript® |
There was a problem hiding this comment.
Efectivamente! Pero es muy respetable tu solución actual
|
|
||
| createTextBox(scene, x, y) { | ||
| let textBox = scene.rexUI.add.textBox({ | ||
| x: x, |
There was a problem hiding this comment.
puedes dejarlo como x, y... no necesitas {x:x, y:y}
| this.lives = 3; | ||
| } | ||
|
|
||
| getLevelByDifficulty(difficulty) { |
There was a problem hiding this comment.
sería interesante meter getters/setters puros
| @@ -0,0 +1,65 @@ | |||
| class GameService { | |||
| constructor(){ | |||
| let easyWords = [ "cat", "ghost", "cow", "bug", "snake", "lips", "socks", "coat", "heart", "kite", "milk", "skateboard", "apple", "mouse", "star", "whale", "hippo", "face", "spoon", "sun", "flower", "banana", "book", "light", "apple", "smile", "shoe", "hat", "dog", "duck", "bird", "person", "ball", "nose", "jacket", "beach", "cookie", "drum", "worm", "cup", "pie", "snowflake", "jar", "tree", "slide", "swing", "water", "ocean", "mouth", "eyes", "boy", "girl", "house", "bed", "shirt", "egg", "cheese", "circle"]; | |||
There was a problem hiding this comment.
Todo este array lo sacaría fuera o incluso en un JSON para que se pudiera cargar desde AJAX en la renderización del escenario. Pero podemos ver esto más adelante cuando veamos Backend y Express.js en el Master ^^
|
Muchas gracias por la rápida review! 🙏 |
🔥 🔥 🔥 Prioritario