Shop Components

Overview

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.

Custom CSS

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.

Custom JavaScript

There are 11 JavaScript files that are responsible for different things. cohtml.js is the first one which is ultimately needed for communication between JavaScript and the game through the engine module. Read more about JavaScript integration / Data binding.

The whole UI can be finished even if the Backend isn't implemented yet. This is done by mocking the models with JavaScript by creating a model with engine.createJSModel('modelName', {...});. The models and how they are created can be seen inside the second and third included JavaScript files. More information for the mocking is included the next section.

The next two scripts are our own JavaScript Keyboard and Gamepad APIs from which all the control assignments work. They are not required in any way when creating a scene, but they are most helpful.

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.