krislamote / dyscalc

React app to allow children with dyscalculia to practice sums up to 10 or 20

dyscalc

React app to allow children with dyscalculia to practice sums up to 10 or 20

How to play (locally)

1. clone the repository locally

   git clone https://github.com/KrisLamote/dyscalc.git

2. Install the packages & launch the app

   yarn install
   yarn start
   

3. Have fun!

How to contribute

0. star this project ;)

1. If you'd like to contribute, go through the issues - and first ask to be assigned to a specific issue. Obviously you can report bugs or make suggestions for new features.

2. Fork the repository (top right hand corner) This will add a fork to your own repositories

3. Clone your fork on your local machine with ssh (or https)

   git clone https://github.com/<your-user>/dyscalc.git

4. Make a feature branch for the issue

   git checkout -b some-feature-branch

5. Install the packages & launch the application (you'll also need to do this whenever you pull changes to the yarn.lock file)

   yarn install
   yarn start
   

6. Commit & push your updates

   git commit -m 'some useful message about what you did'
   git push origin some-feature-branch
   

7. Create a Pull Request From your GitHub profile page you can launch a pull request

THANK YOU!

dyscalc's Issues

bug: when unselecting a target, the board cells can still be marked/unmarked

Extract Targets, Verify & Reset components from App

Preferably to be picked up by a react beginner

toggle verification

When clicking the Verify button, have the entire board verify whether the shown sum actually matches the selected target.

• update Verify to support on-off state (App.scss needs updates for this)
• Keep the verify state at App.js & pass it through to the Cells
• Update Cell to be able to show whether it's correct of not depending in the Verify state

Reset interaction

When Reset is clicked the board & targets should be reinitialised.

• convert const targets = pickSome(/* ... */); with useState
• pass the setTargets function to Reset
• update Reset with an onClick

depending on the status of #18 you may have to reset the target as well, probably best to wrap both at the level of App

Verification shows errors on all boxes when turned on

Current behavior:
When verification is turned on. All the boxes are shown red whether or not a selection is made yet.

Expected:
Only the INVALID SELECTIONS should be marked as invalid when the verification/validation is turned on.

travis configuration

Add a travis configuration as appropriate to a simple react app. This should at least run the tests. Any other suggestions are -as always- welcome

Add intl basics

• add react-intl package
• add FormattedMessages for the verify & reset buttons
• add translations for your native language

(will create a separate issue for a language switch)

Extract Board, Row & Cell components out of App

• Cell
• Row (containing Cells)
• Board (containing Rows)

github link

add github svg on the right side of the header

options: responsiveness

improve the responsive qualities of the options overlay

for smaller devices this probably involves having:

• the overlay in full width
• option label & value break up over different rows

Bug: pt-br (and pt-pt) interpreted as pt, which does not have translations

Having only the main language translated is totally fine. It's just that it's not applied for any variation now

options: toggle 10 | 20

Enable the Upto 10 | 20 toggle button

• keep the state in App
• use it to generate the targets

Bonus useReducer so we can handle the 3 different options (upto, targets & operation)

Option: enable subtractions

Basic react app with example markup

• Basic react app with following packages: prop-types, node-sass, classnames.
• Boilerplate react stuff removed and replaced with a sample non-functional app

object-path: resolve dependabot security warning

Remediation

Upgrade object-path to version 0.11.5 or later. For example:

object-path@^0.11.5:
  version "0.11.5"

Always verify the validity and compatibility of suggestions with your codebase.

Details

GHSA-cwx2-736x-mf6w
high severity
Vulnerable versions: < 0.11.5
Patched version: 0.11.5
Impact
A prototype pollution vulnerability has been found in object-path <= 0.11.4 affecting the set() method. The vulnerability is limited to the includeInheritedProps mode (if version >= 0.11.0 is used), which has to be explicitly enabled by creating a new instance of object-path and setting the option includeInheritedProps: true, or by using the default withInheritedProps instance. The default operating mode is not affected by the vulnerability if version >= 0.11.0 is used. Any usage of set() in versions < 0.11.0 is vulnerable.

Patches
Upgrade to version >= 0.11.5

Node-forge: resolve dependabot security warning

Remediation

Upgrade node-forge to version 0.10.0 or later. For example:

node-forge@^0.10.0:
  version "0.10.0"

Always verify the validity and compatibility of suggestions with your codebase.

Details

CVE-2020-7720
high severity
Vulnerable versions: < 0.10.0
Patched version: 0.10.0
The package node-forge before 0.10.0 is vulnerable to Prototype Pollution via the util.setPath function. Note: Version 0.10.0 is a breaking change removing the vulnerable functions.

Apply Transition when Resetting

Currently there is only a visual transition when the board is initially rendered. When you do a reset, the fact that the board is updated isn't very clear (well if you haven't selected anything)

bug: when a target is active reset doesnt reset the selected target

similar to #72

Toggle target

Using the useState hook, update Targets to select a target.

• Be sure to check App.scss for the right classes
• use classnames package to handle const classes = classNames(/* conditions */);
• initially no target cell is selected
• clicking a cell makes that the selected cell
• clicking a selected cell, unselects the cell

keep 'track' of board completeness show some success message

When all cells are assigned correctly, show some kind of success message, with an option to start over (i.e. reset)

Base app styling

Add app specific design (e.g based on material ui), priorities

• general layout (for a menu and the board)
• all board cells should have equal height & width, with a workable/readable min value
• responsive

Bug Verify ON/OFF (translations)

The ON/OFF trailer of the button was done before translations were added. Currently it just adds ON/OFF behind the 'VERIFY' translation.

Changing this to have the menu.verify.on & menu.verify.off labels translated should fix this

Intl next steps

• use json files for translations
• move provider outside App

Discussion topics

This is a follow on for #6 - for the time being simply gathering some idea's opinions

• overlooked the js translations I prefer them to be json files
• I actually liked the idea of having the Provider outside App as it simply moves a concern from a file that already has a few different responsibilities

update react-scripts to v3.4.1

Transition POC for Cell

Add an animation with the react-transition-group package for Cells. Can be anything you want, but beware the base look & feel is in the works by Bilal (issue#1) - so this may require some iterations along with that.

automatic formatting or format checking (prettier | travis)

Any suggestions for improving the js|jsx|json formatting in this project. I continuously keep auto-formatting files as they come in through various PRs. I have slightly different settings between 2 work stations, so this even happens in my own contributions.

Any suggestions are welcome.

Reorganise for better responsive qualities

Currently the layout breaks on smaller devices.. basic suggestion as follows

• 1st row: Header
• 2nd row: Board & Targets each in their own col
• 3rd row: menu buttons Verify & Reset, right aligned so they Reset aligns with the targets while on a reasonable width device?

Toggle Cell

When a target is selected, the board cells can be toggle on/off depending on the selected target, giving them the corresponding target colour.

See 3c69371

• Pull up activeTarget & setActiveTarget to App
• pass them to Targets with appriate PropTypes
• pass activeTarget through to the Cells
• use useState to toggle a Cell
• use classnames to set/unset a target-${idx} class (double check with App.scss)

Test the helper functions with jest

Options button, toggles visibility of an options container

While the options are visible the Board, Targets, Verify & Reset are invisible. Maybe these can be wrapped in Game. The current options will be displayed in the options container and at the a 'back to game' button:

• up to 10 / up to 20
• sum / subtraction / both
• 3 / 4 / 5 targets

Probably a 3-state type of button could work. For the time being these could be disabled.

refactor scss & html

currently the board is rendered as 4 rows, each rendering 4 cells. In fact with the flexbox scss already in place this can be simplified wrapping all the cells with flex: 1 1 25%

• kick bootstrap out, add normalize
• refactor effect of removing bootstrap to flexbox
• refactor board

Option: Target 3-4-5

Helper functions for initializing the game board

Add a helper.js which can:

• generate a range based on start & stop params ( range(2, 7) => [2, 3, 4, 5, 6, 7] )
• pickOne(arr): returns a random element from the provided array
• pick(arr, amount): return an array of 'amount' elements from arr (no duplictes)

more translations

any PR for the following will be accepted:

• add any language of your choice to the translations
• incorporate and new ui element in the existing translations (e.g. the new Options button)

Please make sure that the PR does NOT close this issue :) Thanks

reorganize cells state

Currently the state of each cell is managed in the Cell component:

const [target, setTarget] = useState(pickOne(targets));
const [term, setTerm] = useState(pickOne(range(1, target - 1)));
const [selected, setSelected] = useState(empty);
// ...
 useEffect(() => {
        setTarget(pickOne(targets));
        setTerm(pickOne(range(1, target - 1)));
        setSelected({ idx: null, value: null });
        // ...
    }, [targets, target]);

It's probably better to have the entire board as an array in App or Board and have the (chosen) target and a (derived) term handled there. This will be mandatory for more easily determine whether the game is done or not (see #30 . Finally this will be a good way to avoid having to pass the options all the way down as well (see #29)

Option: enable operation 'both'

addition & subtract