Weapons Shop
Overview
This sample has constantly changing values in its mock model and when updated,
the listed weapons get their DPS, price, grade and rank updated in the UI also.
This is to emphasize on how the mocking / data binding works. All changes are
made with the help of the data-bind-*
attributes. For more information, see
the Data binding
in the Prysm documentation.
Custom CSS
CSS is used to add perspective on the whole screen, precisely tune the
transforms for that perspective, define the initial screen revealing
animation and one selector for changing the background color of an element which
class name is used with data-bind-class-toggle
attribute.
Custom JavaScript
The code is solely used for creating and updating the mock model.
Data Binding / Mock data model
The mocking is within the two included scripts. The weapons-shop-mock-data.js
contains a weapon array that is provided to the list and some min and max
values for the dps, price, grade, rank and player credits.
In the weapons-shop-mock-model.js
a class Game
is defined, the
game
model gets created, the model values start to change every second while
synchronizing the model which updates the UI.