From 1f24b91a28495fa1deb6c06b5ae23a1710a13239 Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Mon, 11 Apr 2016 16:22:56 -0600 Subject: [PATCH] Built out Inventory GUI, moved some things around to where they made more sense, altered how Cargo is managed. --- gui/inventoryGUI.js | 200 +++++++++++++++++++++++++++++++++++++++++--- loadGUIs.js | 27 +++++- loadGameManager.js | 28 ++++++- rooms/oceanRoom.js | 5 ++ start.js | 1 + 5 files changed, 244 insertions(+), 17 deletions(-) diff --git a/gui/inventoryGUI.js b/gui/inventoryGUI.js index e6d1ce9..a6a3a31 100644 --- a/gui/inventoryGUI.js +++ b/gui/inventoryGUI.js @@ -1,20 +1,200 @@ function inventoryGUI() { guiControl.inventory = { - scroll: 0, - cursorPosition: 0 + screen: "main", + cursorPosition: 0, + show: true, + + moneyDisplay: function () { + var moneyString = ""; + if (G.inventory.money >= 1000000) { + moneyString = G.inventory.money.toString().substr(0, 1); + if (parseInt(G.inventory.money.toString().substr(1, 1)) > 0) { + moneyString += "." + G.inventory.money.toString().substr(1, 1); + } + } + if (G.inventory.money >= 1000000000000) { + moneyString += "T"; + } else if (G.inventory.money >= 1000000000) { + moneyString += "B"; + } else if (G.inventory.money >= 1000000) { + moneyString += "M"; + } else { + moneyString = G.inventory.money.toString(); + } + + return moneyString; + } } } function drawInventoryGUI() { - OS.context.drawImage(guiBackground, 0, 0, 240, 240, 2 * OS.S.pixelScale, 2 * OS.S.pixelScale, 240, 240); - // Title - drawPixelText("Cargo", (10 + 2) * OS.S.pixelScale, guiControl.topOfBackground, 8, "black", 6); + if (guiControl.inventory.show) { + OS.context.drawImage(guiControl.background, 0, 0, 240, 240, 2 * OS.S.pixelScale, 2 * OS.S.pixelScale, 240, 240); - // Money and Supplies - // OS.context.drawImage() + if (ct_down().down) { + guiControl.inventory.cursorPosition++; + } + if (ct_up().down) { + guiControl.inventory.cursorPosition--; + } + + if (guiControl.inventory.screen == "main") { + // Limit Cursor + if (guiControl.inventory.cursorPosition < 0) { + guiControl.inventory.cursorPosition = 0; + } + if (guiControl.inventory.cursorPosition > 3) { + guiControl.inventory.cursorPosition = 3; + } - // Cargo - for (var i = 0; i < G.inventory.cargo.length; i++) { - // if () + // Title + guiControl.drawPixelText("Storage", guiControl.leftBorder - (2 * OS.S.pixelScale), guiControl.topOfBackground, 8, "black", 6); + // Money icon + guiControl.drawIcon(7, 2, guiControl.leftBorder, guiControl.rowTop(0)); + guiControl.drawPixelText(guiControl.inventory.moneyDisplay(), guiControl.leftBorder + ((guiControl.iconSize + 4) * OS.S.pixelScale), guiControl.rowTop(0) + OS.S.pixelScale, 8, "black", 6); + // Supplies icon + guiControl.drawIcon(9, 2, guiControl.leftBorder, guiControl.rowTop(1)); + guiControl.drawPixelText(G.inventory.supplies.toString(), guiControl.leftBorder + ((guiControl.iconSize + 4) * OS.S.pixelScale), guiControl.rowTop(1) + OS.S.pixelScale, 8, "black", 6); + // Cargo icon + guiControl.drawIcon(1, 0, guiControl.leftBorder, guiControl.rowTop(2)); + guiControl.drawPixelText(G.inventory.CargoTotal().toString(), guiControl.leftBorder + ((guiControl.iconSize + 4) * OS.S.pixelScale), guiControl.rowTop(2) + OS.S.pixelScale, 8, "black", 6); + + // Close Text + guiControl.drawPixelText("Close", guiControl.leftBorder, guiControl.rowTop(3) + OS.S.pixelScale, 8, "black", 6); + + // Draw cursor + OS.context.drawImage(guiControl.cursor, guiControl.leftBorder - (guiControl.iconScaled), guiControl.rowTop(guiControl.inventory.cursorPosition)); + + // Button Action + if (ct_confirm().down) { + switch (guiControl.inventory.cursorPosition) { + case 0: + guiControl.inventory.screen = "money"; + break; + case 1: + guiControl.inventory.screen = "supplies"; + break; + case 2: + guiControl.inventory.screen = "cargo"; + break; + default: + guiControl.inventory.show = false; + break; + } + + guiControl.inventory.cursorPosition = 0; + } + } + else if (guiControl.inventory.screen == "money") { + // Limit Cursor + if (guiControl.inventory.cursorPosition < 0) { + guiControl.inventory.cursorPosition = 0; + } + if (guiControl.inventory.cursorPosition > 0) { + guiControl.inventory.cursorPosition = 0; + } + + // Title + guiControl.drawPixelText("Money", guiControl.leftBorder - (2 * OS.S.pixelScale), guiControl.topOfBackground, 8, "black", 6); + + guiControl.drawPixelText("Actual Amt", guiControl.leftBorder - (5 * OS.S.pixelScale), guiControl.rowTop(0) + OS.S.pixelScale, 10, "black", 4); + // Money icon + guiControl.drawIcon(7, 2, guiControl.leftBorder - (5 * OS.S.pixelScale), guiControl.rowTop(1) - (3 * OS.S.pixelScale)); + guiControl.drawPixelText(G.inventory.money.toString(), guiControl.leftBorder - (5 * OS.S.pixelScale) + ((guiControl.iconSize + 2) * OS.S.pixelScale), guiControl.rowTop(1) + (2 * OS.S.pixelScale) - (3 * OS.S.pixelScale), 10, "black", 4); + + // Back Text + guiControl.drawPixelText("Back", guiControl.leftBorder, guiControl.rowTop(4) - (3 * OS.S.pixelScale), 8, "black", 6); + + // Draw cursor + OS.context.drawImage(guiControl.cursor, guiControl.leftBorder - (guiControl.iconScaled), guiControl.rowTop(4) - (4 * OS.S.pixelScale)); + + // Button Action + if (ct_confirm().down || ct_cancel().down) { + guiControl.inventory.screen = "main"; + guiControl.inventory.cursorPosition = 0; + } + } + else if (guiControl.inventory.screen == "supplies") { + // Limit Cursor + if (guiControl.inventory.cursorPosition < 0) { + guiControl.inventory.cursorPosition = 0; + } + if (guiControl.inventory.cursorPosition > 2) { + guiControl.inventory.cursorPosition = 2; + } + + // Title + guiControl.drawPixelText("Supplies", guiControl.leftBorder - (6 * OS.S.pixelScale), guiControl.topOfBackground, 8, "black", 6); + + guiControl.drawPixelText("Heal Crew?", guiControl.leftBorder - (5 * OS.S.pixelScale), guiControl.rowTop(0) + OS.S.pixelScale, 10, "black", 4); + // Supplies icon + guiControl.drawIcon(9, 2, guiControl.leftBorder - (5 * OS.S.pixelScale), guiControl.rowTop(1) - (3 * OS.S.pixelScale)); + guiControl.drawPixelText(G.inventory.supplies.toString(), guiControl.leftBorder - (5 * OS.S.pixelScale) + ((guiControl.iconSize + 2) * OS.S.pixelScale), guiControl.rowTop(1) + (2 * OS.S.pixelScale) - (3 * OS.S.pixelScale), 2, "black", 4); + // Illness icon + guiControl.drawIcon(4, 1, guiControl.leftBorder - (5 * OS.S.pixelScale) + (24 * OS.S.pixelScale), guiControl.rowTop(1) - (3 * OS.S.pixelScale)); + guiControl.drawPixelText(G.stats.illness.toString(), guiControl.leftBorder - (5 * OS.S.pixelScale) + (24 * OS.S.pixelScale) + ((guiControl.iconSize + 2) * OS.S.pixelScale), guiControl.rowTop(1) + (2 * OS.S.pixelScale) - (3 * OS.S.pixelScale), 2, "black", 4); + + // Yes/No options + guiControl.drawPixelText("No", guiControl.leftBorder, guiControl.rowTop(2) - (3 * OS.S.pixelScale), 3, "black", 6); + guiControl.drawPixelText("Yes", guiControl.leftBorder, guiControl.rowTop(3) - (3 * OS.S.pixelScale), 3, "black", 6); + + // Back Text + guiControl.drawPixelText("Back", guiControl.leftBorder, guiControl.rowTop(4) - (3 * OS.S.pixelScale), 8, "black", 6); + + // Draw cursor + guiControl.drawCursor(guiControl.leftBorder - (guiControl.iconScaled), guiControl.rowTop(guiControl.inventory.cursorPosition + 2) - (4 * OS.S.pixelScale)); + + // Button Action + if (ct_confirm().down) { + switch (guiControl.inventory.cursorPosition) { + case 1: + if (G.inventory.supplies > 0 && G.stats.illness > 0) { //If cursor is over yes, heal illness with supplies. + G.inventory.supplies--; + G.stats.illness--; + } + break; + default: + guiControl.inventory.screen = "main"; + guiControl.inventory.cursorPosition = 1; // The position where "Supplies" is on main screen. + break; + } + } + + if (ct_cancel().down) { + guiControl.inventory.screen = "main"; + guiControl.inventory.cursorPosition = 1; // The position where "Supplies" is on main screen. + } + } + else if (guiControl.inventory.screen == "cargo") { + // Limit Cursor + if (guiControl.inventory.cursorPosition < 0) { + guiControl.inventory.cursorPosition = 0; + } + if (guiControl.inventory.cursorPosition > 0) { + guiControl.inventory.cursorPosition = 0; + } + + // Title + guiControl.drawPixelText("Cargo", guiControl.leftBorder - (2 * OS.S.pixelScale), guiControl.topOfBackground, 8, "black", 6); + + // Cargo icons + var cargo = G.inventory.CheckCargo(); // Contains the item ids that have more than 1 item + for (var i = 0; i < cargo.length; i++) { + guiControl.drawItem(cargo[i], guiControl.leftBorder, guiControl.rowTop(i)); + guiControl.drawPixelText(G.inventory.cargo[cargo[i]], guiControl.leftBorder + ((guiControl.iconSize + 4) * OS.S.pixelScale), guiControl.rowTop(i) + OS.S.pixelScale, 8, "black", 6); + } + + // Back Text + guiControl.drawPixelText("Back", guiControl.leftBorder, guiControl.rowTop(4) - (3 * OS.S.pixelScale), 8, "black", 6); + + // Draw cursor + OS.context.drawImage(guiControl.cursor, guiControl.leftBorder - (guiControl.iconScaled), guiControl.rowTop(4) - (4 * OS.S.pixelScale)); + + // Button Action + if (ct_confirm().down || ct_cancel().down) { + guiControl.inventory.screen = "main"; + guiControl.inventory.cursorPosition = 2; + } + } } } diff --git a/loadGUIs.js b/loadGUIs.js index 0d070f9..9903cc9 100644 --- a/loadGUIs.js +++ b/loadGUIs.js @@ -6,8 +6,29 @@ var guiControl = { topOfBackground: (2 + 2) * OS.S.pixelScale, upperBorder: (13 + 2) * OS.S.pixelScale, lowerBorder: (3 + 2) * OS.S.pixelScale, - leftBorder: (5 + 2) * OS.S.pixelScale, - rightBorder: (5 + 2) * OS.S.pixelScale + leftBorder: (10 + 2) * OS.S.pixelScale, + rightBorder: (5 + 2) * OS.S.pixelScale, + iconSize: 8, + iconScaled: 8 * OS.S.pixelScale, + + iconPosition: function (cellPosition) { + return (guiControl.iconScaled * cellPosition); + }, + rowTop: function (rowNumber) { + return guiControl.upperBorder + ((guiControl.iconSize + 2) * rowNumber * OS.S.pixelScale); + }, + + drawIcon: function (cellX, cellY, xPosition, yPosition) { + OS.context.drawImage(guiControl.icons, guiControl.iconPosition(cellX), guiControl.iconPosition(cellY), guiControl.iconScaled, guiControl.iconScaled, xPosition, yPosition, guiControl.iconScaled, guiControl.iconScaled); + }, + drawItem: function (itemId, xPosition, yPosition) { + var cellX = itemId % 4; + var cellY = Math.floor(itemId / 4); + OS.context.drawImage(guiControl.itemSheet, guiControl.iconPosition(cellX), guiControl.iconPosition(cellY), guiControl.iconScaled, guiControl.iconScaled, xPosition, yPosition, guiControl.iconScaled, guiControl.iconScaled); + }, + drawCursor: function (xPosition, yPosition) { + OS.context.drawImage(guiControl.cursor, xPosition, yPosition); + } } guiControl.background = new Image(); guiControl.background.src = "images/guiBackground.png"; @@ -19,7 +40,7 @@ guiControl.itemSheet.src = "images/items_sheet.png"; guiControl.icons = new Image(); guiControl.icons.src = "images/icons_sheet.png"; -function drawPixelText(text, x, y, wrapWidth, color, size) { +guiControl.drawPixelText = function (text, x, y, wrapWidth, color, size) { // Draw the text at the given x and y on the canvas using the alphabet images. // Remember to set the pixel scale for x and y when you call the function! // 4x4 font modified from http://pixeljoint.com/forum/forum_posts.asp?TID=18755&PID=185995#185995 diff --git a/loadGameManager.js b/loadGameManager.js index 4d5dbac..128369c 100644 --- a/loadGameManager.js +++ b/loadGameManager.js @@ -8,10 +8,30 @@ G.currentScreen = ""; // For pause screen, stats screen, inventory screen G.inventory = { money: 100, supplies: 20, // How much stuff you have to maintain your crew's illness with. - cargo: [] + cargo: [0, 0, 0, 0, // Keeps track of how much of each item you have. + 0, 0, 0, 0, // Requires a check to make sure you can't buy more different kinds than you can hold. + 0, 0, 0, 0, + 0, 0, 0, 0], + CheckCargo: function () { // Returns an array of indices that have cargo + var indicesWithCargo = []; + for (var i = 0; i < G.inventory.cargo.length; i++) { + if (G.inventory.cargo[i] > 0) { + indicesWithCargo.push(i); + } + } + return indicesWithCargo; + }, + CargoTotal: function () { + var cargo = G.inventory.CheckCargo(); + var cargoTotal = 0; + for (var i = 0; i < cargo.length; i++) { + cargoTotal += G.inventory.cargo[cargo[i]]; + } + return cargoTotal; + } }; G.stats = { - inventory: 3, // Maximum number of different things the inventory can hold. + inventory: 3, // Maximum number of different things the cargo can hold. hold: 20, // Maximum number of each individual kind of thing in the inventory. speed: 1, // How many pixels you move. hull: 3, // Your HP, pretty much. How many times you can crash without exploding. @@ -22,7 +42,7 @@ G.stats = { energy: 25, // Drains rate determined by current speed. When drained, currentSpeed reduces until you have enough energy to continue. maxEnergy: 50, // How much to refill your energy to. Can increase with upgrades. illness: 1 // Your crew's overall health. When this is low, your ship slows down. -} +}; G.economy = { // Aww yea, supply and demand. // Items are determined by their index, and their position on the sheet determines their index. @@ -52,6 +72,6 @@ G.economy = { // Aww yea, supply and demand. } } } -} +}; function loadGameManager () {} diff --git a/rooms/oceanRoom.js b/rooms/oceanRoom.js index 540ed91..ba833a5 100644 --- a/rooms/oceanRoom.js +++ b/rooms/oceanRoom.js @@ -50,6 +50,10 @@ rm_Ocean.Do = function () { this.waveTimer = Math.round(Math.randomRange(30, 150)); } + + if (!guiControl.inventory.show && ct_cancel().down) { + guiControl.inventory.show = true; + } } rm_Ocean.DrawAbove = function () { @@ -61,6 +65,7 @@ rm_Ocean.DrawAbove = function () { // drawPixelText("Testing 1 2 3!", 0, 0, 0, "white", 4); // drawPixelText("Testing 1 2 3!", 0, 64, 0, "white", 6); + drawInventoryGUI(); } rm_Ocean.DoLast = function () { diff --git a/start.js b/start.js index aa87bd9..18834ec 100644 --- a/start.js +++ b/start.js @@ -12,6 +12,7 @@ function start() OS.AddScript("loadControls.js"); OS.AddScript("loadGameManager.js"); OS.AddScript("loadPrefabs.js"); + OS.AddScript("loadGUIs.js"); OS.AddScript("loadRooms.js"); }