i’m a full-time high school student who really likes making games. i also do visual art, video editing, animation, and a lot of other stuff.
I also work for drft. Collective as a VFX artist and for USCALS Team as a video-games developer.
const containers = [ document.querySelector('#container04'), document.querySelector('#container06'), document.querySelector('#container02'), document.querySelector('#container05') ]; const dividers = [ document.querySelector('#divider03'), document.querySelector('#divider06'), document.querySelector('#divider02'), document.querySelector('#divider05') ]; let isDragging = false; let startMouseX, startMouseY; let startX = 0, startY = 0; let activeIndex = null; let zDepth = 9; dividers.forEach((divider, i) => { divider.addEventListener('mousedown', e => { isDragging = true; divider.style.cursor = "grabbing"; zDepth++; activeIndex = i; containers[activeIndex].style.zIndex = zDepth.toString(); startMouseX = e.clientX; startMouseY = e.clientY; const style = getComputedStyle(containers[i]); const matrix = new DOMMatrixReadOnly(style.transform); startX = matrix.m41; startY = matrix.m42; e.preventDefault(); }); }); document.addEventListener('mousemove', e => { if (!isDragging || activeIndex == null) return; const dx = e.clientX - startMouseX; const dy = e.clientY - startMouseY; containers[activeIndex].style.setProperty('--x', `${startX + dx}px`); containers[activeIndex].style.setProperty('--y', `${startY + dy}px`); }); document.addEventListener('mouseup', () => { if (dividers[activeIndex] != null){ dividers[activeIndex].style.cursor = "grab"; } isDragging = false; activeIndex = null; });
const container = document.querySelector('#container03'); const divider = document.querySelector('#divider01'); const thumbnails = document.querySelectorAll('.thumbnail'); let _isDragging = false; let _startMouseX, _startMouseY; let _startX = 0, _startY = 0; let _zDepth = 9; let activeThumbnail = null; thumbnails.forEach(thumbnail =>{ thumbnail.style.setProperty('--x', `${_startX}px`); thumbnail.style.setProperty('--y', `${_startY}px`); thumbnail.addEventListener('mousedown', e => { activeThumbnail = thumbnail; _zDepth++; activeThumbnail.style.zIndex = _zDepth.toString(); activeThumbnail.style.cursor = "grabbing"; _startMouseX = e.clientX; _startMouseY = e.clientY; const style = getComputedStyle(activeThumbnail); const matrix = new DOMMatrixReadOnly(style.transform); _startX = matrix.m41; _startY = matrix.m42; e.preventDefault(); }); }); document.addEventListener('mousemove', e => { if (!activeThumbnail) return; const dx = e.clientX - _startMouseX; const dy = e.clientY - _startMouseY; activeThumbnail.style.setProperty('--x', `${_startX + dx}px`); activeThumbnail.style.setProperty('--y', `${_startY + dy}px`); }); document.addEventListener('mouseup', () => { if (!activeThumbnail) return; activeThumbnail.style.cursor = "grab"; activeThumbnail = null; }); divider.addEventListener('mousedown', e => { _isDragging = true; divider.style.cursor = "grabbing"; _startMouseX = e.clientX; _startMouseY = e.clientY; const style = getComputedStyle(container); const matrix = new DOMMatrixReadOnly(style.transform); _startX = matrix.m41; _startY = matrix.m42; e.preventDefault(); }); document.addEventListener('mousemove', e => { if (!_isDragging) return; const dx = e.clientX - _startMouseX; const dy = e.clientY - _startMouseY; container.style.setProperty('--x', `${_startX + dx}px`); container.style.setProperty('--y', `${_startY + dy}px`); }); document.addEventListener('mouseup', () => { divider.style.cursor = "grab"; _isDragging = false; });
