cuttle-cards
[Feature]: Error handling UX for Lobby
Feature Summary
We should render errors from the ready endpoint in a snackbar in the LobbyView page
Detailed Description
To do this, we should update the errors thrown in api/controllers/game/ready itself and in its delegated helper api/helpers/deal-cards.js so that they throw translation key strings that can be used in the i18n translation system.
We should add the text currently thrown in these errors to src/translations/en.json in the lobby section in a new lobby.error block, and add translations for all other language files in the src/translations in their respective languages, in the same place.
There is already a BaseSnackbar instance in src/routes/lobby/LobbyView.vue that is currently used to notify users when the game switches between ranked and casual mode. This should have its color and message set dynamically so that it keeps the 'surface-2 color and the existing message for the existing use case, and it changes to the 'error' color and shows translated text based on the error's key when the request to 'ready' throws an error.
Hello, ive got a few questions regarding this issue that are kinda unclear to me.
Should the deal-cards error translations, be also included in the lobby section? or a separate one.
Should there be an error translation fallback in case, it isnt a translation key, or it doesnt exist, or should it just print the message. Example, when trying to produce an error to test the functionality ive gotten "GameId does not exist" error, should it just show the error or show a fallback translation like "An unexpected error has occured".
And lastly, the basesnackbar is listening to a global variable in gameStore, is there any reason to it? its the only place that needs the access to it as far as i know, is there some code structure to limit file variables and move them primarily into the gamestore? This is mostly just me wondering and not really any issue. 🫡
