krazkidd / lineup Goto Github PK

Firestore writes are rate-limited. But the scoreboard encourages rapid user input through the score increment buttons (also the emoji reacts, but those can be limited). We may need to provide a workaround. Fortunately, a solution is provided.

1. Navigate to /lineup/lineup.
2. Add a player.
3. Select the player <div> element so that it is focused/highlighted.
4. ???

On desktop, you delete a player by pressing backspace in step 4. This is not possible on mobile without somehow manually pulling up the keyboard.

This can be fixed in a couple of ways, either:

a. Use long press event to trigger a prompt.
b. Delete the player if the user has the name input field focused and they press backspace when the field is empty. (This should ideally also trigger a prompt but a new issue can be created for that.)

If a prompt is added, it should be a PrimeVue dialog encapsulated in an SFC.

See ScoreboardEmojiButton component. This should use an element to source the image like we do in the LineupJerseyButton component.

The motivation for this is to be able to manipulate the images in real time, like say with filters or enhanced animations, though I'm not sure what can be done that CSS doesn't support in some way.

• Document project creation from the Firebase Console
• Document the service-account.json file
  (I think it's for authorizing the server in SSR mode and currently not used)

Need a non-intrusive animation when scoreboard viewers react.

This functionality preferably should not introduce any new dependencies; Vue.js supports some basic animations out of the box. If a more involved animation is desired, a popular VueUse composable or Nuxt module may be permitted.

Ideally, some method should be provided to show multiple simultaneous reactions. Currently, only the latest reaction is shown. The inspiration for this is social media livestreams which support dozens or hundreds of on-screen reactions in a short timespan.

I don't remember where I pulled this workflow from.

• Find initial version of the file (the first commit might have been unmodified)
• Add attribution and/or link to source
• Add comments for changes made to support GitHub Pages deployment
• Ensure a comment is added to explain why NITRO_PRESET: github_pages is used over NITRO_PRESET: firebase

The current Firestore production db is in test mode. It needs to be put in production mode with reasonable security rules. The following need to be done before 19 Oct 2023:

• Ensure firestore.rules is up to date.
• Document any workflow changes as needed (see #12).
• Change 'Environment Type' in Firebase Console to 'Production'.

I would like to add something like a Heather pattern to the jersey icons here so they don't appear so flat.

This can be done through a noise filter, like this:

<filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='0.65' 
      numOctaves='3' 
      stitchTiles='stitch'/>
</filter>

New release!

https://github.com/nuxt/nuxt/releases/tag/v3.7.4

Note that I tried this but the PrimeVue dialogs had an issue.

We may want to wait until the coming PrimeVue module is released before messing with dependencies again.

Firebase supports reCAPTCHA to prevent abuse in a non-invasive manner. And VueFire supports App Check.

• Assess pricing and choose version (v3 or Enterprise) and impact on user experience
• Use debug provider in local builds and document in README.md if needed
• Is there a special integration with Firestore that needs to be configured/implemented separately?

1. Open Scoreboard from nav manu.
2. Click the share button.

The dialog comes up but there's no QR code. There are 2 errors in the browser console.

Steps to reproduce:

1. Navigate to /lineup/scoreboard.
2. Click the down arrow in one of the team tiles until the score goes negative.

The score should not be allowed to go negative.

For the team name and player name input text fields, we should instruct the browser to use an IME which auto-capitalizes words.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize

Indexes need to be added to firestore.indexes.json and the GitHub workflow needs to publish these at build time, just like we do for security rules in #20.

Additionally, there should be a way to configure TTLs in the same manner. We can add this on the emotes collection as we have no need to store these after a game has completed.

The inning should be tracked along with the scores.

See this mocked up example:

Requirements:

1. Sensible placement on the scoreboard page in a way that doesn't distract from the team scores (between or above the team scorecards--if between, the emoji react will need to be moved).
2. Responsivity.
3. Hide increment/decrement buttons in shared view.
4. The inning counter must not go below 1. (Use the same solution as #15, if available.)
5. The inning number must be persisted in the Firestore backend.

I would like to add a Spanish language option. The first task is to add the Nuxt module and then start pulling out strings for translation. (Another module comes recommended by a redditor.)

A language select button can be added next to the color mode button on the header (in app.vue) since there will be only two options.

We will also need to pull out the title/language metadata in nuxt.config

• Install module and identify localizable strings
• Add language select button
• Make sure title/language headers are localized