forked from noxious/client
npm run format
This commit is contained in:
parent
7d3946e274
commit
e389534e30
@ -5,12 +5,12 @@
|
||||
</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="w-3 h-3 center-element" src="/assets/icons/plus-icon.svg" alt="Zoom-in button icon"/>
|
||||
<img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt=""/>
|
||||
<img class="w-3 h-3 center-element" src="/assets/icons/plus-icon.svg" alt="Zoom-in button icon" />
|
||||
<img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt="" />
|
||||
</button>
|
||||
<button class="w-6 h-6 relative p-0">
|
||||
<img class="w-3 h-3 center-element" src="/assets/icons/minus-icon.svg" alt="Zoom-out button icon"/>
|
||||
<img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt=""/>
|
||||
<img class="w-3 h-3 center-element" src="/assets/icons/minus-icon.svg" alt="Zoom-out button icon" />
|
||||
<img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -48,10 +48,7 @@
|
||||
<input v-model.number="action.frameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<SpriteActionsInput
|
||||
v-model="action.sprites"
|
||||
@tempOffsetChange="(index, offset) => handleTempOffsetChange(action, index, offset)"
|
||||
/>
|
||||
<SpriteActionsInput v-model="action.sprites" @tempOffsetChange="(index, offset) => handleTempOffsetChange(action, index, offset)" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
@ -2,9 +2,7 @@
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<div v-for="(image, index) in modelValue" :key="index" class="h-20 w-20 p-4 bg-gray-300 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
|
||||
<img :src="image.url" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" @load="updateImageDimensions($event, index)" />
|
||||
<div v-if="image.dimensions" class="absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 py-0.5 rounded transition-opacity font-default">
|
||||
{{ image.dimensions.width }}x{{ image.dimensions.height }}
|
||||
</div>
|
||||
<div v-if="image.dimensions" class="absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 py-0.5 rounded transition-opacity font-default">{{ image.dimensions.width }}x{{ image.dimensions.height }}</div>
|
||||
<div class="absolute top-1 left-1 flex-row space-y-1">
|
||||
<button @click.stop="deleteImage(index)" class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
@ -78,7 +76,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: SpriteImage[]): void
|
||||
(e: 'close'): void
|
||||
(e: 'tempOffsetChange', index: number, offset: { x: number, y: number }): void
|
||||
(e: 'tempOffsetChange', index: number, offset: { x: number; y: number }): void
|
||||
}>()
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
|
@ -39,15 +39,7 @@
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="block mb-2 text-white">Frame: {{ currentFrame + 1 }} of {{ sprites.length }}</label>
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="currentFrame"
|
||||
:min="0"
|
||||
:max="sprites.length - 1"
|
||||
step="1"
|
||||
class="w-full accent-cyan-500"
|
||||
@input="stopAnimation"
|
||||
/>
|
||||
<input type="range" v-model.number="currentFrame" :min="0" :max="sprites.length - 1" step="1" class="w-full accent-cyan-500" @input="stopAnimation" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="block mb-2 text-white">Zoom: {{ zoomLevel }}%</label>
|
||||
@ -69,7 +61,7 @@ const props = defineProps<{
|
||||
frameRate: number
|
||||
isModalOpen?: boolean
|
||||
tempOffsetIndex?: number
|
||||
tempOffset?: { x: number, y: number }
|
||||
tempOffset?: { x: number; y: number }
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
|
@ -32,8 +32,8 @@ export function useBaseControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
|
||||
|
||||
if (Math.abs(deltaX) <= dragThreshold && Math.abs(deltaY) <= dragThreshold) return
|
||||
|
||||
const scrollX = camera.scrollX - (deltaX / camera.zoom)
|
||||
const scrollY = camera.scrollY - (deltaY / camera.zoom)
|
||||
const scrollX = camera.scrollX - deltaX / camera.zoom
|
||||
const scrollY = camera.scrollY - deltaY / camera.zoom
|
||||
|
||||
camera.setScroll(scrollX, scrollY)
|
||||
pointerStartPosition.value = { x: pointer.x, y: pointer.y }
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { getTile } from '@/composables/mapComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useBaseControlsComposable } from './useBaseControlsComposable'
|
||||
import type { Ref } from 'vue'
|
||||
import { useBaseControlsComposable } from './useBaseControlsComposable'
|
||||
|
||||
export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const gameStore = useGameStore()
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { useBaseControlsComposable } from './useBaseControlsComposable'
|
||||
import { computed, type Ref } from 'vue'
|
||||
import { useBaseControlsComposable } from './useBaseControlsComposable'
|
||||
|
||||
export function useMapEditorControlsComposable(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const mapEditor = useMapEditorComposable()
|
||||
|
@ -1,15 +1,14 @@
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { computed, watch, type Ref } from 'vue'
|
||||
import { useGameControlsComposable } from '@/composables/controls/useGameControlsComposable'
|
||||
import { useMapEditorControlsComposable } from '@/composables/controls/useMapEditorControlsComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { computed, type Ref } from 'vue'
|
||||
|
||||
export function useControlsComposable(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>) {
|
||||
const camera = scene.cameras.main
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const gameHandlers = useGameControlsComposable(scene, layer, waypoint, camera)
|
||||
const mapEditorHandlers = useMapEditorControlsComposable(scene, layer, waypoint, camera)
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const currentHandlers = computed(() => (mapEditor.active.value ? mapEditorHandlers : gameHandlers))
|
||||
|
||||
const setupControls = () => currentHandlers.value.setupControls()
|
||||
|
Loading…
x
Reference in New Issue
Block a user