From eddba3b12c7ef71c3350f6764934b8dd03aa2cc0 Mon Sep 17 00:00:00 2001 From: thedivtagguy Date: Fri, 14 Feb 2025 17:49:52 +0530 Subject: [PATCH] style: mobile prototype --- src/lib/components/BannerPolygon.svelte | 52 +++++++++++++++++++- src/routes/+layout.svelte | 6 +++ src/routes/+page.svelte | 63 ++++++++++++++++--------- 3 files changed, 97 insertions(+), 24 deletions(-) diff --git a/src/lib/components/BannerPolygon.svelte b/src/lib/components/BannerPolygon.svelte index 51776f3..8e78d7f 100644 --- a/src/lib/components/BannerPolygon.svelte +++ b/src/lib/components/BannerPolygon.svelte @@ -25,9 +25,11 @@ } const POINT_COUNT = 150; + const MOBILE_POINT_COUNT = 50; const CURSOR_SIZE = 24; const CURSOR_TIMEOUT = 10000; const UPDATE_INTERVAL = 16; + const MOBILE_BREAKPOINT = 768; const colors = [ '#ee88b3', // pink '#a8bdf0', // light blue @@ -36,6 +38,9 @@ '#f89f72' // light salmon ]; + const getPointCount = () => + window.innerWidth < MOBILE_BREAKPOINT ? MOBILE_POINT_COUNT : POINT_COUNT; + const staticPoints: Point[] = Array.from({ length: POINT_COUNT }, () => ({ x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1000), y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1000) @@ -104,6 +109,30 @@ updateDataWithCursors(); } + function handleTouchMove(event: TouchEvent) { + event.preventDefault(); + const touch = event.touches[0]; + if (!touch) return; + + const rect = canvas.getBoundingClientRect(); + const x = touch.clientX - rect.left; + const y = touch.clientY - rect.top; + + cursorX = x; + cursorY = y; + + if (socket?.readyState === WebSocket.OPEN) { + socket.send( + JSON.stringify({ + x: x / width, + y: y / height + }) + ); + } + + updateDataWithCursors(); + } + function findIntersections(cells: any[]) { const cursorCells = cells.slice(0, Object.keys(otherCursors).length + 1); const vertices = new Map(); @@ -259,8 +288,10 @@ bind:clientWidth={width} bind:clientHeight={height} on:mousemove={handleMouseMove} + on:touchmove|preventDefault={handleTouchMove} + on:touchstart|preventDefault={handleTouchMove} role="banner" - class="relative h-screen cursor-none" + class="relative h-[100svh] cursor-none" > @@ -299,6 +330,9 @@ left: 0; pointer-events: none; will-change: transform; + @media (max-width: 768px) { + display: none; + } } :global(.cursor-icon) { @@ -356,4 +390,20 @@ .relative { cursor: none; } + + @media (max-width: 768px) { + .cursor-info { + font-size: 0.5rem; + left: 12px; + padding: 0.05rem 0.15rem; + } + + .flag { + font-size: 0.75rem; + } + + .location { + font-size: 0.5rem; + } + } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 50e9947..34595e4 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -51,4 +51,10 @@ padding: 12px 0; } } + + @media (max-width: 768px) { + main { + max-width: 100%; + } + } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3f90c93..307b1ff 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -10,22 +10,29 @@ Home +