Improved shop design

pages/shop/buyitem.go

@@ -42,7 +42,7 @@ func BuyItem(ctx *aero.Context) string {
 	totalPrice := int(item.Price) * quantity
 
 	if user.Balance < totalPrice {
-		return ctx.Error(http.StatusBadRequest, "Not enough gems", nil)
+		return ctx.Error(http.StatusBadRequest, "Not enough gems. You need to charge up your balance before you can buy this item.", nil)
 	}
 
 	user.Balance -= totalPrice

pages/shop/history.pixy

@@ -20,7 +20,7 @@ component PurchaseHistory(purchases []*arn.Purchase, user *arn.User)
 						PurchaseInfo(purchase)
 
 component PurchaseInfo(purchase *arn.Purchase)
-	td.item-icon
+	td.shop-item-icon
 		Icon(purchase.Item().Icon)
 	td= purchase.Item().Name
 	td.history-quantity= purchase.Quantity

pages/shop/shop.go

@@ -29,5 +29,12 @@ func Get(ctx *aero.Context) string {
 		return items[i].Order < items[j].Order
 	})
 
-	return ctx.HTML(components.Shop(user, items))
+	// Calculate popularity of items
+	itemPopularity := map[string]int{}
+
+	for purchase := range arn.StreamPurchases() {
+		itemPopularity[purchase.ItemID]++
+	}
+
+	return ctx.HTML(components.Shop(items, itemPopularity, user))
 }

pages/shop/shop.pixy

@@ -1,11 +1,11 @@
-component Shop(user *arn.User, items []*arn.ShopItem)
+component Shop(items []*arn.ShopItem, itemPopularity map[string]int, user *arn.User)
 	ShopTabs(user)
 
 	h1.page-title Shop
 
 	.shop-items
 		each item in items
-			ShopItem(item)
+			ShopItem(item, itemPopularity[item.ID])
 
 component ShopTabs(user *arn.User)
 	.tabs
@@ -17,14 +17,18 @@ component ShopTabs(user *arn.User)
 			Tab("History", "history", "/shop/history")
 			Tab(strconv.Itoa(user.Balance), "diamond", "/charge")
 
-component ShopItem(item *arn.ShopItem)
+component ShopItem(item *arn.ShopItem, popularity int)
 	.shop-item.mountable(data-item-id=item.ID)
-		h3.shop-item-name
-			.item-icon
-				Icon(item.Icon)
-			span= item.Name
+		//- .shop-item-icon
+		//- 	Icon(item.Icon)
+		
+		.shop-item-info-column
+			h3.shop-item-name= item.Name
+			.shop-item-popularity= arn.Plural(popularity, "user") + " bought this"
+
 			//- span.shop-item-duration= " " + duration
-		.shop-item-description!= markdown.Render(item.Description)
+		//- .shop-item-description!= markdown.Render(item.Description)
+
 		.buttons.shop-buttons
 			button.shop-button-buy.action(data-item-id=item.ID, data-item-name=item.Name, data-price=item.Price, data-trigger="click", data-action="buyItem")
 				span.shop-item-price= "Buy for " + toString(item.Price)

pages/shop/shop.scarlet

@@ -2,24 +2,35 @@ const item-color-pro-account = hsl(0, 100%, 71%)
 const item-color-anime-support-ticket = hsl(217, 64%, 50%)
 
 .shop-items
-	horizontal-wrap
-	justify-content space-around
+	vertical
+	width 100%
+	max-width 600px
+	margin 0 auto
 
 .shop-item
-	ui-element
-	flex 1
-	flex-basis 380px
-	margin calc(content-padding / 2)
-	padding 0.5rem content-padding
+	horizontal
+	align-items center
+	padding 0.5rem 0
+	border-bottom ui-border
+
+	:last-child
+		border-bottom none
+
+.shop-item-info-column
+	flex 0.7
+	vertical
 
 .shop-item-name
-	font-size 1.6rem
-	text-align center
-	padding 0.75rem 0
-	// border-bottom 1px solid rgba(0, 0, 0, 0.1)
+	font-size 1.4rem
+	text-align left
+	margin 0
+	clip-long-text
 
-.item-icon
-	display inline-block
+.shop-item-popularity
+	opacity 0.5
+
+.shop-item-icon
+	//
 
 // Colors
 .shop-item, .inventory-slot, .shop-history-item
@@ -28,12 +39,12 @@ const item-color-anime-support-ticket = hsl(217, 64%, 50%)
 	[data-item-id="pro-account-6"],
 	[data-item-id="pro-account-12"],
 	[data-item-id="pro-account-24"]
-		.item-icon
+		.shop-item-icon
 			color item-color-pro-account
 
-	[data-item-id="anime-support-ticket"]
-		.item-icon
-			color item-color-anime-support-ticket
+	// [data-item-id="anime-support-ticket"]
+	// 	.shop-item-icon
+	// 		color item-color-anime-support-ticket
 
 .shop-item-price
 	// ...
@@ -48,9 +59,13 @@ const item-color-anime-support-ticket = hsl(217, 64%, 50%)
 	float right
 
 .shop-buttons
-	margin-top 1rem
+	flex 0.3
+	white-space nowrap
 
 .shop-button-buy
+	width 100%
+	justify-content center
+
 	.icon-diamond
 		margin-left 0.3rem
 		margin-right 0