Increase tide level in hexagon

[sheleoni]

High-level Idea

• hexagon tide levels ranges from 0 to 5. 0 means no red tide in the hexagon, 5 means that the hexagon is fully filled by the tide's color (a red hexagon) ※ a fully filled hexagon should make the hexagon clickable and allow the user to add one hiragana icecream - but this is out of scope for the current issue, so just console.log "hexagon [character] is now fully filled. click to redeem your ice cream!"

• each "one-hit correct attempts" (i.e. the user has not selected any incorrect attempts for that question) will trigger a +1 level increase in the hexagon.

Implementation

Braindump

UI

• change CSS to accomodate stage 0 to 5 tide level displays

Logic

New data objects to make

• onStreak.js object data
• tideLevel.js object data

New states to create

• tideLevel, setTideLevel for current question/answer's tide level

New functions to make

// answer is equivalent to the character shown in the current question.
//  I'm using "answer" here for readability.

function increaseTideLevel (answer, input) {
 if (!onStreak[answer]) { return }
 setTideLevel(tideLevel[answer] + 1) 
}