A credits and copyright notice has been embedded in the HTML page so that it is present at all times. It is displayed as an overlay on top of the current page when the user clicks on the powered by link added at the bottom of each page.
credits line on each page
The GNU AGPLv3+ helps ensure that the user is informed about the license of the software and that (s)he can download it.
An interactive user interface displays “Appropriate Legal Notices”
to the extent that it includes a convenient and prominently visible
feature that (1) displays an appropriate copyright notice, and (2)
tells the user that there is no warranty for the work (except to the
extent that warranties are provided), that licensees may convey the
work under this License, and how to view a copy of this License.
When the user clicks on the credits line,a larger credits and copyright page will be shown, on top of the current page.
credits and copyright page
The copyright notice is added to the end of the HTML page, inlined. It makes it easier for someone who would copy/paste the HTML content to comply with the terms of the AGPL and inform the users that they are using Free Software.
It is hidden by default but will show when the user clicks on the credits line displayed on each page:
credits: function(root) {
var element = $('.cardstories_credits', root);
var long = $('.cardstories_credits_long', element);
$('.cardstories_credits_short', element).click(function() {
long.show();
});
$('.cardstories_credits_close', long).click(function() {
long.hide();
});
long.show(); // jScrollPane needs the element to be visible to calculate its height / width
$('.cardstories_credits_text', long).jScrollPane({showArrows: true});
long.hide();
}
The overlay is positioned in absolute on top of the current page, with a z-index ensuring that it hides everything else. The close button will remove the overlay by hiding it and therefore resume the user interaction.
The scrollbar to the right is implemented with jscrollpane and uses a custom skin. The thumb background is an horizontal image repeated vertically to cover 100% of the height, which depends on the size of the text being displayed and the size of the page. The bottom and top images used to display the round ends of the thumb are positioned with a negative margin and expand the thumb size. The vertical bar itself is configured to display arrows, which are replaced by the bottom and top round images. Although they are arrows and can be clicked to move the thumb, the intended visual effect is achieved and the thumb extremities exactly match the extremities of the bar when it reaches each end (because all of them have the same 5px height).
CSS in tests
In order to have more realistic tests, they include the CSS used to display the game. The tests were fixed accordingly. Although it is not match for a real CSS check, it helps ensure the code will actually behave as expected when run with the all.css loaded. The changes mostly involve a) cookies, b) using css(‘display’) instead of is(‘:visible’) which makes for more precise tests that will require more maintainance and c) ensuring that the elements on which the tests are run are not display: none such as was the case for the display_or_select_cards tests.