Added Inventory + Fixed Flicker + Added Treefarm

css/main.css

@@ -15,7 +15,8 @@ body {
   border: 1px, solid, black;
   border: solid;
   border-color: white;
-  background-image: url(../images/fliesen.png);
+  background-image: url(../images/inventorybg.png);
+  background-position: bottom 0px right 0px;
 }
 
 #info {

js/baseclasses.js

@@ -1,20 +1,51 @@
 class Tile {
-  constructor(x, y) {
+  constructor(x, y, factory) {
     this.x = x
     this.y = y
     this.direction = "right"
     this.input = new Inventory()
     this.name = "base"
+    this.factory = factory
+    this.currentwork = 0
+    this.maxwork = 0
     this.texture = {
       "0": [],
       "1": []
     }
+    this.images = {
+      "0": [],
+      "1": []
+    }
   }
 
-  getTexture(fulltime, layer) {
+  loadImages(){
-    if (this.texture[layer].length == 0)
+    if(this.texture["0"].length>0){
+      for(var i=0;i<this.texture["0"].length;i++){
+        var img = new Image
+        img.src = "images/tiles/"+this.texture["0"][i]+".png"
+        this.images["0"].push(img)
+      }
+    }
+    if(this.texture["1"].length>0){
+      for(var i=0;i<this.texture["1"].length;i++){
+        var img = new Image
+        img.src = "images/tiles/"+this.texture["1"][i]+".png"
+        this.images["1"].push(img)
+      }
+    }
+  }
+
+  unloadImages(){
+    this.images = {
+      "0": [],
+      "1": []
+    }
+  }
+
+  getImage(fulltime, layer) {
+    if (this.images[layer].length == 0)
       return "0"
-    return "images/tiles/" + this.texture[layer][(fulltime % this.texture[layer].length)] + ".png";
+    return this.images[layer][(fulltime % this.images[layer].length)]
   }
 
   work() {
@@ -86,6 +117,7 @@ class Item {
     this.y = y
     this.dx = 0
     this.dy = 0
+    this.spawntime = new Date().getTime()
   }
 
   setDFromDirection(direction) {
@@ -142,6 +174,15 @@ class Factory {
     return temp
   }
 
+  despawnOldItems(){
+    var time = new Date().getTime()
+    for(var i=0;i<this.items.length;i++){
+      if(this.items[i].spawntime+1000*60*5<time){
+        this.items.splice(i,1)
+      }
+    }
+  }
+
   workTiles() {
     for (var x = 0; x < 32; x++) {
       for (var y = 0; y < 16; y++) {

js/game.js

@@ -1,4 +1,5 @@
 var factorys = []
+var inventory = {}
 
 var items = []
 
@@ -8,6 +9,7 @@ var delta = 0
 var lastFrameTimeMs = 0
 var ctx = {}
 var infoCtx = {}
+var inventoryCtx = {}
 var currentFactory = 0
 var fulltime = 0
 
@@ -26,6 +28,7 @@ $(document).ready(function() {
 function loadGameData() {
   //TODO: Check for Cookies
   factorys.push(new Factory())
+  inventory = new Inventory()
 }
 
 function loadItems() {
@@ -86,10 +89,8 @@ function gametick(timestep) {
   //Wird 40 mal in einer Sekunde aufgerufen
   for (var i = 0; i < factorys.length; i++) {
     factorys[i].moveItems()
-  }
-
-  for (var i = 0; i < factorys.length; i++) {
     factorys[i].workTiles()
+    factorys[i].despawnOldItems()
   }
 }
 
@@ -101,10 +102,8 @@ function render() {
   //RENDER TILE-LAYER0
   for (var i = 0; i < tilesToRender.length; i++) {
     var tile = tilesToRender[i]
-    var img = new Image
+    var img = tile.getImage(fulltime, 0)
-    var tmp = tile.getTexture(fulltime, 0)
+    if (img != "0") {
-    if (tmp != "0") {
-      img.src = tmp
       drawRotatedImage(img, tile.x * 48 + 24, tile.y * 48 + 24, directions[tile.direction].degree)
     }
   }
@@ -118,10 +117,8 @@ function render() {
   //RENDER TILE-LAYER1
   for (var i = 0; i < tilesToRender.length; i++) {
     var tile = tilesToRender[i]
-    var img = new Image
+    var img = tile.getImage(fulltime, 1)
-    var tmp = tile.getTexture(fulltime, 1)
+    if (img != "0") {
-    if (tmp != "0") {
-      img.src = tmp
       drawRotatedImage(img, tile.x * 48 + 24, tile.y * 48 + 24, directions[tile.direction].degree)
     }
     if (mode == "rotate") {
@@ -137,16 +134,12 @@ function render() {
     if (mode == "build") {
       ctx.globalAlpha = 0.6
       var tile = new toBuild()
-      var img = new Image
+      var img = tile.getImage(fulltime, 0)
-      var tmp = tile.getTexture(fulltime, 0)
+      if (img != "0") {
-      if (tmp != "0") {
-        img.src = tmp
         drawRotatedImage(img, cursorScreenX * 48 + 24, cursorScreenY * 48 + 24, 0)
       }
-      img = new Image
+      img = tile.getImage(fulltime, 1)
-      tmp = tile.getTexture(fulltime, 1)
+      if (img != "0") {
-      if (tmp != "0") {
-        img.src = tmp
         drawRotatedImage(img, cursorScreenX * 48 + 24, cursorScreenY * 48 + 24, 0)
       }
       ctx.globalAlpha = 1
@@ -158,6 +151,14 @@ function render() {
   }
   //DRAW INFO BAR
   drawInfoBar()
+  if (selectedTile != 0 && mode != "buildselect" && mode != "build") {
+    if (selectedTile.hasNoInventory === undefined)
+      drawInventory(selectedTile.input, lang.tiles[selectedTile.name].name)
+    else
+      drawInventory(inventory, lang["player"])
+  } else {
+    drawInventory(inventory, lang["player"])
+  }
 }
 
 function getItemFormId(id) {
@@ -176,6 +177,7 @@ function prepairRender() {
   canvas = $('#itemcount')[0];
   canvas.width = 720
   canvas.height = 240
+  inventoryCtx = canvas.getContext('2d')
   canvas = $('#info')[0];
   canvas.width = 432
   canvas.height = 240
@@ -241,13 +243,13 @@ function drawInfoBar() {
       infoCtx.drawImage(img, i * 48, 0, 48, 48);
     }
   }
-  if(toBuild!=0){
+  if (toBuild != 0) {
     selectedTile = new toBuild()
   }
-  if(selectedTile != 0){
+  if (selectedTile != 0) {
     $('#infoDesc h1').text(lang.tiles[selectedTile.name].name)
     $('#infoDesc p').text(lang.tiles[selectedTile.name].description)
-  }else{
+  } else {
     $('#infoDesc h1').text("")
     $('#infoDesc p').text("")
   }

js/items.json

@@ -2,5 +2,8 @@
   "items": [{
     "id": 0,
     "name": "coal"
+  },{
+    "id": 1,
+    "name": "log"
   }]
 }

js/tiles.js

@@ -3,13 +3,40 @@ var tileClasses = []
 //Hier sind alle im Tiles welche im Spiel präsent sind
 
 class Conveyorbelt extends Tile {
-  constructor(x, y) {
+  constructor(x, y, factory) {
-    super(x, y)
+    super(x, y, factory)
     this.name = "conveyorbelt"
+    this.hasNoInventory = true
     this.texture = {
       "0": ["conveyorbelt00", "conveyorbelt01", "conveyorbelt02", "conveyorbelt03", "conveyorbelt04", "conveyorbelt05", "conveyorbelt06"],
       "1": []
     }
+    this.loadImages()
   }
 }
 tileClasses.push(Conveyorbelt)
+
+class Treefarm extends Tile {
+  constructor(x, y, factory) {
+    super(x, y, factory)
+    this.maxwork = 96
+    this.currentwork = 0
+    this.name = "treefarm"
+    this.hasNoInventory = true
+    this.texture = {
+      "0": [],
+      "1": ["treefarm10", "treefarm10", "treefarm10", "treefarm11", "treefarm11", "treefarm11", "treefarm12", "treefarm12", "treefarm12", "treefarm13", "treefarm13", "treefarm13", "treefarm14", "treefarm14", "treefarm14", "treefarm15", "treefarm15", "treefarm15"]
+    }
+    this.loadImages()
+  }
+
+  work() {
+    this.currentwork = ((this.currentwork + 1) % this.maxwork)
+    if (this.currentwork == 0) {
+      var item = new Item(1, this.x * 48, this.y * 48)
+      this.factory.items.push(item)
+      item.setDFromDirection(this.direction)
+    }
+  }
+}
+tileClasses.push(Treefarm)

js/userinterface.js

@@ -164,7 +164,7 @@ function buildEvents() {
     }
     if (mode == "build") {
       if (factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] == 0) {
-        factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] = new toBuild(cursorScreenX, cursorScreenY)
+        factorys[currentFactory].tiles[cursorScreenX][cursorScreenY] = new toBuild(cursorScreenX, cursorScreenY, factorys[currentFactory])
       }
     }
     if (mode == "move") {
@@ -193,7 +193,7 @@ function buildEvents() {
       } else {
         selectedTile = 0
       }
-    }else if(mode!="build"){
+    } else if (mode != "build") {
       selectedTile = 0
     }
   })
@@ -206,11 +206,12 @@ function buildEvents() {
         id = parseInt(id.substr(6))
         selectedTile = new tileClasses[id]()
       }
-  }, function() {
+    },
+    function() {
       //LEAVE
       selectedTile = 0
     }
-);
+  );
 
   $('body').mousedown(function() {
     if (mode == "move") {
@@ -265,3 +266,57 @@ function closeUi() {
     return false
   }
 }
+
+var itemId = []
+var itemCount = []
+
+function drawInventory(inventory, title) {
+  if (!(inventory instanceof Inventory))
+    return false;
+  itemId = []
+  itemCount = []
+
+  for (let item of inventory.items) {
+    var id = item.id
+    var index = itemId.indexOf(item.id)
+    if (index == -1) {
+      itemId.push(id)
+      itemCount.push(1)
+    } else {
+      itemCount[index]++
+    }
+  }
+
+  inventoryCtx.clearRect(0, 0, innerWidth, innerHeight)
+  inventoryCtx.font = "20px Electrolize"
+  inventoryCtx.fillStyle = "#a3a3a3"
+  inventoryCtx.fillRect(0, 0, 15 * 48, 24);
+  inventoryCtx.fillStyle = "black"
+  inventoryCtx.fillText(lang.inventory + " - " + title, 2, 18)
+  inventoryCtx.fillStyle = "black"
+  inventoryCtx.textAlign = "end"
+  inventoryCtx.fillText(lang.more, 48 * 15 - 2, 18)
+  inventoryCtx.textAlign = "start"
+  inventoryCtx.font = "16px Electrolize"
+  var currentIndex = 0
+  if (currentIndex == itemId.length)
+    return true
+  for (var y = 0; y < 3; y++) {
+    for (var x = 0; x < 10; x++) {
+      var img = new Image
+      img.src = "images/items/" + items[itemId[currentIndex]].name + ".png"
+      inventoryCtx.drawImage(img, 12 + x * 72, 36 + y * 72, 48, 48)
+
+      var formattedCount = formatCount(itemCount[currentIndex])
+      inventoryCtx.strokeStyle = "black"
+      inventoryCtx.lineWidth = 2
+      inventoryCtx.strokeText("x" + formattedCount, 2 + x * 72, 94 + y * 72)
+      inventoryCtx.fillStyle = "white"
+      inventoryCtx.fillText("x" + formattedCount, 2 + x * 72, 94 + y * 72)
+
+      currentIndex++
+      if (currentIndex == itemId.length)
+        return true
+    }
+  }
+}

js/util.js

@@ -39,3 +39,7 @@ function infoDrawRotatedImage(image, x, y, angle) {
   infoCtx.drawImage(image, -(image.width / 2), -(image.height / 2));
   infoCtx.restore();
 }
+
+function formatCount(c){
+  return c
+}

lang/en.json

@@ -3,7 +3,13 @@
     "conveyorbelt": {
       "name": "Conveyorbelt",
       "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."
+    },
+    "treefarm": {
+      "name": "Treefarm",
+      "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."
     }
   },
-  "more": "show more..."
+  "more": "show more...",
+  "inventory": "Inventory",
+  "player": "Player"
 }

modes.md

@@ -1,3 +1,6 @@
 none
 selectbuilding
 building
+
+
+400 Items = 0.5 MB