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