chore: currently equipped

src/components/EquipmentSectionComponent.vue

@@ -66,6 +66,7 @@
       v-if="isModalOpen"
       :is-open="isModalOpen"
       :slot-type="selectedSlotType"
+      :slot-index="selectedSlotIndex"
       :items="availableItemsForSlot"
       @select-item="equipItem"
       @close="closeModal"
@@ -77,7 +78,7 @@
 import { computed, ref } from 'vue'
 import SlotComponent from './SlotComponent.vue'
 import ItemSelectionModal from './ItemSelectionModal.vue' // Renamed import
-import { useEquipmentStore } from '../stores/equipmentStore'
+import { useEquipmentStore } from '@/stores/equipmentStore'
 import { useWindowSize } from '@vueuse/core'
 import {Item} from '@/types/itemRegistry'
 import {useInventoryStore} from '@/stores/inventoryStore'

src/components/ItemSelectionModal.vue

@@ -1,4 +1,3 @@
-<!-- ItemSelectionModal.vue -->
 <template>
   <div
     v-if="isOpen"
@@ -9,16 +8,15 @@
       <h2 class="text-2xl font-semibold text-center p-6">
         {{ capitalize(slotType) }} Items
       </h2>
-
       <!-- Scrollable item list -->
       <div
         v-if="items.length > 0"
-        class="flex-1 overflow-y-auto px-6 space-y-4"
+        class="flex-1 overflow-y-auto px-6 space-y-4 py-2 gap-1"
       >
         <button
           v-for="(item, index) in items"
           :key="index"
-          class="p-4 border rounded-lg cursor-pointer hover:bg-gray-50 transition duration-200 w-full"
+          class="p-4 border rounded-lg cursor-pointer hover:bg-gray-50 transition duration-200 w-full shadow-md"
           @click="selectItem(item)"
         >
           <div class="flex items-center space-x-4">
@@ -53,8 +51,40 @@
         No items available for this slot
       </div>
 
+      <!-- Current Equipped Item -->
+      <div
+        v-if="currentEquippedItem"
+        class="p-4 border-t-2 border-gray-200 mt-2"
+      >
+        <h3 class="text-lg font-bold mb-2">
+          Currently Equipped
+        </h3>
+        <div class="flex items-center space-x-4">
+          <img
+            v-if="currentEquippedItem.image"
+            :src="currentEquippedItem.image"
+            alt="equipped-item-image"
+            class="w-16 h-16 rounded-md"
+          >
+          <div>
+            <p class="font-semibold text-lg">
+              {{ currentEquippedItem.name }} <span class="text-sm text-gray-500">({{ currentEquippedItem.rarity }})</span>
+            </p>
+            <p
+              v-if="currentEquippedItem.level"
+              class="text-sm text-gray-600"
+            >
+              Level: {{ currentEquippedItem.level }} / {{ currentEquippedItem.maxLevel }}
+            </p>
+            <p class="text-sm text-gray-500">
+              {{ currentEquippedItem.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+
       <!-- Buttons fixed at the bottom of the modal on mobile -->
-      <div class="p-6 bg-white flex justify-between items-center space-x-4">
+      <div class="p-6 bg-white flex justify-between items-center space-x-4 border-t-2 border-gray-200 mt-2">
         <!-- Close Button -->
         <button
           class="w-full px-6 py-3 bg-green-500 text-white rounded-lg font-bold hover:bg-green-600 transition duration-200"
@@ -65,6 +95,7 @@
 
         <!-- Unequip Button -->
         <button
+          v-if="currentEquippedItem"
           class="w-full px-6 py-3 bg-red-500 text-white rounded-lg font-bold hover:bg-red-600 transition duration-200"
           @click="selectItem(null)"
         >
@@ -78,12 +109,24 @@
 <script setup lang="ts">
 import { capitalize } from '../utils'
 import { Item } from '@/types/itemRegistry'
+import { useEquipmentStore } from '@/stores/equipmentStore'
+import { computed } from 'vue'
+
+const equipmentStore = useEquipmentStore()
 
-const props = defineProps({
-  isOpen: Boolean,
-  slotType: String,
-  items: Array,
+const props = withDefaults(defineProps<{
+  isOpen: boolean
+  slotType: string
+  items: Item[]
+  slotIndex?: number
+}>(), {
+  isOpen: false,
+  slotType: '',
+  items: () => [],
+  slotIndex: null,
 })
+// Get the current equipped item for the specific slot
+const currentEquippedItem = computed(() => equipmentStore.getCurrentEquippedItemForSlot(props.slotType, props.slotIndex))
 
 const emit = defineEmits(['select-item', 'close'])
 

src/stores/equipmentStore.ts

@@ -53,6 +53,13 @@ export const useEquipmentStore = defineStore('equipmentStore', {
       const inventoryStore = useInventoryStore()
       return inventoryStore.equipmentItemsInInventory.filter((item: Item) => item.slotType === slotType)
     },
+    getCurrentEquippedItemForSlot: (state) => (slotType: SlotType, index?: number) => {
+      if (slotType === 'accessory' && index !== undefined) {
+        return state.equippedItems.accessories[index]
+      }
+
+      return state.equippedItems[slotType]
+    },
   },
   actions: {
     loadLoadOut(loadOut: LoadOut) {

src/stores/gameStore.ts

@@ -27,6 +27,7 @@ export const useGameStore = defineStore('gameStore', {
     passwordConfirm: '',
     error: null,
     privacyAgreement: false,
+    activeTab: 'resources',
 
     currentUser: null,
 
@@ -585,6 +586,7 @@ export const useGameStore = defineStore('gameStore', {
       return {
         ...resourcesStore.getResourcesState(),
         lastSavedTime: Date.now(),
+        activeTab: this.activeTab,
         userId,
 
         attackPerAnt: evolveStore.currentEvolutionData?.statsPerAnt?.attackPerAnt ?? this.attackPerAnt,

src/views/HomePage.vue

@@ -369,14 +369,17 @@ import PassivePage from '@/views/PassivePage.vue'
 import {toast} from 'vue3-toastify'
 import BossPage from '@/views/BossPage.vue'
 import AntTraining from '@/views/AntTraining.vue'
+import {storeToRefs} from 'pinia'
 const deferredPrompt = ref(null)
 const gameStore = useGameStore()
 const adventureStore = useAdventureStore()
 const resourcesStore = useResourcesStore()
 const prestigeStore = usePrestigeStore()
 const isMinimized = ref(false) // Minimized state
 const settingsStore = useSettingsStore()
-const activeTab = ref('resources')
+const {
+  activeTab,
+} = storeToRefs(gameStore)
 const progress = computed(() => {
   const gameProgress = gameStore.loaded ? 50 : (gameStore.progress / 2) // Half for game progress
   const adventureProgress = adventureStore.loaded ? 50 : (adventureStore.progress / 2) // Half for adventure progress