@mundogamernetwork/shared-ui 1.0.0

package/components/indie-wall/StepBlock.vue

@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import MuralCanvas from './MuralCanvas.vue'
+import { suggestPosition } from '../../services/indieWallService'
+
+const props = defineProps<{
+	wall: any
+	supporters: any[]
+	pixelCount: number
+	selection: { x: number; y: number; w: number; h: number } | null
+}>()
+
+const emit = defineEmits<{
+	(e: 'select', rect: { x: number; y: number; w: number; h: number }): void
+	(e: 'update:pixel-count', count: number): void
+	(e: 'next'): void
+}>()
+
+const mode = ref<'auto' | 'manual'>('auto')
+const loading = ref(false)
+const errorMsg = ref('')
+
+// All width × height combinations whose product equals pixelCount
+const dimensionOptions = computed(() => {
+	const opts: { w: number; h: number; label: string }[] = []
+	if (!props.wall) return opts
+	const max = Math.max(props.wall.width, props.wall.height)
+	for (let w = 1; w <= max; w++) {
+		if (props.pixelCount % w !== 0) continue
+		const h = props.pixelCount / w
+		if (w > props.wall.width || h > props.wall.height) continue
+		opts.push({ w, h, label: `${w} × ${h}` })
+	}
+	return opts
+})
+
+const selectedDim = ref<{ w: number; h: number } | null>(null)
+
+function nearSquareDim(count: number): { w: number; h: number } {
+	if (count <= 1) return { w: 1, h: 1 }
+	const root = Math.floor(Math.sqrt(count))
+	for (let w = root; w >= 1; w--) {
+		if (count % w === 0) {
+			return { w, h: count / w }
+		}
+	}
+	return { w: count, h: 1 }
+}
+
+function initDefaultDim() {
+	if (dimensionOptions.value.length === 0) {
+		selectedDim.value = nearSquareDim(props.pixelCount)
+	} else {
+		// Default to the most "square" option
+		const sq = nearSquareDim(props.pixelCount)
+		const match = dimensionOptions.value.find(o => o.w === sq.w && o.h === sq.h)
+		selectedDim.value = match ?? dimensionOptions.value[0]
+	}
+}
+
+async function autoSuggest() {
+	if (!props.wall || !selectedDim.value) return
+	errorMsg.value = ''
+	loading.value = true
+	try {
+		const { w, h } = selectedDim.value
+		const res = await suggestPosition(props.wall.id, w, h)
+		const data = res.data?.data || res.data
+		if (data?.x !== undefined) {
+			emit('select', { x: data.x, y: data.y, w: data.width, h: data.height })
+		} else {
+			fallbackToManual()
+		}
+	} catch (err: any) {
+		const code = err?.response?.status
+		if (code === 422) {
+			errorMsg.value = err?.response?.data?.error || 'No free area large enough for this size.'
+		} else {
+			// Network/404 → soft fallback: try local empty-space scan
+			tryLocalScan()
+		}
+	} finally {
+		loading.value = false
+	}
+}
+
+// Local fallback: client-side scan for a free area using current supporters
+function tryLocalScan() {
+	if (!props.wall || !selectedDim.value) return
+	const { w, h } = selectedDim.value
+	const W = props.wall.width
+	const H = props.wall.height
+	const occ = new Set<string>()
+	for (const s of props.supporters || []) {
+		const pw = s.width || 1
+		const ph = s.height || 1
+		for (let r = s.y; r < s.y + ph; r++) {
+			for (let c = s.x; c < s.x + pw; c++) {
+				occ.add(`${c},${r}`)
+			}
+		}
+	}
+	for (let y = 0; y <= H - h; y++) {
+		for (let x = 0; x <= W - w; x++) {
+			let free = true
+			outer: for (let r = y; r < y + h; r++) {
+				for (let c = x; c < x + w; c++) {
+					if (occ.has(`${c},${r}`)) { free = false; break outer }
+				}
+			}
+			if (free) {
+				emit('select', { x, y, w, h })
+				errorMsg.value = ''
+				return
+			}
+		}
+	}
+	fallbackToManual('No free area large enough — try a different shape or pick manually.')
+}
+
+function fallbackToManual(msg = '') {
+	mode.value = 'manual'
+	errorMsg.value = msg
+}
+
+function onTapEmpty(coord: { x: number; y: number }) {
+	if (!props.wall || !selectedDim.value) return
+	const { w, h } = selectedDim.value
+	const x = Math.max(0, Math.min(coord.x, props.wall.width - w))
+	const y = Math.max(0, Math.min(coord.y, props.wall.height - h))
+	emit('select', { x, y, w, h })
+}
+
+watch(() => props.pixelCount, () => {
+	initDefaultDim()
+	if (mode.value === 'auto') autoSuggest()
+}, { immediate: false })
+
+watch(selectedDim, (newDim, oldDim) => {
+	if (!newDim) return
+	if (!oldDim || newDim.w !== oldDim.w || newDim.h !== oldDim.h) {
+		if (mode.value === 'auto') autoSuggest()
+		// In manual, clear current selection so user has to place again
+		else emit('select', null as any)
+	}
+})
+
+watch(mode, (newMode) => {
+	errorMsg.value = ''
+	if (newMode === 'auto') autoSuggest()
+})
+
+onMounted(() => {
+	initDefaultDim()
+	if (mode.value === 'auto') autoSuggest()
+})
+
+function confirm() {
+	if (props.selection) emit('next')
+}
+</script>
+
+<template>
+	<div class="sw-step">
+		<h3 class="sw-step-title">{{ $t('tv.dashboard.indie_wall.step_block_title') }}</h3>
+		<p class="sw-step-help">
+			{{ $t('tv.dashboard.indie_wall.step_block_help', { count: pixelCount }) }}
+		</p>
+
+		<div class="sw-qty-row">
+			<span class="sw-qty-label">{{ $t('tv.dashboard.indie_wall.step_block_quantity') }}:</span>
+			<button type="button" class="sw-qty-btn" :disabled="pixelCount <= 1" @click="emit('update:pixel-count', pixelCount - 1)">−</button>
+			<input
+				type="number"
+				min="1"
+				:value="pixelCount"
+				class="sw-qty-input"
+				@change="(e) => emit('update:pixel-count', Math.max(1, parseInt((e.target as HTMLInputElement).value) || 1))"
+			/>
+			<button type="button" class="sw-qty-btn" @click="emit('update:pixel-count', pixelCount + 1)">+</button>
+			<span class="sw-qty-total">= {{ $t('tv.dashboard.indie_wall.step_block_total', { total: pixelCount }) }}</span>
+		</div>
+
+		<div v-if="dimensionOptions.length > 1" class="sw-shape-row">
+			<span class="sw-shape-label">{{ $t('tv.dashboard.indie_wall.step_block_shape') }}:</span>
+			<button
+				v-for="opt in dimensionOptions"
+				:key="opt.label"
+				type="button"
+				:class="['sw-shape-btn', { active: selectedDim?.w === opt.w && selectedDim?.h === opt.h }]"
+				@click="selectedDim = { w: opt.w, h: opt.h }"
+			>
+				{{ opt.label }}
+			</button>
+		</div>
+
+		<div class="sw-mode-toggle">
+			<button
+				type="button"
+				:class="['sw-mode-btn', { active: mode === 'auto' }]"
+				@click="mode = 'auto'"
+			>
+				{{ $t('tv.dashboard.indie_wall.step_block_auto') }}
+			</button>
+			<button
+				type="button"
+				:class="['sw-mode-btn', { active: mode === 'manual' }]"
+				@click="mode = 'manual'"
+			>
+				{{ $t('tv.dashboard.indie_wall.step_block_manual') }}
+			</button>
+		</div>
+
+		<div v-if="errorMsg" class="sw-error">{{ errorMsg }}</div>
+
+		<MuralCanvas
+			:wall="wall"
+			:supporters="supporters"
+			:selection="selection"
+			:interactive="mode === 'manual'"
+			:height="360"
+			@tap-empty="onTapEmpty"
+		/>
+
+		<div v-if="selection" class="sw-selected">
+			<span>{{ $t('tv.dashboard.indie_wall.mural_position') }}: ({{ selection.x }}, {{ selection.y }})</span>
+			<span>{{ selection.w }} × {{ selection.h }} = {{ selection.w * selection.h }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
+		</div>
+
+		<div class="sw-actions">
+			<button type="button" class="sw-confirm" :disabled="!selection || loading" @click="confirm">
+				{{ loading ? '…' : $t('tv.dashboard.indie_wall.step_block_confirm') }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.sw-step { display: flex; flex-direction: column; gap: 12px; }
+.sw-step-title { font-size: 1.05rem; font-weight: 600; color: var(--title-fg, #fff); margin: 0; }
+.sw-step-help { font-size: 0.82rem; color: var(--secondary-info-fg, #aaa); margin: 0 0 4px; }
+
+.sw-qty-row {
+	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+	background: #13161C; padding: 8px 10px; border: 1px solid #1e2028;
+}
+.sw-qty-label { font-size: 0.78rem; color: var(--secondary-info-fg, #aaa); }
+.sw-qty-btn {
+	width: 30px; height: 30px; background: #1e2028; color: var(--title-fg, #fff);
+	border: 1px solid #272930; cursor: pointer;
+	font-size: 1rem; line-height: 1; padding: 0;
+	display: flex; align-items: center; justify-content: center;
+	&:hover:not(:disabled) { border-color: var(--chip-text, #D297FF); }
+	&:disabled { opacity: 0.4; cursor: not-allowed; }
+}
+.sw-qty-input {
+	width: 56px; height: 30px;
+	background: #0E0F13; border: 1px solid #272930; color: var(--title-fg, #fff);
+	text-align: center; font-size: 0.85rem;
+	-moz-appearance: textfield;
+	&::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+	&:focus { border-color: var(--chip-text, #D297FF); outline: none; }
+}
+.sw-qty-total { font-size: 0.78rem; color: var(--chip-text, #D297FF); margin-left: auto; }
+
+.sw-shape-row {
+	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+}
+.sw-shape-label {
+	font-size: 0.78rem; color: var(--secondary-info-fg, #aaa); margin-right: 4px;
+}
+.sw-shape-btn {
+	background: #1e2028; color: var(--title-fg, #fff);
+	border: 1px solid #272930; padding: 5px 10px;
+	font-size: 0.78rem; cursor: pointer;
+	&:hover { border-color: var(--chip-text, #D297FF); }
+	&.active {
+		background: var(--chip-text, #D297FF); color: #13161C;
+		border-color: var(--chip-text, #D297FF); font-weight: 600;
+	}
+}
+
+.sw-mode-toggle { display: flex; gap: 4px; }
+.sw-mode-btn {
+	flex: 1; background: #1e2028; color: var(--secondary-info-fg, #888);
+	border: 1px solid #272930; padding: 8px; cursor: pointer;
+	font-size: 0.8rem; transition: all 0.15s;
+	&.active {
+		background: var(--chip-text, #D297FF);
+		color: #13161C; border-color: var(--chip-text, #D297FF); font-weight: 600;
+	}
+}
+
+.sw-error {
+	background: rgba(255,59,48,0.07);
+	border: 1px solid rgba(255,59,48,0.25);
+	color: #ff6b6b; padding: 7px 10px; font-size: 0.8rem;
+}
+
+.sw-selected {
+	display: flex; justify-content: space-between;
+	color: var(--secondary-info-fg, #888);
+	font-size: 0.78rem;
+	background: #13161C; padding: 8px 10px; border: 1px solid #1e2028;
+}
+
+.sw-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.sw-confirm {
+	background: var(--chip-text, #D297FF);
+	color: #13161C; border: none; padding: 10px 18px;
+	font-weight: 700; font-size: 0.85rem; cursor: pointer;
+	&:hover { opacity: 0.88; }
+	&:disabled { opacity: 0.4; cursor: not-allowed; }
+}
+</style>