const socket = io({autoConnect: false});
const canvas = document.getElementById('canvas');;

const cardWidth = 120; // 240px ~2.5 inch WAS 80 x3 (halfed for display)
const cardHeight = 168; // 336px ~3.5 inch WAS 120 x2.8 (halfed for display)

const cardArt = new Image();
const cardBackArt = new Image();
cardArt.src = 'images/cardArt.jpg';
cardBackArt.src = 'images/cardBack.jpg';

const COLOUR = {
	'white':{'id': 1, 'name':'White','colour':'#EEE'},
	'blue':{'id':2, 'name':'Blue','colour':'#0033EE'},
	'red':{'id':3, 'name':'Red','colour':'#ED344A'},
};
const CLASS = {
	 1: 'Goblin'
	,2: 'Human'
};
const TYPE = {
	 1: 'Unit'
	,2: 'Spell'
	,3: 'Token'
};

// To disable drawing each time something changes
let drawEachEvent	= true; // For disabling draw each time and only occuring where I want to test

let yourPlayerId	= 0; // To compare click events of your/opponents cards
let viewingPlayerId	= 0; // To show the board from your/opponent/teammates perspective, etc. without play permission

const maxHandSize = 4;
const maxBoardSize = 3;
const maxShield = 2;

const cardMargin = 10;

const handScale = .75;