Merge branch 'main' of gitlab.com:dennispostma4720/new-quest-client

src/assets/scss/main.scss

@@ -62,6 +62,12 @@ input {
   &:focus-visible {
     @apply outline-2 outline-cyan;
   }
+  &.inactive {
+    @apply bg-gray-600/50 hover:cursor-not-allowed;
+    &::placeholder {
+      @apply text-gray-300/50;
+    }
+  }
 }
 
 .form-field-full {

src/components/gui/UserPanel.vue

@@ -6,8 +6,8 @@
         <div class="hidden sm:flex gap-1.5 flex-wrap">
           <button @click.stop="userPanelScreen = 'inventory'" :class="{ 'active': userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
           <button @click.stop="userPanelScreen = 'equipment'" :class="{ 'active': userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
-          <button class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
-          <button class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
+          <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ 'active': userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
+          <button @click.stop="userPanelScreen = 'settings'" :class="{ 'active': userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
         </div>
         <div class="flex gap-2.5">
           <button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out" @click="gameStore.toggleUserPanel">
@@ -17,12 +17,14 @@
         <div class="flex sm:hidden gap-1.5 flex-wrap">
           <button @click.stop="userPanelScreen = 'inventory'" :class="{ 'active': userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
           <button @click.stop="userPanelScreen = 'equipment'" :class="{ 'active': userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
-          <button class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
-          <button class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
+          <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ 'active': userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
+          <button @click.stop="userPanelScreen = 'settings'" :class="{ 'active': userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
         </div>
       </div>
-      <InventoryItems v-show="userPanelScreen === 'inventory'" />
-      <InventoryEquipment v-show="userPanelScreen === 'equipment'" />
+      <Inventory v-show="userPanelScreen === 'inventory'" />
+      <Equipment v-show="userPanelScreen === 'equipment'" />
+      <CharacterScreen v-show="userPanelScreen === 'characterScreen'" />
+      <Settings v-show="userPanelScreen === 'settings'" />
     </div>
   </div>
 </template>
@@ -30,8 +32,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useGameStore } from '@/stores/game';
-import InventoryItems from '@/components/gui/partials/Inventory.vue';
-import InventoryEquipment from '@/components/gui/partials/Equipment.vue';
+import Inventory from '@/components/gui/partials/Inventory.vue';
+import Equipment from '@/components/gui/partials/Equipment.vue';
+import CharacterScreen from '@/components/gui/partials/CharacterScreen.vue';
+import Settings from '@/components/gui/partials/Settings.vue';
 
 const gameStore = useGameStore()
 let userPanelScreen = ref('inventory')

src/components/gui/partials/CharacterScreen.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="grow flex flex-col w-full h-full relative overflow-auto">
+        <div class="m-4 relative">
+            <h4 class="font-medium text-lg max-w-[375px]">Character</h4>
+            <div class="flex justify-center flex-wrap gap-20">
+                <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
+                    <div class="h-full flex flex-col justify-center items-center">
+                        <img class="h-72 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
+                    </div>
+                </div>
+                <div class="flex flex-col gap-4">
+                    <div class="flex flex-col gap-3 mx-5 mt-2">
+                        <h3>Ethereal</h3>
+                        <div class="flex gap-4 flex-wrap max-w-[375px]">
+                            <ul class="p-0 m-0 list-none">
+                                <li class="leading-6 text-lg">Class:</li>
+                                <li class="leading-6 text-lg">Health Points:</li>
+                                <li class="leading-6 text-lg">Magic Points:</li>
+                                <li class="leading-6 text-lg">Level:</li>
+                                <li class="leading-6 text-lg">Stat Points:</li>
+                            </ul>
+                            <ul class="p-0 m-0 list-none">
+                                <li class="leading-6 text-lg">Knight</li>
+                                <li class="leading-6 text-lg">100 <span class="text-green">(+15)</span></li>
+                                <li class="leading-6 text-lg">100</li>
+                                <li class="leading-6 text-lg">69</li>
+                                <li class="leading-6 text-lg">3</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="flex flex-col gap-3 mx-5 mt-2">
+                        <h3>Alignment</h3>
+                        <div class="h-10 w-64 rounded border border-solid border-white bg-gradient-to-r from-red to-blue">
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
+        </div>
+        <div class="m-4">
+            <h4 class="font-medium text-lg max-w-[375px]">Character stats</h4>
+            <div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
+                <ul class="p-0 m-0 list-none">
+                    <li class="leading-6">Health:</li>
+                    <li class="leading-6">Defense:</li>
+                    <li class="leading-6">More stats:</li>
+                    <li class="leading-6">Extra stats:</li>
+                </ul>
+                <ul class="p-0 m-0 list-none text-right">
+                    <li class="leading-6">100 <span class="text-green">(+15)</span></li>
+                    <li class="leading-6">1000 <span class="text-green">(+500)</span></li>
+                    <li class="leading-6"></li>
+                    <li class="leading-6"></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>

src/components/gui/partials/Settings.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="flex h-full w-full relative">
+        <div class="w-2/12 flex flex-col relative">
+            <!-- Settings Categories -->
+            <div class="relative p-2.5">
+                <h3>Settings</h3>
+                <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+            </div>
+            <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
+                <span>Character</span>
+                <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+            </a>
+            <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
+                <span>Account</span>
+                <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+            </a>
+            <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
+                <span>Audio</span>
+                <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+            </a>
+            <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
+                <span>Video</span>
+                <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+            </a>
+        </div>
+        <div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div>
+
+        <!-- Assets list -->
+        <div class="overflow-auto h-full w-10/12 flex flex-col relative">
+            <CharacterSettings v-show="settingCategory == 'character'" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import CharacterSettings from '@/components/gui/partials/settings/CharacterSettings.vue'
+
+let settingCategory = ref('character')
+</script>

src/components/gui/partials/settings/CharacterSettings.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="h-full overflow-auto">
+        <div class="relative p-2.5 flex flex-col gap-5 h-72">
+            <h3>Character details</h3>
+            <button @click="toggle" class="btn-cyan px-4 py-1.5 w-24">Edit</button>
+            <form class="flex gap-2.5 flex-wrap">
+                <div class="form-field-half max-w-[300px]">
+                    <label for="name">Name</label>
+                    <input class="input-cyan" :class="{'inactive': !editCharacter}" type="text" name="name" placeholder="Ethereal" disabled />
+                </div>
+                <div class="form-field-half max-w-[300px]">
+                    <label for="class">Class</label>
+                    <input class="input-cyan" :class="{'inactive': !editCharacter}" type="text" name="class" placeholder="Knight" disabled />
+                </div>
+                <button v-if="editCharacter" @click="toggle" class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const editCharacter = ref(false)
+
+const toggle = () => {
+    editCharacter.value = !editCharacter.value
+}
+</script>

tailwind.config.js

@@ -79,7 +79,8 @@ export default {
           100: '#7f7f7f',
           200: '#696969',
           300: '#313638',
-          500: '#778899'
+          500: '#778899',
+          600: '#B1B2B5'
         }
       }
     },