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.

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, '-')])
 			]);
 		}

web/resources/js/components/PurchaseButton.js

@@ -54,8 +54,8 @@ class PurchaseConfirmationModal extends Component {
 							<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 						</div>
 						<div className="modal-body d-flex flex-column">
-							<p>Would you like to purchase the { this.state.assetType } "<strong>{ this.state.assetName }</strong>" from { this.state.assetCreator } for <strong style={{'color': '#e59800', 'fontWeight': 'bold'}}><img src="/images/symbols/token.svg" height="16" width="16" className="img-fluid" style={{'marginTop': '-1px'}} />{ this.state.assetPrice }</strong>?</p>
+							<p>Would you like to purchase the { this.state.assetType } <strong>{ this.state.assetName }</strong> from { this.state.assetCreator } for <span className="graphictoria-tokens">{ this.state.assetPrice }</span>?</p>
-							<img src="/images/testing/hat.png" width="240" height="240" alt="{ this.state.assetName }" className="mx-auto my-2 img-fluid" />
+							<img src="/images/testing/hat.png" width="240" height="240" alt={ this.state.assetName } className="mx-auto my-2 img-fluid" />
 						</div>
 						<div className="modal-footer flex-column">
 							<div className="mx-auto">
@@ -63,7 +63,7 @@ class PurchaseConfirmationModal extends Component {
 								&nbsp;
 								<button className="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
 							</div>
-							<p className="text-muted pt-1">You will have <strong style={{'color': '#e59800', 'fontWeight': 'bold'}}><img src="/images/symbols/token.svg" height="16" width="16" className="img-fluid" style={{'marginTop': '-1px'}} />{ Math.max(0, (this.state.userTokens - this.state.assetPrice)) }</strong> after this purchase.</p>
+							<p className="text-muted pt-1">You will have <span className="graphictoria-tokens">{ Math.max(0, (this.state.userTokens - this.state.assetPrice)) }</span> after this purchase.</p>
 						</div>
 					</div>
 				</div>
@@ -114,7 +114,7 @@ class NotEnoughTokensModal extends Component {
 							<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 						</div>
 						<div className="modal-body">
-							<p>You need <strong style={{'color': '#e59800', 'fontWeight': 'bold'}}><img src="/images/symbols/token.svg" height="16" width="16" className="img-fluid" style={{'marginTop': '-1px'}} />{ this.state.assetPrice - this.state.userTokens }</strong> more to purchase this item.</p>
+							<p>You need <span className="graphictoria-tokens">{ this.state.assetPrice - this.state.userTokens }</span> more to purchase this item.</p>
 						</div>
 						<div className="modal-footer">
 							<button className="btn btn-secondary" data-bs-dismiss="modal">Ok</button>

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 (
+			<a
+				className="graphictoria-item-card"
+				href={ item.Url }
+				onMouseEnter={() => this.setState({hovered: true})}
+				onMouseLeave={() => this.setState({hovered: false})}
+			>
+				<span className="card m-2">
+					<ProgressiveImage
+						src={ item.Thumbnail } 
+						placeholderImg={ buildGenericApiUrl('www', 'images/busy/asset.png') }
+						alt={ item.Name }
+						className='img-fluid'
+					/>
+					<div className="p-2">
+						<p>{ item.Name }</p>
+						{ item.OnSale ?
+						<p className="graphictoria-tokens text-truncate">{commaSeparate(item.Price)}</p>
+						: <p className="text-muted">Offsale</p>
+						}
+					</div>
+				</span>
+				{
+					this.state.hovered ?
+					<span className="graphictoria-item-details">
+						<div className="card px-2">
+							<p className="text-truncate">
+								<span className="text-muted">Creator: </span><a href={ item.Creator.Url } className="text-decoration-none fw-normal">{ item.Creator.Name }</a>
+							</p>
+							{/* TODO: XlXi: These */}
+							<p className="text-truncate">
+								<span className="text-muted">Updated: </span>test
+							</p>
+							<p className="text-truncate">
+								<span className="text-muted">Sales: </span>test
+							</p>
+							<p className="text-truncate">
+								<span className="text-muted">Favorites: </span>test
+							</p>
+						</div>
+					</span>
+					:
+					null
+				}
+			</a>
+		);
+	}
+}
+
 class Shop extends Component {
 	constructor(props) {
 		super(props);
@@ -309,17 +376,8 @@ class Shop extends Component {
 								:
 								<div>
 									{
-										this.state.pageItems.map(({Name, Creator, Thumbnail, Url}, index) =>
+										this.state.pageItems.map((item, index) =>
-											<a className="graphictoria-item-card" href={ Url } key={ index }>
+											<ShopItemCard item={ item } key={ index } />
-												<span className="card m-2">
-													<img className="img-fluid" src={ Thumbnail } />
-													<div className="p-2">
-														<p>{ Name }</p>
-														{ /* TODO: XlXi: price */ }
-														<p className="text-muted">Todo123</p>
-													</div>
-												</span>
-											</a>
 										)
 									}
 								</div>

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 {

web/resources/views/layouts/nav.blade.php

@@ -208,10 +208,8 @@
 							</li>
 						</ul>
 						<div class="d-md-flex">
-							<p class="my-auto me-2 text-muted" style="color:#e59800!important;font-weight:bold">
+							<p class="my-auto me-2 graphictoria-tokens" data-bs-toggle="tooltip" data-bs-placement="bottom" title="You have {{ number_format(Auth::user()->tokens) }} tokens. Your next reward is in {{ Auth::user()->next_reward->diffForHumans(['syntax' => Carbon\CarbonInterface::DIFF_ABSOLUTE]) }}.">
-								<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="You have {{ number_format(Auth::user()->tokens) }} tokens. Your next reward is in {{ Auth::user()->next_reward->diffForHumans(['syntax' => Carbon\CarbonInterface::DIFF_ABSOLUTE]) }}.">
+								{{ \App\Helpers\NumberHelper::Abbreviate(Auth::user()->tokens) }}
-									<img src="{{ asset('images/symbols/token.svg') }}" height="20" width="20" class="img-fluid me-1" style="margin-top:-1px" />{{ \App\Helpers\NumberHelper::Abbreviate(Auth::user()->tokens) }}
-								</span>
 							</p>
 							<div class="dropdown">
 								<a class="nav-link dropdown-toggle graphictoria-user-dropdown px-0 px-md-3" href="#" id="graphictoria-user-dropdown" role="button" data-bs-toggle="dropdown" area-expanded="false">

web/resources/views/web/shop/asset.blade.php

@@ -83,8 +83,8 @@
 							</div>
 							<div class="col-9 d-flex">
 								@if( $asset->onSale )
-									<h4 class="my-auto" style="color:#e59800!important;font-weight:bold">
+									<h4 class="my-auto graphictoria-tokens">
-										<img src="{{ asset('images/symbols/token.svg') }}" height="32" width="32" class="img-fluid me-1" style="margin-top:-1px" />{{ number_format($asset->priceInTokens) }}</h4>
+										{{ number_format($asset->priceInTokens) }}
 									</h4>
 								@endif
 								@auth