Update game landscape #26
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Show 'coming soon' in detail page if the video url does not exists * Support showing "coming soon" in the sku page
Closes #51 Update `game-landscape.html`, `styles.css`, and `game-landscape.js` to support mobile phones * **game-landscape.html** - Add media queries to support vertical phone screens. - Adjust the canvas size for screens 820 pixels wide or less. * **styles.css** - Add media queries to support vertical phone screens. - Adjust the layout for screens 820 pixels wide or less. - Ensure the game container and canvas adapt to vertical screens. * **game-landscape.js** - Add logic to handle screen widths of 820 pixels or less. - Adjust the canvas setup for vertical screens. - Convert the game layout to a vertical setup with two columns instead of four. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/rajbos/copilot-videos/issues/51?shareId=1f8f2543-bca4-441f-ae9d-f3dbd8896d29).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request primarily focuses on enhancing the responsiveness of the game interface for smaller screen sizes (<= 820px). The changes include modifying the CSS and JavaScript files to adjust the game layout, canvas size, and tooltip styles based on the screen width.
Here are the key changes:
CSS adjustments for smaller screens:
game-landscape.htmlandstyles.css: Added media queries for screens with a maximum width of 820px. The game container's flex direction is set to column and the game canvas width is set to 100% with auto height. The canvas position is also adjusted to accommodate the header height. [1] [2] [3]JavaScript changes for dynamic canvas size and game layout:
game-landscape.js: Introduced a new functionadjustCanvasSizeto dynamically adjust the canvas size based on the screen width. This function is called on window resize and at the start of the script.game-landscape.js: The number of game levels per row is now dynamically set based on the screen width.game-landscape.js: Added a window resize event listener to adjust the canvas size and redraw the game landscape when the window size changes.Tooltip style enhancements:
game-landscape.js: Enhanced the tooltip styles by adding color, font weight, and font size.