closes #149 - Refactor Game Details page to use existing Profile Image Component

[nazar]

Hey @mikelax

It was proving tricky trying to size fonts (and icons) to have the same behaviour as % size images so I uploaded a couple of placeholder profile/character images to Cloudinary (I tried to go for something androgynous but feel free to replace and update the image's publicId in the .env file.

[mikelax]

@nazar I don't think this snippet size || 'tiny' is working.
Currently when i was logged in with a user that had a cloudinary url, i saw a broken image in the header, it was because the header was sending in a size value of mini. I think width should be (not sure about the 45 value for mini):

const width = {
    small: 80,
    tiny: 45,
    mini: 45
  }[size];

[mikelax]

@nazar there is something wrong with the width value used here vs. what is being displayed on the page.
On the game details page, the logic works, a 45px image is displayed at 45px.

on the lounge and messages pages though, the image is displayed at 80px but the source image is only 45px.

Also, I am not sure if the logic for a c_fill after the c_crop is correct. For example look at this image, the focus is just my eye. That started happening with the time before this was refactored.

What about something like this instead? replace c_crop with c_fill:
https://res.cloudinary.com/forgingadventures/image/upload/c_fill,g_auto,h_180,r_max,w_180/w_45/SkxvtMSDz

[nazar]

Oh wow! Is c_crop zooming into the eye?? c_fill looks 10000% better!

[nazar]

on the lounge and messages pages though, the image is displayed at 80px but the source image is only 45px.

Nice catch @mikelax 👁 - looks like the cloudinary example I copypastaed first did a crop then a fill. I've tweaked it a little now just to do a fill

[mikelax]

@nazar for both this function and NoProfileIcon functions, what do you think about adding prop types and a default prop for the publicId?

You can do that even with stateless functions
something like:

NoAvatarIcon.propTypes = {
  size: PropTypes.string.isRequired,
  publicId: PropTypes.string
};
NoAvatarIcon.defaultProps = {
  publicId: process.env.REACT_APP_CLOUDINARY_AVATAR_PLACEHOLDER
};

[nazar]

NoAvatarIcon.propTypes = {
  size: PropTypes.string.isRequired,
  publicId: PropTypes.string
};

I should be adding propTypes more. I'd add these to public components (i.e. ones the are exported).

NoAvatarIcon.defaultProps = {
  publicId: process.env.REACT_APP_CLOUDINARY_AVATAR_PLACEHOLDER
};

I'm not too keen on the defaultProps usage here as the constant is defined outside the body of the function, which itself is small. In this instance, I prefer it the way it is.

[mikelax]

🚀