feat(game): confirm before leaving #738
Conversation
WalkthroughThe update enhances the game-playing experience by introducing a confirmation dialog that prompts users before they leave a game in progress. This change improves user interaction with clearer messaging, supported by localization in both English and French. Additionally, adjustments in styling and layout create a more responsive interface, while comprehensive unit tests ensure the robustness of the new features. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant GamePlaying
participant ConfirmDialog
User->>GamePlaying: Attempts to leave game
GamePlaying->>ConfirmDialog: Open confirmation dialog
ConfirmDialog->>User: Show confirmation options (Leave/Stay)
User->>ConfirmDialog: Selects Leave
ConfirmDialog->>GamePlaying: Confirm leaving
GamePlaying->>User: Exit game
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range, codebase verification and nitpick comments (2)
app/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.vue (2)
14-16: Consider initializing reactive variables with default values.The reactive variables
desiredDestinationFullPathanddoesConfirmToLeaveare initialized without default values. Consider setting default values for clarity and to avoid potential undefined behavior.- const desiredDestinationFullPath = ref<string>(""); - const doesConfirmToLeave = ref<boolean>(false); + const desiredDestinationFullPath = ref<string>(""); + const doesConfirmToLeave = ref<boolean>(false);
27-41: Localization keys are missing in the localization files.The localization keys used in the
confirmRequirecall are not found in the localization files. Ensure that these keys are defined to prevent potential runtime errors:
components.GamePlayingBeforeLeaveConfirmDialog.gameIsStillPlayingcomponents.GamePlayingBeforeLeaveConfirmDialog.doYouWantToLeaveGamecomponents.GamePlayingBeforeLeaveConfirmDialog.iWantToLeavecomponents.GamePlayingBeforeLeaveConfirmDialog.stayInGameAnalysis chain
Verify localization keys exist.
Ensure that the localization keys used in the
confirmRequirecall exist in the localization files to prevent runtime errors.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of localization keys in the localization files. # Test: Search for localization keys in the localization files. Expect: Keys to be defined. rg --type json $'components.GamePlayingBeforeLeaveConfirmDialog.gameIsStillPlaying' rg --type json $'components.GamePlayingBeforeLeaveConfirmDialog.doYouWantToLeaveGame' rg --type json $'components.GamePlayingBeforeLeaveConfirmDialog.iWantToLeave' rg --type json $'components.GamePlayingBeforeLeaveConfirmDialog.stayInGame'Length of output: 96939
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (2)
tests/unit/specs/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/__snapshots__/GamePlayingBeforeLeaveConfirmDialog.nuxt.spec.ts.snapis excluded by!**/*.snaptests/unit/specs/components/pages/game/GamePlaying/__snapshots__/GamePlaying.nuxt.spec.ts.snapis excluded by!**/*.snap
Files selected for processing (9)
- .run/Game Playing.run.xml (1 hunks)
- README.md (1 hunks)
- app/components/pages/game/GamePlaying/GamePlaying.vue (3 hunks)
- app/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.vue (1 hunks)
- config/tailwind/tailwind.config.ts (1 hunks)
- modules/i18n/locales/en.json (1 hunks)
- modules/i18n/locales/fr.json (1 hunks)
- tests/acceptance/features/game/features/game-playing/game-playing.feature (1 hunks)
- tests/unit/specs/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.nuxt.spec.ts (1 hunks)
Additional context used
Markdownlint
README.md
202-202: null
Multiple spaces after blockquote symbol(MD027, no-multiple-space-blockquote)
204-204: null
Multiple spaces after blockquote symbol(MD027, no-multiple-space-blockquote)
205-205: null
Multiple spaces after blockquote symbol(MD027, no-multiple-space-blockquote)
206-206: null
Multiple spaces after blockquote symbol(MD027, no-multiple-space-blockquote)
Additional comments not posted (18)
.run/Game Playing.run.xml (1)
1-12: Configuration looks good.The run configuration for Cucumber.js is set up correctly with appropriate options and environment variables.
config/tailwind/tailwind.config.ts (1)
22-22: Spacing addition approved.The new
"2/3"spacing value is a useful addition for more flexible layout options.tests/acceptance/features/game/features/game-playing/game-playing.feature (1)
1-26: Feature file is well-structured.The scenario effectively covers the user interaction for confirming game exit, ensuring clarity and completeness.
app/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.vue (2)
2-5: Ensure the dialog ID and group are unique and descriptive.The
idandgroupattributes for thePrimeVueConfirmDialogshould be unique and descriptive to prevent conflicts with other dialogs.Verification successful
The dialog ID and group are unique and descriptive.
The
idandgroupattributes for thePrimeVueConfirmDialogare unique within the codebase, addressing the concern about potential conflicts with other dialogs. No further action is needed.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the uniqueness of the dialog ID and group across the codebase. # Test: Search for the dialog ID and group usage. Expect: No duplicate occurrences. rg --type vue $'id="game-playing-before-leave-confirm-dialog"' rg --type vue $'group="game-playing-before-leave-confirm-dialog"'Length of output: 186
Script:
#!/bin/bash # Description: Verify the uniqueness of the dialog ID and group across the codebase. # Test: Search for the dialog ID and group usage in Vue files. Expect: No duplicate occurrences. rg 'id="game-playing-before-leave-confirm-dialog"' --glob '*.vue' rg 'group="game-playing-before-leave-confirm-dialog"' --glob '*.vue'Length of output: 469
43-53: EnsureonBeforeRouteLeaveis correctly set up.Verify that
onBeforeRouteLeaveis correctly set up and that any potential side effects of blocking navigation are handled appropriately.Verification successful
onBeforeRouteLeaveis correctly set up and side effects are managed.The implementation of
onBeforeRouteLeavein bothGameLobbyBeforeLeaveConfirmDialog.vueandGamePlayingBeforeLeaveConfirmDialog.vuefiles includes logic to handle navigation blocking through confirmation dialogs. The potential side effects are managed by storing the desired destination and prompting the user to confirm before proceeding. This setup appears to be appropriate.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the setup of `onBeforeRouteLeave` and check for potential side effects. # Test: Search for `onBeforeRouteLeave` setup and usage. Expect: Proper setup without side effects. rg --type vue $'onBeforeRouteLeave'Length of output: 62
Script:
#!/bin/bash # Description: Verify the setup of `onBeforeRouteLeave` and check for potential side effects. # Test: Search for `onBeforeRouteLeave` setup and usage in .vue files. rg 'onBeforeRouteLeave' --glob '*.vue' -A 5Length of output: 594
Script:
#!/bin/bash # Description: Check for handling of side effects related to blocking navigation in the relevant Vue files. # Test: Search for handling of side effects or additional logic in GameLobbyBeforeLeaveConfirmDialog.vue and GamePlayingBeforeLeaveConfirmDialog.vue. rg 'desiredDestinationFullPath|open|doesConfirmToLeave' app/components/pages/game-lobby/GameLobbyBeforeLeaveConfirmDialog/GameLobbyBeforeLeaveConfirmDialog.vue -A 5 rg 'desiredDestinationFullPath|open|doesConfirmToLeave' app/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.vue -A 5Length of output: 2005
app/components/pages/game/GamePlaying/GamePlaying.vue (3)
43-43: Import statement is correct.The import statement for
GamePlayingBeforeLeaveConfirmDialogis correct and ensures the component is available for use in the template.
12-12: Enhance layout responsiveness.The addition of
!max-w-2/3improves layout responsiveness. Ensure this change aligns with the overall design and does not introduce layout issues on different screen sizes.
35-35: Ensure component integration.The
GamePlayingBeforeLeaveConfirmDialogcomponent is integrated into the template. Verify its functionality and interaction with other components.Verification successful
Component Integration Verified
The
GamePlayingBeforeLeaveConfirmDialogcomponent is correctly imported and used in theGamePlaying.vuefile. The integration appears proper in terms of both import and template usage.
- Import Statement: The component is imported from its expected path, confirming its integration.
- Template Usage: The component is used within the template, indicating it is part of the component's structure.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the integration and interaction of `GamePlayingBeforeLeaveConfirmDialog`. # Test: Search for the component usage and ensure it functions correctly. rg --type vue $'<GamePlayingBeforeLeaveConfirmDialog'Length of output: 82
Script:
#!/bin/bash # Search for the import statement of `GamePlayingBeforeLeaveConfirmDialog` in Vue files ast-grep --lang vue --pattern 'import GamePlayingBeforeLeaveConfirmDialog from $_' # Search for the usage of `GamePlayingBeforeLeaveConfirmDialog` in Vue files rg '<GamePlayingBeforeLeaveConfirmDialog' --glob '*.vue' -A 5Length of output: 706
Script:
#!/bin/bash # Search for the import statement of `GamePlayingBeforeLeaveConfirmDialog` in the GamePlaying.vue file rg 'import GamePlayingBeforeLeaveConfirmDialog' app/components/pages/game/GamePlaying/GamePlaying.vue -A 5Length of output: 569
tests/unit/specs/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.nuxt.spec.ts (5)
1-11: Ensure all dependencies are correctly imported.The necessary dependencies are imported for testing the component. Ensure all mocks and utilities are correctly set up.
52-55: Snapshot test is correctly implemented.The snapshot test ensures the component renders as expected. Verify that the snapshot is up-to-date and reflects the current component state.
57-89: Comprehensive route leaving tests.The tests for route leaving logic are comprehensive and cover different scenarios. Ensure that all edge cases are considered.
92-127: Confirmation dialog tests are thorough.The tests for the confirmation dialog interactions are thorough and validate the expected behavior. Ensure that all dialog options and callbacks are tested.
20-27: Verify mock setup foruseRouter.The mock setup for
useRoutershould correctly simulate the router behavior. Ensure that the mock functions are used as expected in the tests.Verification successful
Mock setup for
useRouteris correctly implemented and verified.The test cases in
GamePlayingBeforeLeaveConfirmDialog.nuxt.spec.tseffectively utilize theuseRoutermock, particularly verifying thepushmethod's behavior. This confirms that the mock setup simulates the router behavior as expected in the tests.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the mock setup for `useRouter`. # Test: Search for `useRouter` mock usage and ensure it aligns with the expected behavior. rg --type ts $'useRouter'Length of output: 2282
Script:
#!/bin/bash # Description: Search for test cases in GamePlayingBeforeLeaveConfirmDialog.nuxt.spec.ts to verify the usage of the useRouter mock. # Test: Extract test cases to check how useRouter is being used and asserted in the tests. rg --type ts -A 10 'describe|it' tests/unit/specs/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.nuxt.spec.tsLength of output: 5512
modules/i18n/locales/en.json (1)
1509-1513: New localization entries are clear and consistent.The added entries for "GamePlayingBeforeLeaveConfirmDialog" are well-structured and align with the existing localization format.
modules/i18n/locales/fr.json (4)
1510-1510: Translation Approved: "gameIsStillPlaying".The translation "La partie est toujours en cours" accurately conveys the intended message.
1511-1511: Translation Approved: "doYouWantToLeaveGame".The translation "Êtes-vous sûr de vouloir quitter le jeu ?" is accurate and clear.
1512-1512: Translation Approved: "iWantToLeave".The translation "Oui, je veux partir" is accurate and appropriate for the context.
1513-1513: Translation Approved: "stayInGame".The translation "Rester dans le jeu" accurately reflects the intended meaning.
...game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.vue
Outdated
Show resolved
Hide resolved
|
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (1)
tests/acceptance/screenshots/linux/Stuttering Judge Requests Another Vote Playground.pngis excluded by!**/*.png
Files selected for processing (4)
- app/components/pages/game-lobby/GameLobbyBeforeLeaveConfirmDialog/GameLobbyBeforeLeaveConfirmDialog.vue (2 hunks)
- app/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.vue (1 hunks)
- app/composables/prime-vue/constants/prime-vue.constants.ts (1 hunks)
- tests/unit/specs/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.nuxt.spec.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- app/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.vue
- tests/unit/specs/components/pages/game/GamePlaying/GamePlayingBeforeLeaveConfirmDialog/GamePlayingBeforeLeaveConfirmDialog.nuxt.spec.ts
Additional comments not posted (4)
app/composables/prime-vue/constants/prime-vue.constants.ts (2)
1-7: Good use ofas constfor immutability.Marking
DEFAULT_PRIME_VUE_TOAST_OPTIONSasconstenhances type safety and ensures that the options remain immutable.
9-15: Centralized dialog options improve maintainability.The introduction of
DEFAULT_CONFIRM_DIALOG_OPTIONScentralizes the configuration for confirmation dialogs, making it easier to manage and update these settings across the application.app/components/pages/game-lobby/GameLobbyBeforeLeaveConfirmDialog/GameLobbyBeforeLeaveConfirmDialog.vue (2)
12-12: Importing default options enhances consistency.Using
DEFAULT_CONFIRM_DIALOG_OPTIONSensures consistency across dialogs and makes future updates easier.
41-41: Efficient use of spread operator for dialog options.The spread operator efficiently incorporates default options, improving maintainability and reducing redundancy in the
openfunction.
## [1.28.0](v1.27.0...v1.28.0) (2024-08-14) ### 🚀 Features * **game-lobby:** additional cards placement in manager ([#733](#733)) ([dd08cf2](dd08cf2)) * **game-lobby:** confirm leaving lobby with players ([#736](#736)) ([dbad613](dbad613)) * **game:** confirm before leaving ([#738](#738)) ([3c71999](3c71999)) * **thief:** thief playground ([#723](#723)) ([953324f](953324f)) * **wild-child:** transformation event ([#740](#740)) ([ec1a20c](ec1a20c)) ### ✅ Tests * **angel:** acceptance tests ([#732](#732)) ([d7f5c8b](d7f5c8b)) * **stuttering-judge:** acceptance tests ([#737](#737)) ([6840ebd](6840ebd)) ### 🧹 Chore * **deps:** update dependency @cucumber/cucumber to ^10.9.0 ([#744](#744)) ([14339bd](14339bd)) * **deps:** update dependency @nuxt/test-utils to ^3.14.1 ([#743](#743)) ([e86d2be](e86d2be)) * **deps:** update dependency @stylistic/eslint-plugin to ^2.6.2 ([#731](#731)) ([467a0ff](467a0ff)) * **deps:** update dependency @vueuse/core to ^10.11.1 ([#729](#729)) ([efade62](efade62)) * **deps:** update dependency @vueuse/nuxt to ^10.11.1 ([#730](#730)) ([ee4389c](ee4389c)) * **deps:** update dependency eslint to ^9.9.0 ([#734](#734)) ([e0a15a8](e0a15a8)) * **deps:** update dependency lint-staged to ^15.2.9 ([#741](#741)) ([482a616](482a616)) * **deps:** update dependency tailwindcss to ^3.4.10 ([#745](#745)) ([7e9b755](7e9b755)) * **deps:** update dependency tailwindcss to ^3.4.9 ([#727](#727)) ([d4b2e2c](d4b2e2c)) * **deps:** update dependency tsx to ^4.17.0 ([#724](#724)) ([0536f2c](0536f2c)) * **deps:** update dependency type-fest to ^4.24.0 ([#726](#726)) ([9d025a7](9d025a7)) * **deps:** update dependency vue to ^3.4.37 ([#728](#728)) ([c9e29c2](c9e29c2)) * **deps:** update stryker-js monorepo to ^8.5.0 ([#735](#735)) ([f9e692c](f9e692c)) * **deps:** update typescript-eslint monorepo to ^8.1.0 ([#739](#739)) ([7630b11](7630b11)) * **font-awesome:** pass all icons to svg ([#742](#742)) ([ec4a660](ec4a660))
|
🎉 This PR is included in version 1.28.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Tests