Skip to content

01 Basic User Interface Usage

Jump to bottom
Paul Mumby edited this page May 17, 2020 · 4 revisions

A Note on Performance

BattleDrome is a bit unique, as such there are some different behaviors to what we would normally expect in a web application. (specifically due to the blockchain being involved in EVERY interaction, there is no "webserver" doing anything except for serving basic HTML/CSS/JS files)

In addition it's a Beta release, as such there will be UI bugs, etc. There is an overhaul of one of the core UI blockchain interface libraries which should significantly improve UI performance (ie: delay between submitting a transaction and seeing results once they are confirmed)

Due to the "pure on-chain" nature of BattleDrome, there are some minor considerations on the speed of things, and how it works we need our players/users to be aware of:

"Reads" vs "Writes"

Basically everything you do can be classified into "reads" (something that reads information or data from the blockchain, such as viewing the name of a warrior, or attributes, etc) and "writes" which is where you take any action that results in a change on the back-end (creating something new, buying something, upgrading something, changing a value, practicing, joining events, etc).

Reads

Reads do not require an actual "transaction" to happen. They simply read data from the Web3 API in order to populate the values in the Javascript based front-end. However these types of interactions still suffer from a few performance issues:

Windlass.io

Due to limitations in front-end blockchain libraries, for pure on-chain experiences (or lack thereof, since most apps/games are moving to centralized client-server models with only key things on-chain), we were forced to develop our own interface library. This is a separate project which will be later open-sourced on it's own.

For the sake of speed in getting BattleDrome out the door, it leverages only a minimal version of this library, this led to a few issues which weren't forseen in early steps.

There is a much improved re-write of Windlass coming which can be integrated into BattleDrome and will result in significant improvements to the speed and responsiveness of on-chain interactions.

Writes

Writes on the other hand do require an actual transaction. These will pop up Metamask (or your browser plugin of choice) to confirm the transaction details. They will cost gas. Etc. But most importantly, they will take time to complete, as they require at least a single network confirmation of the transaction (which can only happen at the EARLIEST in the next block, which is AT LEAST 10-15 seconds away usually).

In addition you should be conscious of the gas prices being set. It's important to set low gas prices to keep the transactions affordable, only pay larger gas prices if you absolutely need the transaction to happen fast.

Cards

The BattleDrome UI is made up around a concept of "Cards". The Cards hold key information on their front, and methods of interacting with them on the back.

Flipping Cards

Each card will have a small flip icon in the top right corner. Simply click this icon to flip the card over to access it's other side.

The general convention is that the front of the card is used for general status/display information, and the back of the card houses the various ways to interact and make changes that affect the object on the card.

Cache & Updates

Because the BattleDrome application is 100% decentralized, it is purely a collection of client-side HTML, Javascript, and CSS files, combined with some data files (JSON) which define the ethereum smart contracts that will serve as the back-end.

When we roll out an update (which we will do periodically during the alpha), the result will be that your browsers cache may hold outdated versions of these files.

If you encounter any kind of wierd behavior, please following the below steps:

  1. Write down exactly what you have encountered, take screenshots, note the warrior, their attributes, weapon and armor types, what was happening at the time, and the most recent successful change you made.
  2. In Metamask, go to settings and Reset Account (this will reset metamask's internal cache of transaction history, etc)
  3. Flush the browser cache
  4. Close the browser entirely
  5. Re-open the browser, and open http://app.battledrome.io
  6. Unlock metamask (or recover from recovery phrase if needed).
  7. Attempt to re-create the issue, see if it's gone away
  8. Report the issue here on Github in the issues section:

Clone this wiki locally