diff --git a/pages/charge/charge.pixy b/pages/charge/charge.pixy index 4d8e3445..86b6734e 100644 --- a/pages/charge/charge.pixy +++ b/pages/charge/charge.pixy @@ -5,69 +5,25 @@ component Charge(user *arn.User) p.text-center.mountable You can add balance via PayPal. 1 Japanese Yen equals 1 Gem. - .payment-cards.feature-cards-alternative-color - .payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=1000) - .payment-card-icon - RawIcon("diamond") - - .payment-card-text - p.payment-amount 1,000 ¥ - p.payment-amount-converted ≈ 9.46 $ + .buttons + button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=1000) + Icon("diamond") + span 1000 - .payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=2000) - .payment-card-icon - RawIcon("diamond") - - .payment-card-text - p.payment-amount 2,000 ¥ - p.payment-amount-converted ≈ 18.92 $ + button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=2000) + Icon("diamond") + span 2000 - .payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=3000) - .payment-card-icon - RawIcon("diamond") - - .payment-card-text - p.payment-amount 3,000 ¥ - p.payment-amount-converted ≈ 28.38 $ + button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=3000) + Icon("diamond") + span 3000 + + button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=6000) + Icon("diamond") + span 6000 - .payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=6000) - .payment-card-icon - RawIcon("diamond") - - .payment-card-text - p.payment-amount 6,000 ¥ - p.payment-amount-converted ≈ 56.76 $ - - .payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=12000) - .payment-card-icon - RawIcon("diamond") - - .payment-card-text - p.payment-amount 12,000 ¥ - p.payment-amount-converted ≈ 113.52 $ - - .payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=25000) - .payment-card-icon - RawIcon("diamond") - - .payment-card-text - p.payment-amount 25,000 ¥ - p.payment-amount-converted ≈ 236.50 $ - - .payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=50000) - .payment-card-icon - RawIcon("diamond") - - .payment-card-text - p.payment-amount 50,000 ¥ - p.payment-amount-converted ≈ 473.00 $ - - .payment-card.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=75000) - .payment-card-icon - RawIcon("diamond") - - .payment-card-text - p.payment-amount 75,000 ¥ - p.payment-amount-converted ≈ 709.50 $ + button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=12000) + Icon("diamond") + span 12000 .footer.mountable Different currencies will automatically be converted. \ No newline at end of file diff --git a/pages/inventory/inventory.pixy b/pages/inventory/inventory.pixy index 32eff6db..61e3cf7a 100644 --- a/pages/inventory/inventory.pixy +++ b/pages/inventory/inventory.pixy @@ -9,7 +9,7 @@ component Inventory(inventory *arn.Inventory, viewUser *arn.User, user *arn.User .inventory-slot.mountable(draggable="false", data-index=index) else .inventory-slot.mountable(title=slot.Item().Name, draggable="true", data-index=index, data-item-id=slot.ItemID, data-consumable=slot.Item().Consumable) - .item-icon + .shop-item-icon Icon(slot.Item().Icon) if slot.Quantity > 1 .inventory-slot-quantity= slot.Quantity diff --git a/pages/inventory/inventory.scarlet b/pages/inventory/inventory.scarlet index 15e25ade..5ab1a448 100644 --- a/pages/inventory/inventory.scarlet +++ b/pages/inventory/inventory.scarlet @@ -22,7 +22,7 @@ const inventory-slot-size = 64px :hover cursor pointer - .item-icon + .shop-item-icon animation hover-item 1s infinite ease-in-out .icon @@ -30,19 +30,19 @@ const inventory-slot-size = 64px pointer-events none // [data-item-id="pro-account-3"] - // .item-icon + // .shop-item-icon // opacity 0.7 // [data-item-id="pro-account-6"] - // .item-icon + // .shop-item-icon // opacity 0.8 // [data-item-id="pro-account-12"] - // .item-icon + // .shop-item-icon // opacity 0.9 // [data-item-id="pro-account-24"] - // .item-icon + // .shop-item-icon // opacity 1.0 animation hover-item diff --git a/pages/shop/buyitem.go b/pages/shop/buyitem.go index bc61ba4d..27c24990 100644 --- a/pages/shop/buyitem.go +++ b/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 diff --git a/pages/shop/history.pixy b/pages/shop/history.pixy index 31288ae6..2b33f4b9 100644 --- a/pages/shop/history.pixy +++ b/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 diff --git a/pages/shop/shop.go b/pages/shop/shop.go index 7ea235d0..8ace9807 100644 --- a/pages/shop/shop.go +++ b/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)) } diff --git a/pages/shop/shop.pixy b/pages/shop/shop.pixy index 783a0ad1..5eef38a8 100644 --- a/pages/shop/shop.pixy +++ b/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) diff --git a/pages/shop/shop.scarlet b/pages/shop/shop.scarlet index 302e212d..dc582dc5 100644 --- a/pages/shop/shop.scarlet +++ b/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 \ No newline at end of file diff --git a/pages/support/support.scarlet b/pages/support/support.scarlet index 22a5af79..eb7439d3 100644 --- a/pages/support/support.scarlet +++ b/pages/support/support.scarlet @@ -20,22 +20,14 @@ mixin feature-card box-shadow shadow-medium text-shadow none -.feature-cards, -.payment-cards +.feature-cards feature-cards -.feature-card, -.payment-card +.feature-card feature-card -.payment-card - :hover - cursor pointer - .feature-card-icon, -.feature-card-text, -.payment-card-icon, -.payment-card-text +.feature-card-text horizontal justify-content center align-items center @@ -43,24 +35,15 @@ mixin feature-card padding 1rem margin 0 -.feature-card-icon, -.payment-card-icon +.feature-card-icon font-size 3rem background feature-card-color color feature-card-icon-color -.feature-card-text, -.payment-card-text +.feature-card-text vertical color text-color -.payment-amount - font-size 1.2rem - font-weight bold - -.payment-amount-converted - feature-card-footer - .feature-cards-alternative-color .feature-card-icon, .payment-card-icon diff --git a/patches/add-shop-items/add-shop-items.go b/patches/add-shop-items/add-shop-items.go index 4ddbb6cf..5e6bfa02 100644 --- a/patches/add-shop-items/add-shop-items.go +++ b/patches/add-shop-items/add-shop-items.go @@ -6,7 +6,7 @@ var items = []*arn.ShopItem{ // 1 month &arn.ShopItem{ ID: "pro-account-1", - Name: "PRO Account (1 month)", + Name: "PRO Account - 1 month", Price: 300, Description: `PRO status for 1 month. @@ -29,7 +29,7 @@ Includes: // 3 months &arn.ShopItem{ ID: "pro-account-3", - Name: "PRO Account (3 months)", + Name: "PRO Account - 3 months", Price: 900, Description: `PRO status for 1 anime season (3 months). @@ -52,7 +52,7 @@ Includes: // 6 months &arn.ShopItem{ ID: "pro-account-6", - Name: "PRO Account (6 months)", + Name: "PRO Account - 6 months", Price: 1600, Description: `PRO status for 2 anime seasons (6 months). @@ -73,7 +73,7 @@ Includes: }, &arn.ShopItem{ ID: "pro-account-12", - Name: "PRO Account (12 months)", + Name: "PRO Account - 1 year", Price: 3000, Description: `PRO status for 4 anime seasons (12 months). @@ -94,7 +94,7 @@ Includes: }, &arn.ShopItem{ ID: "pro-account-24", - Name: "PRO Account (24 months)", + Name: "PRO Account - 2 years", Price: 5900, Description: `PRO status for 8 anime seasons (24 months). diff --git a/patches/add-song-titles/add-song-titles.go b/patches/add-song-titles/add-song-titles.go new file mode 100644 index 00000000..e69de29b diff --git a/styles/table.scarlet b/styles/table.scarlet index d84fa5b7..7e21ea3f 100644 --- a/styles/table.scarlet +++ b/styles/table.scarlet @@ -7,10 +7,10 @@ mixin table-row border-bottom-width 1px border-bottom-style solid border-bottom-color rgba(0, 0, 0, 0.05) - background-color transparent + background transparent :hover - background-color table-row-hover-background + background table-row-hover-background :last-child border none