|
|
|
@ -27,6 +27,8 @@ export default function NumPad({onSend, disabled, type, clientId}){ |
|
|
|
const refInput=useRef(); |
|
|
|
const refInput=useRef(); |
|
|
|
const refType=useRef(type); |
|
|
|
const refType=useRef(type); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const refLatestInput=useRef(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const setInput=(valueFunc)=>{ |
|
|
|
const setInput=(valueFunc)=>{ |
|
|
|
if(typeof valueFunc==='function'){ |
|
|
|
if(typeof valueFunc==='function'){ |
|
|
|
@ -38,6 +40,12 @@ export default function NumPad({onSend, disabled, type, clientId}){ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function onAudioEnd(e){ |
|
|
|
|
|
|
|
if(refLatestInput.current){ |
|
|
|
|
|
|
|
onSend(refLatestInput.current); |
|
|
|
|
|
|
|
refLatestInput.current=null; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
const refAudio=useRef([]); |
|
|
|
const refAudio=useRef([]); |
|
|
|
|
|
|
|
|
|
|
|
function onkeydown(e){ |
|
|
|
function onkeydown(e){ |
|
|
|
@ -56,7 +64,8 @@ export default function NumPad({onSend, disabled, type, clientId}){ |
|
|
|
|
|
|
|
|
|
|
|
case NUMPAD_TYPE.USERID: |
|
|
|
case NUMPAD_TYPE.USERID: |
|
|
|
if(num>=1 && num<=24){ |
|
|
|
if(num>=1 && num<=24){ |
|
|
|
onSend(num); |
|
|
|
// onSend(num); |
|
|
|
|
|
|
|
refLatestInput.current=num; |
|
|
|
refAudio.current[KEY_ENTER]?.play(); |
|
|
|
refAudio.current[KEY_ENTER]?.play(); |
|
|
|
}else{ |
|
|
|
}else{ |
|
|
|
refAudio.current['error']?.play(); |
|
|
|
refAudio.current['error']?.play(); |
|
|
|
@ -64,16 +73,21 @@ export default function NumPad({onSend, disabled, type, clientId}){ |
|
|
|
break; |
|
|
|
break; |
|
|
|
case NUMPAD_TYPE.PASSWORD: |
|
|
|
case NUMPAD_TYPE.PASSWORD: |
|
|
|
if(refInput.current.length==4){ |
|
|
|
if(refInput.current.length==4){ |
|
|
|
onSend(refInput.current); |
|
|
|
// onSend(refInput.current); |
|
|
|
refAudio.current[KEY_ENTER]?.play(); |
|
|
|
refLatestInput.current=refInput.current; |
|
|
|
|
|
|
|
// refAudio.current[KEY_ENTER]?.play(); |
|
|
|
|
|
|
|
refAudio.current['end']?.play(); |
|
|
|
}else{ |
|
|
|
}else{ |
|
|
|
refAudio.current['error']?.play(); |
|
|
|
refAudio.current['error']?.play(); |
|
|
|
} |
|
|
|
} |
|
|
|
break; |
|
|
|
break; |
|
|
|
case NUMPAD_TYPE.CHOICE: |
|
|
|
case NUMPAD_TYPE.CHOICE: |
|
|
|
if(num==1 || num==9){ |
|
|
|
if(num==1 || num==9){ |
|
|
|
onSend(num); |
|
|
|
// onSend(num); |
|
|
|
refAudio.current[KEY_ENTER]?.play(); |
|
|
|
refLatestInput.current=num; |
|
|
|
|
|
|
|
// refAudio.current[KEY_ENTER]?.play(); |
|
|
|
|
|
|
|
if(num==1) refAudio.current['save']?.play(); |
|
|
|
|
|
|
|
if(num==9) refAudio.current['discard']?.play(); |
|
|
|
}else{ |
|
|
|
}else{ |
|
|
|
refAudio.current['error']?.play(); |
|
|
|
refAudio.current['error']?.play(); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -122,7 +136,9 @@ export default function NumPad({onSend, disabled, type, clientId}){ |
|
|
|
'1','2','3', |
|
|
|
'1','2','3', |
|
|
|
'4','5','6', |
|
|
|
'4','5','6', |
|
|
|
'7','8','9', |
|
|
|
'7','8','9', |
|
|
|
'0',KEY_ENTER,KEY_BACKSPACE,'error' |
|
|
|
'0',KEY_ENTER,KEY_BACKSPACE,'error', |
|
|
|
|
|
|
|
'save','discard', |
|
|
|
|
|
|
|
'end', |
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
refAudio.current = {}; |
|
|
|
refAudio.current = {}; |
|
|
|
@ -131,10 +147,28 @@ export default function NumPad({onSend, disabled, type, clientId}){ |
|
|
|
refAudio.current[keys[k]]=new Audio(`assets/number/${keys[k]}.mp3`); |
|
|
|
refAudio.current[keys[k]]=new Audio(`assets/number/${keys[k]}.mp3`); |
|
|
|
}else if(keys[k]===KEY_ENTER){ |
|
|
|
}else if(keys[k]===KEY_ENTER){ |
|
|
|
refAudio.current[keys[k]]=new Audio(`assets/sfx/sfx-02.mp3`); |
|
|
|
refAudio.current[keys[k]]=new Audio(`assets/sfx/sfx-02.mp3`); |
|
|
|
|
|
|
|
refAudio.current[keys[k]].addEventListener('ended', onAudioEnd); |
|
|
|
}else if(keys[k]===KEY_BACKSPACE){ |
|
|
|
}else if(keys[k]===KEY_BACKSPACE){ |
|
|
|
refAudio.current[keys[k]]=new Audio(`assets/sfx/sfx-01.mp3`); |
|
|
|
refAudio.current[keys[k]]=new Audio(`assets/sfx/sfx-01.mp3`); |
|
|
|
}else if(keys[k]==='error'){ |
|
|
|
}else if(keys[k]==='error'){ |
|
|
|
refAudio.current[keys[k]]=new Audio(`assets/sfx/sfx-01.mp3`); |
|
|
|
refAudio.current[keys[k]]=new Audio(`assets/sfx/sfx-01.mp3`); |
|
|
|
|
|
|
|
}else if(keys[k]==='save'){ |
|
|
|
|
|
|
|
refAudio.current[keys[k]]=new Audio(`assets/sfx/sfx-09.mp3`); |
|
|
|
|
|
|
|
refAudio.current[keys[k]].addEventListener('ended', onAudioEnd); |
|
|
|
|
|
|
|
}else if(keys[k]==='discard'){ |
|
|
|
|
|
|
|
refAudio.current[keys[k]]=new Audio(`assets/sfx/sfx-10.mp3`); |
|
|
|
|
|
|
|
refAudio.current[keys[k]].addEventListener('ended', onAudioEnd); |
|
|
|
|
|
|
|
}else if(keys[k]==='end'){ |
|
|
|
|
|
|
|
refAudio.current[keys[k]]=new Audio(`assets/sfx/sfx-11.mp3`); |
|
|
|
|
|
|
|
refAudio.current[keys[k]].addEventListener('ended', onAudioEnd); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
|
|
|
|
for(var k in keys){ |
|
|
|
|
|
|
|
if(refAudio.current[keys[k]]){ |
|
|
|
|
|
|
|
refAudio.current[keys[k]].removeEventListener('ended', onAudioEnd); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|