please fix the score update feature . and remove the circle pointer(it is the pointer in which if the user points it towards the plant model it displays the info) . rather than that if the user clicks on that plant model the info has to be displayed ...based on this give me the complete code...and also make it more interactive by adding more features if necessary 
"
<!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>
"