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.