Project Steem Jam #2 | The game page

In the first post announcing the Steem Jam project I explained what this project is all about and how it will work. Since then, I started working on its website whenever I had time for it. I first wanted to not use any framework at all but finally realized I would need to learn to use a framework if I wanted to progress at a normal speed. Therefore I paused everything and started taking a course of Angular 4 available on Udemy, if you are looking to learn this framework I recommend you check this course out as it is really good. After taking that course, I realized I basically had to restart everything from scratch if I wanted to use Angular, which is never really fun. I'm now set however and ready to progress through this project. The first thing I did was deciding on a new color palette for Steem Jam as the older one was juste copying Steemit down to the logo. I have opted for a reddish palette since hot colors tend to make people more aggressive and hopefully freer with their votes. I also need to find a new idea for the logo, I don't like it anymore. Lately, I've been thinking about the dropdown that appears when clicking on your profile picture in the header and this is what I came up with so far.

Those links are pretty self-explanatory but let's explain them just in case.

Let's get to the meat of this post, the game page. I've been focusing on it lately and I kinda like what I came up with, there are still some things I don't really like though (display of tags and theme) or haven't yet implemented (share button). First of, I had to find a way to make the post associated with the game not look too bad on websites such as Steemit, Busy, chainBB, Steemiz and more. I'm really proud of what I managed to come up with, you can judge by yourself by clicking the link below which is the example post used for this game page presentation.

Please tell me if you like it or not, I feel like it's good but your opinion matters a lot ! I had to choose between two ideas for this post. Either adding some properties to the post object json_metadata containing stuff necessary only to Steem Jam, or simply adding a markup system to the generated posts so that I can parse the right content for the different sub-pages of the game page. Both solutions have their advantages and their problems sadly. The first one is the one used by all the websites interacting with the blockchain and offers the advantage of being faster but editing the post through another website than Steem Jam would not change the Steem Jam page content. The second one could be easily broken by someone who would just try to break it, deleting one character from the markup system would break the whole page. However, editing the post from somewhere else would edit it on Steem Jam too. I chose to work with the first option as the disadvantages aren't as bad as literally breaking the page. Here is the template of the example post so you can understand what I added in the json_metadata. If you don't know much about JSON, I believe this link won't really be useful to you.

In the following screenshot, you can see how the game page currently looks. Let's take a look at the header first (everything before the sub-menu). You can see the title in uppercase followed by the profile pictures of the game's creators. Those pictures are of course clickable and redirect to each user's profile. On the bottom-left corner is a link redirecting to the itch.io download page of the game. And finally, on the opposite corner are links to the Steemit and Busy versions of this post, I still have to add Steemiz to the list. ChainBB isn't in there simply because it doesn't seem to have a logo yet. Now let's look at the sub-page, you can see that the game page has 4 sub-pages. On this screenshot you can see the about page which contains the five first genres specified for the game on the top-left. There can obviously be less or more genres specified, the first three genres being added to the post tags. I still think I should add a limit to avoid people abusing the system and putting every genre possible on their games. On the right, you can see the theme for which the game was made. Clicking on it will redirect you to a list of all the games submitted for this theme, clicking on genres will act the same way. Markdown is supported using a slightly changed version of the popular Markdown to HTML converter named Showdown. Right now the video isn't shown on the about sub-page but the plan is to have it appear between the tags and the description, I just haven't got around to it yet. What would be even better is having the video, the tags and the theme in a same box (video on the left, rest on the right). I have been thinking about that but it would cause a problem for games with no video whatsoever.

The following screenshots show the gallery sub-page. It simply contains all the images added to the gallery part of your post as well as the header image. Clicking any image will open a slideshow with the image displaying at its original size or the maximum size it can have depending on the size of the window it has to be displayed in.

The following screenshot shows the controls sub-page. It's pretty self-explanatory, just a section with a table showing all the actions bindings for keyboard and gamepad. If no gamepad controls are set, the table will only display 2 columns. The grey row is simply a hovered row. You can also see that I clicked on the love button for this image so you have a basic understanding of how it looks like not upvoted versus upvoted.

Finally, here is the comments sub-page. Right now, it's a mess as I probably took about 5 minutes to work on its styling. Notice that the layout is different, it's because I took this screenshot when I was using steem-js to get comments. I'm now using SteemSQL though and haven't worked on the comments yet.

Let's talk a bit about what I plan to add on this page.

I believe that's everything I wanted to say. My next post should be talking about stuff I added to the game page and about the overall design of the profile page. A huge thank you goes to @arcange for maintaining SteemSQL which I will be using from now on (in combination with steem-js that I will still require in some cases) and @yabapmatt for taking some of his time to help me with the SteemConnect V2 SDK. They are both witnesses, you know what to do ! (psssst, it's voting for them in case you didn't understand)