I found some time this weekend to work on the site and I am working on the Race Details screen. I’ve been working on it for a few hours now and I just don’t like the looks of it. Really the issue is with the race results. The race results by itself looks fine but it’s such a skinny object that it doesn’t really fit well with the rest of the page. I guess I could break out the results into a dialog, but this Race Details screen might be on a dialog and I can’t have dialogs within dialogs. That’s bad form.
I’m going to need to think this through a bit more. I’m going to watch a movie now and hopefully I think of something or else I will need to brainstorm this evening.
Sorry everyone, no fancy images in this post 😦 but I do have some updates about the club profile page and some bonus social media stuff.
Progress on the club profile screen is going good. I resolved the issue I talked about yesterday where I couldn’t render the second data point on my line chart. I still think they have a bug, but it seems there was a better way to fill the chart and I’m too lazy to report it. Seriously it takes a lot just to report a bug. They want you to create a sample project on one of those JavaScript testing sites. I also moved the chart up above the club description/welcome message because when a club has a long description, the chart gets placed off the bottom of the screen, and nobody wants to scroll down there just for the chart. I think if it’s more accessible, more people will use it. Another thing I addressed was the size of the chart. It was scaling to the width of the screen, which looked great on mobile platforms, but on a desktop it was humongous. Now it stays at 900 pixels wide until your screen goes below that and it fills whatever space is available.
As for bonus social media stuff, I created an “app” on Facebook so that I could try out content sharing, liking, and commenting. It all seems pretty cool so far and I am contemplating whether or not it’s a good idea to include commenting on the site. It’s the internet, people get nasty and I don’t want to have to moderate the comments section for 1000 clubs potentially. Where would the comments sections even go? On each club profile page or on the details for each race or series? For now, I think it’s best left up to each club to decide where they want there discussions to take place. The club that I am a part of uses Reddit for our discussions. We also have a “secret” Facebook group because we have all been racing together so long that we don’t mind if we all know who we really are. A few of us have even met in person!
See how cool racing clubs can be? Thanks for reading!
I have been exclusively working on this club profile screen the past few days and it is coming along nicely. I did however find an issue with the line graph, so I may need to submit a bug to the chartjs.org people. If you look at the image below, you can see that the attendance for “10/6” was not plotted. The data is plotted dynamically and the code is identical for each point so I’m not sure what is happening to that 2nd data point.
When I look into Google Chrome’s developer tools, I can peek into the data behind the chart and it does show that the second data point is supposed to be a 10, but the X,Y axis shows a NULL for the X-Axis. On all of the other points the X-Axis has some number value. Although this is an annoying bug, I am going to move forward and just hope that I can resolve it before the first release. I don’t think that this issue is a show stopper and would prevent me from releasing.
I hooked up the Ask to Join link, but it needs testing still. The last bit of intense coding for this screen will be the Race Details link. Right now in the image below where it says “R-Class Hyper-Cars – Players Play,” that is the link to that race’s details which I don’t have a page for. The race details page needs to be able to function as a dialog for this page, but also as a standalone page with menus for when people want to share a race on social media sites, or send a link to a friend, etc. Right now there is no good way to share series and races, so this details page will be a huge leap forward for sharing. This details page will also be the first step in getting a series leader board for the series page which is sorely needed.
As you may know I have been working on the Club Profile screen and I just wanted to share my progress so far.
This is the Club Profile screen so far.
In the above image you can see that I am writing out the club name, the next race, the personality, active members and I changed writing out the last race date because you would be able to see that on the attendance graph and I’m not sure how useful it would be. Instead I am writing out the date your club was formed. None of the club traits are being displayed dynamically yet. I just hard-coded them there so I could visualize the page better.
I was excited to display the graph so I worked on that next but it is still not displaying real data, that comes later. I haven’t been happy with the way that the graph is scaling to fit the width of the page, so I need to work on that some more. It looks great on mobile devices but when you are on a computer with a large screen, the graph tries to re-size and fill the entire screen which is just too large.
I am still missing the Club Description or welcome message, whatever you want to call it, so that is what I will be working on today.
Remember that when I integrate the club’s ability to manage data for more than one game on this screen, it will change. This screen will be evolving over the life of the site when I learn what information is most valuable to people wanting to join and for members that need a quick reference for the upcoming race, etc.
First thing I want to say is regarding the weekend. I don’t do a lot of work on the site on weekends because I have a lot going on. I have a wife, 2 kids, and American Football that keep me super busy through the weekend. The point is, I don’t really make a lot of time to post blog entries and work on things for the Racing Club Manager site.
Now that that’s out of the way I can update everyone what I DID work on. I found some time yesterday to mess with Chart.js and it is fairly simple to implement and I created a test page that will ultimately become the Club Attendance graph.
This is the Club Attendance Chart, showing attendance for 2 games.
Above is a screen shot of the attendance chart sample. It shows 2 lines where each line represents a different game that this club has racers attending. The first implementation of this chart will only include 1 line, but in a later release I will implement multiple lines.
Some good first impressions of Chart.js are that it is beautiful, fast and easy to work with. I did notice some negative things like labeling each axis isn’t included so I’ll have to do that myself. They let you label the data like 10/15-10/21 and from 0-20 and it may be obvious what those values represent, but what if it isn’t obvious. I would want to label the X-axis “Race Dates” and the Y-axis “Attendees.” Another negative, is that this chart will not work with browsers that don’t support <canvas>. Hopefully no one is using a browser that old.(<= IE 8) And the last negative thing is that when you hover over a data point, there is a key that pops up and tells you the exact numbers, but no where can you write that blue = “Forza 4” and gray = “Forza 5” or whatever game it may be.
Overall I think that Chart,js is the way to go and the negative things are things I can implement myself anyways, so it’s not a deal breaker.
It only took me around an hour to download, install, and implement this sample which is amazing. Now all I have to do is make it dynamic to each club and base it off the data.
Racing Club Manager 