modify this code such that the score should increase everytime the plant info screen is displayed . If all of the plant models are found and the user saw its info screen then the congratulations screen has to be displayed..
"
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Interactive Ayurvedic Garden</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
    <script>
        AFRAME.registerComponent('ayush-plant', {
            schema: {
                name: {type: 'string'},
                info: {type: 'string'}
            },
            init: function () {
                this.el.addEventListener('click', () => {
                    this.showInfo();
                    this.incrementScore();
                });
                this.isFound = false; 
            },
            showInfo: function () {
                if (this.isFound) return; 

                const infoContainer = document.createElement('a-entity');
                infoContainer.setAttribute('class', 'info-display');
                infoContainer.setAttribute('look-at', '#player');
                infoContainer.setAttribute('position', '-3 2 0'); 

                const infoPanel = document.createElement('a-entity');
                infoPanel.setAttribute('geometry', {primitive: 'plane', width: 6, height: 4});
                infoPanel.setAttribute('material', {color: '#0080ff', opacity: 0.7, shader: 'flat', side: 'double'});
                infoContainer.appendChild(infoPanel);

                const titleText = document.createElement('a-entity');
                titleText.setAttribute('text', {
                    value: this.data.name,
                    color: '#ffffff',
                    align: 'center',
                    font: 'exo2bold',
                    width: 2.8,
                    wrapCount: 30,
                    baseline: 'top'
                });
                titleText.setAttribute('position', '0 0.8 0.01');
                infoContainer.appendChild(titleText);

                const infoText = document.createElement('a-entity');
                infoText.setAttribute('text', {
                    value: this.data.info,
                    color: '#ffffff',
                    align: 'left',
                    width: 2.8,
                    font: 'exo2bold',
                    lineHeight: 50,
                    wrapCount: 35,
                    baseline: 'top'
                });
                infoText.setAttribute('position', '-1.4 0.6 0.01');
                infoContainer.appendChild(infoText);

                this.el.appendChild(infoContainer);
                this.isFound = true; 
            },
            incrementScore: function() {
                if (this.isFound) return; 

                const scoreElement = document.getElementById('score');
                const currentScore = parseInt(scoreElement.getAttribute('value')) || 0;

                if (currentScore < 4) {
                    const newScore = currentScore + 1;
                    scoreElement.setAttribute('value', newScore);
                    document.getElementById('scoreboard').setAttribute('text', 'value: Score: ' + newScore);

                    
                    updateCoolScoreDisplay(newScore);

                    if (newScore === 4) {
                        this.endGame();
                    }
                }
            },
            endGame: function() {
                const endTime = new Date();
                const startTime = new Date(parseInt(document.getElementById('start-time').getAttribute('value')));
                const timeTakenInSeconds = Math.floor((endTime - startTime) / 1000);

                const gameOverScreen = document.createElement('a-entity');
                gameOverScreen.setAttribute('id', 'game-over-screen');
                gameOverScreen.setAttribute('position', '0 1.6 -2');
                gameOverScreen.setAttribute('rotation', '0 0 0');

                const background = document.createElement('a-entity');
                background.setAttribute('geometry', 'primitive: plane; width: 3; height: 2');
                background.setAttribute('material', 'color: #0080ff; opacity: 0.7; shader: flat');
                gameOverScreen.appendChild(background);

                const congratsText = document.createElement('a-entity');
                congratsText.setAttribute('text', {
                    value: 'Congratulations!',
                    color: '#ffffff',
                    align: 'center',
                    font: 'exo2bold',
                    width: 4,
                    wrapCount: 30,
                    baseline: 'top'
                });
                congratsText.setAttribute('position', '0 1 0.01');
                gameOverScreen.appendChild(congratsText);

                const timeText = document.createElement('a-entity');
                timeText.setAttribute('text', {
                    value: `You found all the plants in ${timeTakenInSeconds} seconds!`,
                    color: '#ffffff',
                    align: 'center',
                    font: 'exo2bold',
                    width: 3.5,
                    wrapCount: 30,
                    baseline: 'top'
                });
                timeText.setAttribute('position', '0 0.5 0.01');
                gameOverScreen.appendChild(timeText);

                const restartText = document.createElement('a-entity');
                restartText.setAttribute('text', {
                    value: 'Press "R" to restart',
                    color: '#ffffff',
                    align: 'center',
                    font: 'exo2bold',
                    width: 3.5,
                    wrapCount: 30,
                    baseline: 'top'
                });
                restartText.setAttribute('position', '0 -0.5 0.01');
                gameOverScreen.appendChild(restartText);

                document.querySelector('a-scene').appendChild(gameOverScreen);

                
                window.addEventListener('keydown', function(event) {
                    if (event.key === 'r' || event.key === 'R') {
                        location.reload();
                    }
                });
            }
        });

        function startGame() {
            document.getElementById('start-time').setAttribute('value', new Date().getTime());
            document.getElementById('score').setAttribute('value', 0); 
            document.getElementById('scoreboard').setAttribute('text', 'value: Score: 0'); 
            updateCoolScoreDisplay(0); 
        }

        function updateCoolScoreDisplay(score) {
            const coolScoreDisplay = document.getElementById('cool-score-display');
            coolScoreDisplay.innerHTML = ''; 
            for (let i = 0; i < 4; i++) {
                const leaf = document.createElement('span');
                leaf.textContent = '🍃'; 
                leaf.style.opacity = i < score ? '1' : '0.3'; 
                coolScoreDisplay.appendChild(leaf);
            }
        }


        AFRAME.registerComponent('sun', {
            schema: {
                time: {type: 'number', default: 0}
            },
            tick: function (time, timeDelta) {
                this.data.time += timeDelta * 0.00005;
                const angle = this.data.time % (Math.PI * 2);
                const x = Math.cos(angle) * 10;
                const y = Math.sin(angle) * 10;
                this.el.setAttribute('position', `${x} ${Math.max(y, 0)} 0`);
                
                
                const skyColor = this.el.sceneEl.systems.material.materials.skyshader.uniforms.bottomColor.value;
                skyColor.setHSL(0.6, 1, Math.max(y, 0) / 10);
                

                this.el.setAttribute('light', 'intensity', Math.max(y, 0) / 10);
            }
        });
    </script>
    <style>
        #scoreboard {
            position: fixed;
            left: 50%;
            transform: translateX(-50%); 
            font-family: sans-serif;
            color: white;
            z-index: 1;
            font-size: 16px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 5px 10px;
            border-radius: 5px;
        }

        #score {
            position: fixed;
            top: 10px;
            left: 10px;
            font-family: sans-serif;
            color: white;
            z-index: 1;
            font-size: 16px;
        }

        #instructions {
            position: fixed;
            bottom: 10px;
            left: 10px;
            font-family: sans-serif;
            color: white;
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
        }

        #cool-score-display {
            position: fixed;
            top: 10px;
            right: 10px;
            font-size: 20px;
            z-index: 1;
        }

        @media (max-width: 767px) {
            #scoreboard, #score, #instructions, #cool-score-display {
                font-size: 12px;
            }

            .info-display {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80%;
            }

            .info-display .text {
                font-size: 12px;
            }
        }
    </style>
</head>
<body onload="startGame()">
    <a-scene environment="preset: forest; groundTexture: none; ground: flat; groundColor: #553c25">

        <a-entity id="start-time" visible="false"></a-entity>
        <div id="scoreboard">Score: 0</div> 
        <a-entity id="score" text="value: 0; color: white"></a-entity>
        <div id="instructions">Use W, A, S, D to move, Click on Plants for Info and score a point</div>
        <div id="cool-score-display"></div> 

        <a-assets>
            <a-asset-item id="banana-model" src="banana_plant.glb"></a-asset-item>
            <a-asset-item id="aloe-vera-model" src="aloe_vera_plant.glb"></a-asset-item>
            <a-asset-item id="basil-model" src="stylized_basil_pot_plant.glb"></a-asset-item>
            <a-asset-item id="tulsi-model" src="tulsi.glb"></a-asset-item>
        </a-assets>

        <a-entity id="player" camera look-controls wasd-controls position="0 1.6 0">
            <a-entity cursor="fuse: true; fuseTimeout: 500"
                      position="0 0 -1"
                      geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                      material="color: white; shader: flat">
            </a-entity>
        </a-entity>

        <a-entity id="garden" position="0 0 -5">
            <a-box color="#3c2f2f" width="30" depth="30" height="0.1"></a-box>

            <a-entity position="-5 0 -10" scale="1.5 1.5 1.5">
                <a-entity gltf-model="#banana-model"
                          ayush-plant="name: Banana Plant (Musa);
                          info: Ayurvedic Uses:
• Promotes Digestive Health
• Supports Respiratory Function
• Nourishes Skin and Hair
• Enhances Blood Health
• Provides Cooling Properties

Interesting Facts:
• The banana plant is technically a herb
• It grows from a bulb-like structure called a corm
• The entire plant is used in traditional medicine">
                </a-entity>
            </a-entity>

            <a-entity position="10 0 -5" scale="0.7 0.7 0.7">
                <a-entity gltf-model="#aloe-vera-model"
                          ayush-plant="name: Aloe Vera (Aloe barbadensis);
                          info: Ayurvedic Uses:
• Soothes Burns and Wounds
• Promotes Digestive Health
• Supports Skin Health
• Boosts Immunity
• Has Anti-inflammatory Properties

Interesting Facts: 
• Used for medicinal purposes for centuries
• Contains vitamins, minerals, and amino acids
• Gel can be applied topically or consumed">
                </a-entity>
            </a-entity>

            <a-entity position="0 0 15" scale="1.5 1.5 1.5">
                <a-entity gltf-model="#basil-model"
                          ayush-plant="name: Basil (Ocimum basilicum);
                          info: Ayurvedic Uses:
• Relieves Headaches and Cold
• Supports Digestive Health
• Improves Cognitive Function
• Reduces Stress
• Has Antioxidant Properties

Interesting Facts:
• Revered in Hindu culture and considered sacred
• Used in traditional ceremonies
• Its aroma is uplifting and refreshing">
                </a-entity>
            </a-entity>

            <a-entity position="-12 0 5" scale="1 1 1">
                <a-entity gltf-model="#tulsi-model"
                          ayush-plant="name: Tulsi (Ocimum tenuiflorum);
                          info: Ayurvedic Uses:
• Treats Respiratory Infections
• Improves Immunity
• Has Antibacterial Properties
• Supports Cardiovascular Health
• Reduces Stress and Anxiety

Interesting Facts:
• Sacred plant in Hindu religion
• Vital ingredient in Ayurveda
• Can grow in many climates">
                </a-entity>
            </a-entity>

        </a-entity>

        <a-light type="ambient" color="#BBB"></a-light>
        <a-light type="directional" color="#FFF" intensity="0.6" position="-0.5 1 1"></a-light>

    </a-scene>
    <script>
        startGame(); 
    </script>
</body>
</html>
"