WPP #1 - Sunday

Intro

Today was the day I had to integrate the charts.

Done(?)

I finished the game early in the morning, making sure that the 'done' pane and graph buttons worked correctly. I made sure the margin values were generated correctly in the setMargin() function, and that the size of the buttons selected correctly. Most of these changes were in script files, and didn't take too long. I also changed some design elements (buttons, borders, etc.) to make it look simple and pretty damn good.

Charts

I used the Chart.js library to make the charts. First, though, I had to have a way to get data, and so I created the count() class. This class has methods that track the number of clicks on the dots and the total number of clicks, and every three seconds (1/10th of the length of the game) puts the number of clicks over the last three seconds into arrays. Each array (correct, incorrect, and total) is returned with accessor methods. The genData() is what actually does the timed data aggregation, and it's only called once in the whole project. I still have to finagle a little bit with the counters to make sure they return the correct amount of clicks and stuff, but you get the idea.

Anyway, I wanted to use a line chart to show how many correct and incorrect clicks, and then a bar chart to show approximated clicks/minute. The charts have to be imported from the Chart.js library, and if you click the link in my last update, you can find the Github link (or you can clone it using git). In order for it to work everywhere, though, I had to store it in my Dropbox folder just like everything else. Then initiating it was somewhat of an issue, as I wanted to display the two graphs in the same pane. I tried using one variable called ctx to reference a canvas DOM object. So my first declaration was this:

var ctx = document.getElementByID('canvas').getContext('2d');

ctx was a global variable, and every time the clicks/min or hits vs misses buttons were pressed, it would grab ctx and instantiate a new graph. However, the graphs didn't replace each other, they were just layered on top of each other. So, whenever a user would hover over an empty part of the graph, it would switch to the other graph under it, and whenever they moved back, it'd switch back to the top graph. So I changed it to the current system, like so:

// function that displays the hits v misses graph
$('#hits').click(function () {
    $('#canvas').remove();
    var $('#frame') = document.getElementByID('frame'), $canvas = document.createElement('canvas');
    $canvas.id = 'canvas';
    var ctx = document.getElementByID('canvas').getContext('2d');

.
.
.

Then the same happens for the bar graph. So instead of reassigning a value to a variable, I just make it local to the function. There's definitely a better solution, but for the sake of time and less thinking, I decided to go with this.

Done.

So this time I actually was done. I finished the project in my allotted time of 2 days, and worked about a total of ~10-11 hours finishing this up. I actually had my dad (did scientific programming in the 80's) and 2 University of Iowa CS/math professors take interest in what I was doing. So I think this project was a success.

Play the game.