forked from noxious/client
53 lines
3.4 KiB
Vue
53 lines
3.4 KiB
Vue
<template>
|
|
<div class="absolute top-4 left-[300px] w-[422px]">
|
|
<div class="flex gap-2.5">
|
|
<div class="relative">
|
|
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
|
<span class="z-10 text-pixel absolute top-1 left-2">F1</span>
|
|
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f1-icon.png')] bg-no-repeat"></div>
|
|
</div>
|
|
<div class="relative">
|
|
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
|
<span class="z-10 text-pixel absolute top-1 left-2">F2</span>
|
|
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f2-icon.png')] bg-no-repeat"></div>
|
|
</div>
|
|
<div class="relative">
|
|
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
|
<span class="z-10 text-pixel absolute top-1 left-2">F3</span>
|
|
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f3-icon.png')] bg-no-repeat"></div>
|
|
</div>
|
|
<div class="relative">
|
|
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
|
<span class="z-10 text-pixel absolute top-1 left-2">F4</span>
|
|
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f4-icon.png')] bg-no-repeat"></div>
|
|
</div>
|
|
<div class="relative">
|
|
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
|
<span class="z-10 text-pixel absolute top-1 left-2">F5</span>
|
|
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f5-icon.png')] bg-no-repeat"></div>
|
|
</div>
|
|
<div class="relative">
|
|
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
|
<span class="z-10 text-pixel absolute top-1 left-2">F6</span>
|
|
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f6-icon.png')] bg-no-repeat"></div>
|
|
</div>
|
|
<div class="relative">
|
|
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
|
<span class="z-10 text-pixel absolute top-1 left-2">F7</span>
|
|
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f7-icon.png')] bg-no-repeat"></div>
|
|
</div>
|
|
<div class="relative">
|
|
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
|
<span class="z-10 text-pixel absolute top-1 left-2">F8</span>
|
|
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f8-icon.png')] bg-no-repeat"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
|
|
const gameStore = useGameStore()
|
|
</script>
|