Possible option for user text input (creating our own)

[elimelt]

Keep in mind that everything I am writing here (except using arrow functions) is just a suggestion. If you run into issues with anything I suggested, feel free to find your own workaround. If you're stuck, post a comment with your progress and the roadblock.

Create the following React.js components using arrow functions:

Letter :=

• Must be passed some form of character id so we can identify what letter it is.
• Decide on the appropriate wrapper HTML element for the Letter components to display a Letter as a single character corresponding to the character id. Might have to experiment with CSS for this, I honestly don't know.
• Will have three possible states: on, off, wrong. On is a letter that has already been typed, off is a letter that has yet to be typed, wrong is the state of all letters up to the current cursor position in a word for which you've made a mistake. This is not taking into account the logic of the user typing or backspacing to fix their mistake, for that will be handled outside of these components.
• For each state, there is a corresponding style that indicates a letters current state.
• Consider all cases (even a space for example).

Word :=

• Passed a string value corresponding to the word.
• Should be passed an array of state values for each character in the string value that corresponds to the Letter components.
• Is made up of a combination of Letter components combined in-line with each other. Higher order functions (map) should be used to generate the Letter components.
• Decide on the appropriate wrapper HTML element for the Word components to display a Word as a single word corresponding to the passed string. Might have to experiment with CSS for this, I honestly don't know.
• Consider all cases (even a space for example).

Line :=

• Passed an array of strings corresponding to all of the words and spaces in a line of text, and a 2d array of state values for each character in each word. Ex: "please leave me alone" ====> [ "please", " ", "leave", " ", "me", " ", "alone" ] Ex: [ [ 1, 1, 1, 1, 1, 1 ], [ 1 ], [ 1, 1, 1, 0, 0] , [ 0 ], [ 0, 0 ], [ 0 ], [ 0, 0, 0, 0, 0 ] ] ====> please lea-----------
• Made out of a bunch of Word components, you get the idea. Must stack vertically.

TextBox :=

• Component containing a collection of Line components. Each line component will likely have a key attribute because we are rendering a collection of Line components. One possibility is to pass TextBox a value corresponding to the active Line component, but for now lets not worry about it and try to just display text.
• Further consideration is needed once we start implementing user interaction though.

[elimelt]

Implemented one possible structure of the component. Still need to finish the function that is triggered when users type, but I broke it down in comments of the different cases and discussed exactly what needed to be done.

This is a pretty approachable issue to tackle right now if anyone wants to jump in and finish what I started!

I named the component "TextArea1" so that I wouldn't have to delete the stuff Rasmus and I have already worked on.

[elimelt]

Resolved! We decided to stick with this implementation.