Delete status section and move hunger, willpower and humanity into attributes section

resources/js/Components/Foldable.vue

@@ -1,20 +1,27 @@
 <script setup>
-import {ref} from 'vue';
+import {onMounted, ref} from 'vue';
 
-const isOpen = ref(true);
+const isOpen = ref(false);
 
 const toggle = () => {
     isOpen.value = !isOpen.value;
 }
+
+onMounted(() => {
+    isOpen.value = props.open ?? false;
+})
+
+const props = defineProps({
+    open: Boolean,
+});
 </script>
 
 <template>
     <div class="foldable">
         <div class="flex justify-center items-center gap-x-4" @click="toggle">
             <slot name="header"></slot>
-            <button class="bg-blood-500 h-8 px-2 py-0 rounded-lg text-white">{{
-                    isOpen ? 'Réduire' : 'Agrandir'
-                }}
+            <button class="bg-blood-500 h-8 px-2 py-0 rounded-lg text-white">
+                {{ isOpen ? 'Réduire' : 'Agrandir' }}
             </button>
         </div>
         <transition name="fade">

resources/js/Pages/Character/Menus/DesktopMenu.vue

@@ -8,48 +8,40 @@ const menuStore = useRightMenuStore();
 <template>
     <div>
         <button
-            class="desktop_menu_buttons"
             :class="{desktop_menu_active : menuStore.category == 'attributes'}"
+            class="desktop_menu_buttons"
             @click="menuStore.setPanelMenu('attributes')"
         >
             Attributes
         </button>
 
         <button
-            class="desktop_menu_buttons"
-            :class="{desktop_menu_active : menuStore.category == 'status'}"
-            @click="menuStore.setPanelMenu('status')"
-        >
-            Statut
-        </button>
-
-        <button
-            class="desktop_menu_buttons"
             :class="{desktop_menu_active : menuStore.category == 'disciplines'}"
+            class="desktop_menu_buttons"
             @click="menuStore.setPanelMenu('disciplines')"
         >
             Disciplines
         </button>
 
         <button
-            class="desktop_menu_buttons"
             :class="{desktop_menu_active : menuStore.category == 'backgrounds'}"
+            class="desktop_menu_buttons"
             @click="menuStore.setPanelMenu('backgrounds')"
         >
             Backgrounds
         </button>
 
         <button
-            class="desktop_menu_buttons"
             :class="{desktop_menu_active : menuStore.category == 'concepts'}"
+            class="desktop_menu_buttons"
             @click="menuStore.setPanelMenu('concepts')"
         >
             Concepts
         </button>
 
         <button
-            class="desktop_menu_buttons"
             :class="{desktop_menu_active : menuStore.category == 'descriptions'}"
+            class="desktop_menu_buttons"
             @click="menuStore.setPanelMenu('descriptions')"
         >
             Descriptions

resources/js/Pages/Character/Menus/MobileMenu.vue

@@ -15,8 +15,8 @@ const toggleMenu = async () => {
             @click="toggleMenu"
         >
             <img
-                src="/img/sections.png"
                 class="w-8 h-8"
+                src="/img/sections.png"
             >
             <h1 class="ml-2">Rubriques</h1>
         </button>
@@ -33,12 +33,6 @@ const toggleMenu = async () => {
         >
             Attributs & Compétences
         </button>
-        <button
-            class="menu_text"
-            @click="menuStore.setPanelMenu('status')"
-        >
-            Statut
-        </button>
         <button
             class="menu_text"
             @click="menuStore.setPanelMenu('disciplines')"

resources/js/Pages/Character/Menus/NewMobileMenu.vue

@@ -16,15 +16,6 @@ const menuStore = useRightMenuStore();
                 src="/img/bars.png"
             >
         </button>
-        <button
-            class="h-full w-16 flex flex-col items-center justify-center"
-            @click="menuStore.setPanelMenu('status')"
-        >
-            <img
-                class="w-8 h-8"
-                src="/img/health.png"
-            >
-        </button>
         <button
             class="h-full w-16 flex flex-col items-center justify-center"
             @click="menuStore.setPanelMenu('disciplines')"

resources/js/Pages/Character/Partials/Attributes.vue

@@ -42,7 +42,7 @@ const showDescription = async (entity, id) => {
             :show="modalStore.open"
         />
 
-        <Foldable>
+        <Foldable :open="true">
             <template #header>
                 <h1 class="section_title text-center my-2">Attributs</h1>
             </template>

resources/js/Pages/Character/Partials/Skills.vue

@@ -37,7 +37,7 @@ const showDescription = async (entity, id) => {
 </script>
 
 <template>
-    <div class="pb-16">
+    <div class="py-2">
         <DetailsModal
             :closeable="true"
             :show="modalStore.open"

resources/js/Pages/Character/Partials/Status.vue

@@ -2,7 +2,6 @@
 import Willpower from "@/Pages/Character/Partials/Status/Willpower.vue";
 import Health from "@/Pages/Character/Partials/Status/Health.vue";
 import Humanity from "@/Pages/Character/Partials/Status/Humanity.vue";
-import Hunger from "@/Pages/Character/Partials/Status/Hunger.vue";
 
 import {useModalStore} from "@/Stores/modalStore.js";
 import DetailsModal from "@/Components/Modals/DetailsModal.vue";
@@ -22,8 +21,6 @@ const showDescription = async (entity, id) => {
             :show="modalStore.open"
         />
 
-        <Hunger @get-description="showDescription"/>
-
         <div class="mt-8 pt-4 grid grid-cols-1 gap-2 lg:grid-cols-2 lg:border-t lg:border-gray-700">
             <Willpower @get-description="showDescription"/>
 

resources/js/Pages/Character/Partials/Status/Health.vue

@@ -1,42 +1,65 @@
 <script setup>
 import DynamicGauge from "@/Components/Gauges/DynamicGauge.vue";
-import {useCharacterAttributesStore} from "@/Stores/characterAttributesStore";
+import {computed} from "vue";
+import {useModalStore} from "@/Stores/modalStore.js";
+import Foldable from "@/Components/Foldable.vue";
 
-const attributesStore = useCharacterAttributesStore();
+const modalStore = useModalStore();
 
-const maxHealthPoints = attributesStore.healthAttributes[2].pivot.attribute_value;
+const props = defineProps({
+    character: Object,
+});
+
+const healthAttributes = computed(() => {
+    return props.character.attributes.filter(attribute => {
+        return attribute.category === 'health'
+    });
+});
+
+const maxHealthPoints = healthAttributes.value[2].pivot.attribute_value;
+
+const showDescription = async (entity, id) => {
+    await modalStore.getDescription(entity, id);
+    await modalStore.toggle();
+}
 </script>
 
 <template>
-    <div>
-        <h2 class="section_title mt-4 text-center">Santé</h2>
-        <div class="flex flex-col justify-center items-center px-2 py-4 w-full">
-            <h2
-                class="attribute_title"
-                @click="$emit('getDescription', 'attribute', attributesStore.healthAttributes[0].id)"
-            >
-                {{ attributesStore.healthAttributes[0].name }}
-            </h2>
-            <DynamicGauge
-                :attribute="attributesStore.healthAttributes[0].pivot.attribute_id"
-                :value="attributesStore.healthAttributes[0].pivot.attribute_value"
-                icon="fa-solid fa-hand-fist"
-                :max="maxHealthPoints"
-            />
-        </div>
-        <div class="flex flex-col justify-center items-center px-2 pb-4 w-full">
-            <h2
-                class="attribute_title"
-                @click="$emit('getDescription', 'attribute', attributesStore.healthAttributes[1].id)"
-            >
-                {{ attributesStore.healthAttributes[1].name }}
-            </h2>
-            <DynamicGauge
-                :attribute="attributesStore.healthAttributes[1].pivot.attribute_id"
-                :value="attributesStore.healthAttributes[1].pivot.attribute_value"
-                icon="fa-solid fa-skull"
-                :max="maxHealthPoints"
-            />
-        </div>
+    <div class="py-2">
+        <Foldable>
+            <template #header>
+                <h1 class="section_title text-center my-2">Santé</h1>
+            </template>
+            <template #content>
+                <div class="flex flex-col justify-center items-center px-2 py-4 w-full">
+                    <h2
+                        class="attribute_title"
+                        @click="showDescription('attribute', healthAttributes[0].id)"
+                    >
+                        {{ healthAttributes[0].name }}
+                    </h2>
+                    <DynamicGauge
+                        :attribute="healthAttributes[0].pivot.attribute_id"
+                        :max="maxHealthPoints"
+                        :value="healthAttributes[0].pivot.attribute_value"
+                        icon="fa-solid fa-hand-fist"
+                    />
+                </div>
+                <div class="flex flex-col justify-center items-center px-2 pb-4 w-full">
+                    <h2
+                        class="attribute_title"
+                        @click="showDescription('attribute', healthAttributes[1].id)"
+                    >
+                        {{ healthAttributes[1].name }}
+                    </h2>
+                    <DynamicGauge
+                        :attribute="healthAttributes[1].pivot.attribute_id"
+                        :max="maxHealthPoints"
+                        :value="healthAttributes[1].pivot.attribute_value"
+                        icon="fa-solid fa-skull"
+                    />
+                </div>
+            </template>
+        </Foldable>
     </div>
 </template>

resources/js/Pages/Character/Partials/Status/Hunger.vue

@@ -1,53 +1,65 @@
 <script setup>
-import {ref} from "vue";
-import DynamicGauge from "@/Components/Gauges/DynamicGauge.vue";
+import {computed, ref} from "vue";
 
 import {useCharacterAttributesStore} from "@/Stores/characterAttributesStore";
 import {useCharacterStore} from "@/Stores/characterStore.js";
 import Foldable from "@/Components/Foldable.vue";
+import DynamicGauge from "@/Components/Gauges/DynamicGauge.vue";
 
 const attributesStore = useCharacterAttributesStore();
 const characterStore = useCharacterStore();
 
+const props = defineProps({
+    character: Object,
+});
+
+const bloodPotency = props.character.blood_potency;
+
 const maxHungerLevel = ref(5)
-const bloodPotency = characterStore.character.blood_potency;
+
+const hunger_attributes = computed(() => {
+    return props.character.attributes.filter(attribute => {
+        return attribute.category === 'hunger'
+    });
+});
 </script>
 
 <template>
 
-    <div class="mt-8 px-4 grid grid-cols-1 gap-4 w-full lg:grid-cols-2 lg:gap-8">
+    <div class="py-2 grid grid-cols-1 gap-4 w-full lg:grid-cols-2 lg:flex lg:justify-center lg:gap-8">
         <Foldable>
             <template #header>
                 <h2
                     class="section_title text-center"
-                    @click="$emit('getDescription', 'attribute', attributesStore.hungerAttributes[0].id)"
                 >
                     Soif / Sang
                 </h2>
             </template>
 
             <template #content>
-                <div class="mx-auto">
+                <div>
                     <div class="mt-2 flex flex-col items-center">
                         <DynamicGauge
-                            :attribute="attributesStore.hungerAttributes[0].pivot.attribute_id"
+                            :attribute="hunger_attributes[0].pivot.attribute_id"
                             :max="maxHungerLevel"
-                            :value="attributesStore.hungerAttributes[0].pivot.attribute_value"
+                            :value="hunger_attributes[0].pivot.attribute_value"
                             color="text-blood-500"
                             icon="fa-solid fa-droplet"
                         />
                     </div>
                     <div class="text-center">
                         <h3 class="text-blood-500 font-bold italic text-2xl mt-8 lg:text-3xl">Prédation :
-                            {{ characterStore.character.predation.name }}</h3>
-                        <p class="subtitle text-justify" v-html="characterStore.character.predation.description"></p>
+                            {{ props.character.predation.name }}</h3>
+                        <p class="subtitle text-justify" v-html="props.character.predation.description"></p>
                     </div>
                 </div>
 
-                <div class="mx-auto">
-                    <p class="section_title text-center">Puissance sang : <span class="text-skin-50">{{
-                            bloodPotency.level
-                        }}</span></p>
+                <div>
+                    <p class="section_title text-center">Puissance sang :
+                        <span class="text-skin-50">
+                            {{ bloodPotency.level }}
+                        </span>
+                    </p>
                     <div class="mt-8 grid grid-cols-2 gap-2 w-full flex justify-center lg:grid-cols-3">
                         <div>
                             <h2 class="attribute_title">Coup de sang</h2>