add score calculation in drag all games all varient

src/pages/drag/v3.astro

@@ -81,6 +81,8 @@ import Layout from '../../layouts/Layout.astro';
   let shortUniqueID;
   let retryButton;
   let blockMatches;
+  let resultView;
+  let scoreTotal = 0; // resultView scoreTotal
   gameResult = [];
   window.onload = function() {
     // Get the current date and time
@@ -428,13 +430,13 @@ import Layout from '../../layouts/Layout.astro';
                 id: "block4",
             },
             {
-                x: displayW / 2+100,
+                x: displayW / 2,
                 y: window.innerHeight - 120,
                 textureKey: "blocks5",
                 id: "block5",
             },
             {
-                x: displayW / 2,
+                x: displayW / 2+100,
                 y: window.innerHeight - 120,
                 textureKey: "blocks6",
                 id: "block6",
@@ -506,52 +508,41 @@ import Layout from '../../layouts/Layout.astro';
             }
           });
         });
-
-        // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
-        //   font: '600 30px Quicksand',
-        //   fill: '#fff',
-        //   backgroundColor: 'blue',
-        //   padding: { x: 20, y: 10 },
-        // })
         retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
         retryButton.setInteractive().on('pointerdown', () => {
           window.location.reload();
         })
         retryButton.setVisible(false);
+        let score = 0;
+        let counter = 0;
+
+        const isMatch = (blockName, targetName) => {
+        if(isMatch){
+          counter++;
+          // console.log(counter)
+        }
+        //resultView scoreTotal
+        const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+        console.log(match)
+        if(match){
+          scoreTotal++;
+          resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
+          // console.log(scoreTotal)
+        }
+        if(counter === 8){
+            // console.log(counter)
+            submitButton.setVisible(true);
+            retryButton.setVisible(true);
+            resultView.setVisible(true);
+        }
+        };
     }
   }
   const displayResult = (droppedBlocks) => {
-    // const overlap = document.getElementById("overlap");
-    // overlap.style.display = "block";
-    // let finalDom;
     droppedBlocks.forEach((block) => {
       const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
     });
   };
-  let score = 0;
-  let counter = 0;
-
-  const isMatch = (blockName, targetName) => {
-  if(isMatch){
-    counter++;
-    // console.log(counter)
-
-    if(counter === 8){
-        const overlap = document.getElementById("overlap");
-        overlap.style.display = "block";
-        // console.log(counter)
-        submitButton.setVisible(true);
-        retryButton.setVisible(true);
-    }
-  }
-  const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-  console.log(match)
-  let scoreTotal=0;
-  if(match){
-    scoreTotal++;
-    // console.log(scoreTotal)
-  }
-  };
 
 </script>
 <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >