From 8c4f41a1d0d77babd7508f8a29a618f123c975ef Mon Sep 17 00:00:00 2001 From: Graphictoria Date: Tue, 13 Sep 2022 18:36:12 -0400 Subject: [PATCH] Simpler token HTML, shop info hover cards. - The complexity and size of the HTML of tokens has been reduced to a simple class, no more styles and no more image. - Hover cards have been added to the shop item cards, along with item cards being moved to it's own class in the shop Javascript. Simply just put your mouse overtop of a shop item and more info will be shown to you below it! Very epic. --- .../Http/Controllers/Api/ShopController.php | 2 + web/resources/js/components/PurchaseButton.js | 8 +- web/resources/js/components/Shop.js | 80 ++++++++++++++++--- web/resources/sass/Graphictoria.scss | 56 +++++++++++++ web/resources/views/layouts/nav.blade.php | 6 +- web/resources/views/web/shop/asset.blade.php | 4 +- 6 files changed, 135 insertions(+), 21 deletions(-) diff --git a/web/app/Http/Controllers/Api/ShopController.php b/web/app/Http/Controllers/Api/ShopController.php index 1d7f313..18a57c4 100644 --- a/web/app/Http/Controllers/Api/ShopController.php +++ b/web/app/Http/Controllers/Api/ShopController.php @@ -79,6 +79,8 @@ class ShopController extends Controller 'Url' => $creator->getProfileUrl() ], 'Thumbnail' => $asset->getThumbnail(), + 'OnSale' => $asset->onSale, + 'Price' => $asset->priceInTokens, 'Url' => route('shop.asset', ['asset' => $asset->id, 'assetName' => Str::slug($asset->name, '-')]) ]); } diff --git a/web/resources/js/components/PurchaseButton.js b/web/resources/js/components/PurchaseButton.js index 14a621c..2351eff 100644 --- a/web/resources/js/components/PurchaseButton.js +++ b/web/resources/js/components/PurchaseButton.js @@ -54,8 +54,8 @@ class PurchaseConfirmationModal extends Component {
-

Would you like to purchase the { this.state.assetType } "{ this.state.assetName }" from { this.state.assetCreator } for { this.state.assetPrice }?

- { this.state.assetName } +

Would you like to purchase the { this.state.assetType } { this.state.assetName } from { this.state.assetCreator } for { this.state.assetPrice }?

+ {
@@ -63,7 +63,7 @@ class PurchaseConfirmationModal extends Component {  
-

You will have { Math.max(0, (this.state.userTokens - this.state.assetPrice)) } after this purchase.

+

You will have { Math.max(0, (this.state.userTokens - this.state.assetPrice)) } after this purchase.

@@ -114,7 +114,7 @@ class NotEnoughTokensModal extends Component {
-

You need { this.state.assetPrice - this.state.userTokens } more to purchase this item.

+

You need { this.state.assetPrice - this.state.userTokens } more to purchase this item.

diff --git a/web/resources/js/components/Shop.js b/web/resources/js/components/Shop.js index bbdf1e5..e879105 100644 --- a/web/resources/js/components/Shop.js +++ b/web/resources/js/components/Shop.js @@ -12,6 +12,7 @@ import axios from 'axios'; import Twemoji from 'react-twemoji'; import { buildGenericApiUrl } from '../util/HTTP.js'; +import ProgressiveImage from './ProgressiveImage'; import Loader from './Loader'; axios.defaults.withCredentials = true; @@ -106,6 +107,12 @@ function makeCategoryId(originalName, category) { return `shop-${originalName.toLowerCase().replaceAll(' ', '-')}-${category}`; } +function commaSeparate(num) { + let str = num.toString().split('.'); + str[0] = str[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); + return str.join('.'); +} + class ShopCategoryButton extends Component { constructor(props) { super(props); @@ -196,6 +203,66 @@ class ShopCategories extends Component { } } +class ShopItemCard extends Component { + constructor(props) { + super(props); + this.state = { + hovered: false + } + } + + render() { + var item = this.props.item; + + return ( + this.setState({hovered: true})} + onMouseLeave={() => this.setState({hovered: false})} + > + + +
+

{ item.Name }

+ { item.OnSale ? +

{commaSeparate(item.Price)}

+ :

Offsale

+ } +
+ + { + this.state.hovered ? + +
+

+ Creator: { item.Creator.Name } +

+ {/* TODO: XlXi: These */} +

+ Updated: test +

+

+ Sales: test +

+

+ Favorites: test +

+
+ + : + null + } + + ); + } +} + class Shop extends Component { constructor(props) { super(props); @@ -309,17 +376,8 @@ class Shop extends Component { :
{ - this.state.pageItems.map(({Name, Creator, Thumbnail, Url}, index) => - - - -
-

{ Name }

- { /* TODO: XlXi: price */ } -

Todo123

-
- - + this.state.pageItems.map((item, index) => + ) }
diff --git a/web/resources/sass/Graphictoria.scss b/web/resources/sass/Graphictoria.scss index b3d6bc3..7994640 100644 --- a/web/resources/sass/Graphictoria.scss +++ b/web/resources/sass/Graphictoria.scss @@ -36,6 +36,38 @@ img.twemoji { // Shop +.graphictoria-tokens { + background: 0 1px/contain no-repeat url("/images/symbols/token.svg"); + color: #e59800!important; + font-weight: bold; + + // XlXi: This is god awful + @at-root { + h1#{&} { + padding: 0 0 0 46px; + } + h2#{&} { + padding: 0 0 0 36px; + } + h3#{&} { + padding: 0 0 0 32px; + } + h4#{&} { + padding: 0 0 0 28px; + } + h6#{&} { + padding: 0 0 0 20px; + } + h5#{&}, p#{&}, span#{&} { + padding: 0 0 0 25px; + } + + p > span#{&} { + padding: 0 0 0 20px; + } + } +} + .graphictoria-asset-thumbnail { width: 420px; height: 420px; @@ -77,6 +109,30 @@ img.twemoji { flex: 0 0 auto; width: 144px; } + + // text-reset + --bs-text-opacity: 1; + color: inherit!important; +} + +.graphictoria-item-details { + position: relative; + display: flex; + + z-index: 99999; + + // mx-2 + margin: 0 0.5rem 0 0.5rem!important; + + &>.card { + position: absolute; + width: 100%; + left: 0; + border-radius: 0 0 4px 4px; + margin-top: -16px; + + font-size: .86rem!important; + } } .graphictoria-item-card > span > img { diff --git a/web/resources/views/layouts/nav.blade.php b/web/resources/views/layouts/nav.blade.php index 411fe50..ea1a9b3 100644 --- a/web/resources/views/layouts/nav.blade.php +++ b/web/resources/views/layouts/nav.blade.php @@ -208,10 +208,8 @@
-

- - {{ \App\Helpers\NumberHelper::Abbreviate(Auth::user()->tokens) }} - +

+ {{ \App\Helpers\NumberHelper::Abbreviate(Auth::user()->tokens) }}

diff --git a/web/resources/views/web/shop/asset.blade.php b/web/resources/views/web/shop/asset.blade.php index 7f96eef..6e3f1e5 100644 --- a/web/resources/views/web/shop/asset.blade.php +++ b/web/resources/views/web/shop/asset.blade.php @@ -83,8 +83,8 @@
@if( $asset->onSale ) -

- {{ number_format($asset->priceInTokens) }}

+

+ {{ number_format($asset->priceInTokens) }}

@endif @auth