Update how wordsObject is populated to support a minimum number of words for timed tests so that the user doesn't run out of words to type. Limit the typing window to a maximum of 3 rows of words at any given time. Hoist word-row map and row offset calculations out of Cursor.jsx and up to parent since this info is now passed to Word.jsx as well. It is still passed to Cursor.jsx, which now stays centered on the second (middle) row for all cases unless the user is typing the very first row.
Bug Fixes / Minor Changes
Fix unnecessary spacing of null Word.jsx objects (resulting from margin on div) by making render of entire div conditional
Some debug info commented out that was causing odd behavior and crashes when certain state variables were updated
Add reset button that resets all relevant state variables in preparation for a repeat of the configured typing test
Why
See issue #14.
How
The word row map determines the row that any given word will be in based on the width of its characters and following spaces in comparison to the width of the typing window. The row offset provides the horizontal adjustment needed to bring the cursor back to the beginning of a row when moving from one row to the next (like a typical typing cursor moving in a text editor).
These two data structures are also used for Word.jsx now to determine for a given word, whether it was previously typed, is the one the user is currently typing, or is an upcoming word, is conditionally rendered depending on what row the user is on. By default, only 3 rows are shown, so only the row before and the row after the user's current row are considered.
Notes
Originally I attempted to have words added to wordsObject for a timed test on demand i.e. start with, say, 50 words, and if the test is ongoing and they're less than 25 words away from reaching the end of what's available in wordsObject, add more. This led to some odd behavior when updating things.
In the end, it seemed easier to just assume nobody can type faster than 250 WPM, so for a maximum of a 120 s (2 min) test, 500 words on average would be more than enough to assure the user doesn't run out of words as they complete a timed test.
Changes
Major Changes
Changes made to address issue #14.
Update how
wordsObjectis populated to support a minimum number of words for timed tests so that the user doesn't run out of words to type. Limit the typing window to a maximum of 3 rows of words at any given time. Hoist word-row map and row offset calculations out ofCursor.jsxand up to parent since this info is now passed toWord.jsxas well. It is still passed toCursor.jsx, which now stays centered on the second (middle) row for all cases unless the user is typing the very first row.Bug Fixes / Minor Changes
Word.jsxobjects (resulting from margin on div) by making render of entire div conditionalWhy
See issue #14.
How
The word row map determines the row that any given word will be in based on the width of its characters and following spaces in comparison to the width of the typing window. The row offset provides the horizontal adjustment needed to bring the cursor back to the beginning of a row when moving from one row to the next (like a typical typing cursor moving in a text editor).
These two data structures are also used for
Word.jsxnow to determine for a given word, whether it was previously typed, is the one the user is currently typing, or is an upcoming word, is conditionally rendered depending on what row the user is on. By default, only 3 rows are shown, so only the row before and the row after the user's current row are considered.Notes
Originally I attempted to have words added to
wordsObjectfor a timed test on demand i.e. start with, say, 50 words, and if the test is ongoing and they're less than 25 words away from reaching the end of what's available inwordsObject, add more. This led to some odd behavior when updating things.In the end, it seemed easier to just assume nobody can type faster than 250 WPM, so for a maximum of a 120 s (2 min) test, 500 words on average would be more than enough to assure the user doesn't run out of words as they complete a timed test.