[DevEx]: Clean up and centralize the "Waiting for Game to Start" overlays

Open
  • Is something wrong?
#806 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Refactor
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
developer-experience, frontend

Research direction

Start by comparing the three named Vue components: src/routes/game/components/GameOverlays.vue, GameUnavailable.vue, and RematchView.vue; trace how each decides to show the overlay and how game.status is used. Check whether the existing status can consistently replace the current conditions and whether one or two shared components fit the cases. Done means the overlays and triggering logic are consolidated consistently without changing when players see them.

Written by the indexing model from the issue text.

Description

dev experience frontend good first issue
Improvement Summary

There are currently three separate overlays that display the text "Waiting for Game to Start". We should consolidate them and the logic that triggers them to simplify working with these components and debugging them.

Detailed Description

The three overlays are in:
src/routes/game/components/GameOverlays.vue
src/routes/game/components/GameUnavailable.vue
src/routes/game/components/RematchView.vue

We should investigate whether they can be combined into one or two components to give a consistent look and feel, and whether they can have the logic that triggers them consolidated to be more consistent. Currently, one of them is triggered based on the pressence of an id in the game store, one based on whether p0Ready && p1Ready in the game store, and one based on the route alone (the rematch view always displays this overlay because it goes away when you redirect to the GameView itself. We should investigate if we can make use of the existing game.status attribute and compare to GameStatus.STARTED rather than checking id and p0Ready + p1Ready since this is more consistently aligned with the central purpose of checking whether the game has begun.

Dominant language
JavaScript
Stars
195
Forks
145
Avg merge
1d 9h
Merged PRs (30d)
32

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from cuttle-cards/cuttle

All issues in cuttle-cards/cuttle

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.