frontend icon indicating copy to clipboard operation
frontend copied to clipboard

Add a fullscreen button for the game div container

Open Johnwz123 opened this issue 1 year ago • 3 comments

Description

Closes #2746

Added a full-screen button and associated functionality for the game div container to improve accessibility on mobile devices. Fullscreen mode on mobile devices would also automatically force the screen orientation to landscape mode.

Type of change

  • [ ] Bug fix (non-breaking change which fixes an issue)
  • [x] New feature (non-breaking change which adds functionality)
  • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • [ ] This change requires a documentation update
  • [ ] Code quality improvements

How to test

  1. Go to the Source Academy homepage where you can find the game.
  2. On the top left corner of the game container, you can find the "Full-screen" button. Clicking it should expand the game container to full-screen and force mobile screen orientation to landscape mode.
  3. There should now be an "Exit Fullscreen" button on the top left corner. Clicking it should exit full-screen mode.

Checklist

  • [x] I have tested this code
  • [ ] I have updated the documentation

Johnwz123 avatar Mar 19 '24 17:03 Johnwz123