Add average scores to overall and review tabs

hyperbolus · Dec 5, 2023 · 4396d41 · 4396d41
1 parent 13b689c
commit 4396d41
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 13 deletions.
diff --git a/app/Http/Controllers/Game/LevelController.php b/app/Http/Controllers/Game/LevelController.php
@@ -166,7 +166,8 @@ public function tags(Level $level): Response
 
     public function reviews(Level $level) {
         return page('Levels/Sections/Reviews', [
-            'level' => $level,
+            'level' => $level
+                ->loadCount('reviews'),
             'reviews' => $level->reviews()
                 ->with('author')
                 ->paginate(5),

diff --git a/resources/js/Components/LevelRatingStamp.vue b/resources/js/Components/LevelRatingStamp.vue
@@ -8,26 +8,26 @@ const props = defineProps({
 <template>
     <div  class="x z-10 md:-translate-x-8 justify-center sm:w-fit sm:skew-x-12 sm:rounded-tr-lg bg-ui-800">
         <div class="grid items-end sm:-skew-x-12 grid-cols-4 sm:grid-cols-5 md:ml-8 gap-4 py-1.5 px-4 -[text-shadow:black_0_0_10px]">
-            <span class="hidden sm:flex flex-col">
+            <div class="hidden sm:flex flex-col">
                 <span class="text-xs uppercase">Reviews</span>
                 <span class="text-lg font-bold">{{ level.reviews_count }}</span>
-            </span>
-            <span class="y">
+            </div>
+            <div class="y">
                 <span class="text-xs uppercase">Difficulty</span>
                 <span class="text-lg font-bold">{{ displayRating(level.rating_difficulty) }}<span class="text-xs text-ui-600">/100</span></span>
-            </span>
-            <span class="y">
+            </div>
+            <div class="y">
                 <span class="text-xs uppercase">Overall</span>
                 <span class="text-lg font-bold">{{ displayRating(level.rating_overall) }}<span class="text-xs text-ui-600">/10</span></span>
-            </span>
-            <span class="y">
+            </div>
+            <div class="y">
                 <span class="text-xs uppercase">Gameplay</span>
                 <span class="text-lg font-bold">{{ displayRating(level.rating_gameplay) }}<span class="text-xs text-ui-600">/10</span></span>
-            </span>
-            <span class="y">
+            </div>
+            <div class="y">
                 <span class="text-xs uppercase">Visuals</span>
                 <span class="text-lg font-bold">{{ displayRating(level.rating_visuals) }}<span class="text-xs text-ui-600">/10</span></span>
-            </span>
+            </div>
         </div>
     </div>
 </template>
diff --git a/resources/js/Pages/Levels/Sections/Reviews.vue b/resources/js/Pages/Levels/Sections/Reviews.vue
@@ -57,9 +57,31 @@ const submit = () => {
 </script>
 <template>
     <Layout :level="level">
-        <div class="flex !mt-0 flex-col lg:flex-row bg-ui-950 border border-ui-900 rounded-lg px-4 py-2 gap-2">
+        <div class="flex !mt-0 flex-col lg:flex-row-reverse bg-ui-950 border border-ui-900 rounded-lg px-4 py-2 gap-2">
             <div class="y space-y-2 lg:w-1/2">
-                <h2 class="font-bold text-2xl">Reviews</h2>
+                <h2 class="font-bold text-2xl">Average Ratings</h2>
+                <div class="x pane justify-between">
+                    <div class="y">
+                        <span class="text-xs uppercase">Reviews</span>
+                        <span class="text-xl font-bold">{{ level.reviews_count }}</span>
+                    </div>
+                    <div class="y">
+                        <span class="text-xs uppercase">Difficulty</span>
+                        <span class="text-xl font-bold">{{ displayRating(level.rating_difficulty) }}<span class="text-xs text-ui-600">/100</span></span>
+                    </div>
+                    <div class="y">
+                        <span class="text-xs uppercase">Overall</span>
+                        <span class="text-xl font-bold">{{ displayRating(level.rating_overall) }}<span class="text-xs text-ui-600">/10</span></span>
+                    </div>
+                    <div class="y">
+                        <span class="text-xs uppercase">Gameplay</span>
+                        <span class="text-xl font-bold">{{ displayRating(level.rating_gameplay) }}<span class="text-xs text-ui-600">/10</span></span>
+                    </div>
+                    <div class="y">
+                        <span class="text-xs uppercase">Visuals</span>
+                        <span class="text-xl font-bold">{{ displayRating(level.rating_visuals) }}<span class="text-xs text-ui-600">/10</span></span>
+                    </div>
+                </div>
                 <details v-if="isAuthenticated()" class="pane" :open="!props.review">
                     <summary>
                         <span class="text-xl cursor-pointer">{{ props.review ? 'Edit Your' : 'Submit' }} Rating</span>
@@ -126,6 +148,7 @@ const submit = () => {
                 </div>
             </div>
             <div class="y space-y-2 lg:w-1/2">
+                <h2 class="font-bold text-2xl">Reviews</h2>
                 <Pagination :list="reviews"/>
                 <div v-if="reviews.data.length === 0" class="pane">
                     This level has no reviews. Be the first!

diff --git a/resources/js/Pages/Levels/Show.vue b/resources/js/Pages/Levels/Show.vue
@@ -20,6 +20,7 @@ import Errors from "@/Components/Errors.vue";
 import Icon from "@/Components/Icon.vue";
 import LevelReview from "@/Components/LevelReview.vue";
 import ReplayTicket from "@/Components/ReplayTicket.vue";
+import LevelRatingStamp from "@/Components/LevelRatingStamp.vue";
 
 const props = defineProps({
     level: Object,
@@ -67,6 +68,29 @@ const submit = () => {
                     <div v-if="level.images.length === 0" class="pane">No images available. Add one?</div>
                     <Carousel v-else :images="level.images"/>
                 </template>
+                <h2 class="font-bold text-2xl">Overview</h2>
+                <div class="x pane justify-between">
+                    <div class="y">
+                        <span class="text-xs uppercase">Reviews</span>
+                        <span class="text-xl font-bold">{{ level.reviews_count }}</span>
+                    </div>
+                    <div class="y">
+                        <span class="text-xs uppercase">Difficulty</span>
+                        <span class="text-xl font-bold">{{ displayRating(level.rating_difficulty) }}<span class="text-xs text-ui-600">/100</span></span>
+                    </div>
+                    <div class="y">
+                        <span class="text-xs uppercase">Overall</span>
+                        <span class="text-xl font-bold">{{ displayRating(level.rating_overall) }}<span class="text-xs text-ui-600">/10</span></span>
+                    </div>
+                    <div class="y">
+                        <span class="text-xs uppercase">Gameplay</span>
+                        <span class="text-xl font-bold">{{ displayRating(level.rating_gameplay) }}<span class="text-xs text-ui-600">/10</span></span>
+                    </div>
+                    <div class="y">
+                        <span class="text-xs uppercase">Visuals</span>
+                        <span class="text-xl font-bold">{{ displayRating(level.rating_visuals) }}<span class="text-xs text-ui-600">/10</span></span>
+                    </div>
+                </div>
                 <h2 class="font-bold text-2xl">Reviews</h2>
                 <Pagination :list="reviews"/>
                 <div v-if="reviews.data.length === 0" class="pane">