OMS Kit

The OMS Kit is a card inventory that has a collection of cards. There is an overview of the current card when selecting it and additional information about the current card is shown.

Overview

When the screen is loaded it is populated with cards on the right and the first card is set to active, therefore, it is displayed on the left and has a yellow border on the right.

When the arrows are used you can navigate through the different cards and each new card that you reach will become active. The scrollbar on the right will move down on every new row to help you with the navigation.

The unlocked cards are the ones that have a full size image like Nemesis above. When an unlocked card is active you can press Enter to flip it and get additional information.

When a locked card is selected it can't be flipped. What is more, the flip button at the bottom will be hidden. Each locked card has a different Symbol depending on its type.

Adobe Animate Implementation

Most of the assets can be created through Adobe Animate and exported to HTML with the help of Prysm.

Important things to consider for the HTML export

• Most elements will be exported as a div. Only some simple shapes will be exported as an svg.

• When there are several Layers in a Symbol each Layer will have an ID and its children will be nested in it.

• Each Symbol will have a special ID and its children will be nested within it.

• Only Symbols with instance names can be manipulated with Coherent Prysm.

Most notable elements in the animate file

• Almost every element is inside the main-frame Layer of the scene.

• The active-card-overview Layer contains a bunch of data-bound elements that change according to the active card. When there is a new active card the overview is updated, so that when it comes into view it is relevant. It starts from the left and will come into view through a CSS animation.

• The active-card Layer contains the big card on the left of the screen that represents the current active card on the right.

• The collections Layer contains the data-bound cards and a filler that helps the scrollbar.

• The scrollbar Layer holds the scrollbar image which is scripted through JS.

Custom CSS

There is a single custom CSS added that contains keyframe animations that make the arrows blink, make the card overview appear and disappear. Two of the animations hide and show the flip button and rotate the active card. The collections are set to have overflow: scroll so that the scrollbar can be implemented. Keyframe animations, transforms and flexed elements are preferred because of the performance gains. There is also a perspective set on the screen and on the active / focused card, which perspective is set in the CSS.

Custom JavaScript

The JavaScript relies on the Keyboard API to implement keyboard navigation. What is more, most of the logic is separated into different files which are easy to read and pretty self-explanatory.

• cohtml.js is the Coherent Library.
• keyboard_navigation.js is the Keyboard API that deals with keyboard navigation.
• ActiveCard.js deals with the flipping of the active card.
• Scrollbar.js deals with the scrollbar scrolling.
• ViewController.js deals with all the modules working together.

The keyboard bindings for navigating in the list are set to the keyboard arrows and Enter.

With the gamepad, the navigation is done with the left stick and previewing a card is triggered with X or A button, depending on the type of gamepad.

Scrollbar

The scrollbar calculates how much the scrollTop value should be changed and uses transform: translateY() to change its position. It provides two methods:

• ScrollUp() - moves the collection and the image up.
• ScrollDown() - moves the collection and the image down.

Active Card

The active card controller provides the FlipCard() method that flips the active card and shows the overview when it is not flipped and on the opposite hides the overview when it is flipped. The flag isActiveCardFlipped is checked in the grid to forbid navigation when the card is open.

View Controller

The ViewController.js sets up the active card and scrollbar classes. It also queries the flip button. The View Controller also sets up a grid and the keyboard navigation class which updates the active card according to the grid index. The method used is ccGame.updateActiveCard(rowIdx, colIdx) provided by the data binding.

Data Binding / Mock data model

Mock model ccGame is created from engineMock.js. In it, there is a collection of cards which is populated in the cards list. Each card has an active and owned state, title, provided path for the background and symbol images and other values for the description. The active and owned states are updated according to the type of interaction/event in the screen.