mellet / csgonades-client Goto Github PK

Instead of separate buttons, have carousels where you can click to select team and tick.

Props to this component should be something like:

type Props = {
  selected: Tickrate;
  options: []Tickrate;
}

Todo

• Create component
• Storybook to show component
• Replace old tickrate and team filter with new component

Design

Active circle color: theme.colors.PRIMARY
Passive circle color: theme.colors.buttonBorder
Border color: theme.colors.buttonBorder
Text colors: theme.colors.buttonDefaultIcon

On mobile, use a horizontal filter bar for more space.

At the moment on mobile the filter bar is vertical as shown:

Probably just add some media query to FilterBar.

In MapViewSuggested add the following:

• Button group for selecting sorting method
  • Score
  • Favorites
  • Age
• React hook that takes in a list of nades and based on the sorting method returns nades in that sorting method
• (Later) Persist selected method

• Allow direct messaging between users

Instead of sending notificaitons for each favorite generate a daily summary for favorites.

If you do the following:

• Click nade cluster
• Displays list of suggested nades
• Click on a nade
• Takes you to /nades/[nadeId]
• Click back button

Currently the suggested nade view will be closed after clicking back.
I think it is a better user experience to have it display the nades you previously viewed.

At the moment the suggested nades are only saved locally in useOnNadeClusterClick.
To get it to work the suggested nades should be stored in redux state so it's not destroyed on page transition.

There is already an action to add suggested nade in the slice.
Probably need to add a action to clear the suggested nades.

So just swap out the useState in useOnNadeClusterClick and replace it with redux actions and state.

Instead of allowing only the creator of a nade to edit the nade, any signed in user can suggest edits that will be accepted/denied by a moderator.

Needs backend change.

List of nades posted by user

Disable submit button on report modal if message is empty to avoid submitting empty images to backend API.

Can also move the file to src/reports/components

Allow moderators to quickly approve / decline nades.
Also auto generate slugs.

• Video has no clutter
• Video has good crosshair
• Lineup image good
• Result image good

Check users OS preference if they prefer dark mode. Default to that unless explicitly changes by user.

Remember last page of navigation.
Use history back if page was a map page. Otherwise use hard link.

This will keep the scroll history when navigating back.

Fix color of Dashboard title in darkmode.
Currently is black, should use colors.TEXT.

Map rotation should be optional to help users read the map locations.
(Have code ready to PR, just need permissions to create PR)

Create a new page that lists all notifications
Allow filtering

On nade edit pages some text in dark mode is black.

Use theme colors.TEXT to use correct color for both dark and light mode.

Check if it's possible to add Tenor/Streamable support

If there are no nades for a specific type (smoke/flash/molotov/grenade) then the button to filter by that type should not be visible.

The check should be in this component.
Will need to pass down the count from different nades.

The cookie consent bar links to the wrong page for the privacy policy.

It should be

 <a href="/privacypolicy">cookies</a> for analytics and advertising. 

Allow users to control the following settings:

• Expanded / Compact filter
• HD/SD preference on video
• Tick preference

Add a button only visible in developement that sets the currently signed in user to admin so all pages and options are available in developement.

This will not allow the user to do any calls to the API that require admin privileges, but at least see some hidden pages.

Show 8 most recent nades on frontpage.

• getAll in NadeApi returns 8 most recent nades.
• Use getStatic props to fetch them, and revalidate every 30min, similar to this.

When navigating to a nade page, make it full screen.
Layout for nade page needs to be different, without header and sidebar.
Either move layout to pages, or do a check in layout to render custom one for nade page

• Send notification to others that have commented on a nade
• Add audit event for comments

Add hints for how you can format text with markdown in the description on edit nade and new nade page.
Probably best to add a (?) icon that when clicked shows the help for markdown.

Include:

• bold
• italic
• links

Need to swap out low res icons for smoke, flash, molotov etc.
As I don't have the Illustrator files I need to redraw them.

Create new map overlay images with transparent background so it works on both light/dark mode.

At the moment the map overlay images have a set dark background color.

Makes the button invisible.

Allow filtering nades for CT/T/Both

• Default to Both
• Clicking CT shows CT nades
• Clicking the same option again resets it to Both

Changes needed

• New key in NadeModel on frontend: teamSide
• Include selector in create nade page
• Include selector in update nade page
• Add button to filter by team

Add setpos coordinates to nades that can be copied to clipboard to teleport to nade position.

Changes needed:

• New field on nade model with coordinates (backend)
• New nade/Edit nade page input field to set this position
• Icon to the right of video for copy'ing coordinates

Allow users to gain points by completing tasks such as:

1. Adding a nade
2. Getting a nade improvement accepted
3. First 10 nades favorited
4. Having csgonades.com in Steam username

Gaining points will increase your level (names TBA) and perhaps gain perk.

1 and 3 can be retrospectively calculated, but 2 must be enabled once that feature is enabled.

Needs backend change.

Currently -> Sarting dev server
Desired Text -> Starting dev server

I would like to work on this if this is a valid issue @mellet .
Thank you