@mundogamernetwork/shared-ui 1.0.0

package/components/indie-wall/IndieWallLeaderboard.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+const props = defineProps<{
+	supporters: any[]
+}>()
+
+const { t } = useI18n()
+const showAll = ref(false)
+
+interface RankEntry {
+	key: string
+	name: string
+	avatarUrl: string | null
+	totalPixels: number
+	purchases: number
+	position: number
+}
+
+const ranked = computed<RankEntry[]>(() => {
+	const map = new Map<string, RankEntry>()
+
+	for (const s of props.supporters) {
+		if (s.status === false) continue
+
+		const userId = s.user?.id
+		const email = s.guest_email
+		const key = userId ? `u:${userId}` : email ? `e:${email}` : null
+		if (!key) continue
+
+		const name = s.is_anonymous
+			? t('tv.dashboard.indie_wall.anonymous')
+			: (s.title || s.user?.name || s.guest_name || 'Guest')
+
+		if (map.has(key)) {
+			const entry = map.get(key)!
+			entry.totalPixels += s.pixel_count || 1
+			entry.purchases += 1
+		} else {
+			map.set(key, {
+				key,
+				name,
+				avatarUrl: s.user?.avatar_url || null,
+				totalPixels: s.pixel_count || 1,
+				purchases: 1,
+				position: 0,
+			})
+		}
+	}
+
+	return Array.from(map.values())
+		.sort((a, b) => b.totalPixels - a.totalPixels)
+		.map((entry, i) => ({ ...entry, position: i + 1 }))
+})
+
+const SHOW_INITIAL = 10
+const visible = computed(() => showAll.value ? ranked.value : ranked.value.slice(0, SHOW_INITIAL))
+
+function initials(name: string): string {
+	return name.trim().split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase()
+}
+</script>
+
+<template>
+	<div v-if="ranked.length" class="iw-rank">
+		<div class="iw-rank-header">
+			<span class="iw-rank-title">{{ $t('tv.dashboard.indie_wall.leaderboard_title') }}</span>
+			<span class="iw-rank-title-span">{{ $t('tv.dashboard.indie_wall.leaderboard_title_span') }}</span>
+		</div>
+
+		<div class="iw-rank-list">
+			<div
+				v-for="entry in visible"
+				:key="entry.key"
+				class="iw-rank-row"
+				:class="{ 'iw-rank-first': entry.position === 1 }"
+			>
+				<div class="iw-rank-pos" :class="`iw-pos-${Math.min(entry.position, 4)}`">
+					{{ entry.position }}
+				</div>
+				<div class="iw-rank-avi">
+					<img v-if="entry.avatarUrl" :src="entry.avatarUrl" :alt="entry.name" />
+					<span v-else class="iw-rank-init">{{ initials(entry.name) }}</span>
+				</div>
+				<div class="iw-rank-info">
+					<span class="iw-rank-name">{{ entry.name }}</span>
+					<span class="iw-rank-meta">
+						{{ entry.totalPixels }} {{ $t('tv.dashboard.indie_wall.leaderboard_pixels') }}
+						&nbsp;|&nbsp;
+						{{ entry.purchases }}
+						{{ entry.purchases === 1 ? $t('tv.dashboard.indie_wall.leaderboard_purchases') : $t('tv.dashboard.indie_wall.leaderboard_purchases_plural') }}
+					</span>
+				</div>
+			</div>
+		</div>
+
+		<button v-if="ranked.length > SHOW_INITIAL" class="iw-rank-toggle" type="button" @click="showAll = !showAll">
+			{{ showAll ? $t('tv.dashboard.indie_wall.leaderboard_show_less') : $t('tv.dashboard.indie_wall.leaderboard_show_more') }}
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.iw-rank {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.iw-rank-header {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	border-left: 3px solid var(--chip-text, #D297FF);
+	padding-left: 12px;
+}
+.iw-rank-title {
+	font-size: 1.1rem;
+	font-weight: 600;
+	color: var(--title-fg, #fff);
+}
+.iw-rank-title-span {
+	color: var(--chip-text, #D297FF);
+	font-size: 1.1rem;
+	font-weight: 600;
+}
+
+.iw-rank-list {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.iw-rank-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	background: #191B20;
+	border: 1px solid #1e2028;
+	padding: 10px 14px;
+	transition: border-color 0.15s;
+
+	&.iw-rank-first {
+		border-color: var(--chip-text, #D297FF);
+		background: rgba(210, 151, 255, 0.05);
+	}
+}
+
+.iw-rank-pos {
+	min-width: 28px;
+	text-align: center;
+	font-size: 0.82rem;
+	font-weight: 700;
+	color: var(--secondary-info-fg, #666);
+
+	&.iw-pos-1 { color: var(--chip-text, #D297FF); font-size: 1rem; }
+	&.iw-pos-2 { color: #aaa; }
+	&.iw-pos-3 { color: #888; }
+}
+
+.iw-rank-avi {
+	width: 36px;
+	height: 36px;
+	flex-shrink: 0;
+	overflow: hidden;
+	background: #272930;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	img { width: 100%; height: 100%; object-fit: cover; }
+}
+
+.iw-rank-init {
+	font-size: 0.75rem;
+	font-weight: 700;
+	color: var(--chip-text, #D297FF);
+	letter-spacing: 0.05em;
+}
+
+.iw-rank-info {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+.iw-rank-name {
+	font-size: 0.88rem;
+	font-weight: 600;
+	color: var(--title-fg, #fff);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.iw-rank-meta {
+	font-size: 0.72rem;
+	color: var(--secondary-info-fg, #888);
+}
+
+.iw-rank-toggle {
+	background: none;
+	border: none;
+	color: var(--secondary-info-fg, #888);
+	font-size: 0.78rem;
+	cursor: pointer;
+	padding: 0;
+	text-align: left;
+	&:hover { color: var(--title-fg, #fff); }
+}
+</style>

package/components/indie-wall/MuralCanvas.vue

@@ -0,0 +1,481 @@
+<script setup lang="ts">
+interface WallShape {
+	width: number
+	height: number
+}
+
+interface Supporter {
+	id?: number | string
+	x: number
+	y: number
+	width?: number
+	height?: number
+	background_color?: string
+	image_url?: string
+	[k: string]: any
+}
+
+interface SelectionRect {
+	x: number
+	y: number
+	w: number
+	h: number
+}
+
+const props = withDefaults(defineProps<{
+	wall: WallShape | null
+	supporters: Supporter[]
+	selection?: SelectionRect | null
+	interactive?: boolean
+	height?: number
+	preselect?: { x: number; y: number } | null
+}>(), {
+	selection: null,
+	interactive: true,
+	height: 480,
+	preselect: null,
+})
+
+const emit = defineEmits<{
+	(e: 'tap-empty', coord: { x: number; y: number }): void
+	(e: 'tap-supporter', supporter: Supporter): void
+	(e: 'hover-supporter', payload: { supporter: Supporter | null; clientX: number; clientY: number }): void
+}>()
+
+const wrapperRef = ref<HTMLElement | null>(null)
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+let ctx: CanvasRenderingContext2D | null = null
+const canvasReady = ref(false)
+
+const scale = ref(1)
+const translateX = ref(0)
+const translateY = ref(0)
+const minScale = ref(0.5)
+
+const GRID_THRESHOLD = 4
+const DRAG_THRESHOLD = 5
+
+const interaction = reactive({
+	isPanning: false,
+	hasDragged: false,
+	isPinching: false,
+	startX: 0,
+	startY: 0,
+	panStartX: 0,
+	panStartY: 0,
+	initialPinchDistance: 0,
+})
+
+const occupationMap = new Map<string, Supporter>()
+const imageCache = new Map<string, HTMLImageElement>()
+const imageLoadingSet = new Set<string>()
+let rafId: number | null = null
+
+function scheduleRedraw() {
+	if (rafId !== null) return
+	rafId = requestAnimationFrame(() => {
+		rafId = null
+		drawCanvas()
+	})
+}
+
+function rebuildOccupationMap() {
+	occupationMap.clear()
+	for (const s of props.supporters) {
+		const pw = s.width || 1
+		const ph = s.height || 1
+		for (let row = s.y; row < s.y + ph; row++) {
+			for (let col = s.x; col < s.x + pw; col++) {
+				occupationMap.set(`${col},${row}`, s)
+			}
+		}
+	}
+}
+
+function cacheImage(src: string) {
+	if (imageCache.has(src) || imageLoadingSet.has(src)) return
+	imageLoadingSet.add(src)
+	const img = new Image()
+	img.onload = () => {
+		imageCache.set(src, img)
+		imageLoadingSet.delete(src)
+		if (canvasReady.value) scheduleRedraw()
+	}
+	img.onerror = () => imageLoadingSet.delete(src)
+	img.src = src
+}
+
+function constrainPan(targetScale: number, tx: number, ty: number) {
+	if (!wrapperRef.value || !props.wall) return { x: tx, y: ty }
+	const cW = wrapperRef.value.clientWidth
+	const cH = wrapperRef.value.clientHeight
+	const sw = props.wall.width * targetScale
+	const sh = props.wall.height * targetScale
+	return {
+		x: sw <= cW ? (cW - sw) / 2 : Math.max(cW - sw, Math.min(tx, 0)),
+		y: sh <= cH ? (cH - sh) / 2 : Math.max(cH - sh, Math.min(ty, 0)),
+	}
+}
+
+function drawCanvas() {
+	if (!ctx || !canvasRef.value || !props.wall) return
+	const canvas = canvasRef.value
+	const c = ctx
+	c.save()
+	c.clearRect(0, 0, canvas.width, canvas.height)
+	c.translate(translateX.value, translateY.value)
+	c.scale(scale.value, scale.value)
+
+	const W = props.wall.width
+	const H = props.wall.height
+
+	c.fillStyle = '#0E0F13'
+	c.fillRect(0, 0, W, H)
+
+	if (scale.value >= GRID_THRESHOLD) {
+		c.strokeStyle = 'rgba(255,255,255,0.07)'
+		c.lineWidth = 1 / scale.value
+		const vx = -translateX.value / scale.value
+		const vy = -translateY.value / scale.value
+		const vw = canvas.width / scale.value
+		const vh = canvas.height / scale.value
+		const sx = Math.max(0, Math.floor(vx))
+		const ex = Math.min(W, Math.ceil(vx + vw))
+		const sy = Math.max(0, Math.floor(vy))
+		const ey = Math.min(H, Math.ceil(vy + vh))
+		c.beginPath()
+		for (let x = sx; x <= ex; x++) { c.moveTo(x, sy); c.lineTo(x, ey) }
+		for (let y = sy; y <= ey; y++) { c.moveTo(sx, y); c.lineTo(ex, y) }
+		c.stroke()
+	}
+
+	// Deduplicate by top-left cell — keep highest id (latest pixel) per position.
+	const dedupMap = new Map<string, typeof props.supporters[0]>()
+	for (const s of props.supporters) {
+		const key = `${s.x},${s.y}`
+		const existing = dedupMap.get(key)
+		if (!existing || Number(s.id) > Number(existing.id)) dedupMap.set(key, s)
+	}
+
+	for (const s of dedupMap.values()) {
+		const pw = s.width || 1
+		const ph = s.height || 1
+		if (s.image_url && imageCache.has(s.image_url)) {
+			c.imageSmoothingEnabled = false
+			c.drawImage(imageCache.get(s.image_url)!, s.x, s.y, pw, ph)
+		} else {
+			c.fillStyle = s.background_color || '#FDB215'
+			c.fillRect(s.x, s.y, pw, ph)
+			if (s.image_url) cacheImage(s.image_url)
+		}
+	}
+
+	if (props.selection) {
+		const r = props.selection
+		c.fillStyle = 'rgba(253,178,21,0.28)'
+		c.strokeStyle = '#FDB215'
+		c.lineWidth = 1.5 / scale.value
+		c.fillRect(r.x, r.y, r.w, r.h)
+		c.strokeRect(r.x, r.y, r.w, r.h)
+	}
+
+	c.restore()
+}
+
+function getWorldCoords(clientX: number, clientY: number) {
+	if (!canvasRef.value) return { x: 0, y: 0 }
+	const r = canvasRef.value.getBoundingClientRect()
+	return {
+		x: Math.floor((clientX - r.left - translateX.value) / scale.value),
+		y: Math.floor((clientY - r.top - translateY.value) / scale.value),
+	}
+}
+
+function handleTap(clientX: number, clientY: number) {
+	if (!props.interactive || !props.wall) return
+	const { x, y } = getWorldCoords(clientX, clientY)
+	if (x < 0 || y < 0 || x >= props.wall.width || y >= props.wall.height) return
+	const occupied = occupationMap.get(`${x},${y}`)
+	if (occupied) {
+		emit('tap-supporter', occupied)
+		return
+	}
+	emit('tap-empty', { x, y })
+}
+
+function handleMouseDown(e: MouseEvent) {
+	if (e.button !== 0) return
+	e.preventDefault()
+	interaction.isPanning = true
+	interaction.hasDragged = false
+	interaction.startX = e.clientX
+	interaction.startY = e.clientY
+	interaction.panStartX = translateX.value
+	interaction.panStartY = translateY.value
+}
+
+function handleMouseMove(e: MouseEvent) {
+	if (interaction.isPanning) {
+		const dx = Math.abs(e.clientX - interaction.startX)
+		const dy = Math.abs(e.clientY - interaction.startY)
+		if (!interaction.hasDragged && (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD)) {
+			interaction.hasDragged = true
+		}
+		if (interaction.hasDragged) {
+			const c = constrainPan(scale.value,
+				interaction.panStartX + (e.clientX - interaction.startX),
+				interaction.panStartY + (e.clientY - interaction.startY))
+			translateX.value = c.x
+			translateY.value = c.y
+		}
+		return
+	}
+	// Hover detection when not panning
+	const { x, y } = getWorldCoords(e.clientX, e.clientY)
+	const supp = occupationMap.get(`${x},${y}`) || null
+	emit('hover-supporter', { supporter: supp, clientX: e.clientX, clientY: e.clientY })
+}
+
+function handleMouseUp(e: MouseEvent) {
+	if (!interaction.isPanning) return
+	if (!interaction.hasDragged) handleTap(e.clientX, e.clientY)
+	interaction.isPanning = false
+	interaction.hasDragged = false
+}
+
+function handleMouseLeave() {
+	interaction.isPanning = false
+	interaction.hasDragged = false
+	emit('hover-supporter', { supporter: null, clientX: 0, clientY: 0 })
+}
+
+function handleWheel(e: WheelEvent) {
+	e.preventDefault()
+	const r = canvasRef.value!.getBoundingClientRect()
+	applyZoom(e.deltaY < 0 ? 1.2 : 1 / 1.2, { x: e.clientX - r.left, y: e.clientY - r.top })
+}
+
+function handleTouchStart(e: TouchEvent) {
+	e.preventDefault()
+	if (e.touches.length === 2) {
+		interaction.isPinching = true
+		interaction.hasDragged = false
+		interaction.initialPinchDistance = Math.hypot(
+			e.touches[0].clientX - e.touches[1].clientX,
+			e.touches[0].clientY - e.touches[1].clientY,
+		)
+	} else {
+		interaction.isPanning = true
+		interaction.hasDragged = false
+		interaction.startX = e.touches[0].clientX
+		interaction.startY = e.touches[0].clientY
+		interaction.panStartX = translateX.value
+		interaction.panStartY = translateY.value
+	}
+}
+
+function handleTouchMove(e: TouchEvent) {
+	e.preventDefault()
+	if (interaction.isPinching && e.touches.length === 2) {
+		const d = Math.hypot(
+			e.touches[0].clientX - e.touches[1].clientX,
+			e.touches[0].clientY - e.touches[1].clientY,
+		)
+		if (!interaction.initialPinchDistance) return
+		const r = canvasRef.value!.getBoundingClientRect()
+		const center = {
+			x: (e.touches[0].clientX + e.touches[1].clientX) / 2 - r.left,
+			y: (e.touches[0].clientY + e.touches[1].clientY) / 2 - r.top,
+		}
+		applyZoom(d / interaction.initialPinchDistance, center)
+		interaction.initialPinchDistance = d
+	} else if (interaction.isPanning && e.touches.length === 1) {
+		const dx = Math.abs(e.touches[0].clientX - interaction.startX)
+		const dy = Math.abs(e.touches[0].clientY - interaction.startY)
+		if (!interaction.hasDragged && (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD)) {
+			interaction.hasDragged = true
+		}
+		if (interaction.hasDragged) {
+			const c = constrainPan(scale.value,
+				interaction.panStartX + (e.touches[0].clientX - interaction.startX),
+				interaction.panStartY + (e.touches[0].clientY - interaction.startY))
+			translateX.value = c.x
+			translateY.value = c.y
+		}
+	}
+}
+
+function handleTouchEnd(e: TouchEvent) {
+	if (!interaction.hasDragged && !interaction.isPinching && e.changedTouches.length > 0) {
+		handleTap(interaction.startX, interaction.startY)
+	}
+	interaction.isPanning = false
+	interaction.isPinching = false
+	interaction.hasDragged = false
+}
+
+function applyZoom(factor: number, center: { x: number; y: number }) {
+	const newScale = Math.max(minScale.value, Math.min(scale.value * factor, 50))
+	if (newScale === scale.value) return
+	const worldX = (center.x - translateX.value) / scale.value
+	const worldY = (center.y - translateY.value) / scale.value
+	const c = constrainPan(newScale, center.x - worldX * newScale, center.y - worldY * newScale)
+	scale.value = newScale
+	translateX.value = c.x
+	translateY.value = c.y
+}
+
+function zoomIn() {
+	if (!wrapperRef.value) return
+	applyZoom(1.2, { x: wrapperRef.value.clientWidth / 2, y: wrapperRef.value.clientHeight / 2 })
+}
+
+function zoomOut() {
+	if (!wrapperRef.value) return
+	applyZoom(1 / 1.2, { x: wrapperRef.value.clientWidth / 2, y: wrapperRef.value.clientHeight / 2 })
+}
+
+function resetView() {
+	if (!wrapperRef.value || !props.wall) return
+	scale.value = minScale.value
+	const c = constrainPan(scale.value, 0, 0)
+	translateX.value = c.x
+	translateY.value = c.y
+	scheduleRedraw()
+}
+
+function initCanvas() {
+	if (!wrapperRef.value || !canvasRef.value || !props.wall) return
+	const cw = wrapperRef.value.clientWidth
+	const ch = props.height
+	canvasRef.value.width = cw
+	canvasRef.value.height = ch
+	ctx = canvasRef.value.getContext('2d')
+	minScale.value = Math.min(cw / props.wall.width, ch / props.wall.height)
+	scale.value = minScale.value
+	const c = constrainPan(scale.value, 0, 0)
+	translateX.value = c.x
+	translateY.value = c.y
+	canvasReady.value = true
+	scheduleRedraw()
+
+	if (props.preselect) {
+		const { x, y } = props.preselect
+		if (props.wall && x >= 0 && y >= 0 && x < props.wall.width && y < props.wall.height) {
+			emit('tap-empty', { x, y })
+		}
+	}
+}
+
+watch(() => props.wall, async (newWall) => {
+	if (!newWall) return
+	await nextTick()
+	await nextTick()
+	initCanvas()
+})
+
+watch([
+	() => props.supporters,
+	() => props.selection,
+	scale,
+	translateX,
+	translateY,
+	canvasReady,
+], () => {
+	rebuildOccupationMap()
+	if (canvasReady.value) scheduleRedraw()
+}, { deep: true })
+
+onMounted(() => {
+	rebuildOccupationMap()
+	if (props.wall) {
+		nextTick(() => initCanvas())
+	}
+	window.addEventListener('resize', initCanvas)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', initCanvas)
+	if (rafId !== null) cancelAnimationFrame(rafId)
+})
+
+defineExpose({ zoomIn, zoomOut, resetView })
+</script>
+
+<template>
+	<div class="mc-frame" :class="{ 'mc-non-interactive': !interactive }">
+		<div v-if="interactive" class="mc-toolbar">
+			<button class="mc-zoom" type="button" @click="zoomIn" aria-label="Zoom in">+</button>
+			<button class="mc-zoom" type="button" @click="resetView" aria-label="Reset">⊙</button>
+			<button class="mc-zoom" type="button" @click="zoomOut" aria-label="Zoom out">−</button>
+		</div>
+		<div ref="wrapperRef" class="mc-wrapper" :style="{ height: height + 'px' }">
+			<canvas
+				ref="canvasRef"
+				:style="{ cursor: interactive ? (interaction.isPanning ? 'grabbing' : 'crosshair') : 'default' }"
+				@wheel.prevent="interactive && handleWheel($event)"
+				@mousedown="interactive && handleMouseDown($event)"
+				@mousemove="interactive && handleMouseMove($event)"
+				@mouseup="interactive && handleMouseUp($event)"
+				@mouseleave="interactive && handleMouseLeave()"
+				@touchstart.prevent="interactive && handleTouchStart($event)"
+				@touchmove.prevent="interactive && handleTouchMove($event)"
+				@touchend="interactive && handleTouchEnd($event)"
+				@touchcancel="interactive && handleTouchEnd($event)"
+			/>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.mc-frame {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 100%;
+}
+
+.mc-toolbar {
+	display: flex;
+	gap: 2px;
+}
+
+.mc-zoom {
+	width: 32px;
+	height: 32px;
+	background: #1e2028;
+	border: 1px solid #272930;
+	color: var(--secondary-info-fg, #aaa);
+	font-size: 1rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	line-height: 1;
+	padding: 0;
+
+	&:hover {
+		background: #272930;
+		color: var(--title-fg, #fff);
+	}
+}
+
+.mc-wrapper {
+	user-select: none;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #1e2028;
+	background: #0E0F13;
+	width: 100%;
+}
+
+canvas {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.mc-non-interactive canvas {
+	pointer-events: none;
+}
+</style>