class JSSCC { private renderer : CanvasRenderer ; private configRenderer : CanvasRenderer ; private song : Song ; private configOpen : boolean ; constructor ( ) { this . song = new Song ( ) ; var loader = new AssetLoader ( ) ; this . configOpen = false ; loader . onload . push ( ( ) => { var uiLoader = loader . clone ( ) ; uiLoader . add ( "assets/ui.json" ) ; this . renderer = new CanvasRenderer ( uiLoader , this . song ) ; uiLoader . onload . push ( ( ) => { this . addUIHitRegions ( ) ; } ) ; var configLoader = loader . clone ( ) ; configLoader . add ( "assets/config.json" ) ; this . configRenderer = new CanvasRenderer ( configLoader , this . song , "config" , false ) ; configLoader . onload . push ( ( ) => { this . addConfigHitRegions ( ) ; } ) ; } ) ; loader . add ( "assets/base.json" ) ; } public addUIHitRegions ( ) { for ( var i = 0 ; i < this . song . channels . length ; i ++ ) { var x = ( ( i % 16 ) * 36 ) + 58 ; var y = ( Math . floor ( i / 16 ) * 168 ) + 49 ; let chanIdx = i ; var region = this . renderer . autoRegion ( "channelMute" , false , undefined , x , y ) ; region . onmousedown . unshift ( ( x , y ) => { this . song . channels [ chanIdx ] . mute = ! this . song . channels [ chanIdx ] . mute ; this . renderer . drawChannel ( chanIdx , "channelMute" ) ; } ) ; } var positionSliderDG = this . renderer . loader . drawGroups [ "positionSlider" ] ; var bounds = < number [ ] > positionSliderDG [ positionSliderDG . length - 1 ] ; var slider = this . renderer . autoRegion ( "positionSlider" ) ; slider . cursor = "ew-resize" ; var slideEvent = ( e ) => { this . renderer . canvas . removeEventListener ( "mousemove" , moveSlider , false ) ; window . removeEventListener ( "mouseup" , slideEvent , false ) ; } ; var moveSlider = < EventListener > ( e ) => { var x = e . offsetX / this . renderer . scale ; if ( x < bounds [ 1 ] ) { this . song . position = 0 ; } else if ( x > ( bounds [ 1 ] + bounds [ 3 ] ) ) { this . song . position = 1 ; } else { this . song . position = ( x - bounds [ 1 ] ) / bounds [ 3 ] ; } this . renderer . drawDGroup ( "positionSlider" ) ; } ; slider . onmousedown . unshift ( ( x , y ) => { moveSlider ( < MouseEvent > { offsetX : x , offsetY : y } ) ; this . renderer . canvas . addEventListener ( "mousemove" , moveSlider , false ) ; window . addEventListener ( "mouseup" , slideEvent , false ) ; } ) ; this . renderer . autoRegion ( "repeat" ) . onmouseup . push ( ( x , y ) => { this . song . repeat = ! this . song . repeat ; Cookies . write ( "loop" , this . song . repeat . toString ( ) ) ; } ) ; this . renderer . autoRegion ( "play" ) . onmouseup . push ( ( x , y ) => { this . song . playState = PlayState . PLAYING ; } ) ; this . renderer . autoRegion ( "fastForward" ) . onmouseup . push ( ( x , y ) => { this . song . playState = PlayState . FASTFORWARD ; } ) ; this . renderer . autoRegion ( "stop" ) . onmouseup . push ( ( x , y ) => { this . song . playState = PlayState . STOPPED ; } ) ; this . renderer . autoRegion ( "pause" ) . onmouseup . push ( ( x , y ) => { this . song . playState = PlayState . PAUSED ; } ) ; this . renderer . autoRegion ( "export" ) ; this . renderer . autoRegion ( "config" , true , ( ) => { this . openConfig ( ) ; } ) ; var link = this . renderer . autoRegion ( "githubLink" , false ) ; link . cursor = "pointer" ; link . onmousedown . push ( ( ) => { window . location . assign ( "https://github.com/milkey-mouse/JSSCC" ) ; } ) ; link . onenter . push ( ( ) => { this . renderer . drawDGroup ( "githubLink" ) ; } ) ; link . onexit . push ( ( ) => { this . renderer . drawDGroup ( "githubLink" ) ; } ) ; } public addConfigHitRegions ( ) { var windowGroup = this . configRenderer . loader . drawGroups [ "preferencesWindow" ] ; var windowBounds = < number [ ] > windowGroup [ windowGroup . length - 1 ] . slice ( 1 ) ; var width = windowBounds [ 2 ] ; var height = windowBounds [ 3 ] ; var windowX = ( this . configRenderer . canvas . width - width ) / 2 ; var windowY = ( this . configRenderer . canvas . height - height ) / 2 ; var close = new HitRegion ( ( this . configRenderer . canvas . width + width ) / 2 - 23 , windowY + 5 , 16 , 15 ) ; close . onmousedown . push ( ( ) => { this . closeConfig ( ) ; } ) ; this . configRenderer . hitDetector . addHitRegion ( close , "close" ) ; this . configRenderer . autoRegion ( "preferencesColorPalette" , true , undefined , windowX , windowY ) ; } public openConfig ( ) { this . configOpen = true ; this . configRenderer . canvas . style . visibility = "visible" ; var newBG = AssetLoader . hexToRgb ( this . configRenderer . palette . background ) ; if ( newBG !== null ) { newBG . r = Math . round ( newBG . r * 0.25 ) ; newBG . g = Math . round ( newBG . g * 0.25 ) ; newBG . b = Math . round ( newBG . b * 0.25 ) ; document . body . style . backgroundColor = AssetLoader . colorToHex ( newBG ) ; } this . configRenderer . drawDGroup ( "overlay" ) ; var windowGroup = this . configRenderer . loader . drawGroups [ "preferencesWindow" ] ; var windowBounds = < number [ ] > windowGroup [ windowGroup . length - 1 ] . slice ( 1 ) ; var windowX = ( this . configRenderer . canvas . width - windowBounds [ 2 ] ) / 2 ; var windowY = ( this . configRenderer . canvas . height - windowBounds [ 3 ] ) / 2 ; this . configRenderer . drawAllGroupsWithName ( "preferences" , windowX , windowY ) ; } public closeConfig ( ) { this . configOpen = false ; this . configRenderer . canvas . style . visibility = "hidden" ; this . renderer . hitDetector . onMouseMove ( < MouseEvent > { offsetX : 0 , offsetY : 0 } ) ; this . renderer . drawDGroup ( "config" ) ; document . body . style . backgroundColor = this . configRenderer . palette . background ; } public switchPalette ( name ? ) { this . renderer . switchPalette ( name ) ; this . configRenderer . switchPalette ( name ) ; } }