WIP ingame ui updated design
Cleaned up some old icons and styling
This commit is contained in:
parent
34bd103ec2
commit
7504e3719e
20
public/assets/icons/chat-icon.svg
Normal file
20
public/assets/icons/chat-icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 597 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
25
public/assets/icons/map-icon.svg
Normal file
25
public/assets/icons/map-icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 600 KiB |
10
public/assets/icons/menu-icon.svg
Normal file
10
public/assets/icons/menu-icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 600 KiB |
25
public/assets/icons/socials-icon.svg
Normal file
25
public/assets/icons/socials-icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 599 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
@ -1 +0,0 @@
|
||||
<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e9942e24-155b-8096-8004-7eb5ea5d2669" viewBox="0 0 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9942e24-155b-8096-8004-7eb5ea5d2669"><g class="fills" id="fills-e9942e24-155b-8096-8004-7eb5ea5d2669"><path d="M286.515,78.278C282.911,83.543,276.856,87.000,270.000,87.000L20.000,87.000C8.962,87.000,0.000,78.038,0.000,67.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L270.000,0.000C276.834,0.000,282.872,3.435,286.480,8.671C268.843,10.411,255.000,25.352,255.000,43.500C255.000,61.610,268.784,76.525,286.515,78.278ZM290.000,20.000L290.000,67.000" style="fill: #fff; fill-opacity: 1;"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 726 B |
@ -1 +0,0 @@
|
||||
<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e38d8c7f-bba0-801b-8004-7d6eeffceb00" viewBox="4058.354 6110 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><g class="fills" id="fills-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><path d="M4061.840,6118.722C4065.444,6113.457,4071.499,6110.000,4078.354,6110.000L4328.354,6110.000C4339.393,6110.000,4348.354,6118.962,4348.354,6130.000L4348.354,6177.000C4348.354,6188.038,4339.393,6197.000,4328.354,6197.000L4078.354,6197.000C4071.521,6197.000,4065.483,6193.565,4061.875,6188.329C4079.512,6186.589,4093.354,6171.648,4093.354,6153.500C4093.354,6135.390,4079.571,6120.475,4061.840,6118.722ZM4058.354,6177.000L4058.354,6130.000" style="fill: #fff; fill-opacity: 1;"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 829 B |
26
public/assets/ui-border-4-corners.svg
Normal file
26
public/assets/ui-border-4-corners.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 471 KiB |
|
Before Width: | Height: | Size: 301 KiB After Width: | Height: | Size: 301 KiB |
|
Before Width: | Height: | Size: 400 KiB After Width: | Height: | Size: 400 KiB |
23
public/assets/ui-rect-border-4-corners.svg
Normal file
23
public/assets/ui-rect-border-4-corners.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 470 KiB |
BIN
public/assets/ui-texture.png
Normal file
BIN
public/assets/ui-texture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
BIN
src/assets/fonts/upheavtt.ttf
Normal file
BIN
src/assets/fonts/upheavtt.ttf
Normal file
Binary file not shown.
@ -4,6 +4,10 @@
|
||||
|
||||
// Fonts
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
@font-face {
|
||||
font-family: 'Upheaval';
|
||||
src: url('../fonts/upheavtt.ttf');
|
||||
}
|
||||
|
||||
//Globals
|
||||
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
<template>
|
||||
|
||||
<div class="absolute left-[66px] top-4 bg-[url('/assets/ui-rect-border-4-corners.svg')] bg-no-repeat px-4 py-2 w-[181px] h-[26px]">
|
||||
<div class="w-full flex items-center gap-2">
|
||||
<label class="text-xs font-ui drop-shadow-pixel-black text-white" for="hp">HP</label>
|
||||
<progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-green" id="hp" :value="gameStore.character?.hitpoints" max="100">{{ gameStore.character?.hitpoints }}%</progress>
|
||||
<span class="text-xs font-ui drop-shadow-pixel-black text-white">{{ gameStore.character?.hitpoints }}%</span>
|
||||
</div>
|
||||
<div class="w-full flex items-center gap-2">
|
||||
<label class="text-xs font-ui drop-shadow-pixel-black text-white" for="mp">MP</label>
|
||||
<progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-blue" id="mp" :value="gameStore.character?.mana" max="100">{{ gameStore.character?.mana }}%</progress>
|
||||
<span class="text-xs font-ui drop-shadow-pixel-black text-white">{{ gameStore.character?.mana }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -9,41 +20,30 @@ const gameStore = useGameStore()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.hud-wrapper {
|
||||
.hud-bg {
|
||||
mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
|
||||
}
|
||||
#hp {
|
||||
#hp {
|
||||
// Chrome, Safari, Edge, Opera
|
||||
&::-webkit-progress-value {
|
||||
@apply bg-red rounded-lg;
|
||||
@apply bg-green rounded-sm;
|
||||
}
|
||||
&::-webkit-progress-bar {
|
||||
@apply bg-white rounded-lg border-2 border-solid border-white;
|
||||
@apply bg-white rounded-sm border border-solid border-black;
|
||||
}
|
||||
// Firefox
|
||||
&::-moz-progress-bar {
|
||||
@apply bg-red rounded-lg border-2 border-solid border-white;
|
||||
@apply bg-green rounded-sm border border-solid border-black;
|
||||
}
|
||||
}
|
||||
#mp {
|
||||
}
|
||||
#mp {
|
||||
// Chrome, Safari, Edge, Opera
|
||||
&::-webkit-progress-value {
|
||||
@apply bg-blue rounded-lg;
|
||||
@apply bg-blue rounded-sm;
|
||||
}
|
||||
&::-webkit-progress-bar {
|
||||
@apply bg-white rounded-lg border-2 border-solid border-white;
|
||||
@apply bg-white rounded-sm border border-solid border-black;
|
||||
}
|
||||
// Firefox
|
||||
&::-moz-progress-bar {
|
||||
@apply bg-blue rounded-lg border-2 border-solid border-white;
|
||||
}
|
||||
}
|
||||
|
||||
&.other-player {
|
||||
.hud-bg {
|
||||
mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
|
||||
}
|
||||
@apply bg-blue rounded-sm border border-solid border-black;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,39 +1,49 @@
|
||||
<template>
|
||||
<ul class="list-none flex gap-2.5 items-center m-0 max-md:pl-0">
|
||||
<li class="menu-item group relative" @click="gameStore.toggleChat">
|
||||
<div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Chat</p>
|
||||
<div class="group-hover:block absolute -bottom-2.5 bg-gray-500 h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray border-2 border-solid border-gray-500 hover:border-cyan rounded-lg block w-11 h-9">
|
||||
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/chat.png" />
|
||||
</a>
|
||||
</li>
|
||||
<ul class="list-none flex flex-col gap-2.5 items-center m-0 pl-0 absolute left-4 top-4">
|
||||
<li class="menu-item group relative">
|
||||
<div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">World</p>
|
||||
<div class="group-hover:block absolute -bottom-2.5 bg-gray-500 h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
|
||||
<div class="group-hover:block absolute top-1/2 left-14 -translate-y-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Open menu</p>
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray border-2 border-solid border-gray-500 hover:border-cyan rounded-lg block w-11 h-9">
|
||||
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/world.png" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item group relative">
|
||||
<div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Users</p>
|
||||
<div class="group-hover:block absolute -bottom-2.5 bg-gray-500 h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray border-2 border-solid border-gray-500 hover:border-cyan rounded-lg block w-11 h-9">
|
||||
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/users.png" />
|
||||
<a class="group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
|
||||
<img class="group-hover:drop-shadow-default w-6 h-5 mx-[9px] my-[11px] object-contain" draggable="false" src="/assets/icons/menu-icon.svg" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item group relative" @click="gameStore.toggleUserPanel">
|
||||
<div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6">Inventory</p>
|
||||
<div class="group-hover:block absolute -bottom-2.5 bg-gray-500 h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
|
||||
<div class="group-hover:block absolute top-1/2 left-14 -translate-y-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">User Profile</p>
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray border-2 border-solid border-gray-500 hover:border-cyan rounded-lg block w-11 h-9">
|
||||
<img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
|
||||
<a class="group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
|
||||
<img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/avatar/default/head.png" />
|
||||
<p class="absolute bottom-0 -right-1.5 m-0 max-w-4 font-ui z-10 text-white text-[12px] leading-[6px] drop-shadow-pixel"><span class="font-ui text-white text-[8px] ml-0.5">LVL</span> {{ characterLevel }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item group relative" @click="gameStore.toggleChat">
|
||||
<div class="group-hover:block absolute top-1/2 left-14 -translate-y-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Open Chat</p>
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/chat-icon.svg" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item group relative">
|
||||
<div class="group-hover:block absolute top-1/2 left-14 -translate-y-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">World map</p>
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/map-icon.svg" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item group relative">
|
||||
<div class="group-hover:block absolute top-1/2 left-14 -translate-y-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Users</p>
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/socials-icon.svg" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -43,4 +53,5 @@
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
let characterLevel = gameStore.character?.level.toString().padStart(2, '0');
|
||||
</script>
|
||||
|
||||
@ -11,8 +11,8 @@
|
||||
class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character"
|
||||
:class="{ active: selected_character == character.id }"
|
||||
>
|
||||
<img src="/assets/login/login-box-outer.svg" class="absolute w-full h-full max-lg:hidden" />
|
||||
<img src="/assets/login/login-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)] max-lg:hidden" />
|
||||
<img src="/assets/ui-box-outer.svg" class="absolute w-full h-full max-lg:hidden" />
|
||||
<img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)] max-lg:hidden" />
|
||||
<input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
|
||||
<label class="font-bold absolute left-1/2 top-4 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
|
||||
|
||||
|
||||
@ -6,16 +6,16 @@
|
||||
<div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
|
||||
<img src="/assets/login/nq-logo-v1.png" class="mb-10" />
|
||||
<div class="relative">
|
||||
<img src="/assets/login/login-box-outer.svg" class="absolute w-full h-full max-lg:hidden" />
|
||||
<img src="/assets/login/login-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" />
|
||||
<img src="/assets/ui-box-outer.svg" class="absolute w-full h-full" />
|
||||
<img src="/assets/ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" />
|
||||
|
||||
<!-- Login Form -->
|
||||
<form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative px-6 py-11">
|
||||
<div class="flex flex-col gap-5 p-2 mb-8 relative">
|
||||
<div class="w-full grid gap-3 relative">
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
|
||||
<div class="relative">
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" type="password" name="password" placeholder="Password" required />
|
||||
<button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
|
||||
</div>
|
||||
<span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
|
||||
@ -39,9 +39,9 @@
|
||||
<form v-show="switchForm === 'register'" @submit.prevent="registerFunc" class="relative px-6 py-11">
|
||||
<div class="flex flex-col gap-5 p-2 mb-8 relative">
|
||||
<div class="w-full grid gap-3 relative">
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
|
||||
<div class="relative">
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" type="password" name="password" placeholder="Password" required />
|
||||
<button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
|
||||
</div>
|
||||
<span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<template></template>
|
||||
@ -4,7 +4,8 @@ export default {
|
||||
theme: {
|
||||
fontFamily: {
|
||||
'titles': ['Poppins', 'serif'],
|
||||
'default': ['Quicksand', 'serif']
|
||||
'default': ['Quicksand', 'serif'],
|
||||
'ui': ['Upheaval', 'serif'],
|
||||
},
|
||||
backgroundSize: {
|
||||
'cover': 'cover',
|
||||
@ -43,6 +44,8 @@ export default {
|
||||
dropShadow: {
|
||||
'default': '0 3px 6px rgb(0, 0, 0)',
|
||||
'text': '1px 1px 5px rgba(0, 0, 0, 0.25)',
|
||||
'pixel': '2px 2px 0px rgb(77, 77, 77)',
|
||||
'pixel-black': '2px 2px 0px rgb(0, 0, 0)',
|
||||
'20': '0 3px 6px rgba(0, 0, 0, 0.2)'
|
||||
},
|
||||
boxShadow: {
|
||||
@ -68,10 +71,10 @@ export default {
|
||||
400: '#332426'
|
||||
},
|
||||
blue: {
|
||||
DEFAULT: '#00c2ff'
|
||||
DEFAULT: '#4F5FF0'
|
||||
},
|
||||
green: {
|
||||
DEFAULT: '#09ad19'
|
||||
DEFAULT: '#05E300'
|
||||
},
|
||||
purple: {
|
||||
DEFAULT: '#9841e6'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user