How to add onKeyPress event listener to Document using velo

Ask the community
,
5

Would something like this work?

let audio = document . getElementById ( “myAudio” );

let audioLink =
“https://static.wixstatic.com/mp3/6f0e84_83df017b3f1f48cb8926339d3131854a.mp3” ;
const sequence = [
“arrowup” ,
“arrowup” ,
“arrowdown” ,
“arrowdown” ,
“arrowleft” ,
“arrowright” ,
“arrowleft” ,
“arrowright” ,
“b” ,
“a” ,
];
const keyStrokes = ;
let audioIsPlaying = false ;

const clearArray = () => {
while ( keyStrokes . length > 0 ) {
keyStrokes . pop ();
}
};
const compareKeyStrokesToSequence = () => {
let sequenceIsEqual = true ;
for ( let i = 0 ; i < 10 ; i ++ ) {
if ( keyStrokes[i ] !== sequence[i ]) {
sequenceIsEqual = false ;
break ;
}
}
if ( sequenceIsEqual ) {
audio . play ();
audioIsPlaying = true ;

setTimeout (()  =>  { 
  audioIsPlaying  =  false ; 
},  35000 );

}
clearArray ();
};

const keydownHandler = ( root ) => ( event ) => {
if ( audioIsPlaying === false ) {
if ( keyStrokes . length !== 9 ) {
keyStrokes . push ( event . key . toLowerCase ());
} else {
keyStrokes . push ( event . key . toLowerCase ());
compareKeyStrokesToSequence ();
}
console . log ( keyStrokes );
}
};
class customKeyPressElement extends HTMLElement {
constructor () {
super ();

document . addEventListener ( "keydown" ,  keydownHandler ( this ),  { 
  capture:  false , 
  passive:  true , 
});

}
}
customElements . define ( “key-press-element” , customKeyPressElement );