This sample has a list of items which are distributed in pages. It also includes Keyboard and Gamepad controls for:
- Switching between Buy and Sell mode.
- Sorting the list by Price (ascending/descending), owned and locked items.
- Item navigation.
- Item preview, purchase or sell.
- Navigating between pages of available items.
CSS is used to fine-tune and help with some coloring, background image centering, transformations and convenience for showing and hiding elements by changing a class. For example, a unique item has a purple colored line on top of the list box. Since there are several rarity categories, each one has different class name with the assigned color. If an item rarity value in the game model is
Unique, the data binding can add
Unique class name which is very convenient.
The rest of the included scripts are responsible for controlling the UI and its behavior - how and when should elements be visible, Buy and Sell modes, pagination, arrangement / sorting of item grid and input devices assignments.
Data Binding / Mock data model
The mocking data model consists of item model and how those items relate to the UI. The
shop-components-mock-data.js includes an array for the list of items with values for name, description, cost, image, quality, type, grade, damage and other weapon statistics. It is then created in
shop-components-mock-data-model.js with the already mentioned
engine.createJSModel. The class
InventoryModel can control the available credits, navigation of the pages, which items will be displayed, sorting, manage buying and selling of items and updating the model.