breadkenty / smashhub Goto Github PK

Reports Page

• Create Reports button on the side nav

• Create Reports page

  • Show list of users and their reports in a descending order (by the amount of reports)
  • User names should click to user's page

User Page

• Create User page

  • Show list of user's combos
  • Combo should include: CharacterPortrait, title, netVotes difficulty, and inputs
  • For the time being, combos should be ordered by newest first

• Add Moderator View on User page

  • Should have two sections: Reports and Infractions

Reports should have:

• Warning button

  • Bring up type buttons
  • Bring up a reason textbox
  • Submit button

• Ban button

  • Bring up two sets of buttons: type and banDuration
  • Bring up a reason textbox
  • Submit button

• grid with: Type, Reported Content, Comment, and Reported By

• Include date reported

• Reported content should link to Combo page or combo page with the comment for review

• Reported by should link to the reporting user's page

• Reports should have a dismiss button

• Reports should collapse

Infractions should have:

• Total points
• grid with: points, Comment, Moderator, and Date
• Moderator should link to the moderator's user's page
• Infractions should collapse

Character Combo Page

• Add report button to character combo page

• When the button is clicked, it should bring up a dropdown section where a user can submit the report along with their comments

• There should be an X button to close the window

• On submit, the textarea should disappear, leaving with the message Your report has been submitted

• Same this as above, but with comments

• .Include Reports lists from the User model in the GET controller. We should be able to access all the reports of their comments and combos of a user when we fetch the user's ApiData.
• a POST on the report should handle the null of either comments or combos. This will allow us to use one report table for both Comment and Combo
  a POST on the infract should handle both bans and warnings.
• As a warning, the points should be determined by the type.
• As a ban, the banDuration will be determined by the JSON object passed in seconds.

Note: I didn't include this in the UI mock-up, but when banning a user, there should also be a button to choose the type along with banDuration

• The report should come in this JSON format. Make sure this is valid.
  {
  userId: Id of the user being reported,
  reporterId: Id of the user reporting,
  comboId: Id of the combo that was reported (if reported on a comment, this will be null),
  commentId: Id of the comment that was reported (if reported on a combo, this will be null),
  body: "THIS COMBO WAS UNCALLED FOR!",
  }

• The infraction should come in this JSON format. Make sure this is valid.

a user getting banned

{
  userId: Id of the user being infracted,
  moderatorId: Id of the moderator infracting,
  banDuration: 172800,
  type: "inappropriate",
  body: "Inappropriate post for PK Blazing Butthole",
}

banDuration
2 Days = 172800s
1 Week = 604800s
2 weeks = 1209600s
1 month = 2419200s
Permanent = infinite

a user getting warned

{
  userId: Id of the user being infracted,
  moderatorId: Id of the moderator infracting,
  banDuration: null;
  type: "spam",
  body: "Spamming the same combos",
}

Looking to expand this list. thinking about removing other so mods will not be able to abuse the point system.
spam = 1 point
inappropriate = 1 point
harassment = 2 points
other = custom? points

Implementing moderator design

Here's a rough mock-up on the UI (Video)

https://youtu.be/RH7JCnWRzfU

Some screenshots for reference

The moderator report page

Users page if they are NOT a moderator

Users page if they ARE a moderator

When you hit the ban button to ban a user

when you hit the warn button to warn a user

Buttons for users to report

The reporting process for both combos and comments

How to make this UI work

Some changes to the model

Moderators(Users with moderator property as true)
can edit combos
can delete combos/comments
can view the Report page
can give users infractions
can ban users

Users
can report combo
can report comment

My entity relationship diagram

I have a few issues with how this model works. Primarily the idea of user reporting another user. I'm having a hard time understanding how you can have a table with two foreign keys that point to User I don't know if this works. In my diagram, I labeled the user getting reported as UserId and user reporting as ReporterId. There's are complicated one-to-many relationships coming from the user on both the Report table and Infraction table where there is an element of one user doing something to another.

Also, I wanted to initially do an IP ban but I think for the time being, doing a user ban would be the easiest way to go about doing this. But IP banning is something I want us to keep in mind.

I also am not sure how to go about banning someone for a period of time. I was thinking you might be able to do that without making a BanTime property for the User model, what do you think?

When a moderator gives an infraction, based on the category or severity, increase the points you get. And the points you get will determine how long the ban is.

Also, after processing the warning or ban, I added the Addressed property in Report. After processing, those reports should be hidden from the mods and removed from the report count on the report page.

Also on the UI, I want the stored Reason to show up on the banned user's login screen.

I will also eventually want to build out a UI for admins to make certain users into a moderator however, I don't mind doing that through psql and altering the table. I just want to make sure this system works first.

@skittlz444 or @sleeping-dev I'll need your advice and support for the backend here :P I'll take care of the UI but would love to get this conversation started before working on it.

As a developer of Smash Hub, I should have access to assets during development.

• Create assets
• Upload assets
• Document how to access assets in the intro page

Characters that are merged need to be separated. In order to do this, we would need to implement a way to put the characters in order so when adding them to the code, please follow the format on the official Smash Bros site

• Create graphics for individual characters.
• When importing graphics, keep the name consistent with other character structure with their own variableNames.
• Add characters to allCharacterCloseUp.jsx, allCharacterPortrait.jsx, and characters.sql
• Update character model to include releaseOrder to put the character in order
• Update migrations

As a developer of Smash Hub, our development workflow model after the GitHub Flow.

• Develop branch to merge into master
• Delete any unused branches
• Set master as the main branch

Makes it appear more detailed in searches and appears at the side bar, you can also link a site. You can do it here:

We're updating the models to implement the moderation feature. I only have a few concerns about this model and if you see any problems please post them here. One primary issue is having two foreign keys for UserId labeled as UserId and Reporter/ModeratorId. Please check out the UI to see how this will be implemented in #15

Update User Model

• Add int UserStatus = 1. This model will be responsible for determining the rank of the user. 3 for admin, 2 for mods, 1 for users. Make this property private.
• Add List<Combo>Combos. This will allow the UI to see the user page with all of their reports for a Combo.
• Add List<Comments>Comments. This will allow the UI to see the user page with all of their reports for a comment
• Add List<Infraction>Infraction. This will allow the UI to see the user page with their infractions

Update Combo Model

• Add List<Report>Reports. People will report combos

*Update Comment Model

• Add List<Report>Reports. People will report comments

Create Report Model

• int Id
• int UserId (The id of the user being reported)
• int ReporterId (The id of the creating the report)
• string Body[required]
• DateTime DateReported = DateTime.Now() (make this private)
• bool Dismiss = false

Create Infraction Model

• int Id
• int UserId (The id of the user being infracted)
• int ModeratorId (The id of the user/moderator giving the infraction)
• int banDuration = 0(this int will be in seconds)
• type[required]
• int Points = 0 (make this private)
• string body[required]
• DateTime DateInfracted = DateTime.Now() (make this private)

• Create Migrations
• Test to make sure the two UserId and Reporter/ModeratorId in the Report and Infraction model works as foreign keys.

As a developer of Smash Hub, we should be able to deploy our project into three different environments: development, staging, and production.

• Set up environments for the component library
• Set up environments for the web app
• Set up environments for the API

After the backend and static HTML is set up, we can start plugging in data to make these changes dynamic.

• Drive the Reports page from data

• Drive the User page's combos from data

• Drive the Reports on the User page from data

• Drive the Infractions on the User page from data

• Users should only be able to report once. Disable the button, if the report already exists

• The report's useState object should be in this JSON format
  {
  userId: Id of the user being reported,
  reporterId: Id of the user reporting,
  comboId: Id of the combo that was reported (if reported on a comment, this will be null),
  commentId: Id of the comment that was reported (if reported on a combo, this will be null),
  body: "THIS COMBO WAS UNCALLED FOR!",
  }

• The infraction useState object should be in this JSON format

a user getting banned

{
  userId: Id of the user being infracted,
  moderatorId: Id of the moderator infracting,
  banDuration: 172800,
  type: "inappropriate",
  body: "Inappropriate post for PK Blazing Butthole",
}

banDuration
2 Days = 172800s
1 Week = 604800s
2 weeks = 1209600s
1 month = 2419200s
Permanent = infinite

a user getting warned

{
  userId: Id of the user being infracted,
  moderatorId: Id of the moderator infracting,
  banDuration: null;
  type: "spam",
  body: "Spamming the same combos",
}

Looking to expand this list. thinking about removing other so mods will not be able to abuse the point system.
spam = 1 point
inappropriate = 1 point
harassment = 2 points
other = custom? points

When a user's login token expires and they attempt to perform an action, it silently fails. Implement a forbidden/unauthorised page that the user is redirected to instead and force log them out.

Suggested by KuraiTenshi, Monday the 14th September, 7:20am (AEST).

A "most recently posted" sidebar. As of now, it is currently difficult to see what combos have been recently posted. Going through each character section manually is a lot of work.

I think this would let people keep up with metagame development quite nicely, and it would make moderating easier too! Keeping up with new combos/concepts is always fun :]

As a Smash Hub developer, a build should trigger on push or merge to a branch. Once the branch begins to build, the pipeline should build, run tests, and deploy. Since this is the initial setup for the CI/CD pipeline, the scope of this story is limited to the stages: build and test. There will be a separate ticket for the actual deployment process.

• Pipeline should begin on push and merge
• Pipeline should build all of the existing projects in this repo. Component library, web app, and API.
• Pipeline should run all unit and integration tests and fail the build if it fails.

Users should be able to sign up using socials like discord, google, or Facebook, as well as the current email sign up ability.

Users that choose to sign up using one method, should be able to set up links to the other options, e.g. If I sign up with email, I should be able to link my discord, and use either to sign in.

Requested by Moello, Wednesday, 16th September, 1:18am (AEST)

It'd be cool if there was a "does the combo require a platform" button

When the plat comes in might be handy like a platform conditional to put behind a jump input

We've had some situations where users would double click or spam click any buttons that submit a request. This results in creating duplicate entries in our database.

When editing an existing combo and trying to submit it, a message shows up that says 'The Email field is required'.
Not quite sure where this comes from, and we haven't really touched the frontend stuff lately so I don't know when this was introduced, but it's been preventing me from testing the Mediator-Methods for PutCombo, so i figured I'd make an issue.

To reproduce this:

• Make a combo and submit it
• Press the edit button when viewing the combo
• Navigate down the page and press 'submit'
• The above mentioned message will show up, preventing the submit

This happens on the staging site too, so it's not something I introduced during my current local changes.

Reported by KuraiTenshi, Sunday 13th September, 10:39am(AEST).

Is this the intended behaviour of a combo page? I'm trying to scroll down but the combo remains at the top, making the rest of the page hard to see

the combo is here if anyone else wants to see the page behaviour https://smash-combos-dev.herokuapp.com/character/LittleMac/10
it scrolls like this on firefox and chrome too

So as to keep the use case implementations abstracted away from any UI framework dependent implementations (i.e. so that the controller action logic doesn't become dependent on react, blazor, mvc, or other ui specific framework).

This issue is specifically for setting up the core project, creating a demonstration use case for using MediatR and dependency injection to complete the required logic.

• Create the Core project
• Create a Core.Tests project
• Import MediatR into the projects
• Register MediatR
• Chose and implement a demonstration use case and tests

Remove .vscode, .bin and other unneeded files and folders from the project and add them to the .gitignore

As a user of the DifficultySlider component, I should be able to set difficulties as a slider.

Mockup: https://www.figma.com/file/I7fcX1kJuemm42TXGNZPKA/Smash-Combos-Design-System?node-id=4272%3A26069

Component must:

• Take an integer between the numbers 1 (blue) - 10(red) to represent the difficulty in the slider
• Match the mockups
• Label should be nullable
• Not have any padding/margins around the component
• Use Material UI as the base component if possible

As a developer of Smash Hub, I should have access to documentation on the typeface used for the project.

As a developer of Smash Hub, pushing my code after making changes to the component library should deploy the newest version of any branches to Chromatic.

Must be compatible with the database

Trying to open a users' page via link results in a blank screen. My page for example

A look in the web console tells me that b.Infractions is undefined, I'm assuming either the infractions don't get loaded with the user in the backend or the front end tries to access them incorrectly.

As a developer of Smash Hub, I should have access to documentation on the color palette used for the project.

Abstracting away the database's implementation so that advanced implementations and changes can be made without affecting anything relying on the database is imperative.

Here's a good example of why:
John: "I use a PostgreSQL database without an abstraction and I don't care!"
two days later
John: "I want to swap to a completely different data store for some valid reason!"
everything breaks

Don't be like John. If John used an interface to separate the implementation from the usage, he could've created the new dbcontext and then just swapped over the service registration when it was ready.

Recommended solution: Use a generically named interface like "IDbContext" or similar to abstract away the public methods implemented by the current dbcontext. Only expose what's needed for using the context. There are plenty of resources on this topic to get started.

The implementation and everything that supports it (like migration files) should live in a separate project named "Persistence", whereas the interface should live in the main project (unless #10 is completed, in which case it should live in the core project)

• Create Persistence project
• Create a "Services" folder in the main project
• Create an IDbContext interface in the new services folder
• Move the DatabaseContext, migrations, and other relevant persistence specific operations to the new project
• Register the DatabaseContext as a scoped implementation of the IDbContext
• Change all references in the Api project from the DatabaseContext to the injected IDbContext

Not everyone is American.
To avoid date confusion, we should display months with words, or short form "Sep/Mar/etc".

The character name + portrait at the top of a combo page should be clickable to go back to the character combo page

Some combos can be true or very near true in certain scenarios, these are known as "50/50"s. There should be an option for users to select this instead of true or not true.

As a developer of Smash Hub, when the CI/CD pipeline runs there should be a stage to deploy the static Web App.

As a developer of Smash Hub, I should be able to access components that are housed in a Storybook project.

Note: Storybook setup comes with setting up NX. This story can be done after NX has been set up.

Perhaps if the user selects a "remember me" option on login then their token lasts an absurdly long time (6 months?). Extend the base token expiry to 28 days or so.

As a Peach player, I thought medium hop was a thing as you can float at different heights, however, it's more unconventional for other characters so we can go ahead and remove it.

• Remove the mediumHop input from Hop.jsx and allComboInputs.jsx

Github automatically picks up file creations from within git labelled LICENSE or LICENSE.MD and brings up an interface allowing more detailed creation of a licence with upsides and downsides. Not having a licence can create problems for people looking to use the software as seen here. Choose A License is also a good site by Github for simplifying the licensing process.

Use tinymce, it's super easy, stores the output in HTML, and is free. The input will need to be sanitised before being returned, there are some good packages for this, don't roll your own. And don't allow image uploads, they're too large.

Ideally, we would like to have a bank of keywords that can be added to a component. Currently, the filter is barebones and would like it to be refactored into something more efficient. You can find this in both EditCombo.jsx and SubmitCombo.jsx

function checkVideoExists(event) {
    const keyWords = [
      'super',
      'smash',
      'bros',
      'ultimate',
      'ssbu',
      'combo',
      'combos',
    ]

    fetch(
      `https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${event.target.value}&key=${process.env.REACT_APP_YOUTUBE_KEY}`
    )
      .then(response => {
        return response.json()
      })
      .then(apiData => {
        if (apiData.items.length === 0) {
          setVideoExists(false)
        } else if (
          apiData.items[0].snippet.title
            .toLowerCase()
            .includes(characterSelected.name.toLowerCase()) ||
          apiData.items[0].snippet.description
            .toLowerCase()
            .includes(characterSelected.name.toLowerCase()) ||
          keyWords.some(keyWord =>
            apiData.items[0].snippet.title.toLowerCase().includes(keyWord)
          ) ||
          keyWords.some(keyWord =>
            apiData.items[0].snippet.description.toLowerCase().includes(keyWord)
          )
        ) {
          setVideoInformationById(apiData.items[0].snippet)
          setVideoExists(true)
        } else {
          setVideoExists(false)
        }
      })
  }

• Refactor this code as a component
• Improve keywords that will allow non-English videos to be validated

It seems to be implemented and working for a character's combos page, but not for the individual combo's page.

For characters with very similar echos (peach/daisy) there are combos that they can share. Adding an option to combo creation to let a user create the combo for both characters could be useful.

Reported by TriAttack. Sunday, September 13th, 10:24(AEST).

I cannot scroll up from this. Some sort of front-end error.

Device: Chrome
Resolution: 1920x1080

This is a test issue

As a developer of Smash Hub, all frontend development will be done inside of the NX mono repo. This way component libraries and dependencies can easily be shared across the entire repository.

As a moderator or admin, when viewing the page of a user who has bans, the infractions count is only counting warnings, not bans.

As a developer of Smash Hub, I should have the option to toggle dark mode for the compenent library's Storybook project.

As a user of the DifficultyScale component, I should be able to show the difficulty as a scale.

Mockup: https://www.figma.com/file/I7fcX1kJuemm42TXGNZPKA/Smash-Combos-Design-System?node-id=4272%3A26069

Component must:

• Take an integer between the numbers 1 (blue) - 10(red) to represent the difficulty in the scale/slider
• Match the mockups
• Label should be nullable
• Not have any padding/margins around the component
• Use Material UI as the base component if possible