From a680360ef722a4f5e2e6fd1ed2f5975681856763 Mon Sep 17 00:00:00 2001
From: Graphictoria <XlXi@gtoria.net>
Date: Fri, 22 Jul 2022 00:13:13 -0400
Subject: [PATCH] More shop stuff.

---
 web/resources/js/components/Feed.js          | 12 ++--
 web/resources/sass/Graphictoria.scss         |  8 +++
 web/resources/views/web/shop/asset.blade.php | 59 +++++++++++++++++---
 3 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/web/resources/js/components/Feed.js b/web/resources/js/components/Feed.js
index 8a5a48c..6e14e7e 100644
--- a/web/resources/js/components/Feed.js
+++ b/web/resources/js/components/Feed.js
@@ -118,20 +118,20 @@ class Feed extends Component {
 					(
 						this.state.feedPosts.length > 0 ?
 						<>
-							<div className="card d-flex">
+							<div className="card">
 							{
 								this.state.feedPosts.map(({ postId, poster, time, content }, index) => 
 									<>
-										<div className="row p-2" onMouseEnter={ () => this.setState({ mouseHover: index }) } onMouseLeave={ () => this.setState({ mouseHover: -1 }) }>
-											<div className="col-3 col-sm-2 col-md-1">
+										<div className="d-flex p-2" onMouseEnter={ () => this.setState({ mouseHover: index }) } onMouseLeave={ () => this.setState({ mouseHover: -1 }) }>
+											<div className="me-2">
 												<a href={ buildGenericApiUrl('www', (poster.type == 'User' ? `users/${poster.name}/profile` : `groups/${poster.id}`)) }>
 													{ poster.type == 'User' ?
-														<img src={ poster.thumbnail } width="90" height="90" className="img-fluid border graphictora-user-circle" /> :
-														<img src={ poster.thumbnail } width="90" height="90" className="img-fluid" />
+														<img src={ poster.thumbnail } alt={ poster.name } width="50" height="50" className="border graphictora-feed-user-circle" /> :
+														<img src={ poster.thumbnail } alt={ poster.name } width="50" height="50" className="img-fluid" />
 													}
 												</a>
 											</div>
-											<div className="col-9 col-sm-10 col-md-11">
+											<div className="flex-fill">
 												<div className="d-flex">
 													<a href={ buildGenericApiUrl('www', (poster.type == 'User' ? `users/${poster.name}/profile` : `groups/${poster.id}`)) } className="text-decoration-none fw-bold me-auto">{ poster.name }{ poster.icon ? <>&nbsp;<i className={ poster.icon }></i></> : null }</a>
 													{ this.state.mouseHover == index ? <a href={ buildGenericApiUrl('www', `report/user-wall/${postId}`) } target="_blank" className="text-decoration-none link-danger me-2">Report <i className="fa-solid fa-circle-exclamation"></i></a> : null }
diff --git a/web/resources/sass/Graphictoria.scss b/web/resources/sass/Graphictoria.scss
index 4577c27..cad5cb6 100644
--- a/web/resources/sass/Graphictoria.scss
+++ b/web/resources/sass/Graphictoria.scss
@@ -337,6 +337,14 @@ html {
 	background-size: cover;
 }
 
+.graphictora-feed-user-circle {
+	border-radius: 50%;
+	background: url("/Images/User-Image-Vignette.png");
+	background-size: cover;
+	width: 50px;
+	height: 50px;
+}
+
 // Border
 
 .border {
diff --git a/web/resources/views/web/shop/asset.blade.php b/web/resources/views/web/shop/asset.blade.php
index 6ebb0f8..f91998f 100644
--- a/web/resources/views/web/shop/asset.blade.php
+++ b/web/resources/views/web/shop/asset.blade.php
@@ -6,22 +6,65 @@
 @endsection
 
 @section('content')
-<div class="container graphictoria-center-vh">
+<div class="container pt-5">
 	@if(!$asset->approved)
 		<div class="alert alert-danger text-center"><strong>This asset is pending approval.</strong> It will not appear in-game and cannot be voted on or purchased at this time.</div>
 	@endif
 	<div class="card shadow-sm">
 		<div class="card-body">
 			<div class="row">
-				<div class="col-6">
+				<div class="col-5">
+					<img src={{ asset('images/testing/hat.png') }} alt="{{ $asset->name }}" class="border img-fluid" />
 				</div>
-				<div class="col-6">
-					<h4 class="mb-0">{{ $asset->name }}</h4>
+				<div class="col-7">
+					<h3 class="mb-0">{{ $asset->name }}</h3>
 					{{-- TODO: XlXi: url to user's profile --}}
-					<p>By: {{ $asset->user->username }}<p>
-					<br />
-					<p>Type: {{ $asset->typeString() }}</p>
-					<p>Description:</p>
+					<p>By {{ $asset->user->username }}</p>
+					<hr />
+					{{-- TODO: XlXi: limiteds/trading --}}
+					<div class="row mt-2">
+						<div class="col-3 fw-bold">
+							<p>Price</p>
+						</div>
+						<div class="col-9 d-flex">
+							@if( $asset->onSale )
+								<h4 class="my-auto" style="color:#e59800!important;font-weight:bold">
+									<img src="{{ asset('images/symbols/token.svg') }}" height="32" width="32" class="img-fluid me-1" style="margin-top:-1px" />{{ \App\Helpers\NumberHelper::Abbreviate(Auth::user()->tokens) }}</h4>
+								</h4>
+							@endif
+							@php
+								$buttonText = 'Buy';
+								$buttonClass = 'success';
+								
+								// TODO: XlXi: Owned items
+								if(!$asset->onSale) {
+									$buttonText = 'Offsale';
+									$buttonClass = 'secondary';
+								}
+							@endphp
+							<button class="ms-auto px-5 btn btn-lg btn-{{ $buttonClass }}" {{ !$asset->onSale ? 'disabled' : '' }}>{{ $buttonText }}</button>
+						</div>
+					</div>
+					<div class="row mt-2">
+						<div class="col-3 fw-bold">
+							<p>Type</p>
+						</div>
+						<div class="col-9">
+							<p>{{ $asset->typeString() }}</p>
+						</div>
+					</div>
+					<div class="row mt-2">
+						<div class="col-3 fw-bold">
+							<p>Description</p>
+						</div>
+						<div class="col-9">
+							@if ( $asset->description )
+								<p>{{ $asset->description }}</p>
+							@else
+								<p class="text-muted">This item has no description.</p>
+							@endif
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>