From d28594f5c3eadc8a40908dff9a90e40155550a60 Mon Sep 17 00:00:00 2001 From: Nero Ignis Date: Thu, 22 Apr 2021 22:07:13 +0200 Subject: [PATCH] WIP Map creation & decoration; --- css/app.css | 27 +- img/tiles/clear_hexagon.png | Bin 0 -> 1885 bytes img/tiles/environment/birch_1.png | 0 img/tiles/environment/birch_2.png | 0 img/tiles/environment/birch_3.png | 0 img/tiles/environment/birch_4.png | 0 .../{house_with_stall.png => lumberjack.png} | Bin index.html | 127 ++++++++- js/app.js | 252 +++++++++++++++--- 9 files changed, 356 insertions(+), 50 deletions(-) create mode 100644 img/tiles/clear_hexagon.png delete mode 100644 img/tiles/environment/birch_1.png delete mode 100644 img/tiles/environment/birch_2.png delete mode 100644 img/tiles/environment/birch_3.png delete mode 100644 img/tiles/environment/birch_4.png rename img/tiles/structure/{house_with_stall.png => lumberjack.png} (100%) 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 0000000000000000000000000000000000000000..b18e4729feef7a51b916027a443bf29de43be74b GIT binary patch literal 1885 zcmV-j2cr0iP)RgC|~N8kvo*ic|&J0=cL#Su6HYxXQC?2Ho+NoL|eW=_BnI08rT z=#$;SX?JJ3J1tv!`c(B*oDc`lmzMNz(L@a4th(zx>@G&U;y8NP=-Dm3Aac7cbY*hGOyoWvK!aRG} ze!n^#rxo6V_i}!=w3SEgCyz#*pIMEKO8*S?v)H4Sw1=Ocx60$rSJ;W+cu!mUX3HA`HJis1el_%IktnvkWh*f@I53$Mv>>*ZJjy=2IU(d@EVwFhj zsZ4v?;Of^tu}UKLRHyxUb2gmUP6vyxO}fM?N!U~Uvp=u@^=e)_8>pvvProKs3BaDp zaaTRPJv}tnPWG;ZuWjq!gulOX+_Mv_oWq{U%Z0%aZF8~JSe+_t!YX1<5x;QVdGq3+ zkSU@ttdhRlvzb+Ve_qAZpj7{RUu)}F<=bwL>8S$4@~SFo;a4eeEsz?keBSLbyWs0- zTw7J{#a3Rda&@<-=#CP%Tjla@53r;4?^_ys6IQu2mt8{~^}2a6T*R4aXri1kxN@|_ zjI&odI#oLv=+7Yz(*g{J>S_hrP?!;wUbGx_X{hT4Bm7uD8zhP*J8p1U8Hf#oIDsu` zsLKYcrx(G2B)PDmPlG8MOwnM*X5`Y zV%N=Y2lK|oP;bD4n~|&4nC;WxFu%B|J16o~JAx?Ki*1|_*MzXA_Xgw1ZO#s~5DyMJ z3!mGbin@qh@9C!%DKk+aLgux>7|Iaujf(@L<6Kx=t!7qU%d-61_k0eUmB*cKrh64QIG*IMzGDe~}Ne*+Sn}f09RKr}7Ow7Sp%r(yU z8LSW)=s*tfZ0KE3LcGCxwYzeL$hC7sG&oHTab%SnE{;#sK4gbWH5iMe-OD%3UzTccn515r(qK^rFG?o#b=XlSs1tW&8H|9%>c#|iZuI5^ z6V!za(b#5;*}ZY4lo1W4XfQ>CDH=@CV2TFQV2TD)G?=2n6b+_mFhzrDFgv06)L)y9 z!qDKNbI(xp+oFVh8eI69sspQz+|b~H5*u_vq56pI(K-#5C77#^yPgd6M~DUs(^~D! z>EcW^4Hh;`n?5&9gDD!EmS-hg7eIp(=hVJ7*!9yGGDSj9r$KL9A?idUXLd&({jshUkR4SK-Yiwwa7k1?+h3>Yt;oS0xpL(zyMublCZo zde}?2xx~iXOE7gH5gmfb$XCW|o6=fM37*2+0PXI_r+0Qn?GK_>p6VB_j^IGdWnR)3 zgYXib2GREL^Yd1D+_`iosFY1_R|&+hMxI}-*CESqPQC-5dH zsy+Df;&Ex*`N7WJ@>8okfER(OmKCcg1K4A_Z40Y>z3wg%drY@YW0j6f`E+|rTI@01 zHicD)KxilwsyAO+DXF9K{~ftw^lGoEyD%cJ=z%G$#g;g_3nBZ~gPuc*Pv!*kigC zg;f|{Z&KWorl0)NoEJ_n4}e3+g9@W#NP;UO61Gw7aRRF*iw=&}B>6pgFPz4x5hfQl zmZ?cs$%eO#Wp538q+yj-jti%MrzY*M=~k&pwqTDGtjar5tX{_#RUQVn5_=?IRsKcY z&8bOg=U^wW$3?6vYUQ4|-I!tyb`E=7!Ya|bJ+3!bcdJBUkJQ~NVvi44MeHF~d5Jwf zU=^`PFjf(Jgklx3M<`Yidjw+@u}3Oa5qo4}6|qMsRuOvyV->MSC|3D~J^ukrdp0Mi zPJJ8z001p?MObuGZ)S9NVRB^vVtFoNY;SL5WO*)Qa(QrcZ!T$VVP|D7P) XZ)9b1s0M%T00000NkvXXu0mjfQdpQ| literal 0 HcmV?d00001 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(); } },