src/scripts/combat.js
//renders background & combatants to #canvas
renders background & combatants to #canvas
renders background & combatants to #canvas
renderCombatScene() {
  let _pos =[[0.25,0.60,1],[0.75,0.60,1],[0.50,0.40,1]];
  let width=600,height=300;
  let draw = document.querySelector("#canvas svg");
  if(!draw) draw = SVG().addTo('#canvas').size(width, height);
  else draw = SVG(draw);
  draw.rect(width, height).attr({ fill: '#303030'});
  draw.image(window.story.state.combat.scenePic);
  let el,subnodes,i,list = window.story.state.combat.enemyParty;
  for(i=list.length-1;i>=0;i--) {
    if(!list[i].isKnockedOut()) { 
      var pos = _pos.pop();
      var _pic = window.gm.images[list[i].pic]();
      var node = SVG(_pic);
      var scaleW2,scaleH2,scaleW = node.width()/(width*(1-Math.abs(0.5-pos[0])*2)), scaleH=node.height()/(height*(1-Math.abs(0.5-pos[1])*2));
      if(scaleW>0.9 || scaleH>0.9 ) {
        if(scaleW>scaleH) node.width(node.width()/(1.2*scaleW));
        else node.height(node.height()/(1.2*scaleH));
      }
      node.center(pos[0]*width,pos[1]*height);
      subnodes= node.find('[data-male]');
      for(el of subnodes) {
        if(list[i].getPenis()===null) el.hide();
      }
      subnodes= node.find('[data-arousal]');
      for(el of subnodes) {
        var y = el.attr('data-arousal').split(',');
        var x1= parseInt(y[0],10),x2= parseInt(y[1],10);
        if(list[i].arousal().value<x1 ||list[i].arousal().value>x2 ) el.hide();
      }
      node.addTo(draw);
    }
    if(_pos.length<=0) break;
  }
  return;
}
renderCombatScene ( ) { let _pos = [ [ 0.25 , 0.60 , 1 ] , [ 0.75 , 0.60 , 1 ] , [ 0.50 , 0.40 , 1 ] ] ; let width = 600 , height = 300 ; let draw = document . querySelector ( "#canvas svg" ) ; if ( ! draw ) draw = SVG ( ) . addTo ( '#canvas' ) . size ( width , height ) ; else draw = SVG ( draw ) ; draw . rect ( width , height ) . attr ( { fill : '#303030' } ) ; draw . image ( window . story . state . combat . scenePic ) ; let el , subnodes , i , list = window . story . state . combat . enemyParty ; for ( i = list . length - 1 ; i >= 0 ; i -- ) { if ( ! list [ i ] . isKnockedOut ( ) ) { var pos = _pos . pop ( ) ; var _pic = window . gm . images [ list [ i ] . pic ] ( ) ; var node = SVG ( _pic ) ; var scaleW2 , scaleH2 , scaleW = node . width ( ) / ( width * ( 1 - Math . abs ( 0.5 - pos [ 0 ] ) * 2 ) ) , scaleH = node . height ( ) / ( height * ( 1 - Math . abs ( 0.5 - pos [ 1 ] ) * 2 ) ) ; if ( scaleW > 0.9 || scaleH > 0.9 ) { if ( scaleW > scaleH ) node . width ( node . width ( ) / ( 1.2 * scaleW ) ) ; else node . height ( node . height ( ) / ( 1.2 * scaleH ) ) ; } node . center ( pos [ 0 ] * width , pos [ 1 ] * height ) ; subnodes = node . find ( '[data-male]' ) ; for ( el of subnodes ) { if ( list [ i ] . getPenis ( ) === null ) el . hide ( ) ; } subnodes = node . find ( '[data-arousal]' ) ; for ( el of subnodes ) { var y = el . attr ( 'data-arousal' ) . split ( ',' ) ; var x1 = parseInt ( y [ 0 ] , 10 ) , x2 = parseInt ( y [ 1 ] , 10 ) ; if ( list [ i ] . arousal ( ) . value < x1 || list [ i ] . arousal ( ) . value > x2 ) el . hide ( ) ; } node . addTo ( draw ) ; } if ( _pos . length <= 0 ) break ; } return ; }
renders background & combatants to #canvas
renders background & combatants to #canvas
//sprite position & scale in % x,y,z //recover svg document instead appending new one //todo images flash when redrawing page; blitting bakbuffer doesnt help: var draw2 = SVG(); -> draw2.addTo(draw); //todo show deathsprite //sprites should be scattered evenly and scaled down to fit into scene (with respect of offset in scene) //reposit. AFTER scaling ! //hide parts of sprite