noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP userpanel settings tab

Browse Source
This commit is contained in:
Colin Kallemein
2024-08-31 14:45:31 +02:00
parent c35dd65561
commit cf3fd33236
5 changed files with 81 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/gui/UserPanel.vue
View File

@ -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')