litruv/lit.ruv.wtf
1
0
Fork 0
mirror of https://github.com/litruv/lit.ruv.wtf.git synced 2026-07-24 02:36:02 +10:00
Code Issues Packages Projects Releases Wiki Activity

removed logging

Browse Source
This commit is contained in:
Litruv
2025-06-16 10:06:07 +10:00
parent f95da9d4e4
commit 808a92da07
2 changed files with 9 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
website/main.js
View File

@@ -37,22 +37,16 @@ let lastMediaVolume = 1;
// Define attachHoverListeners function
function attachHoverListeners(postElement) {
// The base rotation is what was used for the loading animation.
// It's stored in the CSS custom property '--post-rotation'.
const baseRotation = postElement.style.getPropertyValue('--post-rotation');
postElement.addEventListener('mouseenter', function () {
postElement.style.zIndex = 100;
// Apply specific transition for this hover effect
postElement.style.transition = "transform 0.22s cubic-bezier(.5,1.5,.5,1), box-shadow 0.22s cubic-bezier(.5,1.5,.5,1)";
// Hover transform: new random rotation + scale
postElement.style.transform = `rotate(${getRandomRotation()}deg) scale(1.1)`;
});
postElement.addEventListener('mouseleave', function () {
// Apply specific transition for unhover
postElement.style.transition = "transform 0.18s cubic-bezier(.5,0,.5,1), box-shadow 0.18s cubic-bezier(.5,0,.5,1)";
// Return to base rotation + scale(1)
postElement.style.transform = `rotate(${baseRotation || '0deg'}) scale(1)`;
postElement.style.zIndex = 1;
});
@@ -61,12 +55,9 @@ function attachHoverListeners(postElement) {
function createPost(t) {
const post = document.createElement("div");
post.className = "post";
// Set initial transform. This will be used by addPostToLayout to set --post-rotation.
post.style.transform = `rotate(${getRandomRotation()}deg)`;
post.style.backgroundColor = getPostItColorByDate(t.createdAt);
// Hover listeners are now attached in addPostToLayout after the loading animation.
const link = document.createElement("a");
link.href = t.url;
link.target = "_blank";
@@ -217,8 +208,6 @@ function createPost(t) {
link.href = t.url;
link.appendChild(post);
console.log(`[Main] Created post with ${t.embed.length} embeds`);
return link;
}
@@ -418,29 +407,24 @@ function addPostToLayout(postEl, zIndex) {
if (!layoutColumns) return;
const col = getShortestColumn(layoutColumns);
const postDiv = postEl.firstElementChild; // This is the .post div
const postDiv = postEl.firstElementChild;
// Store the current rotation (from postDiv.style.transform) for the animation
const currentTransform = postDiv.style.transform;
const rotationMatch = currentTransform.match(/rotate\(([-\d.]+deg)\)/);
const rotation = rotationMatch ? rotationMatch[1] : '0deg';
postDiv.style.setProperty('--post-rotation', rotation); // Used by slideUpFadeIn animation
postDiv.style.setProperty('--post-rotation', rotation);
postDiv.style.zIndex = zIndex;
// Add loading animation class
postDiv.classList.add('loading');
col.appendChild(postEl);
// Remove animation class after animation completes AND THEN attach hover listeners
setTimeout(() => {
postDiv.classList.remove('loading');
// Now that the loading animation is done, attach hover listeners
attachHoverListeners(postDiv);
}, 600); // Duration of slideUpFadeIn animation (0.6s)
}, 600);
// Add tape only for this specific post
setTimeout(() => {
const imgs = postEl.querySelectorAll('img.image-placeholder');
if (imgs.length > 0 && window.addTapeToPost) {
@@ -499,7 +483,6 @@ async function processPostQueue() {
function layoutPosts(postElements) {
if (document.fullscreenElement && document.fullscreenElement.tagName === "VIDEO") {
console.log('[Main] Skipping layoutPosts: video is fullscreen');
return;
}
const numCols = getNumColumns();
@@ -510,7 +493,6 @@ function layoutPosts(postElements) {
col.appendChild(postEl);
});
console.log('[Main] Posts laid out, adding tape for all images');
setTimeout(() => {
if (window.addTapeToImages) {
window.addTapeToImages();
@@ -563,8 +545,6 @@ async function fetchPosts() {
};
});
console.log(`[Main] Fetched ${posts.length} posts, ${posts.filter(p => p.embed.some(e => e.type === "image")).length} have images, ${posts.filter(p => p.embed.some(e => e.type === "video")).length} have videos`);
// Initialize layout columns
const numCols = getNumColumns();
layoutColumns = createColumns(numCols);
@@ -588,7 +568,6 @@ async function fetchPosts() {
window.addEventListener("resize", () => {
if (document.fullscreenElement && document.fullscreenElement.tagName === "VIDEO") {
console.log('[Main] Skipping resize layout: video is fullscreen');
return;
}
if (postElementsCache && layoutColumns) {

59
website/tape.js
View File

@@ -1,34 +1,24 @@
function addTapeToImages() {
const images = document.querySelectorAll('.image-placeholder');
console.log(`[Tape] Found ${images.length} images to add tape to`);
if (images.length === 0) {
console.warn('[Tape] No .image-placeholder elements found');
return;
}
images.forEach((image, index) => {
console.log(`[Tape] Processing image ${index + 1}/${images.length}`);
// Check if image already has tape
const existingTape = image.querySelectorAll('.tape');
if (existingTape.length > 0) {
console.log(`[Tape] Image ${index + 1} already has tape, skipping`);
return;
}
// Ensure the image parent has relative positioning
const imageParent = image.parentElement;
if (imageParent && window.getComputedStyle(imageParent).position === 'static') {
imageParent.style.position = 'relative';
console.log(`[Tape] Set image parent to relative positioning`);
}
// Create two tape pieces
const tape1 = createTapeElement(index, 1);
const tape2 = createTapeElement(index, 2);
// Position based on pattern
const usePattern1 = index % 2 === 0;
if (usePattern1) {
positionTape(tape1, 'top-left');
@@ -38,11 +28,8 @@ function addTapeToImages() {
positionTape(tape2, 'bottom-left');
}
// Add to the image's parent container
imageParent.appendChild(tape1);
imageParent.appendChild(tape2);
console.log(`[Tape] Added tape to image ${index + 1} parent`);
});
}
@@ -50,9 +37,8 @@ function createTapeElement(imageIndex, tapeNumber) {
const tape = document.createElement('div');
tape.className = 'tape';
// Even chunkier tape: wider and much taller
const width = 60 + Math.random() * 20; // 60-80px
const height = 40 + Math.random() * 16; // 40-56px
const width = 60 + Math.random() * 20;
const height = 40 + Math.random() * 16;
tape.style.cssText = `
position: absolute;
@@ -70,15 +56,14 @@ function createTapeElement(imageIndex, tapeNumber) {
background-size: 4px 4px;
`;
console.log(`[Tape] Created tape element ${tapeNumber} for image ${imageIndex + 1}`);
return tape;
}
function positionTape(tape, corner) {
const randomOffset = () => Math.random() * 8 - 4; // -4 to 4px
const randomRotation = (Math.random() * 20 - 10); // -10 to 10 degrees
const OUT_X = 25; // px, how far out from the left/right
const OUT_Y = 18; // px, how far out from the top/bottom
const randomOffset = () => Math.random() * 8 - 4;
const randomRotation = (Math.random() * 20 - 10);
const OUT_X = 25;
const OUT_Y = 18;
switch (corner) {
case 'top-left':
@@ -102,57 +87,35 @@ function positionTape(tape, corner) {
tape.style.transform = `rotate(${-45 + randomRotation}deg)`;
break;
}
console.log(`[Tape] Positioned tape at ${corner}:`, {
top: tape.style.top,
bottom: tape.style.bottom,
left: tape.style.left,
right: tape.style.right,
transform: tape.style.transform
});
}
function refreshTape() {
console.log('[Tape] Refreshing tape - removing existing tape');
// Remove existing tape
const existingTape = document.querySelectorAll('.tape');
console.log(`[Tape] Found ${existingTape.length} existing tape elements to remove`);
existingTape.forEach(tape => tape.remove());
console.log('[Tape] Re-adding tape to images');
addTapeToImages();
}
// Add tape to a specific post element
function addTapeToPost(postElement) {
const images = postElement.querySelectorAll('.image-placeholder');
console.log(`[Tape] Found ${images.length} images in post to add tape to`);
if (images.length === 0) {
return;
}
images.forEach((image, index) => {
// Check if image already has tape
const existingTape = image.parentElement.querySelectorAll('.tape');
if (existingTape.length > 0) {
console.log(`[Tape] Image ${index + 1} already has tape, skipping`);
return;
}
// Ensure the image parent has relative positioning
const imageParent = image.parentElement;
if (imageParent && window.getComputedStyle(imageParent).position === 'static') {
imageParent.style.position = 'relative';
}
// Create two tape pieces
const tape1 = createTapeElement(index, 1);
const tape2 = createTapeElement(index, 2);
// Position based on pattern
const usePattern1 = index % 2 === 0;
if (usePattern1) {
positionTape(tape1, 'top-left');
@@ -162,18 +125,12 @@ function addTapeToPost(postElement) {
positionTape(tape2, 'bottom-left');
}
// Add to the image's parent container
imageParent.appendChild(tape1);
imageParent.appendChild(tape2);
console.log(`[Tape] Added tape to image ${index + 1} in specific post`);
});
}
// Simple test function
function testSimpleTape() {
console.log('[Tape Test] Creating simple test...');
const firstImage = document.querySelector('.image-placeholder');
if (!firstImage) {
console.error('[Tape Test] No images found');
@@ -203,11 +160,9 @@ function testSimpleTape() {
testTape.textContent = 'TEST';
parent.appendChild(testTape);
console.log('[Tape Test] Added test tape to first image parent');
setTimeout(() => {
testTape.remove();
console.log('[Tape Test] Removed test tape');
}, 3000);
}
@@ -216,5 +171,3 @@ window.addTapeToImages = addTapeToImages;
window.addTapeToPost = addTapeToPost;
window.refreshTape = refreshTape;
window.testSimpleTape = testSimpleTape;
console.log('[Tape] Simple tape system loaded. Use window.testSimpleTape() to test.');