document.addEventListener('DOMContentLoaded', function() {
    const table1 = document.querySelectorAll('#table td');
    const table2 = document.querySelectorAll('#table2 .info');
    let selectedShop = null;

    table2.forEach(shop => {
        shop.addEventListener('click', function() {
            if (selectedShop) {
                selectedShop.classList.remove('selected');
            }
            selectedShop = this;
            selectedShop.classList.add('selected');
            checkMatch();
        });
    });

    table1.forEach(photo => {
        photo.addEventListener('click', function() {
            if (selectedShop) {
                const photoValue = this.getAttribute('value');
                const shopValue = selectedShop.getAttribute('value');
                if (photoValue === shopValue) {
                    document.getElementById('atari').innerText = '正解!';
                    this.classList.add('correct');
                } else {
                    document.getElementById('atari').innerText = '不正解...';
                    this.classList.add('incorrect');
                }
                document.getElementById('atari2').innerText = '選択した店: ' + selectedShop.innerText;
            } else {
                alert('先に店を選択してください');
            }
        });
    });

    function checkMatch() {
        document.getElementById('atari').innerText = '';
        document.getElementById('atari2').innerText = '';
        table1.forEach(photo => {
            photo.classList.remove('correct', 'incorrect');
        });
    }
});