Add NPC reply button

Changed profile colors to be HEX instead of RGB
Tweak Shop menu tooltips and icons
Add inventory item count display

website/assets/areas/alleyway.json

@@ -23,7 +23,7 @@
 		"dealer": {
             "profile": {
                 "name": "???",
-                "color": [40, 80, 50],
+                "color": "#285032",
                 "head": "hoodie",
                 "face": false,
                 "body": false

website/assets/areas/arcade.json

@@ -31,7 +31,7 @@
         "gamer": {
             "profile": {
                 "name": "Bud",
-                "color": [200, 210, 255],
+                "color": "#c8d2ff",
                 "head": false,
                 "face": "visors",
                 "body": "alesanaccessories"
@@ -54,7 +54,7 @@
 		"expert": {
             "profile": {
                 "name": "Pro Gamer",
-                "color": [40, 40, 40],
+                "color": "#282828",
                 "head": false,
                 "face": false,
                 "body": false
@@ -64,12 +64,10 @@
             "facing": "right",
             "roamRadius": false,
             "dialogue": [
-				"Psst. Type /emote dance",
-				"Psst. Type /emote wave",
-				"Psst. Type /emote sit",
-				"Psst. Type /hat tophat",
-				"Psst. Type /accessory scarf",
-				"Psst. Press the '/' key to open the chat.",
+				"Psst. Press the emote button in the chat HUD.",
+				"Psst. Type /head tophat",
+				"Psst. Type /body scarf",
+				"Psst. Press the '/' key to type in the chat.",
 				"Psst. Change your name with /name YOURNAME"
 			]
         }

website/assets/areas/chictoriassecret.json

@@ -36,7 +36,7 @@
         "cashier": {
             "profile": {
                 "name": "Beefcake",
-                "color": [255, 240, 255],
+                "color": "#fff0ff",
                 "head": false,
                 "face": false,
                 "body": "beefcakeaccessories"

website/assets/areas/seeddispensary.json

@@ -30,7 +30,7 @@
         "cashier": {
             "profile": {
                 "name": "Bazooka Benny",
-                "color": [132, 211, 74],
+                "color": "#84d34a",
                 "head": "snapback",
                 "face": false,
                 "body": "silverchains"
@@ -44,7 +44,15 @@
                 "We love seed!",
                 "We've got free samples!",
                 "Everything here is legal. Trust me."
-            ]
+            ],
+            "shop": {
+                "name": "Seed Dispensary",
+                "items": {
+                    "item": {
+                        "seeds": true
+                    }
+                }
+            }
         }
     }
 }

website/assets/items/item/seeds.json

@@ -0,0 +1,5 @@
+{
+    "name": "Seeds",
+    "description": "A chicken's meal of choice.",
+    "cost": 2
+}

website/game/assets.js

@@ -27,6 +27,9 @@ function loadGameAssets() {
 
 	IMG.shadow = new RenderImage("assets/shadow.png")
 	IMG.chatBubble = new RenderImage("assets/chat_bubble.png")
+	IMG.replyBubble = new RenderImage("assets/reply_bubble.png")
+	SPRITE.replyBubble = new Sprite(IMG.replyBubble, 2,1, 64,32)
+	SPRITE.replyTrail = new Sprite(IMG.replyBubble, 2,1, 64,32, 0,32)
 	IMG.action = new RenderImage("assets/action.png")
 	SPRITE.action = new Sprite(IMG.action, 1,3, 120,50)
 
@@ -85,6 +88,8 @@ function loadGameAssets() {
 	ITEMS.body["beefcakeaccessories"] = {}
 	ITEMS.body["alesanaccessories"] = {}
 
+	ITEMS.item["seeds"] = {}
+
 	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
@@ -95,8 +100,10 @@ function loadGameAssets() {
 			loadJSON(`assets/items/${category}/${itemId}.json`, (data) => {
 				item.name = data.name
 				item.description = data.description
-				item.center = data.center
 				item.cost = data.cost
+				if (data.center) {
+					item.center = data.center
+				}
 			})
 			let async = function() {
 				item.sprite = new Sprite(item.image, 1, 3, item.image.w,(item.image.h-2)/3, 0,0, 1,1)

website/game/menu/chat.js

@@ -52,7 +52,7 @@ MENUS["chatMenu"] = new class extends Menu {
 					PLAYER.updateProfile(PROFILE, "sendToServer")
 					break
 				case "/color":
-					PROFILE.color = [Number(arg), Number(arg2), Number(arg3)]
+					PROFILE.color = RGBtoHEX(Number(arg), Number(arg2), Number(arg3))
 					PLAYER.updateProfile(PROFILE, "sendToServer")
 					break
 				case "/head":

website/game/menu/customization.js

@@ -31,9 +31,9 @@ MENUS["customization"] = new class extends Menu {
 
         // Color
 		this.buttons["color"] = new Button("Random", ()=>{
-            PROFILE.color = [Math.floor(100 + Math.random()*155),
+            PROFILE.color = RGBtoHEX(Math.floor(100 + Math.random()*155),
                 Math.floor(100 + Math.random()*155),
-                Math.floor(100 + Math.random()*155)];
+                Math.floor(100 + Math.random()*155));
             PLAYER.updateProfile(PROFILE, "sendToServer");
         }, null, 348,365, 100,32)
 
@@ -52,12 +52,14 @@ MENUS["customization"] = new class extends Menu {
 		this.buttons["inventory"] = new ItemGrid(
 			(itemId,itemType)=>{
 				// Set clothing item
-				if (PROFILE[itemType] && PROFILE[itemType] == itemId) {
-					PROFILE[itemType] = false;
-				} else {
-					PROFILE[itemType] = itemId;
+				if (PROFILE.hasOwnProperty(itemType)) {
+					if (PROFILE[itemType] == itemId) {
+						PROFILE[itemType] = false;
+					} else {
+						PROFILE[itemType] = itemId;
+					}
+					PLAYER.updateProfile(PROFILE, "sendToServer");
 				}
-				PLAYER.updateProfile(PROFILE, "sendToServer");
 			},
 			this.inventory, 
 			(itemId,itemType)=>{
@@ -66,6 +68,7 @@ MENUS["customization"] = new class extends Menu {
 					return true
 				}
 			}, 476,184, 56,56, 5,3)
+		this.buttons["inventory"].showCount = true // How how many of each item the player owns
 
 		// this.buttons["bodyRight"] = new Button(">", ()=>{
 		// 	let keys = Object.keys(SAVEDATA.items.body);

website/game/menu/gui.js

@@ -53,7 +53,10 @@ class Button {
     draw(){
         if (!this.visible) {
             // Don't render if button was specified to be not visible
-        } else if (this.image) {
+            return false
+        }
+
+        if (this.image) {
             // Render image for button
             let frame = 0
             if (this.holding == true){
@@ -78,11 +81,14 @@ class Button {
             DRAW.rectangle(this.x, this.y, this.w, this.h);
             DRAW.setColor(168, 85, 38, 1)
             DRAW.rectangle(this.x, this.y, this.w, this.h, "line");
+        }
+
+        // Label
+        if (this.label) {
             DRAW.setFont(FONT.guiLabel)
             DRAW.setColor(112, 50, 16,1)
             DRAW.text(this.label, this.x+this.w/2, this.y+this.h/2+7, "center")
         }
-
     }
 }
 

website/game/menu/itemgrid.js

@@ -109,9 +109,9 @@ class ItemGrid {
 					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)
+					let selected = this.selectedFunc(this.list[i],itemType,hover)
+					let holding = (this.holding && 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
@@ -136,29 +136,33 @@ class ItemGrid {
 					if (this.list[i]) {
 						let image = ITEMS[itemType][this.list[i]].image
 						let sprite = ITEMS[itemType][this.list[i]].sprite
+						let scale = 0.4*(this.cw/42)
 
 						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)
+							DRAW.image(image, sprite.getFrame(0,0), cellX+this.cw/2, cellY+this.ch/2, 0, scale, scale, 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")
+						if (this.showCount && SAVEDATA.items[itemType][this.list[i]] > 1) {
+							DRAW.setColor(0, 0, 0, 1)
+							DRAW.text(SAVEDATA.items[itemType][this.list[i]], cellX+this.cw-2, cellY+this.ch-2, "right")
+						}
 					}
 				}
 			}
 		}
 
 		// 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")
-		// 	}
-		// }
+		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]) {
+				let itemType = getItemCategory(this.list[i])
+				DRAW.setColor(0, 0, 0, 1)
+				DRAW.text(ITEMS[itemType][this.list[i]].name, mouseX+20, mouseY+20, "left")
+			}
+		}
     }
 }
 

website/game/menu/shop.js

@@ -45,7 +45,7 @@ MENUS["shop"] = new class extends Menu {
 				}
 			},
 			this.inventory, 
-			(itemId,itemType)=>{
+			(itemId,itemType,over)=>{
 				// Is selected?
 				if (this.selectedItem == itemId) {
 					return true

website/game/objects/character.js

@@ -44,6 +44,7 @@ class Character extends PhysicsObject {
 		this.walking = false
 		this.oldwalking = this.walking
 		this.dir = "down"
+		this.visibleDir = this.dir //direction last time the animation was updated
 		this.flip = 1
 		this.imageOffsety = 4
 		this.scale = profile.scale || 1
@@ -59,6 +60,13 @@ class Character extends PhysicsObject {
 
 	// Move: direction normal x, direction normal y
 	move(nx, ny) {
+		if (this.static) {
+			this.sx = 0
+			this.sy = 0
+			this.walking = false
+			return false
+		}
+
 		this.sx = nx*this.speed
 		this.sy = ny*this.speed
 
@@ -105,12 +113,11 @@ class Character extends PhysicsObject {
 				this.anim.stopAnimation(0, null)
 			}
 		}
-		if (!this.static) { // Don't update animation if not movable
-			// Face in the current direction
-			this.anim.setFrame(null, dir_lookup[this.dir])
-			// Update walking or emote animation
-			this.anim.update(dt)
-		}
+
+		// Face in the current direction
+		this.anim.setFrame(null, dir_lookup[this.dir])
+		// Update walking or emote animation
+		this.anim.update(dt)
 
 		// Dissapear chat bubble after few seconds
 		if (this.bubbleText != false) {
@@ -127,6 +134,8 @@ class Character extends PhysicsObject {
 
 	// Render chicken with accessories with optional different position
 	draw(drawX=this.x, drawY=this.y) {
+		let dir = this.dir
+
 		// Shadow
 		DRAW.setColor(255,255,255,1.0)
 		DRAW.image(IMG.shadow, null, drawX, drawY+this.imageOffsety +3, 0, this.scale, this.scale, 0.5, 1)
@@ -139,33 +148,33 @@ class Character extends PhysicsObject {
 		if ((this.body != false) && (ITEMS.body[this.body] != null) && (ITEMS.body[this.body].sprite != null)) { // Body item
 			// Figure out the center of the body item to place it on the center of the chicken's 'neck'
 			let item = ITEMS.body[this.body]
-			let x = drawX - (SPRITE.chicken.w/2)*this.flip*this.scale + (BODYOFFSET[dir_lookup[this.dir]][this.anim.framex][0])*this.flip*this.scale
-			let y = drawY+this.imageOffsety - SPRITE.chicken.h*this.scale + BODYOFFSET[dir_lookup[this.dir]][this.anim.framex][1]*this.scale
-			let centerX = item.center[dir_lookup[this.dir]][0]/item.sprite.w
-			let centerY = item.center[dir_lookup[this.dir]][1]/item.sprite.h
-			DRAW.image(item.image, item.sprite.getFrame(0, dir_lookup[this.dir]), x, y, CHICKENROTATION[this.anim.framex], this.flip*this.scale, this.scale, centerX, centerY)
+			let x = drawX - (SPRITE.chicken.w/2)*this.flip*this.scale + (BODYOFFSET[dir_lookup[dir]][this.anim.framex][0])*this.flip*this.scale
+			let y = drawY+this.imageOffsety - SPRITE.chicken.h*this.scale + BODYOFFSET[dir_lookup[dir]][this.anim.framex][1]*this.scale
+			let centerX = item.center[dir_lookup[dir]][0]/item.sprite.w
+			let centerY = item.center[dir_lookup[dir]][1]/item.sprite.h
+			DRAW.image(item.image, item.sprite.getFrame(0, dir_lookup[dir]), x, y, CHICKENROTATION[this.anim.framex], this.flip*this.scale, this.scale, centerX, centerY)
 		}
 
 		DRAW.image(IMG.chicken, this.anim.getFrame(null, 3), drawX, drawY+this.imageOffsety, 0, this.flip*this.scale, this.scale, 0.5, 1) // Uncolored sprite
 
 		if ((this.face != false) && (ITEMS.face[this.face] != null) && (ITEMS.face[this.face].sprite != null)) { // Face item
 			// Figure out the center of the face item to place it on the center of the chicken's face
 			let item = ITEMS.face[this.face]
-			let x = drawX - (SPRITE.chicken.w/2)*this.flip*this.scale + (FACEOFFSET[dir_lookup[this.dir]][this.anim.framex][0])*this.flip*this.scale
-			let y = drawY+this.imageOffsety - SPRITE.chicken.h*this.scale + FACEOFFSET[dir_lookup[this.dir]][this.anim.framex][1]*this.scale
-			let centerX = item.center[dir_lookup[this.dir]][0]/item.sprite.w
-			let centerY = item.center[dir_lookup[this.dir]][1]/item.sprite.h
-			DRAW.image(item.image, item.sprite.getFrame(0, dir_lookup[this.dir]), x, y, CHICKENROTATION[this.anim.framex], this.flip*this.scale, this.scale, centerX, centerY)
+			let x = drawX - (SPRITE.chicken.w/2)*this.flip*this.scale + (FACEOFFSET[dir_lookup[dir]][this.anim.framex][0])*this.flip*this.scale
+			let y = drawY+this.imageOffsety - SPRITE.chicken.h*this.scale + FACEOFFSET[dir_lookup[dir]][this.anim.framex][1]*this.scale
+			let centerX = item.center[dir_lookup[dir]][0]/item.sprite.w
+			let centerY = item.center[dir_lookup[dir]][1]/item.sprite.h
+			DRAW.image(item.image, item.sprite.getFrame(0, dir_lookup[dir]), x, y, CHICKENROTATION[this.anim.framex], this.flip*this.scale, this.scale, centerX, centerY)
 		}
 
 		if ((this.head != false) && (ITEMS.head[this.head] != null) && (ITEMS.head[this.head].sprite != null)) { // Head item
 			// Figure out the center of the head item to place it on the center of the chicken's head
 			let item = ITEMS.head[this.head]
-			let x = drawX - (SPRITE.chicken.w/2)*this.flip*this.scale + (HEADOFFSET[dir_lookup[this.dir]][this.anim.framex][0])*this.flip*this.scale
-			let y = drawY+this.imageOffsety - SPRITE.chicken.h*this.scale + HEADOFFSET[dir_lookup[this.dir]][this.anim.framex][1]*this.scale
-			let centerX = item.center[dir_lookup[this.dir]][0]/item.sprite.w
-			let centerY = item.center[dir_lookup[this.dir]][1]/item.sprite.h
-			DRAW.image(item.image, item.sprite.getFrame(0, dir_lookup[this.dir]), x, y, CHICKENROTATION[this.anim.framex], this.flip*this.scale, this.scale, centerX, centerY)
+			let x = drawX - (SPRITE.chicken.w/2)*this.flip*this.scale + (HEADOFFSET[dir_lookup[dir]][this.anim.framex][0])*this.flip*this.scale
+			let y = drawY+this.imageOffsety - SPRITE.chicken.h*this.scale + HEADOFFSET[dir_lookup[dir]][this.anim.framex][1]*this.scale
+			let centerX = item.center[dir_lookup[dir]][0]/item.sprite.w
+			let centerY = item.center[dir_lookup[dir]][1]/item.sprite.h
+			DRAW.image(item.image, item.sprite.getFrame(0, dir_lookup[dir]), x, y, CHICKENROTATION[this.anim.framex], this.flip*this.scale, this.scale, centerX, centerY)
 		}
 	}
 
@@ -218,7 +227,7 @@ class Character extends PhysicsObject {
 	// Update appearance based on given profile
 	updateProfile(profile, sendToServer) {
 		this.name = profile.name || "" //name
-		this.color = profile.color || [255,255,255]
+		this.color = HEXtoRGB(profile.color) || [255,255,255]
 		this.head = profile.head || false
 		this.face = profile.face || false
 		this.body = profile.body || false