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

Fixed some bugs in login form, updated logo name and icons, wip of minimap

Browse Source
This commit is contained in:
Colin Kallemein 2024-10-15 20:27:54 +02:00
parent 7dd2d70eca
commit a6c22df528
7 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/assets/icons/minus-icon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 597 KiB

14
public/assets/icons/plus-icon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 B

After

Width:  |  Height:  |  Size: 597 KiB

0
public/assets/login/nq-logo-v1.svg → public/assets/login/sq-logo-v1.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

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

@ -6,10 +6,10 @@
<p class="text-gray-50 m-0">{{ message.message }}</p>
</div>
</div>
<div class="w-64 mx-auto relative">
<img src="/assets/icons/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-1.5 h-4 w-4 opacity-50" />
<div class="w-96 mx-auto relative">
<img src="/assets/icons/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" />
<input
class="w-[204px] h-6 rounded-sm text-xs font-default pl-8 pr-4 py-0 bg-gray-600 border-2 border-solid border-gray-500 text-gray-300 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover focus:outline-none focus:ring-0 focus:border-cyan-800"
class="w-[332px] h-8 rounded-sm text-xs font-default pl-8 pr-4 py-0 bg-gray-600 border-2 border-solid border-gray-500 text-gray-300 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover focus:outline-none focus:ring-0 focus:border-cyan-800"
placeholder="Type something..."
v-model="message"
@keypress="handleKeyPress"

16
src/components/gui/Minimap.vue
View File

@ -1,5 +1,19 @@
<template>
<div class="absolute top-4 right-4">
<div class="w-40 h-40 rounded-full border border-solid border-gray-500 bg-[url('/assets/ui-texture.png')] bg-no-repeat">
<div class="w-40 h-40 rounded-full shadow-inner"></div>
</div>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
<button class="w-6 h-6 relative p-0">
<img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/plus-icon.svg" />
<img class="w-full h-full" src="/assets/ui-border-4-corners.svg" />
</button>
<button class="w-6 h-6 relative p-0">
<img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/minus-icon.svg" />
<img class="w-full h-full" src="/assets/ui-border-4-corners.svg" />
</button>
</div>
</div>
</template>
<script setup lang="ts">

8
src/screens/Login.vue
View File

@ -4,7 +4,7 @@
<div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute right-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
<div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
<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.svg" class="mb-10" />
<img src="/assets/login/sq-logo-v1.svg" class="mb-10" />
<div class="relative">
<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" />
@ -16,11 +16,11 @@
<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-login" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
<button @click.prevent="showPassword = !showPassword" :class="{'eye-open': showPassword}" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
<button type="button" @click.prevent="showPassword = !showPassword" :class="{'eye-open': showPassword}" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
</div>
<span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
</div>
<button class="text-right text-cyan-300 text-base">Forgot password?</button>
<button class="inline-flex self-end p-0 text-cyan-300 text-base">Forgot password?</button>
<button class="btn-cyan px-0 xs:w-full" type="submit">Play now</button>
<!-- Divider shape -->
@ -42,7 +42,7 @@
<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-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
<button @click.prevent="showPassword = !showPassword" :class="{'eye-open': showPassword}" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
<button type="button" @click.prevent="showPassword = !showPassword" :class="{'eye-open': showPassword}" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
</div>
<span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
</div>

1
tailwind.config.js
View File

@ -50,6 +50,7 @@ export default {
},
boxShadow: {
'character': '0 4px 30px rgba(0, 0, 0, 0.1)',
'inner': 'inset 0 0 12px 8px rgb(0, 0, 0)',
},
colors: {
cyan: {