|
1 | 1 | import*asReactfrom'react' |
| 2 | +importMarkdownfrom'../../../components/Markdown' |
2 | 3 | importButtonfrom'../../../components/Button' |
3 | 4 |
|
| 5 | +conststyles={ |
| 6 | +hints:{ |
| 7 | +marginTop:'1rem', |
| 8 | +}, |
| 9 | +hintList:{ |
| 10 | +marginBottom:'0.5rem', |
| 11 | +}, |
| 12 | +hint:{ |
| 13 | +margin:'0.5rem 0', |
| 14 | +backgroundColor:'rgba(255,229,100,0.3)', |
| 15 | +borderLeft:'#ffe564', |
| 16 | +padding:'0.5rem', |
| 17 | +}, |
| 18 | +} |
| 19 | + |
4 | 20 | interfaceProps{ |
5 | 21 | hints:string[] |
6 | 22 | } |
7 | 23 |
|
8 | 24 | constHints=(props:Props)=>{ |
9 | | -const[hintIndex,setHintIndex]=React.useState(0) |
| 25 | +const[hintIndex,setHintIndex]=React.useState(-1) |
10 | 26 | constisFinalHint=props.hints.length-1===hintIndex |
11 | | -console.log(hintIndex) |
12 | 27 | constnextHint=()=>{ |
13 | | -console.log(hintIndex) |
14 | 28 | if(!isFinalHint){ |
15 | 29 | setHintIndex((currentHintIndex)=>currentHintIndex+1) |
16 | 30 | } |
17 | 31 | } |
18 | 32 | return( |
19 | | -<div> |
20 | | -{props.hints.map((h,i)=>{ |
21 | | -returni<=hintIndex ?( |
22 | | -<divkey={i}style={{backgroundColor:'red'}}> |
23 | | -{h} |
24 | | -</div> |
25 | | -) :null |
26 | | -})} |
| 33 | +<divstyle={styles.hints}> |
| 34 | +<divstyle={styles.hintList}> |
| 35 | +{props.hints.map((h,i)=>{ |
| 36 | +returni<=hintIndex ?( |
| 37 | +<divkey={i}style={styles.hint}> |
| 38 | +<Markdown>{h}</Markdown> |
| 39 | +</div> |
| 40 | +) :null |
| 41 | +})} |
| 42 | +</div> |
27 | 43 | <ButtononClick={nextHint}disabled={isFinalHint}> |
28 | | -Next Hint |
| 44 | +Get A Hint |
29 | 45 | </Button> |
30 | 46 | </div> |
31 | 47 | ) |
|