open-duelyst/duelyst

Game gifs - hero & map - does not render if the screen size is too small

Open

#290 opened on May 31, 2023

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (3,443 stars) (526 forks)batch import
bugfrontendhelp wanted

Description

Summary

When the screen is too small, the assets don't load in the game, this includes the map and the characters such as heros & character gifs, making it not really possible to play.

Impacted services

  • The frontend app

Steps to reproduce

  1. Start a local server and open the game in the chrome browser.
  2. Open the chrome inspector and use the device toolbar to use Pixel 4 dimensions, 353 * 745 in the webapp.
  3. Restart the game
  4. Load a practice match

The map does not render in the game & the heros don't load. (This also happens if you open the webapp on a phone like Pixel 6). Expected behaviour is that the characters load.

Environment information

  • Operating system: E.g. Linux
  • Browser: E.g. Chrome or Safari (could repro in both)

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
None
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the asset loading mechanism in the frontend, particularly how map and hero gifs are rendered. Check for any responsive CSS or JavaScript that conditionally loads assets based on screen size. Look at files like src/components/GameBoard.js or similar CSS media queries. The issue may be caused by missing breakpoints or incorrect handling of small screen dimensions.