imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Temporary col functionality, and absolute unfiltered styling agony

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-04 20:47:50 +02:00
parent ab93dd5960
commit c56974a79f
7 changed files with 158 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/assets/scss/main.scss
View File

@ -7,6 +7,24 @@
// Fonts // Fonts
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&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'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&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');
//Globals
// Column base styles
[class^="col-"] {
position: relative;
width: 100%;
padding: 0 15px;
}
// Generate column classes
@for $i from 1 through 12 {
.col-#{$i} {
$width: percentage(calc($i / 12));
flex: 0 0 calc($width - var(--gap));
max-width: calc($width - var(--gap));
}
}
body { body {
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
@ -30,6 +48,7 @@ a {
font-family: $titles; font-family: $titles;
color: $white; color: $white;
font-weight: 500; font-weight: 500;
margin: 0;
} }
p, p,
@ -62,6 +81,15 @@ input {
} }
} }
.modal-form {
.form-fields {
--gap: 10px;
display: flex;
gap: var(--gap);
flex-wrap: wrap;
}
}
.input-cyan { .input-cyan {
padding: 8px 10px; padding: 8px 10px;
font-family: $titles; font-family: $titles;

6
src/components/utilities/Modal.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<Teleport to="body"> <Teleport to="body">
<div v-if="isModalOpenRef" <div v-if="isModalOpenRef"
class="fixed bg-opacity-80 bg-gray-800 border-2 border-cyan-800 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg" class="fixed bg-opacity-80 bg-gray-300 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg"
:style="{ top: y + 'px', left: x + 'px', width: width + 'px', height: height + 'px' }"> :style="{ top: y + 'px', left: x + 'px', width: width + 'px', height: height + 'px' }">
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-b border-cyan-800"> <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
<slot name="modalHeader" /> <slot name="modalHeader" />
<div class="flex gap-2.5"> <div class="flex gap-2.5">
<button @click="close" v-if="closable" class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out"> <button @click="close" v-if="closable" class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
@ -17,7 +17,7 @@
class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]"
@mousedown="startResize" /> @mousedown="startResize" />
</div> </div>
<div v-if="$slots.modalFooter" class="px-5 min-h-[50px] flex justify-end gap-7.5 items-center border-t border-cyan-800"> <div v-if="$slots.modalFooter" class="px-5 min-h-[50px] flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
<slot name="modalFooter" /> <slot name="modalFooter" />
</div> </div>
</div> </div>

16
src/components/utilities/assetManager/AssetManager.vue
View File

@ -143,16 +143,18 @@ function toTop() {
display: none; display: none;
} }
.image-container { .image-container {
text-align: center; display: flex;
align-items: center;
justify-content: center;
height: 300px;
img { img {
height: 200px; max-height: 280px;
padding-right: 10px;
margin: 20px 0;
} }
} }
.modal-form { .modal-form {
&.asset-manager { &.asset-manager {
margin: 10px; margin: 10px;
padding: 10px;
width: calc(100% - 40px); width: calc(100% - 40px);
display: block; display: block;
@ -161,12 +163,6 @@ function toTop() {
gap: 10px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
.form-field {
width: calc(50% - 5px);
&.name {
width: 100%;
}
}
.submit { .submit {
width: 100%; width: 100%;
} }

17
src/components/utilities/assetManager/partials/ObjectDetails.vue
View File

@ -1,24 +1,21 @@
<template> <template>
<div class="object-manager"> <div class="object-manager">
<div class="image-container"> <div class="image-container">
<!-- @TODO show img with width100% to keep quality and show it center with padding around it, preferably the window wont jump if a larger object is selected -->
<img :src="objectImageUrl" :alt="'Object ' + selectedObject" /> <img :src="objectImageUrl" :alt="'Object ' + selectedObject" />
</div> </div>
<div class="modal-form asset-manager"> <div class="modal-form asset-manager">
<form class="form-fields" @submit.prevent> <form class="form-fields" @submit.prevent>
<div class="form-field name"> <div class="form-field col-12">
<label for="name">Name</label> <label for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="Wall #1" /> <input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
</div> </div>
<div class="form-field name"> <div class="form-field">
<label for="name">Origin X</label> <label for="origin-x">Origin X</label>
<!-- @TODO only allow numbers here --> <input class="input-cyan" type="number" name="origin-x" placeholder="Origin X" />
<input class="input-cyan" type="text" name="name" placeholder="Origin X" />
</div> </div>
<div class="form-field name"> <div class="form-field">
<label for="name">Origin Y</label> <label for="origin-y">Origin Y</label>
<!-- @TODO only allow numbers here --> <input class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" />
<input class="input-cyan" type="text" name="name" placeholder="Origin Y" />
</div> </div>
<div class="submit"> <div class="submit">
<button class="btn-cyan" type="button" @click="removeObject">Save</button> <button class="btn-cyan" type="button" @click="removeObject">Save</button>

197
src/components/utilities/zoneEditor/Toolbar.vue
View File

@ -1,65 +1,83 @@
<template> <template>
<div class="wrapper"> <div class="flex justify-center m-2.5">
<div class="toolbar"> <div class="toolbar fixed top-5 rounded flex bg-gray-300 bg-opacity-80 border-2 border-solid border-cyan text-gray-50 p-1.5 pl-2.5 min-w-[90%] h-10">
<div class="tools"> <div class="tools flex gap-2.5">
<button class="tool move" :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')"> <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<img src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
</button> </button>
<div class="divider"></div> <div class="w-[1px] bg-cyan"></div>
<button class="tool pencil" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')"> <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
<img src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
<div class="select" v-if="zoneEditorStore.tool === 'pencil'"> <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
<div class="select-trigger" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen"> <div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
{{ zoneEditorStore.drawMode }} {{ zoneEditorStore.drawMode }}
<img src="/assets/icons/zoneEditor/chevron.svg" /> <img class="invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div> </div>
<div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'"> <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
<span class="option" @click="setDrawMode('tile')">Tile</span> <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
<span class="option" @click="setDrawMode('object')">Object</span> Tile
<span class="option" @click="setDrawMode('teleport')">Teleport</span> <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
<span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span> </span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('object')">
Object
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
</span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('teleport')">
Teleport
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
</span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('blocking tile')">Blocking tile</span>
</div> </div>
</div> </div>
</button> </button>
<div class="divider"></div> <div class="w-[1px] bg-cyan"></div>
<button class="tool paint" :class="{ active: zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')"> <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
<img src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" />
</button> </button>
<div class="divider"></div> <div class="w-[1px] bg-cyan"></div>
<button class="tool eraser" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')"> <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
<div class="select" v-if="zoneEditorStore.tool === 'eraser'"> <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
<div class="select-trigger" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen"> <div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
{{ zoneEditorStore.drawMode }} {{ zoneEditorStore.drawMode }}
<img src="/assets/icons/zoneEditor/chevron.svg" /> <img class="invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div> </div>
<div class="options" v-show="selectEraserOpen"> <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen">
<span class="option" @click="setDrawMode('tile')">Tile</span> <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
<span class="option" @click="setDrawMode('decoration')">Decoration</span> Tile
<span class="option" @click="setDrawMode('teleport')">Teleport</span> <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
<span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span> </span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('decoration')">
Decoration
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
</span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('teleport')">
Teleport
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
</span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('blocking tile')">Blocking tile</span>
</div> </div>
</div> </div>
</button> </button>
<div class="divider"></div> <div class="w-[1px] bg-cyan"></div>
<button class="tool settings" @click="() => zoneEditorStore.toggleSettingsModal()"> <button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()">
<img src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
</button> </button>
</div> </div>
<div class="buttons"> <div class="flex gap-2.5 ml-auto">
<button class="btn-cyan">Load</button> <button class="btn-cyan px-3.5">Load</button>
<button class="btn-cyan" @click="() => emit('save')">Save</button> <button class="btn-cyan px-3.5" @click="() => emit('save')">Save</button>
<button class="btn-cyan" @click="clear">Clear</button> <button class="btn-cyan px-3.5" @click="clear">Clear</button>
<button class="btn-cyan" @click="() => zoneEditorStore.toggleActive()">Exit</button> <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
</div> </div>
</div> </div>
</div> </div>
@ -136,122 +154,21 @@ function clear() {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/assets/scss/main';
.wrapper {
display: flex;
justify-content: center;
margin: 10px;
}
.toolbar { .toolbar {
position: fixed;
top: 20px;
border-radius: 5px;
display: flex;
background: rgba($dark-gray, 0.8);
border: 2px solid $cyan;
color: $light-gray;
padding: 5px 5px 5px 10px;
min-width: 90%;
height: 40px;
.tools { .tools {
display: flex; .active {
gap: 10px; @apply border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5;
.divider {
width: 1px;
background: $cyan;
}
// vertical center
.tool {
display: flex;
justify-content: center;
align-items: center;
min-width: 40px;
padding: 0;
position: relative;
select {
display: none;
}
&.active {
border-bottom: 3px solid $light-cyan;
gap: 10px;
}
.select { .select {
.select-trigger { .select-trigger {
text-transform: capitalize;
display: flex;
gap: 15px;
img {
transform: rotate(0);
transition: ease-in-out 0.2s;
}
&.open { &.open {
img { img {
transform: rotate(180deg); @apply rotate-180;
}
}
}
.options {
display: flex;
flex-direction: column;
position: absolute;
top: calc(100% + 20px);
left: 50%;
transform: translateX(-50%);
background: rgba($dark-gray, 0.8);
border-radius: 5px;
min-width: 100px;
border: 1px solid $cyan;
text-align: left;
.option {
padding: 8px 10px;
position: relative;
&:hover {
background-color: rgba($cyan, 0.5);
}
&::after {
content: '';
position: absolute;
width: 80%;
left: 50%;
transform: translateX(-50%);
bottom: 0;
height: 1px;
background-color: $cyan;
}
&:last-child::after {
display: none;
} }
} }
} }
} }
} }
img {
filter: invert(1);
width: 20px;
height: 20px;
}
}
.buttons {
display: flex;
gap: 10px;
margin-left: auto;
button {
padding-left: 15px;
padding-right: 15px;
}
} }
} }
</style> </style>

19
src/components/utilities/zoneEditor/ZoneSettings.vue
View File

@ -8,21 +8,19 @@
<div class="container settings"> <div class="container settings">
<form method="post" @submit.prevent="" class="modal-form"> <form method="post" @submit.prevent="" class="modal-form">
<div class="form-fields"> <div class="form-fields">
<div class="form-field"> <div class="form-field col-12">
<label for="name">Name</label> <label for="name">Name</label>
<input class="input-cyan" v-model="name" name="name" id="name" /> <input class="input-cyan" v-model="name" name="name" id="name" />
</div> </div>
<div class="form-field two-col"> <div class="form-field col-6">
<div class="field">
<label for="name">Width</label> <label for="name">Width</label>
<input class="input-cyan" v-model="width" name="name" id="name" type="number" /> <input class="input-cyan" v-model="width" name="name" id="name" type="number" />
</div> </div>
<div class="field"> <div class="form-field col-6">
<label for="name">Height</label> <label for="name">Height</label>
<input class="input-cyan" v-model="height" name="name" id="name" type="number" /> <input class="input-cyan" v-model="height" name="name" id="name" type="number" />
</div> </div>
</div> <div class="form-field col-12">
<div class="form-field">
<label for="name">PVP enabled</label> <label for="name">PVP enabled</label>
<input class="input-cyan" name="name" id="name" /> <input class="input-cyan" name="name" id="name" />
</div> </div>
@ -56,3 +54,12 @@ watch(height, (value) => {
zoneEditorStore.setHeight(parseInt(value)) zoneEditorStore.setHeight(parseInt(value))
}) })
</script> </script>
<style lang="scss">
.form-fields {
--gap: 10px;
display: flex;
gap: var(--gap);
flex-wrap: wrap;
}
</style>

40
tailwind.config.js
View File

@ -3,8 +3,44 @@ export default {
content: [], content: [],
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: { theme: {
extend: {}, extend: {
colors: {
red: {
DEFAULT: '#d50000',
50: '#d50000',
100: '#b30000'
},
bordeaux: {
DEFAULT: '#800020',
50: '#cc0033',
100: '#800020',
200: '#4c0000'
},
blue: {
DEFAULT: '#00c2ff'
},
green: {
DEFAULT: '#09ad19'
},
cyan: {
DEFAULT: '#368f8b',
50: '#00b3b3',
100: '#368f8b',
200: '#376362'
},
gray: {
DEFAULT: '#7f7f7f',
50: '#d3d3d3',
100: '#7f7f7f',
200: '#696969',
300: '#313638',
500: '#778899'
}
}
},
}, },
plugins: [], plugins: [],
corePlugins: {
preflight: false
}
} }