luceroweb / haunted-house-game

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

Mobile - Text overlaps "inventory" / key icons #91

Closed rlynchjr closed 2 years ago

rlynchjr commented 2 years ago

Devices

Device name iPhone 13 - Pro Max Google Chrome Version 95.0.4638.54 (Official Build) (x86_64)

Description

On mobile: After you receive a key, the icon of the key you have appears in the bottom left corner. Once you have a key, all text-pop ups overlap the key icons.

Expected Behavior

Key icons should be visible always so the user knows which keys they have.

Actual Behavior

Whenever there is a text pop-up on the screen, the key icons in the bottom left corner are covered up.

Steps to Reproduce Issue

Be as detailed as possible when writing issues so that the developer can understand exactly how you found that issue and what they need to do to recreate it without further assistance.

  1. Go to website
  2. Click Skip to Gameplay
  3. Search rooms until you have a key
  4. Once key is received, notice the key icon being covered up in the bottom left corner of screen

Screenshots

IMG_1523 IMG_1524

Notes

Also applies to You Win screen. The green box surrounding the game title runs through the inventory and volume icons in the bottom left corner.

SmiJa commented 2 years ago

@luceroweb and I worked on this problem and @luceroweb built a fix for the issue and is ready to be re tested. The inventory and sound button have been moved to the bottom of the page so they don't appear under or over anything. @rlynchjr does this solution solve the issue? cc: @lreyes-qae

rlynchjr commented 2 years ago

@SmiJa I retested and this solution solves the issue. Thank you! I believe we can close this issue.