antiyoy.js/main.js

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);