@@ -20,13 +20,12 @@ function toPercentage(realLevel) {
20
20
21
21
function TeaLevel ( {
22
22
lastOperationDuration, speed, startTeaLevel, estimatedTeaLevel,
23
- changeStartTeaLevel, changeEstimatedTeaLevel, changeSpeed, lastTeaLevel
23
+ changeStartTeaLevel, changeEstimatedTeaLevel, changeSpeed, lastTeaLevel,
24
24
} ) {
25
25
const [ calcSpeed , setCalcSpeed ] = useState ( speed ) ;
26
26
// update the estimated level if speed or duration changes
27
27
useEffect ( ( ) => {
28
28
const estimatedLevel = startTeaLevel + speed * lastOperationDuration / 1000 ;
29
- console . log ( startTeaLevel , speed , lastOperationDuration , estimatedLevel ) ;
30
29
changeEstimatedTeaLevel ( estimatedLevel ) ;
31
30
} , [ lastOperationDuration , speed , startTeaLevel , changeEstimatedTeaLevel ] ) ;
32
31
@@ -37,9 +36,10 @@ function TeaLevel({
37
36
const clickedPercentage = ( clickedPosition / height ) * 100 ;
38
37
const newLevel = toPercentage ( clickedPercentage ) ;
39
38
// limit the new level to the range [0, 100]
40
- changeStartTeaLevel ( Math . min ( Math . max ( newLevel , 0 ) , 100 ) ) ;
39
+ const level = Math . min ( Math . max ( newLevel , 0 ) , 100 ) ;
40
+ changeStartTeaLevel ( level ) ;
41
41
// find speed
42
- const newSpeed = ( newLevel - lastTeaLevel ) / ( lastOperationDuration / 1000 ) ;
42
+ const newSpeed = ( level - lastTeaLevel ) / ( lastOperationDuration / 1000 ) ;
43
43
setCalcSpeed ( newSpeed ) ;
44
44
} ;
45
45
@@ -56,8 +56,17 @@ function TeaLevel({
56
56
< img src = { cup } alt = "Cup" className = "cup-image" draggable = "false"
57
57
onClick = { handleCupClick }
58
58
/>
59
- < div className = "tea-level" style = { { bottom : `${ toRealLevel ( startTeaLevel ) } %` } } > </ div >
60
- < div className = "est-tea-level" style = { { bottom : `${ toRealLevel ( estimatedTeaLevel ) } %` } } > </ div >
59
+ < div className = "tea-level" style = { { bottom : `${ toRealLevel ( startTeaLevel ) } %` } } >
60
+ { startTeaLevel . toFixed ( 0 ) } %
61
+ </ div >
62
+
63
+ < div className = "est-tea-level" style = { { bottom : `${ toRealLevel ( estimatedTeaLevel ) } %` } } >
64
+ { estimatedTeaLevel . toFixed ( 0 ) } %
65
+ </ div >
66
+
67
+ < div className = "prev-tea-level" style = { { bottom : `${ toRealLevel ( lastTeaLevel ) } %` } } >
68
+ { lastTeaLevel . toFixed ( 0 ) } %
69
+ </ div >
61
70
</ div >
62
71
</ div >
63
72
</ div >
@@ -67,7 +76,7 @@ function TeaLevel({
67
76
< p > last tea level: { lastTeaLevel . toFixed ( 2 ) } %</ p >
68
77
</ div >
69
78
< div >
70
- < input type = "text" value = { calcSpeed . toFixed ( 2 ) } readOnly />
79
+ < input type = "number" step = "0.01" value = { calcSpeed . toFixed ( 2 ) } />
71
80
< button onClick = { onSpeedSet } > Set Speed</ button >
72
81
</ div >
73
82
</ >
0 commit comments