Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(game): all game screens are responsive #880

Merged
merged 5 commits into from
Sep 17, 2024

Conversation

antoinezanardi
Copy link
Owner

@antoinezanardi antoinezanardi commented Sep 16, 2024

Summary by CodeRabbit

  • New Features

    • Enhanced responsiveness of various game components for better usability across different screen sizes.
  • Bug Fixes

    • Improved layout and presentation of game options and player cards on smaller devices.
  • Documentation

    • Added computed properties for dynamic image sizing and responsive design adjustments.
  • Chores

    • Minor updates to CSS classes for improved adaptability and visual spacing.

@antoinezanardi antoinezanardi added the 🚀 feature New feature or request label Sep 16, 2024
@antoinezanardi antoinezanardi self-assigned this Sep 16, 2024
Copy link

coderabbitai bot commented Sep 16, 2024

Important

Review skipped

Review was skipped due to path filters

Files ignored due to path filters (64)
  • tests/acceptance/screenshots/darwin/About Page.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Actor chooses card Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Charmed people meet each other Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game Lobby Options Hub on Composition tab.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game Lobby Options Hub on Roles tab.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game Lobby Options Hub on Votes tab.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game Lobby Page with 40 players.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game Lobby Role Picker with picked role.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game Lobby Role Picker without picked role.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game Phase Event.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game won by Angel.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game won by Lovers and Cupid.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game won by Villagers.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game won by Werewolves.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game won by White Werewolf.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Pied Piper charms Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Scandalmonger marks Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Seer looks Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Survivors elect Sheriff Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Thief chooses card Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Three Brothers meet each other Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/White Werewolf eats Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/About Page.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Accursed Wolf-Father infects Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Actor chooses card Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Big Bad Wolf eats Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Charmed people meet each other Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Cupid charms Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Defender protects Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Fox sniffs Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game Lobby Options Hub on Composition tab.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game Lobby Options Hub on Roles tab.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game Lobby Options Hub on Votes tab.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game Lobby Page with 40 players.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game Lobby Role Picker with picked role.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game Lobby Role Picker without picked role.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game Phase Event.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game Playground without targets.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game won by Angel.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game won by Lovers and Cupid.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game won by Lovers.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game won by Pied Piper.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game won by Villagers.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game won by Werewolves.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game won by White Werewolf.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Hunter shoots Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Lovers meet each other Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Pied Piper charms Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Scandalmonger marks Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Seer looks Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Sheriff delegates Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Sheriff settles votes Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Stuttering Judge Requests Another Vote Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Survivors elect Sheriff Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Thief chooses card Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Three Brothers meet each other Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Two Sisters meet each other Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Werewolves eat Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/White Werewolf eats Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Wild Child chooses model Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Witch out of potions Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Witch uses death potion Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Witch uses life potion Playground.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Wolf-Hound chooses side Playground.png is excluded by !**/*.png

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The changes involve multiple Vue components within the game interface, focusing on enhancing responsiveness through CSS class adjustments. Modifications include updates to width and height classes for various elements, ensuring better adaptability across different screen sizes. Additionally, computed properties have been introduced for dynamic sizing of images and elements, further improving the user interface's flexibility.

Changes

Files Change Summary
app/components/pages/game/.../GameChooseCardPlayground.vue Modified width class for additional cards to enhance responsiveness and introduced dynamic image size adjustments.
app/components/pages/game/.../GamePlaygroundHeader.vue Changed width classes to responsive values and added spacing between elements.
app/components/pages/game/.../GamePlaygroundHeaderPhase.vue Updated layout classes for vertical stacking on smaller screens and responsive text size.
app/components/pages/game/.../GamePlaygroundFooter.vue Adjusted layout and sizing of footer components for better responsiveness.
app/components/pages/game/.../GamePlaygroundFooterCountdown.vue Enhanced layout and styling of countdown component for improved visual presentation.
app/components/shared/game/player/.../PlayersHorizontalList.vue Improved player list responsiveness and introduced computed property for dynamic image sizes.

Possibly related PRs

Poem

🐇 In the game where bunnies play,
Responsive designs come out to play.
Cards and lists now fit just right,
On every screen, a joyful sight!
With widths that change and heights that flow,
A hopping good time for all, you know! 🌟


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    -- I pushed a fix in commit <commit_id>, please review it.
    -- Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    -- @coderabbitai generate unit testing code for this file.
    -- @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    -- @coderabbitai generate interesting stats about this repository and render them as a table.
    -- @coderabbitai read src/utils.ts and generate unit testing code.
    -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    -- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Tip

Early access features: enabled

We are currently testing the following features in early access:

  • OpenAI o1 for code reviews: OpenAI's new o1 model is being tested for code reviews. This model has advanced reasoning capabilities and can provide more nuanced feedback on your code.

Note:

  • You can enable or disable early access features from the CodeRabbit UI or by updating the CodeRabbit configuration file.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 8

Outside diff range and nitpick comments (2)
tests/unit/specs/components/shared/game/player/PlayersHorizontalList/PlayersHorizontalList.nuxt.spec.ts (1)

66-66: Ensure all RoleImage components are tested for correct size

Currently, the test checks the sizes prop of only the first RoleImage component. To ensure all role images render with the expected size, iterate over all instances.

Modify your expectation as follows:

- expect(roleImagesInList[0].props("sizes")).toBe("100px");
+ roleImagesInList.forEach((roleImage) => {
+   expect(roleImage.props("sizes")).toBe("100px");
+ });

And similarly for the other test:

- expect(roleImagesInList[0].props("sizes")).toBe("50px");
+ roleImagesInList.forEach((roleImage) => {
+   expect(roleImage.props("sizes")).toBe("50px");
+ });

Also applies to: 74-74

tests/unit/specs/components/shared/game/game-event/GameEventFlippingPlayersCard/GameEventFlippingPlayerCard/GameEventFlippingPlayerCard.nuxt.spec.ts (1)

50-54: Explicitly set mock return value for clarity

In the test case, the return value of hoistedMocks.useBreakpoints.smaller is not explicitly set within the test, which might affect test readability and maintainability.

Explicitly set the mock return value in the test:

+hoistedMocks.useBreakpoints.smaller.mockReturnValue(ref(false));
Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 6700020 and 91063b9.

Files ignored due to path filters (1)
  • tests/unit/specs/components/shared/game/player/PlayersHorizontalList/__snapshots__/PlayersHorizontalList.nuxt.spec.ts.snap is excluded by !**/*.snap
Files selected for processing (4)
  • app/components/shared/game/player/PlayersHorizontalList/PlayersHorizontalList.vue (2 hunks)
  • tests/unit/specs/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameChooseCardPlayground/GameChooseCardPlaygroundAdditionalCard/GameChooseCardPlaygroundAdditionalCard.nuxt.spec.ts (4 hunks)
  • tests/unit/specs/components/shared/game/game-event/GameEventFlippingPlayersCard/GameEventFlippingPlayerCard/GameEventFlippingPlayerCard.nuxt.spec.ts (3 hunks)
  • tests/unit/specs/components/shared/game/player/PlayersHorizontalList/PlayersHorizontalList.nuxt.spec.ts (3 hunks)
Files skipped from review as they are similar to previous changes (1)
  • app/components/shared/game/player/PlayersHorizontalList/PlayersHorizontalList.vue

Copy link

sonarcloud bot commented Sep 17, 2024

@antoinezanardi antoinezanardi merged commit b54b1dc into develop Sep 17, 2024
15 checks passed
@antoinezanardi antoinezanardi deleted the feat/reponsive-game branch September 17, 2024 09:08
antoinezanardi pushed a commit that referenced this pull request Sep 18, 2024
## [1.32.0](v1.31.0...v1.32.0) (2024-09-18)

### 🚀 Features

* **audio:** audio settings in local storage ([#831](#831)) ([cd8a2cb](cd8a2cb))
* **game-lobby:** all game lobby is responsive ([#877](#877)) ([aaccf38](aaccf38))
* **game-lobby:** auto-focus on player name input ([#860](#860)) ([7897da3](7897da3))
* **game-lobby:** auto-focus on player name input even after changing page ([#873](#873)) ([3bb8401](3bb8401))
* **game-lobby:** display disclaimer for small screens ([#853](#853)) ([81029b8](81029b8))
* **game-lobby:** game options confirm step in lobby ([#845](#845)) ([20cc2ce](20cc2ce))
* **game:** all game screens are responsive ([#880](#880)) ([b54b1dc](b54b1dc))
* **game:** game over screens are responsive ([#883](#883)) ([aacb761](aacb761))
* **misc-pages:** responsive for canceled game and not found game pages ([#888](#888)) ([deeb7b2](deeb7b2))
* **nuxt:** set route announcer ([#835](#835)) ([dd1115f](dd1115f))
* **nuxt:** typecheck on hooks and ci ([#832](#832)) ([794157f](794157f))

### 🐛 Bug Fixes

* **deps:** update dependency @primevue/themes to ^4.0.6 ([#842](#842)) ([4d3e063](4d3e063))
* **deps:** update dependency @primevue/themes to ^4.0.7 ([#855](#855)) ([2b80485](2b80485))
* **deps:** update dependency primevue to ^4.0.6 ([#843](#843)) ([3a20f01](3a20f01))
* **deps:** update dependency primevue to ^4.0.7 ([#856](#856)) ([6c75a61](6c75a61))
* **game-events:** icon animation null instance handler ([#889](#889)) ([ee0a17e](ee0a17e))
* **pwa:** remove redirect fallback ([#830](#830)) ([69c2c21](69c2c21))

### 🔩 Refactor

* **primevue:** use new accordion component ([#834](#834)) ([f611995](f611995))
* **primevue:** use new tab components ([#836](#836)) ([4f9c1b9](4f9c1b9))

### ✅ Tests

* **scapegoat:** acceptance tests ([#884](#884)) ([add895e](add895e))

### 🔁 CI

* **node:** use last node version in ci ([#848](#848)) ([aa047b3](aa047b3))

### 🧹 Chore

* **deps:** update commitlint monorepo to ^19.5.0 ([#852](#852)) ([cefe4af](cefe4af))
* **deps:** update dependency @cucumber/cucumber to ^11.0.1 ([#869](#869)) ([c00d3e7](c00d3e7))
* **deps:** update dependency @cucumber/cucumber to v11 ([#817](#817)) ([dcbad46](dcbad46))
* **deps:** update dependency @faker-js/faker to ^9.0.1 ([#870](#870)) ([da15f7c](da15f7c))
* **deps:** update dependency @nuxt/test-utils to ^3.14.2 ([#846](#846)) ([f0f715a](f0f715a))
* **deps:** update dependency @nuxtjs/i18n to ^8.5.2 ([#764](#764)) ([0fe9bf0](0fe9bf0))
* **deps:** update dependency @nuxtjs/i18n to ^8.5.3 ([#849](#849)) ([1689312](1689312))
* **deps:** update dependency @nuxtjs/robots to ^4.1.7 ([#861](#861)) ([4cf88c8](4cf88c8))
* **deps:** update dependency @primevue/nuxt-module to ^4.0.6 ([#841](#841)) ([7384c1e](7384c1e))
* **deps:** update dependency @primevue/nuxt-module to ^4.0.7 ([#854](#854)) ([22c3f4a](22c3f4a))
* **deps:** update dependency @stylistic/eslint-plugin to ^2.8.0 ([#838](#838)) ([1c15410](1c15410))
* **deps:** update dependency @types/qs to ^6.9.16 ([#868](#868)) ([8560a5d](8560a5d))
* **deps:** update dependency @vueuse/core to ^11.1.0 ([#875](#875)) ([b568680](b568680))
* **deps:** update dependency @vueuse/nuxt to ^11.1.0 ([#876](#876)) ([0f358b6](0f358b6))
* **deps:** update dependency circle-progress.vue to ^3.2.2 ([#878](#878)) ([4cd09ac](4cd09ac))
* **deps:** update dependency husky to ^9.1.6 ([#858](#858)) ([03b278b](03b278b))
* **deps:** update dependency msw to ^2.4.3 ([#827](#827)) ([6cd07ef](6cd07ef))
* **deps:** update dependency msw to ^2.4.4 ([#833](#833)) ([44814db](44814db))
* **deps:** update dependency msw to ^2.4.5 ([#850](#850)) ([773674a](773674a))
* **deps:** update dependency msw to ^2.4.6 ([#864](#864)) ([93b4a45](93b4a45))
* **deps:** update dependency msw to ^2.4.7 ([#871](#871)) ([b6cef68](b6cef68))
* **deps:** update dependency msw to ^2.4.8 ([#882](#882)) ([96d9d56](96d9d56))
* **deps:** update dependency node to v22.9.0 ([#886](#886)) ([8f28e99](8f28e99))
* **deps:** update dependency sass to ^1.79.1 ([#887](#887)) ([02e728a](02e728a))
* **deps:** update dependency semantic-release to ^24.1.1 ([#851](#851)) ([9a5d974](9a5d974))
* **deps:** update dependency tailwindcss to ^3.4.11 ([#857](#857)) ([74668ab](74668ab))
* **deps:** update dependency tailwindcss to ^3.4.12 ([#885](#885)) ([b2d182d](b2d182d))
* **deps:** update dependency tsx to ^4.19.1 ([#859](#859)) ([6e771c3](6e771c3))
* **deps:** update dependency type-fest to ^4.26.1 ([#829](#829)) ([7b715fd](7b715fd))
* **deps:** update dependency typescript to ^5.6.2 ([#839](#839)) ([69b99b1](69b99b1))
* **deps:** update dependency vue to ^3.5.4 ([#844](#844)) ([09fd254](09fd254))
* **deps:** update dependency vue to ^3.5.5 ([#865](#865)) ([13ae2b7](13ae2b7))
* **deps:** update dependency vue to ^3.5.6 ([#874](#874)) ([77302a2](77302a2))
* **deps:** update dependency vue-router to ^4.4.4 ([#847](#847)) ([23430aa](23430aa))
* **deps:** update dependency vue-router to ^4.4.5 ([#863](#863)) ([28a6c29](28a6c29))
* **deps:** update nuxtjs monorepo to ^3.13.2 ([#872](#872)) ([28e0e43](28e0e43))
* **deps:** update playwright monorepo to ^1.47.1 ([#866](#866)) ([ae9e014](ae9e014))
* **deps:** update pnpm to v9.10.0 ([#837](#837)) ([05be262](05be262))
* **deps:** update typescript-eslint monorepo to ^8.5.0 ([#840](#840)) ([b230013](b230013))
* **deps:** update typescript-eslint monorepo to ^8.6.0 ([#881](#881)) ([c291635](c291635))
* **deps:** update vitest monorepo to ^2.1.0 ([#862](#862)) ([b25b312](b25b312))
* **deps:** update vitest monorepo to ^2.1.1 ([#867](#867)) ([a1ad2f8](a1ad2f8))
* **screenshots:** missing screenshots for linux ([8bfa635](8bfa635))
@antoinezanardi
Copy link
Owner Author

🎉 This PR is included in version 1.32.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🚀 feature New feature or request released
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant