196 lines
5.1 KiB
JavaScript
196 lines
5.1 KiB
JavaScript
const body = document.querySelector('body');
|
|
|
|
let prevMouseEvent;
|
|
let timeout;
|
|
|
|
Node.prototype.createChild = function(tagName, classNames = null, text = null, src = null) {
|
|
const element = document.createElement(tagName);
|
|
|
|
if(!!classNames)
|
|
if(classNames instanceof Array)
|
|
element.classList.add(...classNames);
|
|
else
|
|
element.classList.add(classNames);
|
|
|
|
if(!!text)
|
|
element.innerText = text;
|
|
|
|
if(!!src)
|
|
element.src = src;
|
|
|
|
this.appendChild(element);
|
|
return element;
|
|
};
|
|
|
|
function createExpandBtn(parent, items) {
|
|
const container = parent.createChild('div', ['expandBtnContainer', 'expandBtnContainer' + items.length, 'disabled']);
|
|
const expandBtn = container.createChild('div', 'expandBtn');
|
|
expandBtn.addEventListener('click', () => {
|
|
container.classList.toggle('isActive');
|
|
}, false);
|
|
expandBtn.createChild('img', null, null, 'assets/' + items[0]);
|
|
|
|
const btns = [];
|
|
items.forEach((item, index) => {
|
|
const btn = container.createChild('div', 'btn' + (index + 1));
|
|
btn.createChild('img', null, null, 'assets/' + item);
|
|
btns.push(btn);
|
|
});
|
|
|
|
return [container, ...btns];
|
|
}
|
|
|
|
function createTroopsBtn(parent) {
|
|
const btn = createExpandBtn(parent, ['farmer.svg', 'hoplite.svg', 'servant.svg', 'knight.svg']);
|
|
btn[0].classList.add('btn-troops');
|
|
return btn;
|
|
}
|
|
|
|
function createTowersBtn(parent) {
|
|
const btn = createExpandBtn(parent, ['farm.svg', 'tower_small.svg', 'tower_big.svg']);
|
|
btn[0].classList.add('btn-buildings');
|
|
return btn;
|
|
}
|
|
|
|
class Building extends GameElement {
|
|
constructor(x, y, game, civilization, asset) {
|
|
super(x, y, game, asset);
|
|
|
|
this.civilization = civilization;
|
|
this.rank = 0;
|
|
}
|
|
|
|
adjustPosition() {
|
|
const tile = this.game.field[this.x][this.y].element;
|
|
this.displayWidth = Math.round(this.game.hexagonSize.width * .9);
|
|
let offsetX = tile.offsetLeft;
|
|
let offsetY = tile.offsetTop;
|
|
|
|
if (this.y % 2 !== 0)
|
|
offsetX += Math.round(this.displayWidth * .5);
|
|
|
|
this.element.style.width = this.displayWidth + 'px';
|
|
this.element.style.left = offsetX + 'px';
|
|
this.element.style.top = offsetY + 'px';
|
|
}
|
|
|
|
destroy() {
|
|
this.game.field[this.x][this.y].object = null;
|
|
this.element.parentNode.removeChild(this.element);
|
|
}
|
|
}
|
|
|
|
class Farm extends Building {
|
|
constructor(x, y, game, civilization) {
|
|
super(x, y, game, civilization, 'farm.svg');
|
|
}
|
|
|
|
static getDraggingObject(game) {
|
|
return super.getDraggingObject(game, 'farm', 'farm.svg');
|
|
}
|
|
|
|
static get initialCosts() {
|
|
return 10; // TODO: dynamic price
|
|
}
|
|
}
|
|
|
|
class Tower extends Building {
|
|
constructor(x, y, game, civilization, asset) {
|
|
super(x, y, game, civilization, asset);
|
|
}
|
|
}
|
|
|
|
class SmallTower extends Tower {
|
|
constructor(x, y, game, civilization) {
|
|
super(x, y, game, civilization, 'tower_small.svg');
|
|
}
|
|
|
|
static getDraggingObject(game) {
|
|
return super.getDraggingObject(game, 'towerSmall', 'tower_small.svg');
|
|
}
|
|
|
|
static get initialCosts() {
|
|
return 20;
|
|
}
|
|
}
|
|
|
|
class BigTower extends Tower {
|
|
constructor(x, y, game, civilization) {
|
|
super(x, y, game, civilization, 'tower_big.svg');
|
|
}
|
|
|
|
static getDraggingObject(game) {
|
|
return super.getDraggingObject(game, 'towerBig', 'tower_big.svg');
|
|
}
|
|
|
|
static get initialCosts() {
|
|
return 30;
|
|
}
|
|
}
|
|
|
|
class Townhall extends Building {
|
|
constructor(civilization, game) {
|
|
super(civilization.origin.x, civilization.origin.y, game, civilization, 'townhall.svg');
|
|
}
|
|
|
|
destroy() {
|
|
super.destroy();
|
|
// TODO: New townhall
|
|
console.log('hallo');
|
|
this.civilization.townhall = null;
|
|
this.civilization.split();
|
|
}
|
|
}
|
|
|
|
class Tree extends GameElement {
|
|
constructor(x, y, game) {
|
|
super(x, y, game, 'tree.svg');
|
|
}
|
|
|
|
breed() {
|
|
if(Math.random() < .25) {
|
|
const tiles = this.game.field[this.x][this.y].getAvailableAdjacentTiles();
|
|
if(tiles.length === 0)
|
|
return;
|
|
|
|
const index = Math.floor(Math.random() * (tiles.length - 1));
|
|
const {x, y} = tiles[index].pos;
|
|
this.game.addTree(x, y);
|
|
}
|
|
}
|
|
|
|
cutDown() {
|
|
delete this.game.trees[this.uuid];
|
|
this.element.parentNode.removeChild(this.element);
|
|
}
|
|
}
|
|
|
|
class Player {
|
|
constructor(color) {
|
|
this.color = color;
|
|
this.uuid = guid();
|
|
}
|
|
}
|
|
|
|
function guid() {
|
|
function s4() {
|
|
return Math.floor((1 + Math.random()) * 0x10000)
|
|
.toString(16)
|
|
.substring(1);
|
|
}
|
|
|
|
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
|
|
}
|
|
|
|
const player = new Player('red');
|
|
// let game = new GameNN();
|
|
let game = new Game();
|
|
const civilization = game.addCivilization(player, 2, 4, true);
|
|
|
|
// const anotherOne = new Player('yellow');
|
|
// const another = game.addCivilization(anotherOne, 5, 3);
|
|
// game.addWarrior(1, 4, civilization, Farmer);
|
|
// game.addWarrior(4, 2, another, Farmer);
|
|
//
|
|
// game.addTree(1,4);
|
|
// game.addTree(1,5);
|