Added Sell Menu

css/main.css

@@ -69,6 +69,7 @@ body {
   border: 2px;
   border-style: solid;
   border-color: gray;
+  z-index: 100;
 }
 
 #money {
@@ -80,16 +81,61 @@ body {
   line-height: 42px;
   text-align: center;
   background-image: url(../images/moneybg.png);
+  z-index: -1;
+}
+
+.itemBig {
+  width: 72;
+  height: 72;
+  background-image: url(../images/inventorybg.png);
+}
+
+#showmore {
+  width: 200;
+  height: 24;
+  position: fixed;
+}
+
+#inventoryBig {
+  position: fixed;
+  border: 1px, solid, black;
+  border: solid;
+  border-color: yellow;
+  background-image: url("../images/wool.jpg");
+  width: 1192;
+  height: 568;
+  padding: 4;
+}
+
+#clickToSell {
+  width: 1192;
+  height: 38;
+  font-family: 'Electrolize', sans-serif;
+  font-size: 22px;
+  line-height: 38px;
+  text-align: center;
+  color: floralwhite;
+}
+
+#itemsScroll {
+  overflow-y: scroll;
+  width: 1192;
+  height: 530;
 }
 
 body {
-  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-touch-callout: none;
-    -webkit-user-select: none; /* Safari */
+  /* iOS Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
+  -webkit-user-select: none;
-       -moz-user-select: none; /* Firefox */
+  /* Safari */
-        -ms-user-select: none; /* Internet Explorer/Edge */
+  -khtml-user-select: none;
-            user-select: none; /* Non-prefixed version, currently
+  /* Konqueror HTML */
-                                  supported by Chrome and Opera */
+  -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 {

index.html

@@ -30,10 +30,17 @@
   </div>
   <div id="buildselect">
   </div>
+  <div id="inventoryBig">
+    <span id="clickToSell"></span>
+    <div id="itemsScroll">
+    </div>
+  </div>
   <div id="tooltip">
     <span>
     </span>
   </div>
+  <div id="showmore">
+  </div>
   <span id="money">
     ??? Dollar
   </span>

js/game.js

@@ -165,6 +165,9 @@ function render() {
     drawInventory(inventory, lang["player"])
   }
   $('#money').text(money + " " + lang.items[0])
+  if(mode == "showmore"){
+    drawBigInventory(inventory)
+  }
 }
 
 function getItemFormId(id) {
@@ -207,7 +210,9 @@ function prepairRender() {
   }
   console.log(tilesLoaded + "/" + tileClasses.length + " Tiles Loaded!")
   $('#buildselect').hide()
+  $('#inventoryBig').hide()
   buildEvents()
+  $('#clickToSell').text(lang.clickToSell)
 }
 
 var infoBarIcons = ["build.png", "move.png", "rotate.png", "delete.png", null, "upgrade.png", "info.png", null, "rocket.png"]

js/items.json

@@ -1,12 +1,15 @@
 {
   "items": [{
     "id": 0,
-    "name": "money"
+    "name": "money",
+    "value": 1
   },{
     "id": 1,
-    "name": "log"
+    "name": "log",
+    "value": 1
   },{
     "id": 2,
-    "name": "planks"
+    "name": "planks",
+    "value": 6
   }]
 }

js/userinterface.js

@@ -21,12 +21,16 @@ function style() {
   $('#screen').css('margin-left', screenMarginLeft)
   $('#buildselect').css('margin-top', screenMarginTop)
   $('#buildselect').css('margin-left', screenMarginLeft)
+  $('#inventoryBig').css('margin-top', screenMarginTop)
+  $('#inventoryBig').css('margin-left', screenMarginLeft)
   $('#info').css('margin-top', itemCountMarginTop)
   $('#info').css('margin-left', infoMarginLeft)
   $('#infoDesc').css('margin-top', itemCountMarginTop + 51)
   $('#infoDesc').css('margin-left', infoMarginLeft + 5)
   $('#itemcount').css('margin-top', itemCountMarginTop)
   $('#itemcount').css('margin-left', screenMarginLeft)
+  $('#showmore').css('margin-top', itemCountMarginTop)
+  $('#showmore').css('margin-left', screenMarginLeft + 520)
   $('#money').css('margin-top', itemCountMarginTop - 42)
   $('#money').css('margin-left', screenMarginLeft + 3)
   screenleftpos = screenMarginLeft
@@ -137,6 +141,14 @@ function onDocumentMouseMove(event) {
 }
 
 function clickEvents() {
+  $('#showmore').click(function() {
+    if (mode == "none") {
+      $('#inventoryBig').fadeIn(200)
+      mode = "showmore"
+    } else {
+      closeUi()
+    }
+  })
   $('#info').click(function() {
     if (cursorInfoY == 0) {
       switch (cursorInfoX) {
@@ -186,7 +198,11 @@ var moveFromCY = -1
 
 //itemId[]
 
+var hoverTooltip = false
+
 function setTooltip() {
+  if (hoverTooltip)
+    return
   if (cursorInfoY == 0) {
     if (lang.infotooltips[cursorInfoX] == "") {
       $('#tooltip').hide()
@@ -286,7 +302,6 @@ function buildEvents() {
     }
   );
 
-
   $('body').mousedown(function(e) {
     if (e.which == 1)
       mousedown = true
@@ -349,6 +364,11 @@ function closeUi() {
     mode = "none"
     return false
   }
+  if (mode == "showmore") {
+    mode = "none"
+    $('#inventoryBig').fadeOut(200)
+    return false
+  }
 }
 
 var itemId = []
@@ -404,3 +424,65 @@ function drawInventory(inventory, title) {
     }
   }
 }
+
+function drawBigInventory(inventory) {
+  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, 25 * 48, 24);
+  //inventoryCtx.fillStyle = "black"
+  //inventoryCtx.fillText(lang.inventory + " - " + title, 2, 18)
+  //inventoryCtx.fillStyle = "black"
+  //inventoryCtx.textAlign = "start"
+  var currentIndex = 0
+  $('#itemsScroll').empty()
+  while (currentIndex != itemId.length) {
+    $('#itemsScroll').append('<canvas class="itemBig" style="width: 72; height: 72" id="itemBig_' + itemId[currentIndex] + '"></canvas>')
+    $('#itemBig_' + itemId[currentIndex])[0].width = 72;
+    $('#itemBig_' + itemId[currentIndex])[0].height = 72
+    var itemCtx = $('#itemBig_' + itemId[currentIndex])[0].getContext("2d")
+    var img = new Image
+    img.src = "images/items/" + items[itemId[currentIndex]].name + ".png"
+    itemCtx.font = "16px Electrolize"
+    itemCtx.drawImage(img, 12, 12, 48, 48)
+
+    var formattedCount = formatCount(itemCount[currentIndex])
+    itemCtx.strokeStyle = "black"
+    itemCtx.lineWidth = 2
+    itemCtx.strokeText("x" + formattedCount, 4, 67)
+    itemCtx.fillStyle = "white"
+    itemCtx.fillText("x" + formattedCount, 4, 67)
+
+    currentIndex++
+    $('#itemBig_' + itemId[currentIndex]).hover(
+      function() {
+        //ENTER
+        console.log("TRIGGER")
+        hoverTooltip = true
+        $('#tooltip').text(lang.items[itemId[currentIndex]] + "(" + formatCount(items[itemId[currentIndex]].value) + " " + lang.items[0] + ")")
+        $('#tooltip').show()
+        tooltip = true
+      },
+      function() {
+        //LEAVE
+        hoverTooltip = false
+      }
+    );
+  }
+}

lang/en.json

@@ -18,9 +18,10 @@
     }
   },
   "items": ["Dollars", "Log", "Planks"],
-  "more": "show more...",
+  "more": "Sell Items",
   "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"
+  "cost": "Cost",
+  "clickToSell": "Click on items to sell them."
 }

modes.md

@@ -3,5 +3,6 @@ selectbuilding
 building
 rotate
 delete
+showmore
 
 400 Items = 0.5 MB