Inventory implementation

pages/inventory/inventory.go

@@ -25,5 +25,11 @@ func Get(ctx *aero.Context) string {
 		return ctx.Error(http.StatusInternalServerError, "Error fetching inventory data", err)
 	}
 
+	// TEST
+	inventory.AddItem("anime-support-ticket", 35)
+	inventory.AddItem("pro-account-24", 20)
+	inventory.AddItem("anime-support-ticket", 15)
+	inventory.AddItem("pro-account-24", 10)
+
 	return ctx.HTML(components.Inventory(inventory))
 }

pages/inventory/inventory.pixy

@@ -1,7 +1,11 @@
 component Inventory(inventory *arn.Inventory)
 	ShopTabs
 	.inventory
-		each slot in inventory.Slots
-			.inventory-slot
-				span= slot.ItemID
-	p Coming soon.
+		for index, slot := range inventory.Slots
+			if slot.ItemID == ""
+				.inventory-slot.mountable(draggable="false", data-index=index)
+			else
+				.inventory-slot.mountable(title=slot.Item().Name, draggable="true", data-index=index)
+					Icon(slot.Item().Icon)
+					if slot.Quantity > 1
+						.inventory-slot-quantity= slot.Quantity

pages/inventory/inventory.scarlet

@@ -0,0 +1,35 @@
+inventory-slot-size = 64px
+
+.inventory
+	display grid
+	grid-gap 0.25rem
+	grid-template-columns repeat(auto-fit, inventory-slot-size)
+	grid-auto-rows inventory-slot-size
+	justify-content center
+	width 100%
+	max-width 450px
+	margin 0 auto
+
+.inventory-slot
+	ui-element
+	position relative
+	display flex
+	align-items center
+	justify-content center
+	font-size 2rem
+	
+	.icon
+		margin 0
+		pointer-events none
+
+.inventory-slot-quantity
+	position absolute
+	bottom 0.25rem
+	right 0.25rem
+	font-size 0.8rem
+	line-height 1em
+	opacity 0.5
+	pointer-events none
+
+.drag-enter
+	border-style dashed