112 lines
3.5 KiB
TypeScript
112 lines
3.5 KiB
TypeScript
import { useState } from 'react'
|
||
import './App.css'
|
||
import { Badge, Button, ListGroup } from 'react-bootstrap';
|
||
import { initials, finales } from './data';
|
||
import { BtnColor, Tone } from './types';
|
||
import { strings } from './strings';
|
||
import { useStateContext } from './store';
|
||
import { Params } from './params';
|
||
import { ActionType, ToggleType } from './reducer';
|
||
import { ButtonSet } from './buttons';
|
||
|
||
enum Status {params, plaing, plaied, showlist}
|
||
|
||
function App() {
|
||
|
||
const { state, dispatch } = useStateContext();
|
||
|
||
//---------------- to found state
|
||
const isFound = ():boolean => state.foundSyllables!.length > 0
|
||
const [plaingNo, setPlaingNo ] = useState(0)
|
||
|
||
const [ status, setStatus ] = useState(Status.params)
|
||
|
||
const beginDictation = (): void => {
|
||
dispatch({ type: ActionType.refreshPlayList })
|
||
playDictation2(state.randomTones!)
|
||
}
|
||
|
||
const playDictation2 = (randomTones: Tone[]) => {
|
||
if ( randomTones.length == 0 ) return
|
||
let audios:HTMLAudioElement[] = []
|
||
randomTones.forEach(element => {
|
||
audios = [...audios, new Audio(`/src/assets/audio/${element.tone}.mp3`) ]
|
||
});
|
||
console.debug(audios)
|
||
if ( audios.length == 0 ) return
|
||
for(let x=0; x<audios.length-1;x++)
|
||
{
|
||
audios[x].onended = () => setTimeout( () => {
|
||
let pno = x+2
|
||
setPlaingNo(pno)
|
||
audios[x+1].play()
|
||
}, 1000*state.sylPause! ) ;
|
||
}
|
||
audios[audios.length-1].onended = () => setStatus(Status.plaied)
|
||
setStatus(Status.plaing)
|
||
setPlaingNo(1)
|
||
audios[0].play()
|
||
}
|
||
|
||
const renderRandomTones2 = () => {
|
||
return state.randomTones!.map( (ton, i) => { return <span key={i}><Badge bg="success" pill>{ton.caption}</Badge>{' '}</span> })
|
||
}
|
||
|
||
const refresh = () => {
|
||
dispatch({ type: ActionType.refreshPlayList })
|
||
setStatus(Status.params)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<h1>Диктант pīnyīn</h1>
|
||
<ListGroup>
|
||
<ListGroup.Item disabled={status != Status.params}>
|
||
<h2>{strings.selectInitiales}</h2>
|
||
<ButtonSet source={initials} color={BtnColor.blue} toggle={ToggleType.init}/>
|
||
</ListGroup.Item>
|
||
|
||
<ListGroup.Item disabled={status != Status.params}>
|
||
<h2>{strings.selectFinales}</h2>
|
||
<ButtonSet source={finales} color={BtnColor.green} toggle={ToggleType.fin}/>
|
||
</ListGroup.Item>
|
||
|
||
<ListGroup.Item disabled={status != Status.params}>
|
||
<h2>{strings.params}</h2>
|
||
<Params/>
|
||
</ListGroup.Item>
|
||
<ListGroup.Item>
|
||
{ status == Status.params &&
|
||
<>
|
||
Выбрано {state.initiales!.length} инициалей, {state.finales!.length} финалей, найдено {state.foundSyllables!.length} слогов, { state.foundTones!.length } тонов ,
|
||
<br/>
|
||
<Button variant={isFound() ? "success" : "secondary"} size="lg" onClick={()=>beginDictation()} disabled={!isFound()}>
|
||
{isFound() ? "Начать диктант!" : "Выберите инициали и финали" }
|
||
</Button>
|
||
</>
|
||
}
|
||
{
|
||
status == Status.plaing &&
|
||
<h1>Воспроизводится...{plaingNo}</h1>
|
||
}
|
||
{
|
||
status == Status.plaied &&
|
||
<Button variant="success" onClick={()=>setStatus(Status.showlist)}>Показать слоги</Button>
|
||
}
|
||
{
|
||
status == Status.showlist &&
|
||
<>
|
||
<div>{renderRandomTones2()}</div>
|
||
<br/>
|
||
<Button variant="success" onClick={()=>refresh()}>В начало</Button>
|
||
</>
|
||
}
|
||
</ListGroup.Item>
|
||
</ListGroup>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default App
|
||
|