React Native App Demo: Dice Bag in Unity vs React Native

This video was originally posted in our November 2022 Kickstarter Update.

Digital demo of Pixels app. No voiceover is present, but ambient background music is played throughout. Detailed description below.

-----

Video begins with an opening title screen reading React Native App Demo - Dice Bag - Unity vs React Native. A digital demo of both the old Unity app and updated React Native app is displayed on mock smartphone screens as a user navigates with a mouse pointer. Text to the sides of the mock smartphone screen read React Native App Demo. Dice Bag Unity vs React Native. Work In Progress - Design Not Yet Finalized. Throughout navigation across different screens and sections, the background in the React Native app is a soft black with a menu of five “tabs” that remains at the bottom of the screen - Home with a blue house icon, Profiles with a green ID card icon, Patterns with a pink Pixels logo, Presets with a yellow flowchart icon, and Dice Bag with a red d10 icon. The user is currently in the Dice Bag section (as indicated by a gray color surrounding the icon). The design is generally the same for the Unity app but with different shades of blue and gray.

In the Unity app, the user is on the Dice Bag screen displaying a blank list. The user taps a plus button which switches to another screen and scans for nearby dice. One is found and the user selects it, then taps a Pair Selected Dice button at the bottom of the screen. After pairing, the screen goes back to the main Dice Bag screen, forcing the user to tap plus and scan again if they’d wanted to pair multiple dice. The Dice Bag screen shows one die in a list with a d20, die name, face up, firmware version, battery level, and strength level. Selecting the single die that is paired, the user taps an arrow icon to expand the menu for that die. The options are forget die, rename die, reset die, calibrate, set design, blink, and disconnect. No other actions are taken in the Unity app.

In the React Native app, the user is on the Dice Bag screen which displays two lists - Paired Dice (empty with label No paired dice yet!) and Nearby Dice with a show/hide toggle set to show. The Nearby Dice list has four dice each showing type, name, face up, firmware, profile, battery, and signal. The user taps on one and the element expands to show a Pair Die button. Once tapped, the die moves up into the Paired Dice list. Three dice are paired immediately after each other with minimal delay in between and no additional screens to navigate. The user switches the view from a details style list to a thumbnail view before tapping on one die to expand into the Die Details screen. On this screen is the die name, an image of the die, a button to activate blink, the battery and signal level, current face up, and a list of recent profiles. Scrolling down the screen there is a section for Die Stats with a lifetime/session toggle currently set to session and blocks displaying number of rolls, use time, and a bar graph of rolls per face. The user switches the toggle to lifetime and the data changes to reflect the entire history of the die. Scrolling further down the screen shows buttons for advanced settings and unpair die. Selecting the advanced settings, another screen opens with information on the firmware and option to update, current bytes of data stored on the die (patterns, profiles, and rules), and buttons to calibrate or reboot the die. Going back to the Die Details screen, the user scrolls a horizontal list of recent profiles. At the end of the list is a more profiles button which reveals a full-screen list of profiles. That screen is closed and the user selects the first recent profile, Rainbow, to upload it to the die. A status bar window pops up as it is uploaded, then the user goes back to the Dice Bag screen and ends the demo.