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
@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 {
-ms-overflow-style: none;
scrollbar-width: none;
@ -30,6 +48,7 @@ a {
font-family: $titles;
color: $white;
font-weight: 500;
margin: 0;
}
p,
@ -62,6 +81,15 @@ input {
}
}
.modal-form {
.form-fields {
--gap: 10px;
display: flex;
gap: var(--gap);
flex-wrap: wrap;
}
}
.input-cyan {
padding: 8px 10px;
font-family: $titles;

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

@ -1,9 +1,9 @@
<template>
<Teleport to="body">
<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' }">
<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" />
<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">
@ -17,7 +17,7 @@
class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]"
@mousedown="startResize" />
</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" />
</div>
</div>

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

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

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

@ -1,24 +1,21 @@
<template>
<div class="object-manager">
<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" />
</div>
<div class="modal-form asset-manager">
<form class="form-fields" @submit.prevent>
<div class="form-field name">
<div class="form-field col-12">
<label for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
</div>
<div class="form-field name">
<label for="name">Origin X</label>
<!-- @TODO only allow numbers here -->
<input class="input-cyan" type="text" name="name" placeholder="Origin X" />
<div class="form-field">
<label for="origin-x">Origin X</label>
<input class="input-cyan" type="number" name="origin-x" placeholder="Origin X" />
</div>
<div class="form-field name">
<label for="name">Origin Y</label>
<!-- @TODO only allow numbers here -->
<input class="input-cyan" type="text" name="name" placeholder="Origin Y" />
<div class="form-field">
<label for="origin-y">Origin Y</label>
<input class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" />
</div>
<div class="submit">
<button class="btn-cyan" type="button" @click="removeObject">Save</button>

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

@ -1,65 +1,83 @@
<template>
<div class="wrapper">
<div class="toolbar">
<div class="tools">
<button class="tool move" :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<img src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
<div class="flex justify-center m-2.5">
<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 flex gap-2.5">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
</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')">
<img src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('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-trigger" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
<div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
{{ 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 class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
<span class="option" @click="setDrawMode('tile')">Tile</span>
<span class="option" @click="setDrawMode('object')">Object</span>
<span class="option" @click="setDrawMode('teleport')">Teleport</span>
<span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
<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="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
Tile
<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('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>
</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')">
<img src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" />
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" />
</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')">
<img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('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-trigger" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
<div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
{{ 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 class="options" v-show="selectEraserOpen">
<span class="option" @click="setDrawMode('tile')">Tile</span>
<span class="option" @click="setDrawMode('decoration')">Decoration</span>
<span class="option" @click="setDrawMode('teleport')">Teleport</span>
<span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
<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="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
Tile
<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('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>
</button>
<div class="divider"></div>
<div class="w-[1px] bg-cyan"></div>
<button class="tool settings" @click="() => zoneEditorStore.toggleSettingsModal()">
<img src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
</button>
</div>
<div class="buttons">
<button class="btn-cyan">Load</button>
<button class="btn-cyan" @click="() => emit('save')">Save</button>
<button class="btn-cyan" @click="clear">Clear</button>
<button class="btn-cyan" @click="() => zoneEditorStore.toggleActive()">Exit</button>
<div class="flex gap-2.5 ml-auto">
<button class="btn-cyan px-3.5">Load</button>
<button class="btn-cyan px-3.5" @click="() => emit('save')">Save</button>
<button class="btn-cyan px-3.5" @click="clear">Clear</button>
<button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
</div>
</div>
</div>
@ -136,122 +154,21 @@ function clear() {
</script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.wrapper {
display: flex;
justify-content: center;
margin: 10px;
}
.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 {
display: flex;
gap: 10px;
.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;
}
.active {
@apply border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5;
.select {
.select-trigger {
text-transform: capitalize;
display: flex;
gap: 15px;
img {
transform: rotate(0);
transition: ease-in-out 0.2s;
}
&.open {
img {
transform: rotate(180deg);
}
}
}
.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;
@apply rotate-180;
}
}
}
}
}
img {
filter: invert(1);
width: 20px;
height: 20px;
}
}
.buttons {
display: flex;
gap: 10px;
margin-left: auto;
button {
padding-left: 15px;
padding-right: 15px;
}
}
}
</style>

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

@ -8,21 +8,19 @@
<div class="container settings">
<form method="post" @submit.prevent="" class="modal-form">
<div class="form-fields">
<div class="form-field">
<div class="form-field col-12">
<label for="name">Name</label>
<input class="input-cyan" v-model="name" name="name" id="name" />
</div>
<div class="form-field two-col">
<div class="field">
<div class="form-field col-6">
<label for="name">Width</label>
<input class="input-cyan" v-model="width" name="name" id="name" type="number" />
</div>
<div class="field">
<div class="form-field col-6">
<label for="name">Height</label>
<input class="input-cyan" v-model="height" name="name" id="name" type="number" />
</div>
</div>
<div class="form-field">
<div class="form-field col-12">
<label for="name">PVP enabled</label>
<input class="input-cyan" name="name" id="name" />
</div>
@ -56,3 +54,12 @@ watch(height, (value) => {
zoneEditorStore.setHeight(parseInt(value))
})
</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: [],
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
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: [],
corePlugins: {
preflight: false
}
}