Port the Nutrition game from Hunger Games v1

[teolemon]

Port the Nutrition game from Hunger Games v1
http://world.openfoodfacts.org/hunger-game?type=nutrition
https://github.com/openfoodfacts/openfoodfacts-hungergames-react/tree/master/src/NutritionValues

[alexfauquette]

@teolemon nutrition game is available (hidden, but available)
https://hunger.openfoodfacts.org/nutritions

I'm looking to incorporate the quantity extractor in PR #196 but I'm not fully satisfied with the image zoom library

[alexfauquette]

For now, we have two versions of the game:

https://hunger.openfoodfacts.org/nutritions
https://hunger.openfoodfacts.org/nutritionInteractive

In my opinion, the most important is to finish (make public) the first one.

Missing elements :

• a way to manipulate the image. We can look at vue-advanced-cropper and remove the cropper part
• like on the openfoodfact's website table should only contain the most common nutrients (and a search field to add more)
• as a user I should be able to move forward/backward in the nutriment table by using the down/up keys (no need to use the mouse)
• I want to see the nutrient name in my language (from settings) and in any specific language (the product language) because I always forget if "Eiweiß" means protein or fiber (it's protein).

Should we check that user are connected for this game ?

[c6z3h]

hi @alexfauquette , just checking some details about Missing elements before trying the issue:

1. How would you want to manipulate the image? (image.png is what I'm seeing now)
2. Do you have a link/picture of the table you refer to?
3. It seems this function to move up and down with keys is possible. Has this been completed?
4. Is this referring to an update in the key-value mappings in i18n .json files?

Other stuff:

1. I know Chinese! Should I complete the i18n > zh.json with the Chinese words? (see image.png)
2. Would you like me to update the nutrition game unlabelled terms like nutrition.present? (see image.png)

[alexfauquette]

@c6z3h

• I thought about allowing users to zoom in on the image

• For the example go on openfoodfact.org create an account and try to edit a product. There is a field to fill the nutritional table. As you can see, only the main nutriment is present, and there is a free input allowing you to search for a missing nutriment
  

• key down/up is not working. If you are filling a value, pressing key down does not move to the input bellow. What is currently available is pressing Tab to move to the next field

• Yes and no. The i18n will give you the translation of nutrients. You can know the user language thanks to the settings, you can now the product language thanks to the product data. The idea would be to display both the product and the user language translation in the grid

For translation, the only file to modify are 'common.json' and 'en.json'. Other translations are managed by crowding at this URL https://crowdin.com/translate/openfoodfacts/1942