diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 57c656e..a1ee153 100644
--- a/src/assets/scss/main.scss
+++ b/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 {
diff --git a/src/components/gui/UserPanel.vue b/src/components/gui/UserPanel.vue
index 2340446..1e70f24 100644
--- a/src/components/gui/UserPanel.vue
+++ b/src/components/gui/UserPanel.vue
@@ -7,7 +7,7 @@
<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 @click.stop="userPanelScreen = 'characterScreen'" :class="{ 'active': userPanelScreen === 'characterScreen' }" 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 = '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">
@@ -18,12 +18,13 @@
<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 @click.stop="userPanelScreen = 'characterScreen'" :class="{ 'active': userPanelScreen === 'characterScreen' }" 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 = 'settings'" :class="{ 'active': userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
</div>
</div>
<Inventory v-show="userPanelScreen === 'inventory'" />
<Equipment v-show="userPanelScreen === 'equipment'" />
<CharacterScreen v-show="userPanelScreen === 'characterScreen'" />
+ <Settings v-show="userPanelScreen === 'settings'" />
</div>
</div>
</template>
@@ -34,6 +35,7 @@ import { useGameStore } from '@/stores/game';
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')
diff --git a/src/components/gui/partials/Settings.vue b/src/components/gui/partials/Settings.vue
new file mode 100644
index 0000000..564c20c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/gui/partials/settings/CharacterSettings.vue b/src/components/gui/partials/settings/CharacterSettings.vue
new file mode 100644
index 0000000..ce31a35
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index cfa7345..6389f61 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -79,7 +79,8 @@ export default {
100: '#7f7f7f',
200: '#696969',
300: '#313638',
- 500: '#778899'
+ 500: '#778899',
+ 600: '#B1B2B5'
}
}
},