diff options
Diffstat (limited to 'public/javascript/game.js')
| -rw-r--r-- | public/javascript/game.js | 304 |
1 files changed, 181 insertions, 123 deletions
diff --git a/public/javascript/game.js b/public/javascript/game.js index 518f08e..137150f 100644 --- a/public/javascript/game.js +++ b/public/javascript/game.js @@ -85,6 +85,25 @@ let walkOnceBuffer = []; let walkInputDirection = -1; let lockWalkDir = -1; +const itemTileLayout = [ + [flourTile, "Flour"], + [waterTile, "Water"], + [powderTile, "Baking Powder"], + [breadTile, "Bread"], + [blockStartTile + 0, "Red Block"], + [blockStartTile + 1, "Orange Block"], + [blockStartTile + 2, "Yellow Block"], + [blockStartTile + 3, "Green Block"], + [blockStartTile + 4, "Teal Block"], + [blockStartTile + 5, "Blue Block"], + [blockStartTile + 6, "Purple Block"], + [blockStartTile + 7, "Gray Block"], + [teleporterStartTile + 0, "Tele North"], + [teleporterStartTile + 1, "Tele East"], + [teleporterStartTile + 2, "Tele South"], + [teleporterStartTile + 3, "Tele West"], +]; + // Thanks to CatTail for this snippet of code. var encodeHtmlEntity = function(str) { var buf = []; @@ -165,6 +184,9 @@ function handleGameUpdateRequest(data) { if (tempCommand.commandName == "placeTile") { performPlaceTileCommand(tempCommand); } + if (tempCommand.commandName == "placeDoor") { + performPlaceDoorCommand(tempCommand); + } if (tempCommand.commandName == "collectTile") { performCollectTileCommand(tempCommand); } @@ -260,6 +282,16 @@ function addPlaceTileCommand(direction, tile) { }); } +function addPlaceDoorCommand(direction, doorid) { + gameUpdateCommandList.push({ + commandName: "placeDoor", + direction: direction, + doorId: doorid, + // Note: pos is ignored by the server. It is for client-use only. + pos: localPlayer.getPosInWalkDirection(direction).toJson() + }); +} + function addCollectTileCommand(direction) { gameUpdateCommandList.push({ commandName: "collectTile", @@ -428,35 +460,72 @@ function performAddOnlinePlayerCommand(command) { } function performSetInventoryCommand(command) { - var tempInventory = command.inventory; - var index = 0; - while (index < inventoryItemList.length) { - var tempInventoryItem = inventoryItemList[index]; - var tempTile = tempInventoryItem.tile; - if (tempTile in tempInventory) { - var tempCount = tempInventory[tempTile]; - tempInventoryItem.setCount(tempCount); - } - index += 1; - } - localPlayer.breadCount = getInventoryItemByTile(breadTile).count; - var tempFlourCount = getInventoryItemByTile(flourTile).count; - var tempWaterCount = getInventoryItemByTile(waterTile).count; - var tempPowderCount = getInventoryItemByTile(powderTile).count; - var tempUnbakedBreadCount = Math.min(tempFlourCount, tempWaterCount, tempPowderCount); - var tempEffectiveBreadCount = localPlayer.breadCount + tempUnbakedBreadCount; - document.getElementById("breadCount").innerHTML = localPlayer.breadCount; - document.getElementById("flourCount").innerHTML = tempFlourCount; - document.getElementById("waterCount").innerHTML = tempWaterCount; - document.getElementById("powderCount").innerHTML = tempPowderCount; - document.getElementById("unbakedBreadCount").innerHTML = tempUnbakedBreadCount; - document.getElementById("effectiveBreadCount").innerHTML = tempEffectiveBreadCount; + let inv = localPlayer.inventory = command.inventory; + for (let i = 0; i < itemTileLayout.length; i++) { + let entry = inventoryUI.entries[i]; + let item = entry.item; + if (typeof item == "number") { + let n = inv[item] || 0; + entry.setCount(n); + } + } + const a = itemTileLayout.length; + const b = inventoryUI.entries.length; + for (let i = a; i < b; i++) { + inventoryUI.entries[i].markedForDeletion = true; + } + if (inv[0x9b]) + for (let j = 0; j < inv[0x9b].length; j++) { + let found = false; + const doorid = inv[0x9b][j]; + for (let i = a; i < b; i++) { + let entry = inventoryUI.entries[i]; + let item = entry.item; + if (typeof item == "object" + && item[0] == 0x9b + && item[1] == doorid) { + found = true; + entry.markedForDeletion = false; + } + } + if (!found) { + let entry = new InventoryUIEntry([0x9b, doorid]); + entry.setName("Door"); + entry.setTileAsIcon(0x9b); + inventoryUI.entries.push(entry); + entry.display(); + } + } + for (let i = a; i < b; i++) { + let entry = inventoryUI.entries[i]; + if (entry.markedForDeletion) { + console.log("removing entry"); + entry.remove(); + i--; + } + } + localPlayer.breadCount = inv[breadTile] || 0; + var f = inv[flourTile] || 0; + var w = inv[waterTile] || 0; + var p = inv[powderTile] || 0; + var ub = Math.min(f, w, p); + var eb = localPlayer.breadCount + ub; + document.getElementById("breadCount").innerHTML = localPlayer.breadCount; + document.getElementById("flourCount").innerHTML = f; + document.getElementById("waterCount").innerHTML = w; + document.getElementById("powderCount").innerHTML = p; + document.getElementById("unbakedBreadCount").innerHTML = ub; + document.getElementById("effectiveBreadCount").innerHTML = eb; } function performPlaceTileCommand(command) { setTileBufferValue(createPosFromJson(command.pos), command.tile); } +function performPlaceDoorCommand(command) { + setTileBufferValue(createPosFromJson(command.pos), 0x9b); +} + function performCollectTileCommand(command) { setTileBufferValue(createPosFromJson(command.pos), emptyTile); } @@ -521,93 +590,71 @@ function InventoryItem(tile, name) { inventoryItemList.push(this); } -InventoryItem.prototype.addToModule = function() { - var tempContainer = document.getElementById("inventoryDiv"); - this.tag = document.createElement("div"); - this.tag.className = "inventoryItem" - var tempCanvas = document.createElement("canvas"); - var tempSize = 32; - tempCanvas.width = tempSize; - tempCanvas.height = tempSize; - tempCanvas.style.width = tempSize / 2; - tempCanvas.style.height = tempSize / 2; - this.tag.appendChild(tempCanvas); - var tempNameLabel = document.createElement("strong"); - tempNameLabel.innerHTML = this.name; - this.tag.appendChild(tempNameLabel); - this.countLabel = document.createElement("span"); - this.tag.appendChild(this.countLabel); - this.displayCount(); - tempContainer.appendChild(this.tag); - var tempContext = tempCanvas.getContext("2d"); - drawTileOnContext(tempContext, new Pos(0, 0), tempSize, this.tile); - this.updateBorder(); - var index = this.getIndex(); - this.tag.onclick = function() { - selectInventoryItem(index); - } -} - -InventoryItem.prototype.displayCount = function() { - this.countLabel.innerHTML = "(x" + this.count + ")"; -} - -InventoryItem.prototype.setCount = function(count) { - this.count = count; - this.displayCount(); -} - -InventoryItem.prototype.getIndex = function() { - return inventoryItemList.indexOf(this); -} - -InventoryItem.prototype.updateBorder = function() { - var index = this.getIndex(); - if (index == selectedInventoryItemIndex) { - this.tag.style.border = "3px #000000 solid"; - } else { - this.tag.style.border = "3px #FFFFFF solid"; - } -} +let inventoryUI = { + selent: null, + entries: [], +}; -function selectInventoryItem(index) { - selectedInventoryItemIndex = index; - var index = 0; - while (index < inventoryItemList.length) { - var tempInventoryItem = inventoryItemList[index]; - tempInventoryItem.updateBorder(); - index += 1; - } -} +class InventoryUIEntry { + constructor(item) { + this.item = item; + this.tag = document.createElement("div"); + this.tag.className = "inventoryItem" + this.cnv = document.createElement("canvas"); + let tempSize = 32; + this.cnv.width = tempSize; + this.cnv.height = tempSize; + this.cnv.style.width = tempSize / 2; + this.cnv.style.height = tempSize / 2; + this.tag.appendChild(this.cnv); + this.lbl = document.createElement("strong"); + this.countLabel = document.createElement("span"); + this.tag.appendChild(this.lbl); + this.tag.appendChild(this.countLabel); + let that = this; + this.tag.onclick = function() { + inventoryUI.selent.unborder(); + inventoryUI.selent = that; + that.border(); + }; + } -function getInventoryItemByTile(tile) { - var index = 0; - while (index < inventoryItemList.length) { - var tempInventoryItem = inventoryItemList[index]; - if (tempInventoryItem.tile == tile) { - return tempInventoryItem; - } - index += 1; - } - return null; -} + setTileAsIcon(tile) { + let tempContext = this.cnv.getContext("2d"); + drawTileOnContext(tempContext, new Pos(0, 0), this.cnv.width, tile); + } -new InventoryItem(flourTile, "Flour"); -new InventoryItem(waterTile, "Water"); -new InventoryItem(powderTile, "Baking Powder"); -new InventoryItem(breadTile, "Bread"); -new InventoryItem(blockStartTile + 0, "Red Block"); -new InventoryItem(blockStartTile + 1, "Orange Block"); -new InventoryItem(blockStartTile + 2, "Yellow Block"); -new InventoryItem(blockStartTile + 3, "Green Block"); -new InventoryItem(blockStartTile + 4, "Teal Block"); -new InventoryItem(blockStartTile + 5, "Blue Block"); -new InventoryItem(blockStartTile + 6, "Purple Block"); -new InventoryItem(blockStartTile + 7, "Gray Block"); -new InventoryItem(teleporterStartTile + 0, "Tele North"); -new InventoryItem(teleporterStartTile + 1, "Tele East"); -new InventoryItem(teleporterStartTile + 2, "Tele South"); -new InventoryItem(teleporterStartTile + 3, "Tele West"); + border() { + this.tag.style.border = "3px #000000 solid"; + } + unborder() { + this.tag.style.border = "3px #ffffff solid"; + } + + setName(text) { + this.lbl.innerHTML = text; + } + + setSubtext(text) { + this.countLabel.innerHTML = text; + } + setCount(n) { + this.setSubtext("(x" + n + ")"); + } + + display() { + let tempContainer = document.getElementById("inventoryDiv"); + tempContainer.appendChild(this.tag); + } + remove() { + let i = inventoryUI.entries.indexOf(this); + inventoryUI.entries.splice(i, 1); + this.tag.parentElement.removeChild(this.tag); + if (this == inventoryUI.selent) { + inventoryUI.selent = inventoryUI.entries[0]; + } + } +} Entity.prototype.remove = function() { var index = 0; @@ -712,16 +759,22 @@ Player.prototype.walk = function(direction) { } Player.prototype.placeTile = function(direction) { - var tempPos = this.getPosInWalkDirection(direction); - var tempInventoryItem = inventoryItemList[selectedInventoryItemIndex]; - if (tempInventoryItem.count <= 0) { - return; - } - tempInventoryItem.count -= 1; - tempInventoryItem.displayCount(); - var tempTile = tempInventoryItem.tile; - setTileBufferValue(tempPos, tempTile); - addPlaceTileCommand(direction, tempTile); + let pos = this.getPosInWalkDirection(direction); + let item = inventoryUI.selent.item; + console.log(item, typeof item, item[0]); + if (typeof item == "number") { + if (localPlayer.inventory[item] <= 0) { + return; + } + localPlayer.inventory[item]--; + inventoryUI.selent.setCount(localPlayer.inventory[item]); + setTileBufferValue(pos, item); + addPlaceTileCommand(direction, item); + } else if (typeof item == "object" && item[0] == 0x9b) { + setTileBufferValue(pos, 0x9b); + addPlaceDoorCommand(direction, item[1]); + inventoryUI.selent.remove(); + } } Player.prototype.removeTile = function(direction) { @@ -1642,12 +1695,16 @@ function barTimerEvent() { } function addAllInventoryItemsToMode() { - var index = 0; - while (index < inventoryItemList.length) { - var tempInventoryItem = inventoryItemList[index]; - tempInventoryItem.addToModule(); - index += 1; - } + for (let i = 0; i < itemTileLayout.length; i++) { + let tile = itemTileLayout[i][0]; + let entry = new InventoryUIEntry(tile); + entry.setName(itemTileLayout[i][1]); + entry.setTileAsIcon(tile); + inventoryUI.entries.push(entry); + entry.display(); + } + inventoryUI.selent = inventoryUI.entries[0]; + inventoryUI.selent.border(); } function initializeGame() { @@ -1719,6 +1776,7 @@ function initializeGame() { gameUpdateSocket.onmessage = function(event) { handleGameUpdateRequest(JSON.parse(event.data)); }; + } |