search

luceroweb / haunted-house-game

https://luceroweb.github.io/haunted-house-game/
1 stars 12 forks source link

Inventory is hard to notice, keys in pocket are small unresponsive single letters #108

Open cgreen-bitwise opened 2 years ago

cgreen-bitwise commented 2 years ago

Devices

Device name: Custom Desktop PC Processor: Intel Core i5-6600K 3.5 GHz Quad-Core Processor System type: Windows 10 Pro 64-bit operating system, x64-based processor Resolution: 1920x1080 pixels, 16:9 ratio (~92 PPI density)

Device name: SM-G950U - Samsung Galaxy S21 5G (USA Unlocked) Processor: Octa-core (1x2.84 GHz Kryo 680 & 3x2.42 GHz Kryo 680 & 4x1.80 GHz Kryo 680) System type: Android 11, One UI 3.1 Resolution: 1080 x 2400 pixels, 20:9 ratio (~421 ppi density)

Brave Browser Version 1.31.87 Chromium: 95.0.4638.54 (Official Build) (64-bit)

Firefox Browser Version 93.0 (20210927210923) (Official Build) (64-bit)

Expected Behavior

The user should be able to hover their mouse over their collected items in the top-left of the screen to see what they are, or have more self-explanatory picture icons.

Actual Behavior

The icons in the top-left are just text inside of a bordered box, requiring the user to deduce that they have the silver or gold key.

Steps to Reproduce Issue

  1. Begin the game.
  2. Continue through the game until you are awarded a gold and/or silver key.
  3. Observe the top-left of the screen, looking for your keys' inventory icons.
  4. Hover your mouse over them to see if they provide more detail or not.

Screenshots

Untitled

luceroweb commented 2 years ago

@SmiJa is our design editor for the Haunted House game. Jason, should we convert the keys in the inventory to images? Should we add a text label (silver key, gold key) to make them more clear?

cc @cgreen-bitwise @lreyes-qae

SmiJa commented 2 years ago

@cgreen-bitwise I have found a fix for this one. I have changed the letters that represented the keys to a font icon from font-awesome. I have also added a title to the boxes that hold the individual keys. Does this meet the requirement of the ticket?

cc @luceroweb @lreyes-qae

cgreen-bitwise commented 2 years ago

@SmiJa Yeah, I think that would work perfectly!

cc @luceroweb @lreyes-qae

luceroweb commented 2 years ago

@cgreen-bitwise please confirm if the change made to the key display in the inventory has resolved your issue. @SmiJa I've moved this ticket back to the In Progress column since it has not yet received confirmation from Chris of the QA apprenticeship. cc @lreyes-qae @SmiJa @lreyes-qae

cgreen-bitwise commented 2 years ago

@luceroweb Looks great! The only suggestion I could further add is for mobile devices, perhaps adding a small popup that appears above the key icon that says "Silver/Gold key" when the user taps on it, that goes away after a few seconds, so that functionality is present as is it is in the desktop version.

cc: @lreyes-qae @SmiJa