diff --git a/website/assets/areas/chictoriassecret.json b/website/assets/areas/chictoriassecret.json index 9f81962..f7fd231 100644 --- a/website/assets/areas/chictoriassecret.json +++ b/website/assets/areas/chictoriassecret.json @@ -55,7 +55,8 @@ "name": "Chictoria's Secret", "items": { "head": { - "tophat": true + "tophat": true, + "snapback": true }, "body": { "scarf": true, diff --git a/website/assets/areas/seeddispensary.json b/website/assets/areas/seeddispensary.json index 4ecfa81..67bccf2 100644 --- a/website/assets/areas/seeddispensary.json +++ b/website/assets/areas/seeddispensary.json @@ -29,7 +29,7 @@ "NPCs": { "cashier": { "profile": { - "name": "Seedtender", + "name": "Bazooka Benny", "color": [132, 211, 74], "head": "snapback", "face": false, diff --git a/website/assets/items/body/alesanaccessories.json b/website/assets/items/body/alesanaccessories.json index fb3a462..2b28740 100644 --- a/website/assets/items/body/alesanaccessories.json +++ b/website/assets/items/body/alesanaccessories.json @@ -1,9 +1,11 @@ { "name": "Bud's Accessories", + "description": "Radical. - Bud", + "cost": 40, + "center": [ [64,55], [92,49], [63,56] - ], - "cost": 40 + ] } diff --git a/website/assets/items/body/beefcakeaccessories.json b/website/assets/items/body/beefcakeaccessories.json index b181bf6..093b0ef 100644 --- a/website/assets/items/body/beefcakeaccessories.json +++ b/website/assets/items/body/beefcakeaccessories.json @@ -1,9 +1,11 @@ { "name": "Beefcake's Accessories", + "description": "As worn by Beefcake. Pushes the boundaries of what can be considered fashion.", + "cost": 1000, + "center": [ [83,81], [101,74], [82,92] - ], - "cost": 100 + ] } diff --git a/website/assets/items/body/chains.json b/website/assets/items/body/chains.json index d40cf14..57cb1b9 100644 --- a/website/assets/items/body/chains.json +++ b/website/assets/items/body/chains.json @@ -1,9 +1,11 @@ { "name": "Chains", + "description": "The dollar sign is made out of 14k solid gold.", + "cost": 80, + "center": [ [63,58], [88,46], [62,55] - ], - "cost": 50 + ] } \ No newline at end of file diff --git a/website/assets/items/body/scarf.json b/website/assets/items/body/scarf.json index d9edeff..f140441 100644 --- a/website/assets/items/body/scarf.json +++ b/website/assets/items/body/scarf.json @@ -1,9 +1,11 @@ { "name": "Scarf", + "description": "A warm and cozy scarf. Perfect for chilly days.", + "cost": 5, + "center": [ [63,58], [88,46], [64,52] - ], - "cost": 5 + ] } \ No newline at end of file diff --git a/website/assets/items/body/silverchains.json b/website/assets/items/body/silverchains.json index 68624b7..ecb1891 100644 --- a/website/assets/items/body/silverchains.json +++ b/website/assets/items/body/silverchains.json @@ -1,9 +1,11 @@ { "name": "Silver Chains", + "description": "Elegantly crafted with premium silver. Or so I'm told.", + "cost": 50, + "center": [ [63,58], [88,46], [62,55] - ], - "cost": 50 + ] } \ No newline at end of file diff --git a/website/assets/items/face/visors.json b/website/assets/items/face/visors.json index ace6de9..280fa94 100644 --- a/website/assets/items/face/visors.json +++ b/website/assets/items/face/visors.json @@ -1,9 +1,11 @@ { "name": "Visors", + "desciption": "Essential for skiing or looking futuristic.", + "cost": 5, + "center": [ [65,1], [89,3], [63,2] - ], - "cost": 5 + ] } \ No newline at end of file diff --git a/website/assets/items/head/hoodie.json b/website/assets/items/head/hoodie.json index d8d69a4..8f70d64 100644 --- a/website/assets/items/head/hoodie.json +++ b/website/assets/items/head/hoodie.json @@ -1,9 +1,11 @@ { "name": "Hoodie", + "description": "Comfortable and practical.", + "cost": 15, + "center": [ [62,5], [92,3], [63,3] - ], - "cost": 10 + ] } \ No newline at end of file diff --git a/website/assets/items/head/snapback.json b/website/assets/items/head/snapback.json index 499f7c1..ff2cd93 100644 --- a/website/assets/items/head/snapback.json +++ b/website/assets/items/head/snapback.json @@ -1,9 +1,11 @@ { "name": "Snapback", + "description": "Adjustable to the size of your head. Technology is amazing.", + "cost": 5, + "center": [ [62,5], [92,3], [63,3] - ], - "cost": 10 + ] } \ No newline at end of file diff --git a/website/assets/items/head/tophat.json b/website/assets/items/head/tophat.json index d292982..7512976 100644 --- a/website/assets/items/head/tophat.json +++ b/website/assets/items/head/tophat.json @@ -1,9 +1,11 @@ { "name": "Top Hat", + "description": "Watch for doorways.", + "cost": 10, + "center": [ - [38,47], + [38,44], [38,47], [38,47] - ], - "cost": 10 + ] } \ No newline at end of file diff --git a/website/assets/quests/tutorial.json b/website/assets/quests/tutorial.json index 1361bde..93a4a9d 100644 --- a/website/assets/quests/tutorial.json +++ b/website/assets/quests/tutorial.json @@ -2,9 +2,9 @@ "name": "Tutorial", "description": "Discover what to do in Chicken Society!", - "progressStart": [false, false, false], + "progressStart": [0, 0, 0], - "progressFinish": [true, true, true], + "progressFinish": [1, 1, 1], "reward": { "nuggets": 10, diff --git a/website/game/assets.js b/website/game/assets.js index 02afaea..58e1b0c 100644 --- a/website/game/assets.js +++ b/website/game/assets.js @@ -88,18 +88,20 @@ function loadGameAssets() { for (const [category, list] of Object.entries(ITEMS)) { for (const [itemId, item] of Object.entries(list)) { // Load image, create sprite frames when image is loaded, and load hat centers from JSON - let async = function() { - item.sprite = new Sprite(item.image, 1, 3, item.image.w,(item.image.h-2)/3, 0,0, 1,1) - } - item.image = new RenderImage(`assets/items/${category}/${itemId}.png`, async) - item.center = [[0.5, 0.7],[0.5, 0.7],[0.5, 0.7]] - item.cost = 0 item.name = "" + item.description = "" + item.cost = 0 + item.center = [[0.5, 0.7],[0.5, 0.7],[0.5, 0.7]] loadJSON(`assets/items/${category}/${itemId}.json`, (data) => { item.name = data.name + item.description = data.description item.center = data.center item.cost = data.cost }) + let async = function() { + item.sprite = new Sprite(item.image, 1, 3, item.image.w,(item.image.h-2)/3, 0,0, 1,1) + } + item.image = new RenderImage(`assets/items/${category}/${itemId}.png`, async) } } @@ -108,6 +110,7 @@ function loadGameAssets() { FONT.hud = new RenderFont("Arial", 28) FONT.caption = new RenderFont("Arial", 20) FONT.nametag = new RenderFont("Arial", 16) + FONT.description = new RenderFont("Arial", 18) FONT.chatBubble = new RenderFont("Courier New", 18) FONT.guiLabel = new RenderFont("Times New Roman", 20) } diff --git a/website/game/menu/customization.js b/website/game/menu/customization.js index 47e7b44..efe6040 100644 --- a/website/game/menu/customization.js +++ b/website/game/menu/customization.js @@ -37,35 +37,34 @@ MENUS["customization"] = new class extends Menu { PLAYER.updateProfile(PROFILE, "sendToServer"); }, null, 348,365, 100,32) - // Inventorty + // Inventory + this.tab = "allTab" this.inventory = [] - this.buttons["allTab"] = new Button("All", ()=>{this.filterInventory("all")}, null, 476,150, 46,34) - this.buttons["headTab"] = new Button("H", ()=>{this.filterInventory("head")}, null, 522,150, 34,34) - this.buttons["faceTab"] = new Button("F", ()=>{this.filterInventory("face")}, null, 522+34*1,150, 34,34) - this.buttons["bodyTab"] = new Button("B", ()=>{this.filterInventory("body")}, null, 522+34*2,150, 34,34) - this.buttons["furitureTab"] = new Button("FT", ()=>{this.filterInventory("furniture")}, null, 522+34*3,150, 34,34) - this.buttons["itemTab"] = new Button("I", ()=>{this.filterInventory("item")}, null, 522+34*4,150, 34,34) + this.buttons["allTab"] = new Button("All", ()=>{this.filterInventory("all"); this.buttons[this.tab].selected=false; this.tab = "allTab"; this.buttons[this.tab].selected=true}, null, 476,150, 46,34) + this.buttons["headTab"] = new Button("H", ()=>{this.filterInventory("head"); this.buttons[this.tab].selected=false; this.tab = "headTab"; this.buttons[this.tab].selected=true}, null, 522,150, 34,34) + this.buttons["faceTab"] = new Button("F", ()=>{this.filterInventory("face"); this.buttons[this.tab].selected=false; this.tab = "faceTab"; this.buttons[this.tab].selected=true}, null, 522+34*1,150, 34,34) + this.buttons["bodyTab"] = new Button("B", ()=>{this.filterInventory("body"); this.buttons[this.tab].selected=false; this.tab = "bodyTab"; this.buttons[this.tab].selected=true}, null, 522+34*2,150, 34,34) + this.buttons["furnitureTab"] = new Button("FT", ()=>{this.filterInventory("furniture"); this.buttons[this.tab].selected=false; this.tab = "furnitureTab"; this.buttons[this.tab].selected=true}, null, 522+34*3,150, 34,34) + this.buttons["itemTab"] = new Button("I", ()=>{this.filterInventory("item"); this.buttons[this.tab].selected=false; this.tab = "itemTab"; this.buttons[this.tab].selected=true}, null, 522+34*4,150, 34,34) this.filterInventory("all") + this.buttons["allTab"].selected = true - this.buttons["inventory"] = new GridSelector( - (itemId)=>{ + this.buttons["inventory"] = new ItemGrid( + (itemId,itemType)=>{ // Set clothing item - if (PROFILE[getItemCategory(itemId)] && PROFILE[getItemCategory(itemId)] == itemId) { - PROFILE[getItemCategory(itemId)] = false; + if (PROFILE[itemType] && PROFILE[itemType] == itemId) { + PROFILE[itemType] = false; } else { - PROFILE[getItemCategory(itemId)] = itemId; + PROFILE[itemType] = itemId; } PLAYER.updateProfile(PROFILE, "sendToServer"); - }, this.inventory, - (i,itemId)=>{ + }, + this.inventory, + (itemId,itemType)=>{ // Is selected? - let category = getItemCategory(itemId) - if (PROFILE[category] && PROFILE[category] == itemId) { + if (PROFILE[itemType] && PROFILE[itemType] == itemId) { return true } - }, - (i,itemId)=>{ - return [ITEMS[getItemCategory(itemId)][itemId].image, ITEMS[getItemCategory(itemId)][itemId].sprite] }, 476,184, 56,56, 5,3) // this.buttons["bodyRight"] = new Button(">", ()=>{ diff --git a/website/game/menu/grid.js b/website/game/menu/grid.js deleted file mode 100644 index 88dcd9b..0000000 --- a/website/game/menu/grid.js +++ /dev/null @@ -1,151 +0,0 @@ -// Button grid; Imagine the inventory from minecraft -class GridSelector { - // Callback function, x pos, y pos, cell width, cell height, grid width, grid height - constructor(action, list, selectedFunc, drawFunc, x, y, cw=56, ch=56, gw, gh) { - this.visible = true; - this.action = action; - - this.list = list - - this.selectedFunc = selectedFunc // Which item in grid is selected? - - this.drawFunc = drawFunc // What to render in each cell - - this.x = x; - this.y = y; - - // Size of grid cells - this.cw = cw - this.ch = ch - - // Number of cells in grid - this.gw = gw - this.gh = gh - - // Total size - this.w = cw*gw; - this.h = ch*gh; - - // Which cell is mouse over - this.overx = 0 - this.overy = 0 - - // Vertical scroll - this.scroll = 0 - - this.hover = false; - this.holding = false; - } - - checkMouseInside(){ - let [mouseX, mouseY] = getMousePos(); //returns x and y pos of mouse - if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) { - // Get selected grid cell - let cx = Math.floor((mouseX-this.x)/this.cw) - let cy = Math.floor((mouseY-this.y)/this.ch) - return [cx, cy]; - } - return [false, false]; - } - update(dt){ - let [cx, cy] = this.checkMouseInside(); - if (cx !== false && cy !== false) { - if (!this.holding) { - this.overx = cx - this.overy = cy - } - - this.hover = true - CURSOR.on = true; - } else { - this.hover = false - } - } - - click(){ - let [cx, cy] = this.checkMouseInside(); - if (cx !== false && cy !== false) { - this.overx = cx - this.overy = cy - this.holding = true - return true - } - } - clickRelease(){ - if (this.holding == true){ - this.holding = false; - this.gridAction(this.overx, this.overy) - } - } - - gridAction(cx, cy){ - let i = cx + (cy+this.scroll)*this.gw // Index of cell - if (this.list[i]) { - this.action(this.list[i]); - } - } - - draw(){ - // Render all grid cells - let [mouseX, mouseY] = getMousePos(); //returns x and y pos of mouse - - DRAW.setColor(242, 242, 242, 1); // Light color for other cells - DRAW.rectangle(this.x, this.y, this.w, this.h); - - for (let cx = 0; cx < this.gw; cx++) { - for (let cy = 0; cy < this.gh; cy++) { - let i = cx + (cy+this.scroll)*this.gw // Index of cell - - // Calculate the x and y position of the cell - let cellX = this.x + cx * this.cw; - let cellY = this.y + cy * this.ch; - - // Set the color based on whether the cell is being hovered over - let selected = this.selectedFunc(i,this.list[i]) - let holding = (this.holding && this.overx === cx && this.overy === cy) - let hover = (this.hover && this.overx === cx && this.overy === cy) - if (hover || holding || selected) { - if (holding) { - DRAW.setColor(218, 165, 32, 1); // Dark color for selected cell (while holding - } else if (hover) { - DRAW.setColor(248, 222, 187, 1); // Medium color for hovered cell - } else if (this.list[i] && selected) { - DRAW.setColor(218, 165, 32, 1); // Dark color for selected cell - } - // Draw the cell - DRAW.rectangle(cellX, cellY, this.cw, this.ch); - } - - // Draw the cell border - DRAW.setColor(168, 85, 38, 1); - DRAW.rectangle(cellX, cellY, this.cw, this.ch, "line"); - - // Draw item in this cell - if (this.list[i]) { - let [image, sprite] = this.drawFunc(i, this.list[i]) - if (image) { - DRAW.image(image, sprite.getFrame(0,0), cellX+this.cw/2, cellY+this.ch/2, 0, 0.4, 0.4, 0.5, 0.5) - } - - // Count of item owned - //DRAW.setColor(0, 0, 0, 1) - //DRAW.text(this.list[i], cellX, cellY+this.ch/2, "left") - } - } - } - - // Tooltip - if (this.hover) { - let cx = this.overx - let cy = this.overy - let i = cx + (cy+this.scroll)*this.gw // Index of cell - if (this.list[i]) { - DRAW.setColor(0, 0, 0, 1) - DRAW.text(this.list[i], mouseX+20, mouseY+20, "left") - } - } - } -} - -//need to add states -//need callbacks, click, clickRelease \ No newline at end of file diff --git a/website/game/menu/gui.js b/website/game/menu/gui.js index b50ef03..d4c2bbe 100644 --- a/website/game/menu/gui.js +++ b/website/game/menu/gui.js @@ -19,6 +19,7 @@ class Button { this.hover = false; this.holding = false; + this.selected = false; } checkMouseInside(){ @@ -68,6 +69,8 @@ class Button { DRAW.setColor(216,175,121,1); //dark } else if (this.hover == true){ DRAW.setColor(248,222,187,1); //medium + } else if (this.selected == true){ + DRAW.setColor(216,175,121,1); //dark } else { DRAW.setColor(242,199,140,1); //light } diff --git a/website/game/menu/itemgrid.js b/website/game/menu/itemgrid.js new file mode 100644 index 0000000..5e1a544 --- /dev/null +++ b/website/game/menu/itemgrid.js @@ -0,0 +1,166 @@ +// Item button grid; Imagine the inventory from minecraft +class ItemGrid { + // Callback function, x pos, y pos, cell width, cell height, grid width, grid height + constructor(action, list, selectedFunc, x, y, cw=56, ch=56, gw, gh) { + this.visible = true; + this.action = action; + + this.list = list + + this.selectedFunc = selectedFunc // Which item in grid is selected? + + this.x = x; + this.y = y; + + // Size of grid cells + this.cw = cw + this.ch = ch + + // Number of cells in grid + this.gw = gw + this.gh = gh + + // Total size + this.w = cw*gw; + this.h = ch*gh; + + // Which cell is mouse over + this.overx = 0 + this.overy = 0 + this.over = false + + // Vertical scroll + this.scroll = 0 + + this.hover = false; + this.holding = false; + } + + checkMouseInside(){ + let [mouseX, mouseY] = getMousePos(); //returns x and y pos of mouse + if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) { + // Get selected grid cell + let cx = Math.floor((mouseX-this.x)/this.cw) + let cy = Math.floor((mouseY-this.y)/this.ch) + this.overx = cx + this.overy = cy + this.over = false + return [cx, cy]; + } + return [false, false]; + } + update(dt){ + let [cx, cy] = this.checkMouseInside(); + if (cx !== false && cy !== false) { + if (!this.holding) { + this.overx = cx + this.overy = cy + } + + this.hover = true + CURSOR.on = true; + } else { + this.hover = false + } + } + + click(){ + let [cx, cy] = this.checkMouseInside(); + if (cx !== false && cy !== false) { + this.overx = cx + this.overy = cy + this.holding = true + return true + } + } + clickRelease(){ + if (this.holding == true){ + this.holding = false; + this.gridAction(this.overx, this.overy) + } + } + + getCellIndex(cx, cy) { + return cx + (cy+this.scroll)*this.gw // Index of cell + } + + gridAction(cx, cy){ + let i = this.getCellIndex(cx, cy) + if (this.list[i]) { + this.action(this.list[i],getItemCategory(this.list[i])); + } + } + + draw(){ + // Render all grid cells + let [mouseX, mouseY] = getMousePos(); //returns x and y pos of mouse + + DRAW.setColor(242, 242, 242, 1); // Light color for other cells + DRAW.rectangle(this.x, this.y, this.w, this.h); + + for (let cx = 0; cx < this.gw; cx++) { + for (let cy = 0; cy < this.gh; cy++) { + let i = this.getCellIndex(cx, cy) // Index of cell + if (this.list[i]) { + let itemType = getItemCategory(this.list[i]) + + // Calculate the x and y position of the cell + let cellX = this.x + cx * this.cw; + let cellY = this.y + cy * this.ch; + + // Set the color based on whether the cell is being hovered over + let selected = this.selectedFunc(this.list[i],itemType) + let holding = (this.holding && this.overx === cx && this.overy === cy) + let hover = (this.hover && this.overx === cx && this.overy === cy) + if (hover || holding || selected) { + if (holding) { + DRAW.setColor(218, 165, 32, 1); // Dark color for selected cell (while holding + } else if (hover) { + DRAW.setColor(248, 222, 187, 1); // Medium color for hovered cell + } else if (this.list[i] && selected) { + if (selected == "gray") { + DRAW.setColor(200, 200, 200, 1); // Dark color for selected cell + } else { + DRAW.setColor(218, 165, 32, 1); // Dark color for selected cell + } + } + // Draw the cell + DRAW.rectangle(cellX, cellY, this.cw, this.ch); + } + + // Draw the cell border + DRAW.setColor(168, 85, 38, 1); + DRAW.rectangle(cellX, cellY, this.cw, this.ch, "line"); + + // Draw item in this cell + if (this.list[i]) { + let image = ITEMS[itemType][this.list[i]].image + let sprite = ITEMS[itemType][this.list[i]].sprite + + if (image) { + DRAW.image(image, sprite.getFrame(0,0), cellX+this.cw/2, cellY+this.ch/2, 0, 0.4, 0.4, 0.5, 0.5) + } + + // Count of item owned + //DRAW.setColor(0, 0, 0, 1) + //DRAW.text(this.list[i], cellX, cellY+this.ch/2, "left") + } + } + } + } + + // Tooltip + // if (this.hover) { + // let cx = this.overx + // let cy = this.overy + // let i = cx + (cy+this.scroll)*this.gw // Index of cell + // if (this.list[i]) { + // DRAW.setColor(0, 0, 0, 1) + // DRAW.text(this.list[i], mouseX+20, mouseY+20, "left") + // } + // } + } +} + +//need to add states +//need callbacks, click, clickRelease \ No newline at end of file diff --git a/website/game/menu/shop.js b/website/game/menu/shop.js index 095510b..6c1e12c 100644 --- a/website/game/menu/shop.js +++ b/website/game/menu/shop.js @@ -10,35 +10,74 @@ MENUS["shop"] = new class extends Menu { this.openTimer = 0 this.buttons = {} - this.buttons[0] = new Button("Confirm", ()=>{closeMenu()}, null, 665,399, 100,32) + this.buttons[0] = new Button("X", ()=>{closeMenu()}, null, 740,128, 32,32) this.name = config.name || "" this.items = config.items || {} // {category: {itemId: price}} // Shop items - let i = 0 - for (const [category, list] of Object.entries(this.items)) { - for (const [itemId, setPrice] of Object.entries(list)) { - let itemType = category - let item = getItemData(itemId, category) - - let itemName = item.name - let price = setPrice - if (price == true) { // If not price is set by shop, use default - price = item.cost + // Inventory + this.tab = "allTab" + this.inventory = [] + this.buttons["allTab"] = new Button("All", ()=>{this.filterInventory("all"); this.buttons[this.tab].selected=false; this.tab = "allTab"; this.buttons[this.tab].selected=true}, null, 265,150, 46,34) + this.buttons["headTab"] = new Button("H", ()=>{this.filterInventory("head"); this.buttons[this.tab].selected=false; this.tab = "headTab"; this.buttons[this.tab].selected=true}, null, 311,150, 34,34) + this.buttons["faceTab"] = new Button("F", ()=>{this.filterInventory("face"); this.buttons[this.tab].selected=false; this.tab = "faceTab"; this.buttons[this.tab].selected=true}, null, 311+34*1,150, 34,34) + this.buttons["bodyTab"] = new Button("B", ()=>{this.filterInventory("body"); this.buttons[this.tab].selected=false; this.tab = "bodyTab"; this.buttons[this.tab].selected=true}, null, 311+34*2,150, 34,34) + this.buttons["furnitureTab"] = new Button("FT", ()=>{this.filterInventory("furniture"); this.buttons[this.tab].selected=false; this.tab = "furnitureTab"; this.buttons[this.tab].selected=true}, null, 311+34*3,150, 34,34) + this.buttons["itemTab"] = new Button("I", ()=>{this.filterInventory("item"); this.buttons[this.tab].selected=false; this.tab = "itemTab"; this.buttons[this.tab].selected=true}, null, 311+34*4,150, 34,34) + this.filterInventory("all") + this.buttons["allTab"].selected = true + + this.selectedItem = false + this.selectedItemType = false + this.selectedItemDescription = [] + + this.buttons["inventory"] = new ItemGrid( + (itemId,itemType)=>{ + // Item to preview + if (itemId) { + this.selectedItem = itemId + this.selectedItemType = itemType + if (ITEMS[itemType][itemId].description) { + this.selectedItemDescription = DRAW.wrapText(ITEMS[itemType][itemId].description, 110) + } else { + this.selectedItemDescription = false + } } + }, + this.inventory, + (itemId,itemType)=>{ + // Is selected? + if (this.selectedItem == itemId) { + return true + } else if (SAVEDATA.items[itemType][itemId]) { + return "gray" + } + }, 265,184, 68,68, 4,3) - let itemButton = new Button(itemName, ()=>{this.buyItem(itemType, itemId, i)}, null, 270,180+(31*i), 300,30) - // let buyButton = new Button(price, ()=>{this.buyItem(itemType, itemId)}, null, 510,160+(32*i), 70,30) - this.buttons[`${i}-item`] = itemButton - // this.buttons[`${i}-buy`] = buyButton + this.buttons["buy"] = new Button("Buy", ()=>{ + if (this.selectedItem) { + this.buyItem(this.selectedItemType, this.selectedItem) + } + }, null, 664,400, 100,30) + } - i += 1 + filterInventory(category) { + this.inventory.length = 0 + if (category == "all") { + for (let category in this.items) { + for (let itemId in this.items[category]) { + this.inventory.push(itemId) + } + } + } else { + for (let itemId in this.items[category]) { + this.inventory.push(itemId) } } - } + } // TODO: maybe this should be in a different file so items can also be earned in other ways? - buyItem(itemType, itemId, i) { + buyItem(itemType, itemId) { let item = ITEMS[itemType][itemId] if (spendNuggets(item.cost)) { addItem(itemType, itemId) @@ -62,36 +101,35 @@ MENUS["shop"] = new class extends Menu { } draw() { - // Window + // Window let scale = 1 if (this.openTimer < 1) { scale = easing("easeOutBack", this.openTimer) } - DRAW.image(IMG.menu, null, this.x+this.w*0.5, this.y+this.h*0.5, 0, scale, scale, 0.5, 0.5) - - // Text - DRAW.setColor(112, 50, 16, scale) - DRAW.setFont(FONT.caption) - DRAW.text(this.name, 520, 142, "center") - - // Prices - DRAW.text("Price", 640, 170, "center") - DRAW.text("Owned", 720, 170, "center") - let i = 0 - for (const [category, list] of Object.entries(this.items)) { - for (const [itemId, setPrice] of Object.entries(list)) { - let itemType = category - let item = getItemData(itemId, itemType) - let itemName = item.name - let price = setPrice - if (price == true) { // If not price is set by shop, use default - price = item.cost + DRAW.image(IMG.menu, null, this.x+this.w*0.5, this.y+this.h*0.5, 0, scale, scale, 0.5, 0.5) + + // Text + DRAW.setColor(112, 50, 16, scale) + DRAW.setFont(FONT.caption) + DRAW.text(this.name, 520, 142, "center") + + // Item information + if (this.selectedItem) { + let item = ITEMS[this.selectedItemType][this.selectedItem] + DRAW.text(item.name, 553, 210, "left") + + if (SAVEDATA.items[this.selectedItemType][this.selectedItem]) { + DRAW.text(`Owned: ${SAVEDATA.items[this.selectedItemType][this.selectedItem]}`, 764, 360, "right") + } + + DRAW.text(`${item.cost} Nuggets`, 764, 388, "right") + + DRAW.setColor(152, 80, 46, scale) + DRAW.setFont(FONT.description) + if (this.selectedItemDescription) { + for (let i = 0; i < this.selectedItemDescription.length; i++) { + DRAW.text(this.selectedItemDescription[i], 553, 242 + i * 20, "left") } - DRAW.text("$" + price, 640, 200+(31*i), "center") - // How many you own - let owned = SAVEDATA.items[itemType][itemId] || 0 - DRAW.text(owned, 720, 200+(31*i), "center") - i += 1 } } diff --git a/website/game/render.js b/website/game/render.js index ff44e54..927f855 100644 --- a/website/game/render.js +++ b/website/game/render.js @@ -131,6 +131,28 @@ class Render { return this.c.measureText(text).width } + wrapText(text, width) { + let wrappedText = []; + let words = text.split(' '); + let currentLine = ''; + + for (let i = 0; i < words.length; i++) { + let word = words[i]; + let testLine = currentLine + word + ' '; + let testWidth = this.getTextWidth(testLine); + + if (testWidth > width) { + wrappedText.push(currentLine.trim()); + currentLine = word + ' '; + } else { + currentLine = testLine; + } + } + + wrappedText.push(currentLine.trim()); + return wrappedText; + } + // Render Text with optional transformations text(string, x, y, align="left", r = 0, sx = 1, sy = 1, ox = 0, oy = 0) { this.c.textAlign = align // left, right, center diff --git a/website/game/savedata.js b/website/game/savedata.js index d8f3b29..5fe0feb 100644 --- a/website/game/savedata.js +++ b/website/game/savedata.js @@ -184,4 +184,30 @@ function getItemData(id, type) { } return ITEMS[category][id] +} + +// Color storage methods +function RGBToHEX(r, g, b) { + // Convert each RGB component to a two-digit hexadecimal value + const hexR = r.toString(16).padStart(2, '0'); + const hexG = g.toString(16).padStart(2, '0'); + const hexB = b.toString(16).padStart(2, '0'); + + // Combine the hexadecimal values to form the final color code + const hexColor = `#${hexR}${hexG}${hexB}`; + + return hexColor; +} + +function HEXToRGB(hex) { + // Remove the '#' symbol + hex = hex.substring(1, 7); + + // Split the hex string into three parts: red, green, and blue + const red = parseInt(hex.substring(0, 2), 16); + const green = parseInt(hex.substring(2, 4), 16); + const blue = parseInt(hex.substring(4, 6), 16); + + // Return the RGB values as an object + return [red, green, blue]; } \ No newline at end of file diff --git a/website/index.html b/website/index.html index a615a8b..5bec9ee 100644 --- a/website/index.html +++ b/website/index.html @@ -64,7 +64,7 @@ - +