Cards2

by black strings

HTML

<div id="main">

</div>
<br><br>
<div id="arena" sytle="margin-top:20px;">

</div>

CSS

.card {border:thin solid black; padding:2px; width:100px;
display: inline-block; margin:5px; }

.name {font-size:10px; color: black;}
.atk {border:thin solid blue; padding:5px;}
.def {border:thin solid blue; padding:5px;}

.show {background-color:white;}
.hide {background-color:grey;}
.land {border:thin solid green;}
.hero {border:thin solid red;}
.player{border:thin solid purple;}
.hand {border: thin solid blue; padding:5px;}
.selected {border:thick solid red;}
#arena {border:thin solid grey;}

JavaScript

class Utils {
	static randRange(min, max){
  	return Math.random() * max + min;
  }
  static generateName(){
  	var pre = ['The', ''];
    var adVerb = ['abruptly','endlessly','firmly','delightfully',''];
   	var noun = ['black','green','dark','green','blue','slient', ''];
    var verb = ['angry','lazy','fierce','joyful',''];
    var noun2 = ['king','queen','solider','minnion','orge','knight','man'];
    
    var name = '';
    var maxConcat = 2;
    
    name = this.concatRandomName(name, pre, maxConcat);
    name = this.concatRandomName(name, adVerb, maxConcat);
    name = this.concatRandomName(name, noun, maxConcat);
    name = this.concatRandomName(name, verb, maxConcat);
    // always add the last one
    name += this.addSpacing(this.randElementInArray(noun2));
    
    return name;
  }
  
  static concatRandomName(name, array, maxConcat){
  	var counter = (name.match(/ /g) || []).length;
    if(counter < maxConcat){
    	name += this.addSpacing(this.randElementInArray(array));
    }
    return name;
  }
  
  static addSpacing(word){
  	if(word !== '') { 
    	return word + ' '; 
    }else{
    	return word;
    }
  }
  static randElementInArray(array){
  	return array[ parseInt(Math.random() * (array.length)) ];
  }
}

class Card {
	constructor(name){
  	this.name = name;
    this.avatar;
    this.isFaceUp = true;
    this.dom;
    this.nameDom;
    this.createDom();
  }
  setAvatar(avatarImage){
  	this.avatar = avatarImage;
    this.dom.appendChild(this.avatar);
  }
  hide(){
  	this.dom.innerHTML = '.';
    this.dom.className += ' ' + 'hide';
    this.isFaceUp = false;
  }
  show(){
  	this.createNameDom();
    //this.dom.appendChild( this.avatar);
    this.dom.className += ' ' + 'show';
    this.isFaceUp = true;
  }
  createDom(){
  	this.dom = document.createElement('div');
    this.dom.className = 'card';
    
    this.createNameDom();
    
    this.show();
  }
  createNameDom(){
  	if(!this.nameDom){ this.nameDom = document.createElement('div'); }
 ...