script.js

const GAME_DATA = [
    { en: 'rubber', cn: '橡皮' },
    { en: 'book', cn: '书' },
    { en: 'desk', cn: '课桌' },
    { en: 'bag', cn: '书包' },
    { en: 'pencil', cn: '铅笔' },
    { en: 'chair', cn: '椅子' },
    { en: 'teacher', cn: '老师' },
    { en: 'student', cn: '学生' },
    { en: 'apple', cn: '苹果' },
    { en: 'banana', cn: '香蕉' }
];

// Chocolate Palette
const CHOCOLATE_PALETTE = [
    '#5D4037', // Dark Brown
    '#795548', // Medium Brown
    '#8D6E63', // Light Brown
    '#A1887F', // Milk Chocolate
    '#3E2723', // Very Dark
    '#6D4C41'  // Cocoa
];

// Sound Context
let audioCtx = null;

function initAudio() {
    if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
    if (audioCtx.state === 'suspended') {
        audioCtx.resume();
    }
}

function playCrunchSound() {
    if (!audioCtx) return;

    // Create a noise burst for "crunch"
    const bufferSize = audioCtx.sampleRate * 0.2; // 0.2 seconds
    const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
    const data = buffer.getChannelData(0);

    for (let i = 0; i < bufferSize; i++) {
        data[i] = (Math.random() * 2 - 1) * Math.exp(-i / (bufferSize * 0.1)); // Decay quickly
    }

    const noise = audioCtx.createBufferSource();
    noise.buffer = buffer;

    // Lowpass filter to dampen the high pitch noise -> make it sound more like a dull crunch
    const filter = audioCtx.createBiquadFilter();
    filter.type = 'lowpass';
    filter.frequency.value = 1000;

    noise.connect(filter);
    filter.connect(audioCtx.destination);
    noise.start();
}

class Bubble {
    constructor(id, text, type, x, y, width, height, color) {
        this.id = id;
        this.text = text;
        this.type = type; // 'en' or 'cn'
        this.x = x;
        this.y = y;
        this.vx = (Math.random() - 0.5) * 1.5;
        this.vy = (Math.random() - 0.5) * 1.5;
        this.width = width;
        this.height = height;
        // Approximation for physics
        this.radius = Math.max(width, height) / 2;
        this.color = color;
        this.element = null;
        this.isPopped = false;
        this.isSelected = false;
    }

    createDOM() {
        const el = document.createElement('div');
        el.classList.add('bubble');
        el.textContent = this.text;
        el.style.width = `${this.width}px`;
        el.style.height = `${this.height}px`;
        el.style.backgroundColor = this.color;

        // Font size relative to width
        el.style.fontSize = `${Math.min(this.width, this.height) * 0.4}px`;

        // Random border radius for "chunk" look (e.g. broken piece)
        // Keep it mostly rectangular but with softened corners
        const r1 = 2 + Math.random() * 5;
        const r2 = 2 + Math.random() * 5;
        const r3 = 2 + Math.random() * 5;
        const r4 = 2 + Math.random() * 5;
        el.style.borderRadius = `${r1}px ${r2}px ${r3}px ${r4}px`;

        el.addEventListener('click', (e) => {
            e.stopPropagation();
            initAudio(); // Activate audio on interactions
            game.handleBubbleClick(this);
        });

        this.element = el;
        return el;
    }

    updatePostion(containerWidth, containerHeight) {
        if (this.isPopped) return;

        this.x += this.vx;
        this.y += this.vy;

        // Bounding box collision with walls
        // x,y is center? No, usually top-left in DOM logic, but physics is easier with center.
        // Let's assume x,y is Center for physics, and we offset for DOM.

        const halfW = this.width / 2;
        const halfH = this.height / 2;

        if (this.x - halfW < 0) {
            this.x = halfW;
            this.vx *= -1;
        }
        if (this.x + halfW > containerWidth) {
            this.x = containerWidth - halfW;
            this.vx *= -1;
        }
        if (this.y - halfH < 0) {
            this.y = halfH;
            this.vy *= -1;
        }
        if (this.y + halfH > containerHeight) {
            this.y = containerHeight - halfH;
            this.vy *= -1;
        }

        // Apply to DOM (Top-Left)
        this.element.style.left = `${this.x - halfW}px`;
        this.element.style.top = `${this.y - halfH}px`;
    }
}

class Game {
    constructor() {
        this.container = document.getElementById('game-container');
        this.bubbles = [];
        this.selectedBubble = null;
        this.animationFrameId = null;
        this.width = this.container.clientWidth;
        this.height = this.container.clientHeight;

        window.addEventListener('resize', () => {
            this.width = this.container.clientWidth;
            this.height = this.container.clientHeight;
        });

        document.getElementById('reset-btn').addEventListener('click', () => {
            initAudio();
            this.init();
        });

        this.container.addEventListener('click', () => {
            initAudio();
            if (this.selectedBubble) {
                this.selectedBubble.isSelected = false;
                this.selectedBubble.element.classList.remove('selected');
                this.selectedBubble = null;
            }
        });
    }

    init() {
        this.container.innerHTML = '';
        this.bubbles = [];
        this.selectedBubble = null;
        if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);

        const count = 7;
        const shuffledData = [...GAME_DATA].sort(() => 0.5 - Math.random()).slice(0, count);

        shuffledData.forEach((item, index) => {
            const color = CHOCOLATE_PALETTE[Math.floor(Math.random() * CHOCOLATE_PALETTE.length)];

            // Random size/ratio for chocolate chunks
            // Base size around 80px area, but vary aspect ratio
            const baseSize = 80;
            const ratio = 0.8 + Math.random() * 0.4; // 0.8 to 1.2
            const w = baseSize * ratio;
            const h = baseSize / ratio;

            // Create EN chunk
            const b1 = new Bubble(index, item.en, 'en', 0, 0, w, h, color);
            // Create CN chunk (same color for pair to give hint, or random? User didn't specify, but same color is good UX)
            // Let's vary the color slightly or keep same? Chocolate theme suggests variety. 
            // Let's use SAME color to help matching, as per original design.
            const b2 = new Bubble(index, item.cn, 'cn', 0, 0, w, h, color);

            this.placeRandomly(b1);
            this.placeRandomly(b2);

            this.bubbles.push(b1, b2);
            this.container.appendChild(b1.createDOM());
            this.container.appendChild(b2.createDOM());
        });

        this.loop();
    }

    placeRandomly(bubble) {
        bubble.x = bubble.width + Math.random() * (this.width - 2 * bubble.width);
        bubble.y = bubble.height + Math.random() * (this.height - 2 * bubble.height);
    }

    handleBubbleClick(bubble) {
        if (bubble.isPopped) return;

        if (!this.selectedBubble) {
            this.selectedBubble = bubble;
            bubble.isSelected = true;
            bubble.element.classList.add('selected');
        } else {
            if (this.selectedBubble === bubble) {
                this.selectedBubble.isSelected = false;
                bubble.element.classList.remove('selected');
                this.selectedBubble = null;
            } else {
                if (this.selectedBubble.id === bubble.id) {
                    this.match(this.selectedBubble, bubble);
                    this.selectedBubble = null;
                } else {
                    this.noMatch(this.selectedBubble, bubble);
                    this.selectedBubble = null;
                }
            }
        }
    }

    match(b1, b2) {
        b1.isPopped = true;
        b2.isPopped = true;
        b1.element.classList.remove('selected');
        b2.element.classList.remove('selected');
        b1.element.classList.add('matched');
        b2.element.classList.add('matched');

        playCrunchSound();

        setTimeout(() => {
            if (b1.element.parentNode) b1.element.parentNode.removeChild(b1.element);
            if (b2.element.parentNode) b2.element.parentNode.removeChild(b2.element);
        }, 500);
    }

    noMatch(b1, b2) {
        b1.isSelected = false;
        b2.isSelected = false;
        b1.element.classList.remove('selected');
        b1.element.classList.add('shake');
        b2.element.classList.add('shake');

        setTimeout(() => {
            b1.element.classList.remove('shake');
            b2.element.classList.remove('shake');
        }, 300);
    }

    loop() {
        this.updatePhysics();
        this.animationFrameId = requestAnimationFrame(() => this.loop());
    }

    updatePhysics() {
        this.bubbles.forEach(b => b.updatePostion(this.width, this.height));

        for (let i = 0; i < this.bubbles.length; i++) {
            for (let j = i + 1; j < this.bubbles.length; j++) {
                const b1 = this.bubbles[i];
                const b2 = this.bubbles[j];
                if (b1.isPopped || b2.isPopped) continue;

                const dx = b2.x - b1.x;
                const dy = b2.y - b1.y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                // Use AVERAGE radius for collision approx on rectangles
                const minDist = (b1.width + b1.height) / 4 + (b2.width + b2.height) / 4;
                // A bit rough for rectangles, but fine for "floating chunks"

                if (distance < minDist) {
                    const overlap = minDist - distance;
                    const nx = dx / distance;
                    const ny = dy / distance;

                    b1.x -= nx * overlap * 0.5;
                    b1.y -= ny * overlap * 0.5;
                    b2.x += nx * overlap * 0.5;
                    b2.y += ny * overlap * 0.5;

                    const v1n = b1.vx * nx + b1.vy * ny;
                    const v2n = b2.vx * nx + b2.vy * ny;

                    const tx = -ny;
                    const ty = nx;
                    const v1t = b1.vx * tx + b1.vy * ty;
                    const v2t = b2.vx * tx + b2.vy * ty;

                    b1.vx = v2n * nx + v1t * tx;
                    b1.vy = v2n * ny + v1t * ty;
                    b2.vx = v1n * nx + v2t * tx;
                    b2.vy = v1n * ny + v2t * ty;
                }
            }
        }
    }
}

const game = new Game();
window.onload = () => game.init();