Added Cost

css/main.css

@@ -71,6 +71,27 @@ body {
   border-color: gray;
 }
 
+#money {
+  position: fixed;
+  font-family: 'Electrolize', sans-serif;
+  font-size: 22px;
+  width: 1200;
+  height: 42px;
+  line-height: 42px;
+  text-align: center;
+  background-image: url(../images/moneybg.png);
+}
+
+body {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+
 .buildtile {
   width: 48;
   height: 48;

index.html

@@ -32,9 +32,11 @@
   </div>
   <div id="tooltip">
     <span>
-      Example
     </span>
   </div>
+  <span id="money">
+    ??? Dollar
+  </span>
 </body>
 
 </html>

js/baseclasses.js

@@ -35,6 +35,32 @@ class Tile {
     }
   }
 
+  pay() {
+    var items = 0
+    for (var i = 0; i < this.cost.length; i++) {
+      if (this.cost[i].id == 0) {
+        if (this.cost[i].count <= money) {
+          items++
+        }
+      } else {
+        if (inventory.countOf(this.cost[i].id) >= this.cost[i].count) {
+          items++
+        }
+      }
+    }
+    if (items == this.cost.length) {
+      for (var i = 0; i < this.cost.length; i++) {
+        if (this.cost[i].id == 0) {
+          money -= this.cost[i].count
+        } else {
+          inventory.take(this.cost[i].id, this.cost[i].count, null)
+        }
+      }
+      return true
+    }
+    return false
+  }
+
   unloadImages() {
     this.images = {
       "0": [],
@@ -99,7 +125,8 @@ class Inventory {
       for (var j = 0; j < count; j++) {
         for (var i = 0; i < this.items.length; i++) {
           if (this.items[i].id == id) {
-            factory.deleteItem(this.items[i])
+            if (factory != null)
+              factory.deleteItem(this.items[i])
             this.items.splice(i, 1)
             break;
           }

js/game.js

@@ -1,5 +1,6 @@
 var factorys = []
 var inventory = {}
+var money = 100
 
 var items = []
 
@@ -163,6 +164,7 @@ function render() {
   } else {
     drawInventory(inventory, lang["player"])
   }
+  $('#money').text(money + " " + lang.items[0])
 }
 
 function getItemFormId(id) {
@@ -259,11 +261,26 @@ function drawInfoBar() {
     $('#infoDesc h1').text("")
     $('#infoDesc p').text("")
   }
-  if(selectedTile.maxwork!=0){
+  if (selectedTile.maxwork != 0 && mode != "selectbuilding" && mode != "building") {
     $('#infoDesc p').css("height", 154)
     infoCtx.fillStyle = "green";
-    infoCtx.fillRect(0, 228, 432*(selectedTile.currentwork/selectedTile.maxwork), 12)
+    infoCtx.fillRect(0, 228, 432 * (selectedTile.currentwork / selectedTile.maxwork), 12)
-  }else{
+  } else {
     $('#infoDesc p').css("height", 166)
   }
+  if (mode == "selectbuilding" || mode == "building") {
+    if (selectedTile != 0) {
+      infoCtx.textAlign = "center"
+      infoCtx.font = "18px Electrolize"
+      infoCtx.fillStyle = "black";
+      infoCtx.fillText(lang.cost, 336, 66)
+      infoCtx.textAlign = "start"
+      for (var i = 0; i < selectedTile.cost.length; i++) {
+        if (selectedTile.cost[i].id == 0)
+          infoCtx.fillText(selectedTile.cost[i].count + " " + lang.items[selectedTile.cost[i].id], 246, 86 + 20 * i)
+        else
+          infoCtx.fillText(selectedTile.cost[i].count + "x " + lang.items[selectedTile.cost[i].id], 246, 86 + 20 * i)
+      }
+    }
+  }
 }

js/items.json

@@ -1,7 +1,7 @@
 {
   "items": [{
     "id": 0,
-    "name": "coal"
+    "name": "money"
   },{
     "id": 1,
     "name": "log"

js/tiles.js

@@ -7,6 +7,10 @@ class Conveyorbelt extends Tile {
     super(x, y, factory)
     this.name = "conveyorbelt"
     this.hasNoInventory = true
+    this.cost = [{
+      "id": 0,
+      "count": 20
+    }]
     this.texture = {
       "0": ["conveyorbelt00", "conveyorbelt01", "conveyorbelt02", "conveyorbelt03", "conveyorbelt04", "conveyorbelt05", "conveyorbelt06"],
       "1": []
@@ -23,6 +27,10 @@ class Treefarm extends Tile {
     this.currentwork = 0
     this.name = "treefarm"
     this.hasNoInventory = true
+    this.cost = [{
+      "id": 0,
+      "count": 30
+    }]
     this.texture = {
       "0": [],
       "1": ["treefarm10", "treefarm10", "treefarm10", "treefarm11", "treefarm11", "treefarm11", "treefarm12", "treefarm12", "treefarm12", "treefarm13", "treefarm13", "treefarm13", "treefarm14", "treefarm14", "treefarm14", "treefarm15", "treefarm15", "treefarm15"]
@@ -47,6 +55,15 @@ class Saw extends Tile {
     this.maxwork = 96
     this.currentwork = 0
     this.name = "saw"
+    this.cost = [{
+        "id": 0,
+        "count": 50
+      },
+      {
+        "id": 1,
+        "count": 50
+      }
+    ]
     this.texture = {
       "0": [],
       "1": ["saw10", "saw10", "saw10", "saw10", "saw11", "saw11", "saw11", "saw11", "saw12", "saw12", "saw12", "saw12", "saw13", "saw13", "saw13", "saw13"]
@@ -59,7 +76,7 @@ class Saw extends Tile {
     var requieredCount = 5
     if (this.input.countOf(1) >= requieredCount) {
       if (this.currentwork == 96) {
-        this.input.take(1, requieredCount,this.factory)
+        this.input.take(1, requieredCount, this.factory)
         var item = new Item(2, this.x * 48, this.y * 48)
         this.factory.items.push(item)
         item.setDFromDirection(this.direction)
@@ -79,6 +96,10 @@ class Collector extends Tile {
     super(x, y, factory)
     this.name = "collector"
     this.hasNoInventory = true
+    this.cost = [{
+      "id": 0,
+      "count": 50
+    }]
     this.texture = {
       "0": [],
       "1": ["collector10"]

js/userinterface.js

@@ -27,6 +27,8 @@ function style() {
   $('#infoDesc').css('margin-left', infoMarginLeft + 5)
   $('#itemcount').css('margin-top', itemCountMarginTop)
   $('#itemcount').css('margin-left', screenMarginLeft)
+  $('#money').css('margin-top', itemCountMarginTop - 42)
+  $('#money').css('margin-left', screenMarginLeft + 3)
   screenleftpos = screenMarginLeft
   screentoppos = screenMarginTop
   infoleftpos = infoMarginLeft
@@ -128,7 +130,8 @@ function onDocumentMouseMove(event) {
   }
   if (mousedown && mode == "build") {
     if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] == 0) {
-      factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] = new toBuild(cursorScreenX, cursorScreenY, factorys[currentFactory])
+      if (new toBuild().pay())
+        factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] = new toBuild(cursorScreenX, cursorScreenY, factorys[currentFactory])
     }
   }
 }
@@ -253,7 +256,8 @@ function buildEvents() {
     }
     if (mode == "build") {
       if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] == 0) {
-        factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] = new toBuild(cursorScreenX, cursorScreenY, factorys[currentFactory])
+        if (new toBuild().pay())
+          factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] = new toBuild(cursorScreenX, cursorScreenY, factorys[currentFactory])
       }
     }
     if ((mode == "none") && isCursorInScreen) {

lang/en.json

@@ -17,9 +17,10 @@
       "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
     }
   },
-  "items": ["Coal", "Log", "Planks"],
+  "items": ["Dollars", "Log", "Planks"],
   "more": "show more...",
   "inventory": "Inventory",
   "player": "Player",
-  "infotooltips": ["Build", "Move", "Rotate", "Delete!", "", "Upgrade", "Information", "", "Go To Space!!"]
+  "infotooltips": ["Build", "Move", "Rotate", "Delete!", "Upgrade", "Information", "Go To Space!!", "", ""],
+  "cost": "Cost"
 }