import { TgaParser } from './parsers/TgaParser' ; /**
 * Created by Vadym Yatsyuk on 25.02.18
 */ import { mat4 } from 'gl-matrix' ; import { download } from './util/download' ; import { GameInfo } from './GameInfo' ; import { Player } from './Player' ; import { Map } from './Map' ; import { config } from './config' ; import { PointerLock } from './util/PointerLock' ; export class Main { private map : string ; constructor ( ) { ( window as any ) . cs = ( window as any ) . cs || { } ; } static initGL ( canvas ) { try { GameInfo . gl = canvas . getContext ( 'webgl' ) || canvas . getContext ( 'experimental-webgl' ) ; GameInfo . gl . viewportWidth = canvas . width ; GameInfo . gl . viewportHeight = canvas . height ; GameInfo . gl . enable ( ( window as any ) . gl . DEPTH_TEST ) ; GameInfo . gl . enable ( ( window as any ) . gl . CULL_FACE ) ; GameInfo . gl . cullFace ( ( window as any ) . gl . FRONT ) ; } catch ( e ) { } if ( ! GameInfo . gl ) { console . log ( 'Could not initialise WebGL' ) ; } } static render ( ) { let player = GameInfo . player ; let gl = GameInfo . gl ; gl . viewport ( 0 , 0 , gl . viewportWidth , gl . viewportHeight ) ; gl . clear ( gl . COLOR_BUFFER_BIT | gl . DEPTH_BUFFER_BIT ) ; mat4 . perspective ( GameInfo . pMatrix , ( config . FIELD_OF_VIEW * Math . PI ) / 180 , gl . viewportWidth / gl . viewportHeight , config . NEAR_CLIPPING , config . FAR_CLIPPING ) ; mat4 . identity ( GameInfo . mvMatrix ) ; mat4 . rotateX ( GameInfo . mvMatrix , GameInfo . mvMatrix , player . xAngle ) ; mat4 . rotateY ( GameInfo . mvMatrix , GameInfo . mvMatrix , player . yAngle ) ; mat4 . translate ( GameInfo . mvMatrix , GameInfo . mvMatrix , [ player . y , - player . z - config . PLAYER_HEIGHT , player . x ] ) ; GameInfo . map . render ( player . position ( ) ) ; mat4 . identity ( GameInfo . mvMatrix ) ; player . render ( ) ; } mainLoop ( ) { ( window as any ) . requestAnimFrame ( this . mainLoop . bind ( this ) ) ; GameInfo . player . move ( ) ; Main . render ( ) ; } getMap ( ) { return this . map || config . MAP ; } async webGLStart ( ) { const canvas = document . getElementById ( 'canvas' ) as HTMLCanvasElement ; Main . initGL ( canvas ) ; GameInfo . gl . clearColor ( 201 / 255 , 236 / 255 , 252 / 255 , 1.0 ) ; const map = await this . loadMap ( ) ; GameInfo . map = new Map ( GameInfo . gl , map ) ; this . renderSky ( ) ; this . preparePlayer ( ) ; let resizeCallback = ( ) => { canvas . width = window . innerWidth ; canvas . height = window . innerHeight ; GameInfo . gl . viewportWidth = window . innerWidth ; GameInfo . gl . viewportHeight = window . innerHeight ; } ; resizeCallback ( ) ; window . addEventListener ( 'resize' , resizeCallback , false ) ; canvas . addEventListener ( 'click' , ( ) => { if ( ! PointerLock . pointerLockElement ( ) ) { PointerLock . requestPointerLock ( canvas ) ; } } , false ) ; PointerLock . addPointerLockExchangeEventListener ( document , e => { if ( ! ! PointerLock . pointerLockElement ( ) ) { console . log ( 'add mouse move' ) ; PointerLock . addMouseMoveEventListener ( document , Main . rotatePlayer , false ) ; } else { console . log ( 'remove mouse move' ) ; PointerLock . removeMouseMoveEventListener ( document , Main . rotatePlayer ) ; } } , false ) ; this . mainLoop ( ) ; } preparePlayer ( ) { const spawn = GameInfo . map . getSpawn ( ) ; GameInfo . player = new Player ( GameInfo . gl , spawn . origin [ 0 ] , spawn . origin [ 1 ] , spawn . origin [ 2 ] ) ; GameInfo . player . xAngle = spawn . angles [ 2 ] ; GameInfo . player . yAngle = spawn . angles [ 1 ] ; GameInfo . player . switchWeapon ( config . PLAYER_DEFAULT_WEAPON ) ; } static rotatePlayer ( e ) { let player = GameInfo . player ; player . rotate ( e . movementX , e . movementY ) ; } async loadMap ( ) { const mapName = this . getMap ( ) ; return await download ( `cstrike/maps/${ mapName }` , 'arraybuffer' ) ; } async renderSky ( ) { let skyname = GameInfo . map . mapData . entities [ 0 ] . skyname ; if ( ! skyname ) { return ; } const coords = { up : [ 0 , 0 ] , rt : [ 0 , 256 ] , dn : [ 0 , 512 ] , ft : [ 256 , 0 ] , lf : [ 256 , 256 ] , bk : [ 256 , 512 ] } ; if ( skyname === 'des' ) { skyname = 'Des' ; } const sides = [ 'bk' , 'dn' , 'ft' , 'lf' , 'rt' , 'up' ] . map ( a => `${ skyname }${ a }` ) ; for ( let side of sides ) { const data = await download ( `cstrike/gfx/env/${ side }.tga` , 'arraybuffer' , true ) ; TgaParser . parse ( data ) ; } } start ( map ) { this . map = map ; this . webGLStart ( ) ; } }