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

Also converted zoneeditor styling to tailwind breakpoints

Browse Source
This commit is contained in:
Colin Kallemein
2024-07-21 18:14:38 +02:00
parent 112bb21ccb
commit fe018528df
18 changed files with 107 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/utilities/zoneEditor/CreateZone.vue
View File

@ -5,27 +5,27 @@
</template>
<template #modalBody>
<div class="m-[15px]">
<div class="m-4">
<form method="post" @submit.prevent="submit" class="inline">
<div class="gap-2.5 flex flex-wrap">
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Name</label>
<input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
<input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
</div>
<div class="w-[48%] flex flex-col mb-5">
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Width</label>
<input class="input-cyan max-w-[250px]" v-model="width" name="name" id="name" type="number" />
<input class="input-cyan max-w-64" v-model="width" name="name" id="name" type="number" />
</div>
<div class="w-[48%] flex flex-col mb-5">
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Height</label>
<input class="input-cyan max-w-[250px]" v-model="height" name="name" id="name" type="number" />
<input class="input-cyan max-w-64" v-model="height" name="name" id="name" type="number" />
</div>
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">PVP enabled</label>
<input class="input-cyan max-w-[250px]" name="name" id="name" />
<input class="input-cyan max-w-64" name="name" id="name" />
</div>
</div>
<button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
</form>
</div>
</template>

4
src/components/utilities/zoneEditor/Objects.vue
View File

@ -17,14 +17,14 @@
</div>
</template>
<template #modalBody>
<div class="m-[15px]">
<div class="m-4">
<div class="mb-4 flex flex-wrap gap-2">
<button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
{{ tag }}
</button>
</div>
<div class="flex justify-between flex-wrap gap-2.5 items-center">
<div v-for="(object, index) in filteredObjects" :key="index" class="max-w-[25%] inline-block">
<div v-for="(object, index) in filteredObjects" :key="index" class="max-w-1/4 inline-block">
<img
class="border-2 border-solid max-w-full"
:src="`${config.server_endpoint}/assets/objects/${object.id}.png`"

8
src/components/utilities/zoneEditor/SelectedZoneObject.vue
View File

@ -3,13 +3,13 @@
<div class="self-end mt-2 flex gap-2">
<div>
<label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
<input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-cyan max-w-[90px] px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" :disabled="!isObjectSelected" />
<input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-cyan max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" :disabled="!isObjectSelected" />
</div>
<button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-[15px]" :disabled="!isObjectSelected">
<button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-4" :disabled="!isObjectSelected">
<img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
</button>
<button @mousedown.stop @click="zoneEditorStore.setSelectedObject(zoneEditorStore.selectedZoneObject?.object)" class="btn-cyan py-1.5 px-[15px]" :disabled="!isObjectSelected">S</button>
<button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-[15px] min-w-[100px]" :disabled="!isObjectSelected">Move</button>
<button @mousedown.stop @click="zoneEditorStore.setSelectedObject(zoneEditorStore.selectedZoneObject?.object)" class="btn-cyan py-1.5 px-4" :disabled="!isObjectSelected">S</button>
<button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24" :disabled="!isObjectSelected">Move</button>
</div>
</div>
</template>

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

@ -1,12 +1,12 @@
<template>
<div class="flex justify-center p-5">
<div class="toolbar fixed top-6 mx-6 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-[90%] h-10">
<div class="toolbar fixed top-6 mx-6 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-11/12 h-10">
<div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
</button>
<div class="w-[1px] bg-cyan"></div>
<div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
@ -15,25 +15,25 @@
{{ zoneEditorStore.drawMode }}
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div>
<div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300/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/50" @click="setDrawMode('tile')">
<div class="flex flex-col absolute top-full mt-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
<span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('tile')">
Tile
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
</span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('object')">
<span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('object')">
Object
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
</span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
<span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
Teleport
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
</span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
<span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
</div>
</div>
</button>
<div class="w-[1px] bg-cyan"></div>
<div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
@ -42,31 +42,31 @@
{{ zoneEditorStore.drawMode }}
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div>
<div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300/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/50" @click="setDrawMode('tile')">
<div class="flex flex-col absolute top-full mt-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectEraserOpen">
<span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('tile')">
Tile
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
</span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('object')">
<span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('object')">
Object
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
</span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
<span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
Teleport
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
</span>
<span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
<span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
</div>
</div>
</button>
<div class="w-[1px] bg-cyan"></div>
<div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'paint' }">(B)</span>
</button>
<div class="w-[1px] bg-cyan"></div>
<div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()" v-if="zoneEditorStore.zone">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'settings' }">(Z)</span>

12
src/components/utilities/zoneEditor/ZoneList.vue
View File

@ -7,20 +7,20 @@
<h3 class="text-lg">Zones</h3>
</template>
<template #modalBody>
<div class="my-[15px] mx-auto">
<div class="text-center mb-4 px-2 flex justify-around">
<button class="btn-cyan py-1.5 min-w-[48%]" @click="fetchZones">Refresh</button>
<button class="btn-cyan py-1.5 min-w-[48%]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
<div class="my-4 mx-auto">
<div class="text-center mb-4 px-2 flex gap-2.5">
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchZones">Refresh</button>
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
</div>
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id">
<div class="absolute left-0 top-0 w-full h-[1px] bg-cyan-200" v-if="index === 0"></div>
<div class="absolute left-0 top-0 w-full h-px bg-cyan-200" v-if="index === 0"></div>
<div class="flex gap-3 items-center w-full">
<span @click="() => loadZone(zone.id)">{{ zone.name }}</span>
<span class="ml-auto gap-1 flex">
<button class="btn-bordeaux py-0.5 px-2.5" @click="() => deleteZone(zone.id)">X</button>
</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
</div>
</div>
</template>

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

@ -5,24 +5,24 @@
</template>
<template #modalBody>
<div class="m-[15px]">
<div class="m-4">
<form method="post" @submit.prevent="" class="inline">
<div class="gap-2.5 flex flex-wrap">
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Name</label>
<input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
<input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
</div>
<div class="w-[48%] flex flex-col mb-5">
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Width</label>
<input class="input-cyan max-w-[250px]" v-model="width" name="name" id="name" type="number" />
<input class="input-cyan max-w-64" v-model="width" name="name" id="name" type="number" />
</div>
<div class="w-[48%] flex flex-col mb-5">
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Height</label>
<input class="input-cyan max-w-[250px]" v-model="height" name="name" id="name" type="number" />
<input class="input-cyan max-w-64" v-model="height" name="name" id="name" type="number" />
</div>
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">PVP enabled</label>
<input class="input-cyan max-w-[250px]" name="name" id="name" />
<input class="input-cyan max-w-64" name="name" id="name" />
</div>
</div>
</form>