Conversation
| letter: key, | ||
| count: charsCount[key], | ||
| percent: (charsCount[key] / this.totalWrongCount * 100), | ||
| opacity: (charsCount[key] / this.totalWrongCount) |
| this.sortedIncorrectChars.push({ | ||
| letter: key, | ||
| count: charsCount[key], | ||
| percent: (charsCount[key] / this.totalWrongCount * 100), |
There was a problem hiding this comment.
We should save charsCount[key] / this.totalWrongCount to a variable since the value is used twice.
| isRunning: function() { | ||
| return (this.state === LevelStates.Running); | ||
| }, | ||
| incorrectCharsSorted: function() { |
There was a problem hiding this comment.
This method isn't named clearly. We use it to set and sort the this.sortedIncorrectChars.
A better name would be sortIncorrectChars since it's implying that the method does something vs returns something.
| incorrectCharsSorted: function() { | ||
| let charsCount = this.result.missed_chars_count; | ||
|
|
||
| for(let key in charsCount){ |
There was a problem hiding this comment.
We should assign charsCount[key] to a variable since it's used multiple times.
| function startWpmTimer() { | ||
| wpmTimer = $interval(function() { | ||
| if (scope.lesson.state === LevelStates.Post) { | ||
| scope.lesson.incorrectCharsSorted(); |
There was a problem hiding this comment.
I think we should do this after stopping the timer (on the line below). It's a higher priority and is cheap efficiency-wise.
| </div> | ||
|
|
||
| <div class="lesson-incorrect-chars"> | ||
| <div class="char" ng-repeat="char in lesson.sortedIncorrectChars track by $index"style="width:{{char.percent}}%; background:rgba(227, 69, 9, {{char.opacity}})"> |
There was a problem hiding this comment.
We should avoid setting such a specific color here as it is smelly and hard to find since it is so separated from our styles.
Instead we should find a way to accomplish the same result via more maintainable code. (ask me)
b9b56af to
139bd27
Compare
| letter: key, | ||
| count: incorrectCharCount, | ||
| percent: (incorrectPercent * 100), | ||
| opacity: incorrectPercent, |
There was a problem hiding this comment.
This shouldn't be in the model/data layer. It knows too much about what the UI does. Use char.percent in the UI to get the opacity
|
|
||
| $progress-color: #2bc252; | ||
|
|
||
| $stats-bar-color: red; |
There was a problem hiding this comment.
We should use the same red as wrong key. Maybe?
| </div> | ||
|
|
||
| <div class="lesson-incorrect-chars"> | ||
| <div class="char" ng-repeat="char in lesson.sortIncorrectChars track by $index"style="width:{{char.percent}}%;"> |
There was a problem hiding this comment.
lesson.incorrectChars not lesson.sortIncorrectChars
139bd27 to
453262f
Compare
cbf4c78 to
e89fcc0
Compare
mrap
left a comment
There was a problem hiding this comment.
Incorrect characters can render on multiple lines. Expected a single line.
|
|
||
| $progress-color: #2bc252; | ||
|
|
||
| $incorrect-char-color: #F44336!important; |
There was a problem hiding this comment.
We should be able to accomplish this without using !important. Avoid using !important at all costs, there is always a better way.
| position: relative; | ||
| } | ||
|
|
||
| .char-background{ |
| .pressable-key { | ||
| @extend .big-lettered; | ||
| @extend .blue-text; | ||
| color: #2196F3; |
User can see incorrect letters and ranked by color.