tyler-morales / game-night

🎲 Game Night is a web app that records & analyzes group game nights without the hassle of pencil and paper

Hello World 🌎, I'm Tyler!

About Me

I'm a Full Stack Web developer inspired by bringing ideas 💡 into reality 🚀

• 🚀 I've released a stable version v1.0.0 of Parkway– website, Repo
• 🌱 I’m currently learning AWS & Graphql
• 🤔 I’m looking for help with deciding when to use SSR, SSG and CSR with Next.js
• 💬 Ask me about JS frameworks (Vue vs. React)
• 📫 How to reach me: Visit my website!
• 😄 Pronouns: He/ Him/ His
• ⚡ Fun fact: My longest bike ride was 107+ mi 🚴🏻‍♂️

Skills

Frameworks/ Languages

CSS Frameworks/ Tools

📬 Contact Me

Github Stats

Visitors count

game-night's Issues

⭐ Feature: Add a date picker

In the RecordAGameForm.js file, there needs to be an option to select a date.

Currently, the date is set through AWS Dynamo, but this does not give the option to a user to enter a past date.

Please, use any modern date picker and try to mimic the styles in the rest of the website.

Goals:

• Add a date picker above the "Record Game" button
• Have a default date selected as the current date
• Store the date in the format of: "2021-10-11T19:25:06.159Z"
• Update the addGameToDB function to include the newly added date in the recordGameInfo object. The key is "createdAt" and the value should be the value of the date selected. You could place this key-value pair under type:"RecordGame

If you have any questions, please feel free to reach out! Good luck

Add spacing between title and elements in a table

The responsive table component can be enhanced in mobile views by increasing space between the table header item and table rows.

Here is the file with the table that needs fixing.
https://github.com/tyler-morales/game-night/blob/main/src/components/dashboard/History.js

Note: You can find the line that needs fixing with my comment: TODO:...

Twitter Summary Card Image is not loading

The Twitter image card is not appear in the Twitter card: check out this Twitter Card Validator with this url to view the live results.

Currently, I have an image: opengl-img.png in the public folder prefixed with %PUBLIC_URL%/, but the image does not load.

As you can see, the image is not loading:

Please, check out the index.html file and public folder to make any changes.

Good luck!

Eye icon triggers sign in function

When a user is trying to see their password and click the eye icon, the sign-in function also runs.

Expected Behavior:

• A user clicks the eye icon to toggle between their password being hidden and visible. This should not trigger the signIn function
• A user can hit the enter key on the password input box to sign in

In short, the eye icon toggle and sign in button should be independent of each other.

File: SignIn.js
Functions: toggle and signIn

🐛 BUG: Data from Custom hook does not re-render when data loads

In the Game Activity tile, the expected behavior inside the "GAME ACTIVITY STATS" should read out the current date and the number of games played on that date.

Currently, when I call the custom hook to fetch the number of games, the hook only returns 0 even when there exist games. The number of games only appears if a user clicks the day in the heatmap. The number of games should appear on page load for the current date.

The file that needs fixing is ChartHeatmap.js and you might want to look at useLoadSpecficRecords.js

Acceptance Criteria:

• The current day should read out the data (whatever the current day is) and the number of games played during that day.

Below: This is incorrect. The number of games played should be 2. 2 only appears once October 22 is clicked in the heatmap.

Let me know if you have any issues or questions. You'll need an aws-exports file if you work on this issue. That can be found in the other current issue in this repo.

⭐ **Feature**: Add a button to select all players

I would like to be able to have a button in the RecordGameForm.js that selects all players.

⭐ Implement react-window

To improve SEO and loading, the table view, in the History tile needs to only load the viewable table rows.

View this article by google to learn more:
https://web.dev/virtualize-long-lists-react-window/?utm_source=lighthouse&utm_medium=devtools

Hide password while entering