diff --git a/src/components/ImageUpload.tsx b/src/components/ImageUpload.tsx index 6d8f34e..6d647ce 100644 --- a/src/components/ImageUpload.tsx +++ b/src/components/ImageUpload.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import './ImageUpload.css'; import { FirebaseStorage, ref, uploadBytes, list, getDownloadURL } from 'firebase/storage'; import { v4 } from 'uuid'; @@ -13,6 +13,30 @@ const ImageUpload = ({ storage }: ImageUploadProps) => { const [imageList, setImageList] = useState([]); const [isUploading, setIsUploading] = useState(false); + //picture collage on hover gameplan: + //only want to track cursor/pointer x and y when inside collage container (className=imageUploadBottom) + //pin the lead image to the x,y position (cursor) and fade the tail images out as a trail left behind the lead/active image + + //track index changing without rendering with useRef hook + const leadIndexRef = useRef(0); + const leadXYRef = useRef([0, 0]); + + //grab uploaded images out of DOM tree to dynamically style with mouse movement + const imagesFromDOM = Array.from(document.getElementsByClassName('imgUpload')) as HTMLElement[]; + + //activate/show images dynamically handler + const activateImg = (leadImg: HTMLElement, x: number, y: number): void => { + leadImg.style.left = `${x}px`; + leadImg.style.top = `${y}px`; + leadImg.style.opacity = '1.0'; + // leadImg.style.display = 'flex'; + }; + + const deactivateImg = (tailImg: HTMLElement): void => { + tailImg.style.opacity = `${(Math.random() * 0.5) + 0.1}`; + // tailImg.style.display = 'none'; + }; + useEffect(() => { list(ref(storage, 'images/'), { maxResults: 20 }).then((response) => { response.items.forEach((item) => { @@ -23,7 +47,7 @@ const ImageUpload = ({ storage }: ImageUploadProps) => { }) }, [imageList, storage]); - const uploadImage = () => { + const uploadImage = (): void => { if (!imageUpload) return; const imageRef = ref(storage, `images/${getTimestamp(new Date())}_${v4()}`); if (imageRef && imageUpload) { @@ -38,7 +62,9 @@ const ImageUpload = ({ storage }: ImageUploadProps) => { const { files } = event.currentTarget; const file = files?.length ? files[0] : null; setImageUpload(file); - } + }; + + const imgUrls = Array.from(new Set(imageList)); return (
@@ -55,8 +81,33 @@ const ImageUpload = ({ storage }: ImageUploadProps) => { {isUploading ? 'Uploading...' : 'Upload'}
-
- {Array.from(new Set(imageList)).map((url, id) => memory snapshot)} +
{ + const [prevX, prevY] = leadXYRef.current; + const [curX, curY] = [e.clientX, e.clientY]; + //perform position and render changes after x,y moves 100px + if (Math.hypot(curX - prevX, curY - prevY) > 100) { + //%wraps index around so lead img index cycles + const lead = imagesFromDOM[leadIndexRef.current % imagesFromDOM.length]; + activateImg(lead, e.clientX, e.clientY); + + //leave a trail of images behind lead/cursor image + const tail = imagesFromDOM[(leadIndexRef.current - 1) % imagesFromDOM.length]; + if (tail) deactivateImg(tail); + + //update ref pointers, useRef avoids â–²state-based re-renders + leadIndexRef.current += 1; + leadXYRef.current = [ curX, curY ]; + } + }} + onMouseLeave={(e) => { + imagesFromDOM.forEach(img => { + img.style.display = 'flex'; + img.style.opacity = '1.0'; + }); + }} + > + {imgUrls.map((url, id) => memory snapshot)}
);