Ultimate Warfare 2.0

.gitignore

@@ -10,6 +10,13 @@
 
 .idea
 
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###
+
 ###> symfony/phpunit-bridge ###
 .phpunit.result.cache
 /phpunit.xml

assets/css/app.css

@@ -0,0 +1,3 @@
+body {
+    background-color: lightgray;
+}

assets/js/Components/Action.js

@@ -0,0 +1,35 @@
+'use strict';
+
+import GameServer from './GameServer';
+
+class Action {
+    constructor() {
+        this.gameServer = new GameServer;
+    }
+
+    getTiles(coords, onResponse) {
+        let params = {"coords": coords};
+
+        this.gameServer.sendMessage('../game/world/get-tiles', params, onResponse);
+    };
+
+    buyTile(x, y, onResponse) {
+        let params = {'x': x, 'y': y};
+
+        this.gameServer.sendMessage('../game/world/buy-tile', params, onResponse);
+    };
+
+    getBuildingList(x, y, onResponse) {
+        let params = {'x': x, 'y': y};
+
+        this.gameServer.sendMessage('../game/world/get-building-list', params, onResponse);
+    };
+
+    build(x, y, cid, onResponse) {
+        let params = {'x': x, 'y': y, 'cid': cid};
+
+        this.gameServer.sendMessage('../game/world/build', params, onResponse);
+    };
+}
+
+export default Action;

assets/js/Components/GameServer.js

@@ -0,0 +1,32 @@
+'use strict';
+
+class GameServer {
+    sendMessage(url, message, callback) {
+        let data = 'json_request=' + JSON.stringify(message);
+        $.post(url, data, function(msg) {
+            GameServer.onMessage(msg, callback)
+        }, 'json').fail(function(message) {
+            GameServer.onError(message, callback)
+        });
+        console.log("message sent: ", data);
+
+        return true
+    };
+
+    static onMessage(message, callback) {
+        let data = message.data || message;
+
+        if(typeof callback == "function") {
+            callback(data)
+        }
+    };
+
+    static onError(message, callback) {
+        if(typeof callback == "function") {
+            let err = new Error("Server request failed");
+            callback(err)
+        }
+    };
+}
+
+export default GameServer;

assets/js/Components/Map.js

@@ -0,0 +1,172 @@
+'use strict';
+
+import Tile from "./Tile";
+
+class Map {
+    constructor() {
+        this.tileWidth = 194;
+        this.tileHeight = 98;
+        this.airHeight = 158;
+
+        this.tileList = [];
+
+        this.width = 0;
+        this.height = 0;
+
+        this.x = 0;
+        this.y = 0;
+
+        this.rootNode = null;
+        this.parentNode = null;
+    }
+
+    init(parentNode) {
+        this.parentNode = parentNode;
+
+        this.width = Math.ceil( (this.parentNode.offsetWidth + 2) / (this.tileWidth + 2) ); //2 is space of 2px between each  horizontaly relative tile
+        this.height = Math.ceil( this.parentNode.offsetHeight / this.tileHeight ) + 1; //1 is to fill empty "half-diamond" places
+
+        if(! (this.width % 2)){
+            this.width++
+        }
+
+        if(! (this.height % 2)){
+            this.height++
+        }
+
+        let x = -(this.width + this.height-2)/2; //coordinates of very first (top left) tile
+        let y = (this.height - this.width)/2; //coordinates of very first (top left) tile
+
+        for(let i = 0; i < this.height + this.height - 1; i++){
+            let top = i * (this.tileHeight / 2) - this.airHeight - this.tileHeight/2;
+
+            for(let j = 0; j < ( this.width + (i % 2) ); j++){
+                let left = j * (this.tileWidth + 2) - (this.tileWidth + 2) / 2 * (i % 2);
+
+                let tileData = [];
+                tileData['offsetX'] = x+j;
+                tileData['offsetY'] = y+j;
+                tileData['top'] = top;
+                tileData['left'] = left;
+                tileData['tileInstance'] = null;
+                tileData['projectionIndex'] = null;
+
+                this.tileList.push(tileData);
+            }
+
+            if( i % 2 ){ //if true than next row is "short", and x should decrease
+                x++;
+            }else{
+                y--;
+            }
+        }
+
+        let rootNode = this.createRootNode();
+        this.rootNode = rootNode;
+        this.parentNode.appendChild(rootNode);
+
+        return(this);
+    };
+
+    createRootNode() {
+        let rootNode = document.createElement('div');
+        rootNode.id = 'map';
+        rootNode.style.width = this.width * (this.tileWidth + 2) - 2+'px'; //2 is "horizontal gap" between tiles
+        rootNode.style.height = (this.height - 1) * this.tileHeight+'px';
+        rootNode.style.position = 'relative';
+        rootNode.style.overflow = 'hidden';
+        rootNode.style.backgroundColor = '#41390f';
+
+        return rootNode;
+    }
+    move(x, y) {
+        this.x = x;
+        this.y = y;
+        this.fill(false); //false to not to load data, data will be loaded separatelly on mousekeyup
+        this.draw();
+    };
+
+    /*
+     *	Function fill() fill empty cells with data - tiles of given coordinates.
+     *	Param "load" - to fetch data from server or not to.
+     *	If false, the tile is empty(grey), and without cachind. It's used only on map scroll, when you
+     *	don't need to load tiles on every mouse movement, but only on mousekeyup.
+     */
+    fill(load) {
+        if(load === undefined){
+            load = true;
+        }
+
+        this.unfill();
+
+        if(load){
+            window.tileCollection.getTiles(this.tileList);
+        }
+
+        for(let key in this.tileList){
+            let tileData = this.tileList[key];
+
+            let x = tileData['offsetX'] + this.x;
+            let y = tileData['offsetY'] + this.y;
+            let tileInstance;
+
+            if(window.tileCollection.hasTile(x, y) || load){
+                tileInstance = window.tileCollection.getTile(x, y);
+            }else{
+                tileInstance = new Tile(x, y);
+            }
+
+            tileData['tileInstance'] = tileInstance;
+            tileData['projectionIndex'] = tileInstance.createProjection();
+        }
+
+        return(this);
+    };
+
+    unfill() {
+        for(let key in this.tileList){
+            let tileData = this.tileList[key];
+
+            if(tileData['tileInstance']){
+                let tile = tileData['tileInstance'];
+                let index = tileData['projectionIndex'];
+
+                tile.deleteProjection(index);
+
+                tileData['tileInstance'] = null;
+            }
+        }
+
+        return(this);
+    };
+
+    draw() {
+        if(this.rootNode.childNodes.length){
+            this.flushScreen();
+        }
+
+        for(let key in this.tileList){
+            let tileData = this.tileList[key];
+
+            let tile = tileData['tileInstance'];
+            let pIndex = tileData['projectionIndex'];
+
+            let tileNode = tile.projections[pIndex];
+            tileNode.style.top = tileData['top']+'px';
+            tileNode.style.left = tileData['left']+'px';
+
+            this.rootNode.appendChild(tileNode);
+        }
+    };
+
+    flushScreen() {
+        while(this.rootNode.firstChild){
+            let child = this.rootNode.firstChild;
+            this.rootNode.removeChild(child);
+        }
+
+        return(this);
+    };
+}
+
+export default Map;

assets/js/Components/MapPad.js

@@ -0,0 +1,99 @@
+'use strict';
+
+import $ from 'jquery';
+
+class MapPad {
+    constructor() {
+        this.mouseIsoVector = [0, 0]; //isometric cordinates of mouse
+        this.mouseOverTile = [0, 0]; //local map coordinates of tile, on which mouse is pointing
+        this.tempVector = [0, 0]; //vector for temporary values, to share them between events
+
+        this.isClick = true; //defines if event is click or map scroll
+
+        this.rad = (Math.PI/180)*(45); //-45 degree angle in radians
+    }
+
+    init() {
+        //draw overlay
+        let mapPadOverlay = document.createElement('div');
+        mapPadOverlay.id = 'mapPad';
+        mapPadOverlay.style.width = window.map.width*(window.map.tileWidth + 2) - 2+'px'; //2 is "horizontal gap" between tiles
+        mapPadOverlay.style.height = (window.map.height - 1) * window.map.tileHeight+'px';
+        mapPadOverlay.style.position = 'absolute';
+        mapPadOverlay.style.top = '0px';
+        mapPadOverlay.style.left = '0px';
+        mapPadOverlay.style.zIndex = '2';
+
+        window.map.parentNode.appendChild(mapPadOverlay);
+
+        //default mouse coordinates transformations in the isometric coordinates
+        let mapPadSelector = $('#mapPad');
+
+        mapPadSelector.mousemove(function(e){
+            let pageX = e.pageX - $(this).offset().left - ((window.map.tileWidth + 2) * Math.ceil(window.map.width / 2));
+            let pageY = e.pageY - $(this).offset().top - (window.map.tileHeight * Math.floor(window.map.height / 2));
+
+            window.mapPad.mouseIsoVector[0] = [pageX * Math.sin(window.mapPad.rad) / 2 + pageY*Math.cos(window.mapPad.rad)];
+            window.mapPad.mouseIsoVector[0] = [pageX * Math.sin(window.mapPad.rad) / 2 + pageY*Math.cos(window.mapPad.rad)];
+            window.mapPad.mouseIsoVector[0] = [pageX * Math.sin(window.mapPad.rad) / 2 + pageY*Math.cos(window.mapPad.rad)];
+            window.mapPad.mouseIsoVector[0] = [pageX * Math.sin(window.mapPad.rad) / 2 + pageY*Math.cos(window.mapPad.rad)];
+            window.mapPad.mouseIsoVector[1] = [pageX * Math.cos(window.mapPad.rad) / 2 - pageY*Math.sin(window.mapPad.rad)];
+
+            window.mapPad.mouseOverTile[0] = Math.ceil(window.mapPad.mouseIsoVector[0]/69); //69 is length of one side of tile, in isometric coords
+            window.mapPad.mouseOverTile[1] = Math.ceil(window.mapPad.mouseIsoVector[1]/69); //69 is length of one side of tile, in isometric coords
+
+            //$('#topBar div').html(pageX+';'+pageY);
+            //$('#topBar div').html(mapPad.mouseIsoVector[0]+';'+mapPad.mouseIsoVector[1]);
+            //$('#topBar div').html(mapPad.mouseOverTile[0]+';'+mapPad.mouseOverTile[1]);
+        });
+
+        //bind mouse move when mouse is pressed
+        mapPadSelector.mousedown(function(e){
+            if(window.tileMenu.menu){
+                window.tileMenu.menu.close();
+            }
+
+            //writing vector root coordinates.
+            window.mapPad.tempVector[0] = window.mapPad.mouseOverTile[0];
+            window.mapPad.tempVector[1] = window.mapPad.mouseOverTile[1];
+
+            $(this).bind('mousemove', window.mapPad.scrolling);
+
+            return(false); //to avoid text selection
+        });
+
+        //unbind when not scrolling
+        mapPadSelector.mouseup(function(){
+            $(this).unbind('mousemove', window.mapPad.scrolling);
+            window.map.fill().draw(); //draw map and load all the tiles
+        });
+
+        mapPadSelector.click(function(e){
+            if(window.mapPad.isClick){
+                let tile = window.tileCollection.getTile(window.mapPad.mouseOverTile[0] + window.map.x, window.mapPad.mouseOverTile[1] + window.map.y);
+
+                if (tile.tileData.type !== 'none') {
+                    window.tileMenu.open(window.mapPad.mouseOverTile[0] + window.map.x, window.mapPad.mouseOverTile[1] + window.map.y, e);
+                }
+            }
+            window.mapPad.isClick = true;
+        });
+    };
+
+    //on mouse move, we take default mouse coordinates and transform them by adding 45degree angle,
+    //and decrease Y coordinate by 50%. Then coordinates should be isometric.
+    scrolling(e) {
+        let dX = window.mapPad.tempVector[0] - window.mapPad.mouseOverTile[0];
+        let dY = window.mapPad.tempVector[1] - window.mapPad.mouseOverTile[1];
+
+        if( (dX !== 0) || (dY !== 0) ){
+            window.mapPad.isClick = false; //if map was scrolled for at least 1 tile, then it's definetely is not click ;D
+
+            window.map.move(window.map.x + dX, window.map.y + dY);
+            window.mapPad.tempVector[0] = window.mapPad.mouseOverTile[0];
+            window.mapPad.tempVector[1] = window.mapPad.mouseOverTile[1];
+        }
+    };
+}
+
+export default MapPad;