Merge pull request #104 from flo-bit/various-fixes

add cards at current position (#76)

docs/Selfhosting.md

···
 ]
 ```
 
-5. (maybe necessary? will improve performance at least) create your own kv store by running `npx wrangler kv namespace create USER_DATA_CACHE` and when asked add it to the `wrangler.jsonc`
+5. optionally to improve performance: create your own kv store by running `npx wrangler kv namespace create USER_DATA_CACHE` and when asked add it to the `wrangler.jsonc`
 
 DONE :) your blento should be live after a minute or two at `your-cloudflare-worker-or-custom-domain.com` and you can edit it by signing in with your bluesky account at `your-cloudflare-worker-or-custom-domain.com/edit`
 
 6. some cards need their own additional env keys, if you have these cards in your profile, create your keys and add them to your cloudflare worker
 
-- github profile: GITHUB_TOKEN
+- github profile: GITHUB_TOKEN (token with public_repo access)
 - map: PUBLIC_MAPBOX_TOKEN

src/lib/cards/GameCards/DinoGameCard/index.ts

···
 		card.mobileW = 8;
 		card.mobileH = 6;
 		card.cardData = {};
-	}
+	},
+	canHaveLabel: true
 } as CardDefinition & { type: 'dino-game' };

src/lib/cards/GameCards/TetrisCard/index.ts

···
 		card.mobileH = 12;
 		card.cardData = {};
 	},
-	maxH: 10
+	maxH: 10,
+	canHaveLabel: true
 } as CardDefinition & { type: 'tetris' };

src/lib/helper.ts

···
 	);
 }
 
-export function setPositionOfNewItem(newItem: Item, items: Item[]) {
+export function setPositionOfNewItem(
+	newItem: Item,
+	items: Item[],
+	viewportCenter?: { gridY: number; isMobile: boolean }
+) {
+	if (viewportCenter) {
+		const { gridY, isMobile } = viewportCenter;
+
+		if (isMobile) {
+			// Place at viewport center Y
+			newItem.mobileY = Math.max(0, Math.round(gridY - newItem.mobileH / 2));
+			newItem.mobileY = Math.floor(newItem.mobileY / 2) * 2;
+
+			// Try to find a free X at this Y
+			let found = false;
+			for (
+				newItem.mobileX = 0;
+				newItem.mobileX <= COLUMNS - newItem.mobileW;
+				newItem.mobileX += 2
+			) {
+				if (!items.some((item) => overlaps(newItem, item, true))) {
+					found = true;
+					break;
+				}
+			}
+			if (!found) {
+				newItem.mobileX = 0;
+			}
+
+			// Desktop: derive from mobile
+			newItem.y = Math.max(0, Math.round(newItem.mobileY / 2));
+			found = false;
+			for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) {
+				if (!items.some((item) => overlaps(newItem, item, false))) {
+					found = true;
+					break;
+				}
+			}
+			if (!found) {
+				newItem.x = 0;
+			}
+		} else {
+			// Place at viewport center Y
+			newItem.y = Math.max(0, Math.round(gridY - newItem.h / 2));
+
+			// Try to find a free X at this Y
+			let found = false;
+			for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) {
+				if (!items.some((item) => overlaps(newItem, item, false))) {
+					found = true;
+					break;
+				}
+			}
+			if (!found) {
+				newItem.x = 0;
+			}
+
+			// Mobile: derive from desktop
+			newItem.mobileY = Math.max(0, Math.round(newItem.y * 2));
+			found = false;
+			for (
+				newItem.mobileX = 0;
+				newItem.mobileX <= COLUMNS - newItem.mobileW;
+				newItem.mobileX += 2
+			) {
+				if (!items.some((item) => overlaps(newItem, item, true))) {
+					found = true;
+					break;
+				}
+			}
+			if (!found) {
+				newItem.mobileX = 0;
+			}
+		}
+		return;
+	}
+
 	let foundPosition = false;
 	while (!foundPosition) {
 		for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) {

src/lib/website/EditableWebsite.svelte

···
 
 	let maxHeight = $derived(items.reduce((max, item) => Math.max(max, getY(item) + getH(item)), 0));
 
+	function getViewportCenterGridY(): { gridY: number; isMobile: boolean } | undefined {
+		if (!container) return undefined;
+		const rect = container.getBoundingClientRect();
+		const currentMargin = isMobile ? mobileMargin : margin;
+		const cellSize = (rect.width - currentMargin * 2) / COLUMNS;
+		const viewportCenterY = window.innerHeight / 2;
+		const gridY = (viewportCenterY - rect.top - currentMargin) / cellSize;
+		return { gridY, isMobile };
+	}
+
 	function newCard(type: string = 'link', cardData?: any) {
 		// close sidebar if open
 		const popover = document.getElementById('mobile-menu');
···
 		if (!newItem.item) return;
 		const item = newItem.item;
 
-		setPositionOfNewItem(item, items);
+		const viewportCenter = getViewportCenterGridY();
+		setPositionOfNewItem(item, items, viewportCenter);
 
 		items = [...items, item];
+
+		// Push overlapping items down, then compact to fill gaps
+		fixCollisions(items, item, false, true);
+		fixCollisions(items, item, true, true);
+		compactItems(items, false);
+		compactItems(items, true);
 
 		newItem = {};
 
···
 		}
 	}
 
+	function getImageDimensions(src: string): Promise<{ width: number; height: number }> {
+		return new Promise((resolve) => {
+			const img = new Image();
+			img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+			img.onerror = () => resolve({ width: 1, height: 1 });
+			img.src = src;
+		});
+	}
+
+	function getBestGridSize(
+		imageWidth: number,
+		imageHeight: number,
+		candidates: [number, number][]
+	): [number, number] {
+		const imageRatio = imageWidth / imageHeight;
+		let best: [number, number] = candidates[0];
+		let bestDiff = Infinity;
+
+		for (const candidate of candidates) {
+			const gridRatio = candidate[0] / candidate[1];
+			const diff = Math.abs(Math.log(imageRatio) - Math.log(gridRatio));
+			if (diff < bestDiff) {
+				bestDiff = diff;
+				best = candidate;
+			}
+		}
+
+		return best;
+	}
+
+	const desktopSizeCandidates: [number, number][] = [
+		[2, 2],
+		[2, 4],
+		[4, 2],
+		[4, 4],
+		[4, 6],
+		[6, 4]
+	];
+	const mobileSizeCandidates: [number, number][] = [
+		[4, 4],
+		[4, 6],
+		[4, 8],
+		[6, 4],
+		[8, 4],
+		[8, 6]
+	];
+
 	async function processImageFile(file: File, gridX?: number, gridY?: number) {
 		const isGif = file.type === 'image/gif';
 
···
 			image: { blob: file, objectUrl }
 		};
 
-		// If grid position is provided
+		// Size card based on image aspect ratio
+		const { width, height } = await getImageDimensions(objectUrl);
+		const [dw, dh] = getBestGridSize(width, height, desktopSizeCandidates);
+		const [mw, mh] = getBestGridSize(width, height, mobileSizeCandidates);
+		item.w = dw;
+		item.h = dh;
+		item.mobileW = mw;
+		item.mobileH = mh;
+
+		// If grid position is provided (image dropped on grid)
 		if (gridX !== undefined && gridY !== undefined) {
 			if (isMobile) {
 				item.mobileX = gridX;
 				item.mobileY = gridY;
-				// Find valid desktop position
-				findValidPosition(item, items, false);
+				// Derive desktop Y from mobile
+				item.x = Math.floor((COLUMNS - item.w) / 2);
+				item.x = Math.floor(item.x / 2) * 2;
+				item.y = Math.max(0, Math.round(gridY / 2));
 			} else {
 				item.x = gridX;
 				item.y = gridY;
-				// Find valid mobile position
-				findValidPosition(item, items, true);
+				// Derive mobile Y from desktop
+				item.mobileX = Math.floor((COLUMNS - item.mobileW) / 2);
+				item.mobileX = Math.floor(item.mobileX / 2) * 2;
+				item.mobileY = Math.max(0, Math.round(gridY * 2));
 			}
 
 			items = [...items, item];
 			fixCollisions(items, item, isMobile);
+			fixCollisions(items, item, !isMobile);
 		} else {
-			setPositionOfNewItem(item, items);
+			const viewportCenter = getViewportCenterGridY();
+			setPositionOfNewItem(item, items, viewportCenter);
 			items = [...items, item];
+			fixCollisions(items, item, false, true);
+			fixCollisions(items, item, true, true);
+			compactItems(items, false);
+			compactItems(items, true);
 		}
 
 		await tick();
···
 			}
 		}
 
-		for (const file of imageFiles) {
-			await processImageFile(file, gridX, gridY);
-
-			// Move to next cell position
-			const cardW = isMobile ? 4 : 2;
-			gridX += cardW;
-			if (gridX + cardW > COLUMNS) {
-				gridX = 0;
-				gridY += isMobile ? 4 : 2;
+		for (let i = 0; i < imageFiles.length; i++) {
+			// First image gets the drop position, rest use normal placement
+			if (i === 0) {
+				await processImageFile(imageFiles[i], gridX, gridY);
+			} else {
+				await processImageFile(imageFiles[i]);
 			}
 		}
 	}
···
 			objectUrl
 		};
 
-		setPositionOfNewItem(item, items);
+		const viewportCenter = getViewportCenterGridY();
+		setPositionOfNewItem(item, items, viewportCenter);
 		items = [...items, item];
+		fixCollisions(items, item, false, true);
+		fixCollisions(items, item, true, true);
+		compactItems(items, false);
+		compactItems(items, true);
 
 		await tick();
 
···
 						bind:item={items[i]}
 						ondelete={() => {
 							items = items.filter((it) => it !== item);
-							compactItems(items, isMobile);
+							compactItems(items, false);
+							compactItems(items, true);
 						}}
 						onsetsize={(newW: number, newH: number) => {
 							if (isMobile) {