horusgoul / atom-pwa

Learn the basics of chemistry doing the tests and using the periodic table

Hey 👋

Quick links:

• Personal Blog: https://horus.dev/blog
• Status page for my side-projects: https://uptime.horus.dev

You can reach out at:

• Twitter: https://twitter.com/HorusGoul
• Threads: https://threads.net/@HorusGoul
• Email: [email protected]
• LinkedIn: https://linkedin.com/in/horusgoul

atom-pwa's Issues

Add option to hide the group color in the Periodic Table Quiz

This enhancement would add a new setting for the Periodic Table Quiz. It would increase the difficulty, so it should be disabled by default.

Here are the elements where we need to remove the group color when the option is enabled:

Add real images of each element in the Periodic Table

Is your feature request related to a problem? Please describe.
Users in Google Play want real images of elements displayed in the element details view of the periodic table.

Describe the solution you'd like
Enhance the element detail view to include a photo of the element (if any).

Note: Make sure the image loading is optimized.

Describe alternatives you've considered
-

Additional context
-

Google Play review internal link

• https://play.google.com/console/u/0/developers/6766854821971539608/app/4974685371084140816/user-feedback/review-details?reviewId=b60d2777-58cc-41c6-aaa8-458f712ed705&corpus=PUBLIC_REVIEWS
• https://play.google.com/console/u/0/developers/6766854821971539608/app/4974685371084140816/user-feedback/review-details?reviewId=50c9c7b0-97b1-4a92-9cca-87d0bc693530&corpus=PUBLIC_REVIEWS

Add "Hint" feature to the Periodic Table Quiz

Add a new setting in the Periodic Table Quiz to enable hints.

If the setting is enabled and a person cannot locate an element on the first try, a visual indicator will pop-up to show them the element's place in the table for a few seconds.

We need to A/B test whether to enable this setting by default or not. Based on my personal preference, I think it would be a good idea to enable it by default.

Add a mode to the Periodic Table Quiz to help people associate the elements' names with their respective symbols and vice versa

Depending on the mode, we will display different information as hints (don't confuse with #36):

1. Learn to place elements by their symbol and atomic number. This is the single available mode in the periodic table right now.
2. Place elements by their symbol, name, and atomic number. This would also serve as a review if the person already completed the first mode (1). We would give the user the symbol and then display the names and atomic numbers on the table.
3. Place elements by their symbol, name, and atomic number (Reversed). Same as the second mode (2), but we would give the user the name and then display the symbols and atomic numbers on the table.

We'll probably need to figure out a more intuitive way for users to select the mode. For now, we should add an option to the quiz settings.

ElementPicker search by multi-digit atomic number shows result from first digit

Describe the bug
When searching for an element in ElementPicker by the atomic number, the results can get out of sync with the search field value.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://atom.horuslugo.com/mass-calculator
2. Click on Add element
3. Type 25
4. See Helium

Expected behavior
It should find Manganese.

Screenshots

Desktop (please complete the following information):

• OS: Win 10
• Browser: Firefox
• Version: 87

Additional context

Discovered when adding a test in OpenSourceRaidGuild#43 and currently the failing test is skipped => we need to unskip the test when fixed.

Use CSS Custom Properties for theming

[TBD]

Replace the favicon and manifest icons with the new logo

The new logo can be found at resources/logo/logo.svg and resources/logo/web/maskable.png.

Current icons can be found at public/icons/*.png and also public/favicon.ico.

Also, we need to add a maskable version.

[i18n] Help needed to make Atom available in new languages

Hi!

Atom is currently available in English, Spanish, Rumanian and German thanks to its users' contributions. We would love to have the app translated to reach students who don't know any supported languages.

For that, we have created a Crowdin project. Crowdin is a tool that provides translators with an app where you can translate the texts that can be found inside Atom. Those translations are then reviewed to decide whether to include them in the app or not.

Right now, there are like 220 texts that need a translation. Most of them are the periodic table elements, and there is no in-depth learning material yet, so the texts are not that long and won't take much time to translate (in fact, I think we could use Google Translate for a big chunk of the strings)

It's important to note that a new language will only be available after reaching a certain translation percentage (85%). That means that even if you contribute by translating a few strings, those may not be available until more people contribute and the language reaches the 85% required.

Languages available in Atom:

• English. 100%
• Spanish. 100%
• Rumanian. 100%
• German. 100%

Languages that need help right now:

• French. 0%
• Italian. 0%
• Portuguese. 0%
• Hindi. 0%

Note that if you want to contribute to a language that is not listed here, we can add support if you reply to this issue.

Thank you ❤️

Refactor Class Components to use Hooks

There are many components in the app that use React Classes instead of Hooks, and it would be best to migrate all of the components to use hooks before implementing new features.

There are two kinds of components in the app:

• Stateful components. These will require you to use the new hooks (useState, useEffect...). Migrating them may be tricky in some cases because there are some bad practices in existing components.

• Stateless components. If you're new to React, start with these as they will only require you to use a function instead of a class.

Please a Pull Request for each component in case you decide to refactor more than one.

P.S.: Feel free to ask for guidance if you find trouble.