diff --git a/css/main.css b/css/main.css
index 7ec1359..202afc5 100644
--- a/css/main.css
+++ b/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-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 */
+ -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 {
diff --git a/images/fliesen.png b/images/fliesen.png
index 1a3b841..2201d4b 100644
Binary files a/images/fliesen.png and b/images/fliesen.png differ
diff --git a/images/moneybg.png b/images/moneybg.png
index 8b7eddb..8a7e076 100644
Binary files a/images/moneybg.png and b/images/moneybg.png differ
diff --git a/images/unknown.png b/images/unknown.png
new file mode 100644
index 0000000..1a3b841
Binary files /dev/null and b/images/unknown.png differ
diff --git a/index.html b/index.html
index 17bab15..9774b1c 100644
--- a/index.html
+++ b/index.html
@@ -30,10 +30,17 @@
+
+
+
??? Dollar
diff --git a/js/game.js b/js/game.js
index 7357a34..dd7d618 100644
--- a/js/game.js
+++ b/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"]
diff --git a/js/items.json b/js/items.json
index a2e1603..acc9e2d 100644
--- a/js/items.json
+++ b/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
}]
}
diff --git a/js/userinterface.js b/js/userinterface.js
index e270405..f635512 100644
--- a/js/userinterface.js
+++ b/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('')
+ $('#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
+ }
+ );
+ }
+}
diff --git a/lang/en.json b/lang/en.json
index 4986b61..a3aadf0 100644
--- a/lang/en.json
+++ b/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!!", "", ""],
- "cost": "Cost"
+ "infotooltips": ["Build", "Move", "Rotate", "Delete!", "", "Upgrade", "Information", "", "Go To Space!!"],
+ "cost": "Cost",
+ "clickToSell": "Click on items to sell them."
}
diff --git a/modes.md b/modes.md
index b947e92..3ef3259 100644
--- a/modes.md
+++ b/modes.md
@@ -3,5 +3,6 @@ selectbuilding
building
rotate
delete
+showmore
400 Items = 0.5 MB