Una de las dificultades a las que me he ido enfrentando en el proceso de desarrollo de este proyecto ha sido ser capaz de equilibrar las limitaciones de tiempo con encontrar la solución mas cercana a la ideal.

El diseño como elemento diferenciador

Cuando comienzas un proyecto puede que, en algún momento de su desarrollo, te encuentres con la necesidad creativa de plasmar una idea en la parte visual, pero sin la capacidad, los conocimientos o, sencillamente, la definición exacta de lo que quieres ver.

Buscar inspiración en distintas webs (Pinterest, Dribbble, etc.) siempre es una buena forma de intentar ver qué líneas de implementación siguen muchos de tus compañeros y, quizá con suerte, que suene la campanita en tu cabeza y des con la implementación que buscabas.

Ludere 0.1: el problema de los meses

En esta fase del desarrollo de Ludere me estoy enfrentando a la necesidad de plantear un panel de control de usuario en el que, además de otras cosas, aparezcan los meses de forma que de un vistazo el usuario pueda ver a cuántos juegos ha jugado cada mes.

La primera idea de implementación fue una sencilla tabla que terminó convirtiéndose en esto:

La forma de desplegar esta solución fue bastante sencilla:

Tengo, por un lado, un componente MonthList.jsx que será quien reciba la lista con información de cada mes:

const MonthList = () => {
    return (
        <div className={styles.container}>
            <div className={styles.main}>
                {monthList.map(month => (
                    <Month monthData={month} key={month.id} />
                ))}
            </div>
        </div>
    );
};

Y luego llamará al componente Month.jsx para que renderize el mes de forma individual:

const Month = ({ monthData }) => {
    return (
        <div className={styles.container}>
            <div className={styles.main}>
                <div className={styles.monthCount}>{monthData.totalGames}</div>
                <div className={styles.monthInfo}>
                    <div className={styles.monthName}>{monthData.month}</div>
                    <div className={styles.monthGames}>
                        <div className={`${styles.monthGameData} ${styles.green}`}>
                            {monthData.games.completed}
                        </div>
                        <div className={`${styles.monthGameData} ${styles.blue}`}>
                            {monthData.games.active}
                        </div>
                        <div className={`${styles.monthGameData} ${styles.red}`}>
                            {monthData.games.drop}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

Nueva iteración y versión estable

Lo imporante es que, una vez tienes algo que te gusta más o menos, continuar con el proyecto sin quedarte estancado dándole vueltas una y otra vez a lo mismo.

Este es la versión actual con la que voy a ir siguiendo el desarrollo. A tiempo de nuevas modificaciones siempre voy a estar: