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

Adjusted global style classes

Browse Source
This commit is contained in:
Colin Kallemein
2024-10-09 21:46:12 +02:00
parent 34393a31ac
commit 4293ec63b6
18 changed files with 51 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/forms/ChipsInput.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="flex flex-wrap items-center input-cyan gap-1">
<div class="flex flex-wrap items-center input-field gap-1">
<div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
<span class="text-xs">{{ chip }}</span>
<button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)" aria-label="Remove chip">×</button>

14
src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
View File

@ -10,15 +10,15 @@
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
<div class="form-field-full">
<label for="name">Name</label>
<input v-model="objectName" class="input-cyan" type="text" name="name" placeholder="Wall #1" />
<input v-model="objectName" class="input-field" type="text" name="name" placeholder="Wall #1" />
</div>
<div class="form-field-half">
<label for="origin-x">Origin X</label>
<input v-model="objectOriginX" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
<input v-model="objectOriginX" class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
</div>
<div class="form-field-half">
<label for="origin-y">Origin Y</label>
<input v-model="objectOriginY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
<input v-model="objectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
</div>
<div class="form-field-full">
<label for="origin-x">Tags</label>
@ -26,22 +26,22 @@
</div>
<div class="form-field-full">
<label for="origin-x">Is animated</label>
<select v-model="objectIsAnimated" class="input-cyan" name="is-animated">
<select v-model="objectIsAnimated" class="input-field" name="is-animated">
<option :value="false">No</option>
<option :value="true">Yes</option>
</select>
</div>
<div class="form-field-full">
<label for="frame-speed">Frame speed</label>
<input v-model="objectFrameSpeed" class="input-cyan" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
<input v-model="objectFrameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
</div>
<div class="form-field-half">
<label for="frame-width">Frame width</label>
<input v-model="objectFrameWidth" class="input-cyan" type="number" step="any" name="frame-width" placeholder="Frame width" />
<input v-model="objectFrameWidth" class="input-field" type="number" step="any" name="frame-width" placeholder="Frame width" />
</div>
<div class="form-field-half">
<label for="frame-height">Frame height</label>
<input v-model="objectFrameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
<input v-model="objectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
</div>
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
</form>

2
src/components/gameMaster/assetManager/partials/object/ObjectList.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="relative p-2.5 flex items-center gap-x-2.5">
<input v-model="searchQuery" class="input-cyan flex-grow" placeholder="Search..." @input="handleSearch" />
<input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
<label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">

14
src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
View File

@ -4,7 +4,7 @@
<div class="flex flex-wrap gap-2">
<div class="w-full flex flex-col">
<label class="mb-1.5 font-titles" for="name">Name</label>
<input v-model="spriteName" class="input-cyan" type="text" name="name" placeholder="New sprite" />
<input v-model="spriteName" class="input-field" type="text" name="name" placeholder="New sprite" />
</div>
<div class="w-full flex gap-2 mt-2 pb-4 relative">
@ -26,33 +26,33 @@
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveSprite">
<div class="form-field-full">
<label for="action">Action</label>
<input v-model="action.action" class="input-cyan" type="text" name="action" placeholder="Action" />
<input v-model="action.action" class="input-field" type="text" name="action" placeholder="Action" />
</div>
<div class="form-field-half">
<label for="origin-x">Origin X</label>
<input v-model.number="action.originX" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
<input v-model.number="action.originX" class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
</div>
<div class="form-field-half">
<label for="origin-y">Origin Y</label>
<input v-model.number="action.originY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
<input v-model.number="action.originY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
</div>
<div class="form-field-half">
<label for="is-animated">Is animated</label>
<select v-model="action.isAnimated" class="input-cyan" name="is-animated">
<select v-model="action.isAnimated" class="input-field" name="is-animated">
<option :value="false">No</option>
<option :value="true">Yes</option>
</select>
</div>
<div class="form-field-half" v-if="action.isAnimated">
<label for="is-looping">Is looping</label>
<select v-model="action.isLooping" class="input-cyan" name="is-looping">
<select v-model="action.isLooping" class="input-field" name="is-looping">
<option :value="false">No</option>
<option :value="true">Yes</option>
</select>
</div>
<div class="form-field-full" v-if="action.isAnimated">
<label for="frame-speed">Frame speed</label>
<input v-model.number="action.frameSpeed" class="input-cyan" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
<input v-model.number="action.frameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
</div>
<div class="form-field-full">
<SpriteActionsInput v-model="action.sprites" />

2
src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="relative p-2.5 flex items-center gap-x-2.5">
<input v-model="searchQuery" class="input-cyan flex-grow" placeholder="Search..." @input="handleSearch" />
<input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
<button @click.prevent="newButtonClickHandler" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />

2
src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
View File

@ -10,7 +10,7 @@
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
<div class="form-field-full">
<label for="name">Name</label>
<input v-model="tileName" class="input-cyan" type="text" name="name" placeholder="Tile #1" />
<input v-model="tileName" class="input-field" type="text" name="name" placeholder="Tile #1" />
</div>
<div class="form-field-full">
<label for="origin-x">Tags</label>

2
src/components/gameMaster/assetManager/partials/tile/TileList.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="relative p-2.5 flex items-center gap-x-2.5">
<input v-model="searchQuery" class="input-cyan flex-grow" placeholder="Search..." @input="handleSearch" />
<input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
<label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">

8
src/components/gameMaster/zoneEditor/partials/CreateZone.vue
View File

@ -10,19 +10,19 @@
<div class="gap-2.5 flex flex-wrap">
<div class="form-field-full">
<label for="name">Name</label>
<input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
<input class="input-field max-w-64" v-model="name" name="name" id="name" />
</div>
<div class="form-field-half">
<label for="name">Width</label>
<input class="input-cyan max-w-64" v-model="width" name="name" id="name" type="number" />
<input class="input-field max-w-64" v-model="width" name="name" id="name" type="number" />
</div>
<div class="form-field-half">
<label for="name">Height</label>
<input class="input-cyan max-w-64" v-model="height" name="name" id="name" type="number" />
<input class="input-field max-w-64" v-model="height" name="name" id="name" type="number" />
</div>
<div class="form-field-full">
<label for="name">PVP enabled</label>
<select class="input-cyan" name="pvp" id="pvp">
<select class="input-field" name="pvp" id="pvp">
<option :value="false">No</option>
<option :value="true">Yes</option>
</select>

4
src/components/gameMaster/zoneEditor/partials/ObjectList.vue
View File

@ -7,11 +7,11 @@
<div class="w-full flex gap-1.5 flex-row">
<div>
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
<input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
<input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
</div>
<!-- <div>-->
<!-- <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>-->
<!-- <input v-model="objectDepth" @mousedown.stop class="input-cyan" type="number" name="depth" placeholder="Depth" />-->
<!-- <input v-model="objectDepth" @mousedown.stop class="input-field" type="number" name="depth" placeholder="Depth" />-->
<!-- </div>-->
</div>
</div>

2
src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
View File

@ -3,7 +3,7 @@
<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-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
<input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-field max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
</div>
<button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
<img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />

8
src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
View File

@ -10,15 +10,15 @@
<div class="gap-2.5 flex flex-wrap">
<div class="form-field-half">
<label for="positionX">Position X</label>
<input class="input-cyan" v-model="toPositionX" name="positionX" id="positionX" type="number" />
<input class="input-field" v-model="toPositionX" name="positionX" id="positionX" type="number" />
</div>
<div class="form-field-half">
<label for="positionY">Position Y</label>
<input class="input-cyan" v-model="toPositionY" name="positionY" id="positionY" type="number" />
<input class="input-field" v-model="toPositionY" name="positionY" id="positionY" type="number" />
</div>
<div class="form-field-full">
<label for="rotation">Rotation</label>
<select v-model="toRotation" class="input-cyan" name="rotation" id="rotation">
<select v-model="toRotation" class="input-field" name="rotation" id="rotation">
<option :value="0">North</option>
<option :value="2">East</option>
<option :value="4">South</option>
@ -27,7 +27,7 @@
</div>
<div class="form-field-full">
<label for="toZoneId">Zone to teleport to</label>
<select v-model="toZoneId" class="input-cyan" name="toZoneId" id="toZoneId">
<select v-model="toZoneId" class="input-field" name="toZoneId" id="toZoneId">
<option :value="0">Select zone</option>
<option v-for="zone in zoneEditorStore.zoneList" :key="zone.id" :value="zone.id">{{ zone.name }}</option>
</select>

2
src/components/gameMaster/zoneEditor/partials/TileList.vue
View File

@ -7,7 +7,7 @@
<div class="w-full flex gap-1.5 flex-row">
<div>
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
<input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
<input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
</div>
</div>
</div>

8
src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
View File

@ -10,19 +10,19 @@
<div class="gap-2.5 flex flex-wrap">
<div class="form-field-full">
<label for="name">Name</label>
<input class="input-cyan" v-model="name" name="name" id="name" />
<input class="input-field" v-model="name" name="name" id="name" />
</div>
<div class="form-field-half">
<label for="name">Width</label>
<input class="input-cyan" v-model="width" name="name" id="name" type="number" />
<input class="input-field" v-model="width" name="name" id="name" type="number" />
</div>
<div class="form-field-half">
<label for="name">Height</label>
<input class="input-cyan" v-model="height" name="name" id="name" type="number" />
<input class="input-field" v-model="height" name="name" id="name" type="number" />
</div>
<div class="form-field-full">
<label for="pvp">PVP enabled</label>
<select v-model="pvp" class="input-cyan" name="pvp" id="pvp">
<select v-model="pvp" class="input-field" name="pvp" id="pvp">
<option :value="false">No</option>
<option :value="true">Yes</option>
</select>

4
src/components/gui/partials/settings/CharacterSettings.vue
View File

@ -6,11 +6,11 @@
<form class="flex gap-2.5 flex-wrap">
<div class="form-field-half max-w-[300px]">
<label for="name">Name</label>
<input class="input-cyan" :class="{ inactive: !editCharacter }" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
<input class="input-field" :class="{ inactive: !editCharacter }" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
</div>
<div class="form-field-half max-w-[300px] relative">
<label for="class">Class</label>
<select class="input-cyan" v-model="characterClass" :class="{ inactive: !editCharacter }" name="class" :disabled="!editCharacter">
<select class="input-field" v-model="characterClass" :class="{ inactive: !editCharacter }" name="class" :disabled="!editCharacter">
<option value="Knight" :selected="characterClass == 'Knight'" :disabled="characterClass == 'Knight'">Knight</option>
<option value="Paladin" :selected="characterClass == 'Paladin'" :disabled="characterClass == 'Paladin'">Paladin</option>
</select>