const A0 = - 12 ; function textRepr ( slot ) { function hex ( v ) { return Math . floor ( v * 255 ) . toString ( 16 ) . toUpperCase ( ) . padStart ( 2 , '0' ) ; } function noteName ( v ) { switch ( v ) { case "---" : return "---" ; case "cont" : return "&nbsp;&nbsp;&nbsp;" ; default : return [ 'A-' , 'A#' , 'B-' , 'C-' , 'C#' , 'D-' , 'D#' , 'E-' , 'F-' , 'F#' , 'G-' , 'G#' ] [ ( v - A0 ) % 12 ] + Math . floor ( ( v - A0 ) / 12 ) ; } } if ( "drum" in slot ) { let string = slot . drum ; if ( slot . vel ) string += " v" + hex ( slot . vel ) ; return string ; } else { let string = noteName ( slot . note ) ; if ( slot . fx && slot . fx . pulseWidth ) string += " w" + hex ( slot . fx . pulseWidth ) ; if ( slot . fx && slot . fx . glide ) string += " g" + hex ( slot . fx . glide ) ; if ( slot . vel ) string += " v" + hex ( slot . vel ) ; return string ; } } function PatternDisplay ( display ) { function setPatterns ( newPats , saveString ) { display . innerHTML = "<div class='header'>Pattern ID: <a href='?" + saveString + "' class='save-string'>" + saveString + "</a></div>" ; const container = document . createElement ( "div" ) ; container . classList . add ( "columns" ) ; display . append ( container ) ; function add ( pattern , index ) { const pDisplay = document . createElement ( "code" ) ; pDisplay . innerHTML = "<h3>" + ( index === 4 ? "*" : "⎍" ) + ( index + 1 ) + "</h3>" + pattern . map ( ( x , i ) => "<div class='note' data-index='" + i + "'>" + textRepr ( x ) + "</div>" ) . join ( "" ) ; container . append ( pDisplay ) ; } newPats . forEach ( ( p , i ) => add ( p , i ) ) ; } const patternDisplayStyles = document . createElement ( "style" ) ; patternDisplayStyles . setAttribute ( "type" , "text/css" ) ; document . body . append ( patternDisplayStyles ) ; const css = patternDisplayStyles . sheet as CSSStyleSheet ; function highlightRow ( index ) { if ( css . rules . length > 0 ) { css . deleteRule ( 0 ) ; } css . insertRule ( `.note[data-index='${ index }'] { background-color: #339933; color: white; font-weight: bold }` ) ; } return { setPatterns , highlightRow } ; } export default PatternDisplay ;