Upload files to "js"

js/image.js

@@ -0,0 +1,279 @@
+// Configuration
+// ---------------------------------------------------------------------------------
+const config = {
+    logoSrc: 'img/logo.png',            // Path to the logo image
+    logoHeight: 50,                     // Logo height
+    backgroundColor: '#090909',         // Canvas background color
+    lineColor: '#159262',               // Default dashed line color
+    lineThickness: 3,                   // Dashed line thickness
+    randomizeYellowLines: true,         // Enable or disable random yellow lines
+    yellowLineColor: '#9d921d',         // Yellow line color
+    avatarBackgroundColor: '#090909',   // Background color behind the avatar
+    borderThickness: 5,                 // Border thickness around avatars
+    borderColor: '#1bec99',             // Border color around avatars
+    urlText: '[ Create your own at ccc.cyber.to ]', // Text to display on the canvas
+    urlFont: '16px monospace',          // Font for URL text
+    urlColor: '#159262',                // URL text color
+    avatarScale: 75,                    // Avatar scale percentage
+    drawMazeBackground: true,           // Whether to draw a random maze background
+    mazeColor: '#05130f',               // Color of the maze lines
+    mazeThickness: 2,                   // Thickness of the maze lines
+    drawRedLine: true,                  // Enable or disable the red line
+    redLineColor: '#FB2735',            // Red line color
+    consoleLogging: false,              // Enable or disable console logging
+};
+// ---------------------------------------------------------------------------------
+
+// Converts degrees to radians
+const toRad = (x) => {
+    if (config.consoleLogging) console.log('Function call: toRad');
+    return x * (Math.PI / 180);
+};
+
+const dist = [200, 330, 450]; // Distance of each user layer from the center
+const numb = [8, 15, 26]; // Number of users in each layer
+const radius = [64, 58, 50]; // Radius of avatars in each layer
+let userNum = 0; // Counter for the number of users rendered
+let remainingImg = 0; // Counter for remaining images to load
+let totalImg = 0; // Total images to load
+
+function render(users, selfUser) {
+    if (config.consoleLogging) console.log('Function call: render');
+    userNum = 0;
+    remainingImg = 0;
+
+    // Get canvas element
+    const canvas = document.getElementById("canvas");
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d"); // Get canvas context
+
+    const width = canvas.width;
+    const height = canvas.height;
+
+    // Draw maze if enabled
+    if (config.drawMazeBackground) {
+        drawMazeBackground(ctx, width, height);
+    }
+
+    // Configure canvas background
+    ctx.fillStyle = config.backgroundColor;
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillRect(0, 0, width, height);
+    ctx.globalCompositeOperation = 'source-over'; 
+
+    const userPositions = [];
+    const tasks = [];
+    const mainAvatarRadius = 110 * (config.avatarScale / 100); // Scale main avatar
+
+    totalImg += 1;
+    remainingImg += 1;
+    loadImage(
+        ctx,
+        selfUser.avatar,
+        (width / 2) - mainAvatarRadius,
+        (height / 2) - mainAvatarRadius,
+        mainAvatarRadius,
+        null, 
+        tasks
+    );
+
+    // Position and render user avatars
+    for (let layerIndex = 0; layerIndex < 3; layerIndex++) {
+        const angleSize = 360 / numb[layerIndex];
+
+        for (let i = 0; i < numb[layerIndex]; i++) {
+            if (userNum >= users.length) break;
+
+            totalImg += 1;
+            remainingImg += 1;
+
+            const offset = layerIndex * 30;
+            const r = toRad(i * angleSize + offset);
+
+            const centerX = Math.cos(r) * dist[layerIndex] + width / 2;
+            const centerY = Math.sin(r) * dist[layerIndex] + height / 2;
+            userPositions.push({ x: centerX, y: centerY });
+
+            // Render connecting lines
+            ctx.beginPath();
+            ctx.setLineDash([10, 3]);
+            ctx.moveTo(width / 2, height / 2);
+            ctx.lineTo(centerX, centerY);
+            ctx.strokeStyle = config.lineColor;
+            ctx.lineWidth = config.lineThickness;
+            ctx.stroke();
+            ctx.setLineDash([]);
+
+            loadImage(
+                ctx,
+                users[userNum].avatar,
+                centerX - radius[layerIndex] * (config.avatarScale / 100),
+                centerY - radius[layerIndex] * (config.avatarScale / 100),
+                radius[layerIndex] * (config.avatarScale / 100),
+                null,
+                tasks
+            );
+
+            userNum++;
+        }
+    }
+
+    // Draw random yellow lines if enabled
+    if (config.randomizeYellowLines) {
+        randomizeYellowLines(ctx, userPositions, 10); 
+    }
+
+    // Draw red line if enabled
+    if (config.drawRedLine) {
+        drawRedLine(ctx, width, height, userPositions);
+    }
+
+    const logo = new Image();
+    logo.onload = function () {
+        // Load and draw logo
+        const aspectRatio = logo.width / logo.height;
+        const logoWidth = config.logoHeight * aspectRatio;
+        ctx.drawImage(logo, 10, 10, logoWidth, config.logoHeight);
+    };
+    logo.src = config.logoSrc;
+
+    // Draw URL text
+    ctx.font = config.urlFont;
+    ctx.fillStyle = config.urlColor;
+    const textWidth = ctx.measureText(config.urlText).width;
+    const textXPosition = width - textWidth - 10; 
+    const textYPosition = height - 10; 
+
+    ctx.fillText(config.urlText, textXPosition, textYPosition);
+}
+
+// Draws a maze background
+function drawMazeBackground(ctx, width, height) {
+    if (config.consoleLogging) console.log('Function call: drawMazeBackground');
+    const cellSize = 20;
+    ctx.strokeStyle = config.mazeColor;
+    ctx.lineWidth = config.mazeThickness;
+    for (let y = 0; y < height; y += cellSize) {
+        for (let x = 0; x < width; x += cellSize) {
+            if (Math.random() > 0.5) {
+                ctx.beginPath();
+                ctx.moveTo(x, y);
+                ctx.lineTo(x + cellSize, y + cellSize);
+                ctx.stroke();
+            } else {
+                ctx.beginPath();
+                ctx.moveTo(x + cellSize, y);
+                ctx.lineTo(x, y + cellSize);
+                ctx.stroke();
+            }
+        }
+    }
+}
+
+// Draw random yellow lines
+function randomizeYellowLines(ctx, userPositions, maxLines) {
+    if (config.consoleLogging) console.log('Function call: randomizeYellowLines');
+    const numberOfLines = Math.min(maxLines, Math.floor(Math.random() * userPositions.length));
+
+    for (let i = 0; i < numberOfLines; i++) {
+        const index1 = Math.floor(Math.random() * userPositions.length);
+        let index2;
+        do {
+            index2 = Math.floor(Math.random() * userPositions.length);
+        } while (index2 === index1);
+
+        const startPos = userPositions[index1];
+        const endPos = userPositions[index2];
+
+        ctx.beginPath();
+        ctx.setLineDash([10, 3]);
+        ctx.moveTo(startPos.x, startPos.y);
+        ctx.lineTo(endPos.x, endPos.y);
+        ctx.strokeStyle = config.yellowLineColor;
+        ctx.lineWidth = config.lineThickness;
+        ctx.stroke();
+        ctx.setLineDash([]);
+    }
+}
+
+// Draw a random red line
+function drawRedLine(ctx, width, height, userPositions) {
+    if (config.consoleLogging) console.log('Function call: drawRedLine');
+    if (userPositions.length === 0) return; 
+
+    const selectedPosition = userPositions[Math.floor(Math.random() * userPositions.length)];
+    
+    ctx.beginPath();
+    ctx.setLineDash([10, 3]); 
+    ctx.moveTo(width / 2, height / 2);
+    ctx.lineTo(selectedPosition.x, selectedPosition.y);
+    ctx.strokeStyle = config.redLineColor;
+    ctx.lineWidth = config.lineThickness;
+    ctx.stroke();
+    ctx.setLineDash([]); 
+}
+
+// Load and draw user images
+function loadImage(ctx, url, x, y, r, name, tasks) {
+    if (config.consoleLogging) console.log('Function call: loadImage');
+    let progress = document.getElementById("outInfo");
+    if (!progress) return;
+
+    tasks.push(() => { /* No text addition here */ });
+
+    // Decrement image counter
+    const decrementRemaining = () => {
+        remainingImg -= 1;
+        progress.innerText = `Loading avatars: ${totalImg - remainingImg}/${totalImg}`;
+
+        if (remainingImg <= 0) {
+            progress.innerText = "";
+            tasks.forEach((task) => task());
+        }
+    };
+
+    const img = new Image();
+
+    // Handle image loading errors
+    const drawImageWithFallback = (imageSrc) => {
+        img.onload = function() {
+            ctx.save();
+            ctx.beginPath();
+            ctx.arc(x + r, y + r, r, 0, Math.PI * 2, true);
+            ctx.closePath();
+            ctx.clip();
+
+            ctx.fillStyle = config.avatarBackgroundColor;
+            ctx.beginPath();
+            ctx.arc(x + r, y + r, r, 0, Math.PI * 2, true);
+            ctx.fill();
+            ctx.closePath();
+
+            ctx.drawImage(img, x, y, r * 2, r * 2);
+
+            ctx.beginPath();
+            ctx.arc(x + r, y + r, r, 0, Math.PI * 2, true);
+            ctx.lineWidth = config.borderThickness;
+            ctx.strokeStyle = config.borderColor;
+            ctx.stroke();
+            ctx.closePath();
+
+            ctx.restore();
+
+            decrementRemaining();
+        };
+
+        img.onerror = function() {
+            console.error(`IMG Error: ${imageSrc}`);
+            if (imageSrc !== 'img/placeholder.png') {
+                drawImageWithFallback('img/placeholder.png');
+            } else {
+                decrementRemaining();
+            }
+        };
+
+        img.src = imageSrc;
+    };
+
+    drawImageWithFallback(url);
+}

js/url.js

@@ -0,0 +1,16 @@
+    document.addEventListener("DOMContentLoaded", function() {
+        function getFediverseHandle() {
+            const url = window.location.href;
+            const prefix = "?@";
+            const index = url.indexOf(prefix);
+            if(index !== -1) {
+                return decodeURIComponent(url.substring(index + prefix.length));
+            }
+            return null;
+        }
+        var fediverseHandle = getFediverseHandle();
+        if(fediverseHandle) {
+            document.getElementById('txt_mastodon_handle').value = fediverseHandle;
+            (async() => await circleMain())();
+        }
+    });