Added waterhole and bigger images.

buildings.js

@@ -1,7 +1,11 @@
 var Buildings = {
   basic: function(xy){
     this.location = xy;
+    this.width = 1;
+    this.height = 1;
   },
+  // TODO: Make roads a special property of tiles
+  // instead of a building
   road: function(xy){
     Buildings.basic.call(this, xy);
     this.image = Resources.images.road;
@@ -14,13 +18,38 @@ var Buildings = {
     this.type = "plot";
     this.capacity = 1;
     this.people = new Array();
+  },
+
+  water_hole: function(xy){
+    Buildings.basic.call(this, xy);
+    this.image = Resources.images.water_hole;
+    this.type = "water_hole";
+    this.width = this.height = 2;
   }
 };
-Buildings.plot.prototype = Buildings.basic.prototype;
-Buildings.road.prototype = Buildings.basic.prototype;
+Buildings.plot.prototype = new Buildings.basic();
+Buildings.road.prototype = new Buildings.basic();
+Buildings.water_hole.prototype = new Buildings.basic();
 
 Buildings.basic.prototype.placed = function(coords){
   this.location = coords;
+
+  if (this.type != "road"){
+    if (!this.findRoad(1)){
+      Game.addMessage(t("must_be_near_road"));
+    }
+  }
+
+  // cover up nearby tiles
+  if (this.width > 1 || this.height > 1){
+    for (var y = 0; y < this.height; y++){
+      for (var x = 0; x < this.width; x++){
+        if (y != 0 || x != 0){
+          Game.tiles[y][x].building = true;
+        }
+      }
+    }
+  }
 };
 
 Buildings.plot.prototype.placed = function(coords){
@@ -57,10 +86,10 @@ Buildings.basic.prototype.findRoad = function(radius, width, height){
     radius = 2;
   }
   if (width === undefined){
-    width = 1;
+    width = this.width;
   }
   if (height === undefined){
-    height = 1;
+    height = this.height;
   }
   for (var y = Math.max(0, this.location[1] - radius); y <= Math.min(Game.tiles.length - 1, this.location[1] + height - 1 + radius); y++){
     for (var x = Math.max(0, this.location[0] - radius); x <= Math.min(Game.tiles[y].length - 1, this.location[0] + width - 1 + radius); x++){

game.js

@@ -55,6 +55,10 @@ var Game = {
     return $.map(Game.messages, function(obj) { return obj.message; });
   },
 
+  getBuildings: function(){
+    return Game.buildings;
+  },
+
   addMessage: function(msg){
     // message queue can only be 10 messages long
     if (Game.messages.length == 10){
@@ -76,6 +80,7 @@ var Game = {
 };
 
 Game.objects = new Array();
+Game.buildings = new Array();
 Game.messages = new Array();
 
 $(function(){

gameControls.js

@@ -8,6 +8,7 @@ Game.Controls = {
         if (tile && tile.type.buildable){
           tile.building = Game.building;
           tile.building.placed(coords);
+          Game.buildings.push(Game.building);
           Game.building = new Buildings[Game.buildingType]();
           Game.display.tiler.renderBuildings();
         }
@@ -19,13 +20,26 @@ Game.Controls = {
     if (Game.building){
       var coords = Game.display.tiler.toWorldCoords(Game.canvasCoords([ev.clientX, ev.clientY]));
 
-      if (Game.inBounds(coords)){
-        var tile = Game.tiles[coords[1]][coords[0]];
-        if (tile.building || !tile.type.buildable){
-          Game.display.tiler.setHover(coords, Resources.images.redHover);
-        }else{
-          Game.display.tiler.setHover(coords, Game.building.image);
+      var canPlace = true;
+      for (var y = 0; y < Game.building.width; y++){
+        for (var x = 0; x < Game.building.height; x++){
+          if (Game.inBounds([coords[0] + x, coords[1] + y])){
+            var tile = Game.tiles[coords[1] + y][coords[0] + x];
+            if (tile.building || !tile.type.buildable){
+              canPlace = false;
+              break;
+            }
+          }
         }
+        if (!canPlace){
+          break;
+        }
+      }
+      if (canPlace){
+        Game.display.tiler.setHover(coords, Game.building.image);
+      }else{
+        Game.display.tiler.setHover(coords, Resources.images["redHover_" + Game.building.width +
+          "_" + Game.building.height]);
       }
     }
   },

index.html

@@ -13,6 +13,9 @@
   <a href = "#" onclick = "Game.Controls.selectBuilding('plot'); return false" class = "building-btn">
     <img src = "images/buildings/plot.png" alt = "Plot" title = "Housing Plot" />
   </a>
+  <a href = "#" onclick = "Game.Controls.selectBuilding('water_hole'); return false" class = "building-btn">
+    <img src = "images/buildings/water-hole.png" alt = "Watering Hole" title = "Watering Hole" />
+  </a>
 </div>
 <!-- millions of JS includes -->
 <script type = "text/javascript" src = "jquery-1.4.2.min.js"></script>

resources.js

@@ -2,27 +2,30 @@ var Resources = {
   images: {
     hovel: {
       file: "buildings/hovel.png",
-      image: new Image()
     },
 
     immigrant: {
       file: "sprites/immigrant.png",
-      image: new Image()
     },
 
     plot: {
       file: "buildings/plot.png",
-      image: new Image()
     },
 
-    redHover: {
-      file: "util/red-hover.png",
-      image: new Image()
+    redHover_1_1: {
+      file: "util/red-hover-1-1.png",
+    },
+
+    redHover_2_2: {
+      file: "util/red-hover-2-2.png",
     },
 
     road: {
       file: "buildings/road.png",
-      image: new Image()
+    },
+
+    water_hole: {
+      file: "buildings/water-hole.png",
     }
   }
 };
@@ -36,6 +39,7 @@ $(function(){
     TileTypes[i].image.src = "images/tiles/" + TileTypes[i].file;
   }
   for (var i in Resources.images){
+    Resources.images[i].image = new Image();
     Resources.images[i].image.src = "images/" + Resources.images[i].file;
   }
 });

text.js

@@ -7,7 +7,8 @@ var Text = {
 
 Text.en = {
   inaccessible_housing: "Some housing plots are inaccessible.",
-  plot_too_far: "Some housing plots are too far from a road."
+  plot_too_far: "Some housing plots are too far from a road.",
+  must_be_near_road: "This building must be adjacent to a road."
 };
 
 function t(label){

tiling.js

@@ -159,15 +159,10 @@ Diamond.prototype.renderBuildings = function(){
 
   var coords;
 
-  // TODO: buildings should be in a list somewhere, iterate over that instead of over every tile
-  for (var y = 0; y < this.tiles.length; y++){
-    for (var x = this.tiles[y].length - 1; x >= 0; x--){
-      coords = this.toScreenCoords([x, y], false);
-      if (this.tiles[y][x].building){
-        // TODO: some buildings are big
-        context.drawImage(this.tiles[y][x].building.image.image, coords[0], coords[1]);
-      }
-    }
+  var buildings = Game.getBuildings();
+  for (var i = 0; i < buildings.length; i++){
+    coords = this.toScreenCoords(buildings[i].location, false);
+    context.drawImage(buildings[i].image.image, coords[0], coords[1] - (this.jhat * (buildings[i].height - 1)));
   }
 }
 
@@ -237,6 +232,7 @@ Diamond.prototype.colourHover = function(clear){
       this.renderTile(this.hover.pos);
     }else{
       var coords = this.toScreenCoords(this.hover.pos);
+      // TODO: big images need to be shifted up
       this.context.drawImage(this.hover.image, coords[0], coords[1]);
     }
   }