diff --git a/css/app.css b/css/app.css index b9ad748..436fe50 100644 --- a/css/app.css +++ b/css/app.css @@ -39,20 +39,33 @@ #mapwrapper { text-align: center; overflow: auto; - height: 70vh; + height: 60vh; overflow-scrolling: auto; } -#mapwrapper::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); - border-radius: 10px; - background-color: #F5F5F5; -} - .tile { background-image: url('../img/tiles/grass.png'); } +.tile:hover { + opacity: 70%; +} + +.tilebutton { + height: 40px; + width: 35px; + margin: 0.5em; +} + +.deco-button { + background-image: url('../img/tiles/clear_hexagon.png'); + background-size: 100% 100%; +} + +.deco-button { + padding: 3px; +} + #mapwrapper.card-body { padding: 0; } diff --git a/img/tiles/clear_hexagon.png b/img/tiles/clear_hexagon.png new file mode 100644 index 0000000..b18e472 Binary files /dev/null and b/img/tiles/clear_hexagon.png differ diff --git a/img/tiles/environment/birch_1.png b/img/tiles/environment/birch_1.png deleted file mode 100644 index e69de29..0000000 diff --git a/img/tiles/environment/birch_2.png b/img/tiles/environment/birch_2.png deleted file mode 100644 index e69de29..0000000 diff --git a/img/tiles/environment/birch_3.png b/img/tiles/environment/birch_3.png deleted file mode 100644 index e69de29..0000000 diff --git a/img/tiles/environment/birch_4.png b/img/tiles/environment/birch_4.png deleted file mode 100644 index e69de29..0000000 diff --git a/img/tiles/structure/house_with_stall.png b/img/tiles/structure/lumberjack.png similarity index 100% rename from img/tiles/structure/house_with_stall.png rename to img/tiles/structure/lumberjack.png diff --git a/index.html b/index.html index b711190..38dd97b 100644 --- a/index.html +++ b/index.html @@ -12,23 +12,128 @@
+ +
- - - - -
Map
-
-
- - - +
+ + + + + +
+
+
+
+ - +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +
diff --git a/js/app.js b/js/app.js index 822a49d..688c2dc 100644 --- a/js/app.js +++ b/js/app.js @@ -206,43 +206,209 @@ let game = new Vue({ }, currentQuest: null, questSkipCounter: 0, - loadedIntervals: [] + loadedIntervals: [], + selectedBuilding: null, + selectedDecoration: null, + selection: null, + modalBuilding: null, + mapDecorations: [ + { + path: 'img/tiles/environment/birch_small.png', + name: 'dummy', + price: 50 + }, + { + path: 'img/tiles/environment/birch_large.png', + name: 'dummy', + price: 50 + }, + { + path: 'img/tiles/environment/spruce_small.png', + name: 'dummy', + price: 50 + }, + { + path: 'img/tiles/environment/spruce_large.png', + name: 'dummy', + price: 50 + }, + { + path: 'img/tiles/environment/bush.png', + name: 'dummy', + price: 50 + }, + { + path: 'img/tiles/environment/bush_berries.png', + name: 'dummy', + price: 50 + }, + { + path: 'img/tiles/environment/stone.png', + name: 'dummy', + price: 50 + }, + { + path: 'img/tiles/environment/stone_0.png', + name: 'Stone 1', + price: 50 + }, + { + path: 'img/tiles/environment/stone_1.png', + name: 'Stone 2', + price: 50 + }, + { + path: 'img/tiles/environment/stone_3.png', + name: 'Stone 3', + price: 50 + }, + { + path: 'img/tiles/dummy/dummy', + name: 'dummy', + price: 50 + }, + { + path: 'img/tiles/environment/wood_log.png', + name: 'Log', + price: 50 + }, + ], + roads: [ + { + path: 'img/tiles/roads/corner_n_o.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/corner_n_w.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/corner_o_s.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/corner_s_w.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/cross.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/end_n.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/end_o.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/end_s.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/end_w.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/straight_n_s.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/straight_o_w.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/t_n_o_s.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/t_n_o_w.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/t_n_s_w.png', + name: 'Log', + price: 50 + }, + { + path: 'img/tiles/roads/t_o_s_w.png', + name: 'Log', + price: 50 + }, + ] }, created() { - this.generateMap(100, 50); - this.setTile(1, 1, { - asset: 'img/tiles/environment/birch_large.png' - }); - this.setTile(1, 2, { - asset: 'img/tiles/environment/birch_large.png' - }); - this.setTile(2, 1, { - asset: 'img/tiles/environment/birch_large.png' - }); - this.setTile(2, 2, { - asset: 'img/tiles/structure/house.png', - building: 'lumberjack' + let game = this; + this.generateMap(10, 10); + + $(function () { + $('[data-toggle="tooltip"]').tooltip() }); - this.setTile(5, 4, { - asset: 'img/tiles/structure/blacksmith.png', - building: 'blacksmith' + + $('#buildingModal').on('close.bs.modal', function (event) { + game.modalBuilding = null; }); - // this.storageNames = { - // lastVersion: 'lastVersion', - // resources: 'resources' + this.version, - // buildings: 'buildings' + this.version, - // } - // - // this.checkVersion(); - // - // this.checkBuildings(); - // this.loadResourcesFromStorage(); - // this.loadBuildingsFromStorage(); - // this.reloadBuildings(); + this.storageNames = { + lastVersion: 'lastVersion', + resources: 'resources' + this.version, + buildings: 'buildings' + this.version, + } + + this.checkVersion(); + + this.checkBuildings(); + this.loadResourcesFromStorage(); + this.loadBuildingsFromStorage(); + this.reloadBuildings(); }, methods: { - // Map generation + // Map system + getResourcesNeededToBuildText(building) { + let game = this; + let message = ''; + + if (building.resourcesToBuild) { + Object.keys(building.resourcesToBuild).forEach((resourceName, resourceAmount) => { + if (message.length > 0) { + message += ', ' + } + + message += building.resourcesToBuild[resourceName] + ' ' + game.resources[resourceName].name; + }); + } else { + message += building.price + ''; + } + + return message; + }, + + initiateBuilding(building) { + this.selection = { + building: building + }; + }, + + selectDecoration(item) { + this.selection = { + decoration: item + }; + }, + generateMap(rows, cols) { let map = []; @@ -266,9 +432,31 @@ let game = new Vue({ this.map[x-1][y-1] = tile; }, - interactWithTile(tile) { + interactWithTile(tile, x, y) { + if (game.selection) { + if (game.selection.building) { + tile.asset = 'img/tiles/structure/' + game.selection.building.name.toLowerCase() + '.png'; + tile.building = game.selection.building.name.toLowerCase(); + this.selection = null; + } + + if (game.selection.decoration) { + tile.asset = game.selection.decoration.path; + tile.building = null; + // decorations can only be cancelled by cancel button + } + + if (game.selection.bulldozer) { + tile.asset = 'img/tiles/trans.png'; + tile.building = null; + // bulldozer can only be cancelled by cancel button + } + } + if (tile.building) { - this.sendNotification(tile.building); + this.modalBuilding = this.buildings[tile.building]; + $('#buildingModal').modal('show'); + this.$forceUpdate(); } },