ToBePlayed-Frontend/src/utils/canvasEffects.js

import {LOGO_COLORS} from '../components/Logo.jsx';

// The drawers of the canvas page and banner backgrounds (components/EffectCanvas.jsx). Plain objects with no canvas
// or DOM, so the logic is testable; sizes are css px. `create` fills the first frame, which is also the static picture.

/** mulberry32: the same seed gives the same sequence, so the static picture is the same on every visit. */
export const seededRandom = (seed) => () => {
    seed = (seed + 0x6D2B79F5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};

/** Colors of the element's own skin and accent (a public profile sets them on a wrapper), logo hex as fallback. */
export function readPalette(element) {
    const style = getComputedStyle(element);
    const read = (name, fallback) => style.getPropertyValue(name).trim() || fallback;
    return {
        primary: read('--primary', LOGO_COLORS[0][1]),
        foreground: read('--foreground', '#fafafa'),
        logo: LOGO_COLORS.map(([name, hex]) => read(name, hex)),
    };
}

// Half-width katakana and digits.
const GLYPHS = Array.from({length: 56}, (_, i) => (i < 46 ? String.fromCharCode(0xFF66 + i) : String(i - 46)));
const TRAIL = 14;
const glyph = (random) => GLYPHS[Math.floor(random() * GLYPHS.length)];

const matrix = {
    fps: 20,
    create(width, height, random) {
        const gap = height < 360 ? 12 : 16;
        const rows = Math.ceil(height / gap);
        const columns = Array.from({length: Math.floor(width / gap)}, () => ({
            head: random() * (rows + TRAIL),
            speed: 6 + random() * 8,
            glyphs: Array.from({length: rows}, () => glyph(random)),
        }));
        return {gap, rows, columns};
    },
    step(state, seconds, random) {
        for (const column of state.columns) {
            column.head += column.speed * seconds;
            if (column.head - TRAIL > state.rows) column.head = -random() * 8;
            for (let n = 0; n < 2 + Math.floor(random() * 2); n++) {
                column.glyphs[Math.floor(random() * state.rows)] = glyph(random);
            }
        }
    },
    draw(context, state, palette) {
        const {gap, rows, columns} = state;
        context.clearRect(0, 0, columns.length * gap + gap, rows * gap + gap);
        context.font = `${gap}px ui-monospace, monospace`;
        context.textBaseline = 'top';
        columns.forEach((column, index) => {
            const head = Math.floor(column.head);
            const trail = index % 6 === 5 ? palette.logo[2] : palette.primary;
            for (let k = 0; k < TRAIL; k++) {
                const row = head - k;
                if (row < 0 || row >= rows) continue;
                context.globalAlpha = k === 0 ? 0.9 : (1 - k / TRAIL) * 0.55;
                context.fillStyle = k === 0 ? palette.foreground : trail;
                context.fillText(column.glyphs[row], index * gap, row * gap);
            }
        });
        context.globalAlpha = 1;
    },
};

const LINK = 110;
const TIERS = [{r: 1, speed: 6, alpha: 0.35}, {r: 1.6, speed: 12, alpha: 0.6}, {r: 2.4, speed: 20, alpha: 0.9}];

const constellation = {
    fps: 30,
    create(width, height, random) {
        const count = Math.min(80, Math.max(18, Math.round((width * height) / 16000)));
        const points = Array.from({length: count}, (_, i) => {
            const tier = TIERS[i % 3];
            const angle = random() * Math.PI * 2;
            return {
                x: random() * width, y: random() * height,
                vx: Math.cos(angle) * tier.speed, vy: Math.sin(angle) * tier.speed,
                tier, color: i % 4, twinkle: i % 5 === 4, phase: random() * Math.PI * 2,
            };
        });
        return {width, height, points, t: 0};
    },
    step(state, seconds) {
        state.t += seconds;
        for (const p of state.points) {
            p.x = (p.x + p.vx * seconds + state.width) % state.width;
            p.y = (p.y + p.vy * seconds + state.height) % state.height;
        }
    },
    draw(context, state, palette) {
        const {points, width, height, t} = state;
        context.clearRect(0, 0, width, height);
        context.strokeStyle = palette.primary;
        context.lineWidth = 1;
        for (let i = 0; i < points.length; i++) {
            for (let j = i + 1; j < points.length; j++) {
                const d = Math.hypot(points[i].x - points[j].x, points[i].y - points[j].y);
                if (d >= LINK) continue;
                context.globalAlpha = (1 - d / LINK) * 0.35;
                context.beginPath();
                context.moveTo(points[i].x, points[i].y);
                context.lineTo(points[j].x, points[j].y);
                context.stroke();
            }
        }
        const colors = [palette.logo[0], palette.logo[1], palette.logo[2], palette.primary];
        for (const p of points) {
            const alpha = p.tier.alpha * (p.twinkle ? 0.6 + 0.4 * Math.sin(t * 2 + p.phase) : 1);
            context.fillStyle = colors[p.color];
            if (p.tier.r > 2) {
                context.globalAlpha = 0.15;
                context.beginPath();
                context.arc(p.x, p.y, p.tier.r * 3, 0, Math.PI * 2);
                context.fill();
            }
            context.globalAlpha = alpha;
            context.beginPath();
            context.arc(p.x, p.y, p.tier.r, 0, Math.PI * 2);
            context.fill();
        }
        context.globalAlpha = 1;
    },
};

export const CANVAS_EFFECTS = {matrix, constellation};