User Stats and Profile Page

[benjstorlie]

Create a user profile page to display game statistics and achievements.

[benjstorlie]

I thought it might make sense to start with some dummy data that's in the same form as what will be got back from the server? In the model, I have the stats set up as a subdocument. So, it's like the following. The stats objects won't be in any particular order, and might not include all the difficulties, because it just gets created/updated when a user completes a game

profile = {
  name: "A_Cat",
  email: "a_cat@whiskers.com",
  password: "test12345",
  games: [ /* game object id's */ ],
  stats: [
    {
      difficulty: "easy",
      bestTime: 120.5,
      averageTime: 295.4,
      numSolved: 12
    },
    {
      difficulty: "medium",
      // ...
    },
    // ...
  ]
}

[benjstorlie]

Do you think it makes sense to have this be the same section where the user can resume a game? So there'd be like a list of buttons or something which show the difficulty and timeElapsed of that game. Then the event functions for those would re-direct to the main page, and set the state for the new game. I think the point of React is that it can redirect and set the state at the same time. Though GameProvider needs to be moved to wrap around everything. In that case, the profile object above would be the same, but games can populate with game objects like this: { _id: string, gameData: string, difficulty: string, elapsedTime: number }. Also I did get distracted an I made an svg component that takes the gameData and creates a little image that shows which cells are filled in, so you could know if you're close to being complete.

component code

I tested this and it's awesome! I had it updating while playing the game even. ``` function GameSvg({ gameData, color }) { const gameArray = JSON.parse(gameData); const padding = 3; const width = 90; const lines = [ [[0, width / 3], [width, width / 3]], [[0, 2 * width / 3], [width, 2 * width / 3]], [[width / 3, 0], [width / 3, width]], [[2 * width / 3, 0], [2 * width / 3, width]] ]; return ( ); } ```