From 15b8c1e803d988d20d92a15398432e8220157c90 Mon Sep 17 00:00:00 2001
From: dev sp <dev2@ns1.cicdhosting.com>
Date: Thu, 18 Jan 2024 13:37:13 +0000
Subject: [PATCH] add score calculation in drag all games all varient

---
 src/pages/drag/index.astro | 101 +++++++-----------------
 src/pages/drag/v2.astro    | 156 +++++++------------------------------
 src/pages/drag/v3.astro    |  63 +++++++--------
 src/pages/drag/v4.astro    |  47 ++++++-----
 4 files changed, 102 insertions(+), 265 deletions(-)

diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index eb59e3a..aefc90a 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -75,6 +75,8 @@ import Layout from '../../layouts/Layout.astro';
   let submitButton;
   let formattedDateTime;
   let shortUniqueID;
+  let scoreTotal = 0;
+  let resultView;
   gameResult = [];
   window.onload = function() {
     // Get the current date and time
@@ -505,6 +507,30 @@ import Layout from '../../layouts/Layout.astro';
         retryButton.setInteractive().on('pointerdown', () => {
           window.location.reload();
         })
+        let score = 0;
+        let counter = 0;
+        const isMatch = (blockName, targetName) => {
+          if(isMatch){
+            counter++;
+            // console.log(counter)
+          }
+          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+          console.log(match)
+          if(match !== undefined){
+            scoreTotal++;
+            console.log("Score Total", scoreTotal)
+            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
+            resultView.setVisible(false);
+          }
+          if(counter === 4){
+                const overlap = document.getElementById("overlap");
+                overlap.style.display = "block";
+                // console.log(counter)
+                submitButton.setVisible(true);
+                resultView.setVisible(true);
+            }
+        };
+      
     }
   }
 // let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
@@ -529,82 +555,7 @@ import Layout from '../../layouts/Layout.astro';
       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 === 4){
-        const overlap = document.getElementById("overlap");
-        overlap.style.display = "block";
-        // console.log(counter)
-        submitButton.setVisible(true);
-    }
-  }
-  let scoreTotal = 0;
-  const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-  console.log(match)
-  if(match !== undefined){
-    scoreTotal++;
-    console.log(scoreTotal)
-  }
-  //   console.log(scoreTotal)
-  //   // console.log(match)
-  //   if(match){
-  //     score++;
-  //     console.log(score)
-  //     let day;
-  //     switch (score) {
-  //       case 0:
-  //         day = "Points - 1";
-  //         break;
-  //       case 2:
-  //         day = "Points - 2";
-  //         break;
-  //       case 4:
-  //         day = "Points - 4";
-
-  //     }
-  //     console.log(day)
-  //       finalDom = document.getElementById("good");
-  //       finalDom.classList.add("good");
-  //       document.getElementById("good").innerHTML = day;
-  //       document.getElementById("good").style.color = '#7c4c23'
-  // // console.log(totalScore)
-  //     // if(score === 2){
-  //     //   finalDom = document.getElementById("good");
-  //     //   finalDom.classList.add("good");
-  //     //   document.getElementById("good").innerHTML = " Good";
-  //     //   document.getElementById("good").style.color = '#7c4c23'
-
-
-  //     //   // let img = document.createElement("img");
-  //     //   // img.src = "/assets/party-feestje.gif";
-  //     //   // img.width = 100;
-  //     //   // document.getElementById('win').appendChild(img);
-  //     // }
-  //     // else if(score === 4) {
-  //     //   finalDom = document.getElementById("verryGood");
-  //     //   finalDom.classList.add("verryGood");
-  //     //   document.getElementById("verryGood").innerHTML = "Verry Good";
-  //     //   document.getElementById("verryGood").style.color = '#7c4c23'
-  //     // }
-  //     // else {
-  //     //   // finalDom = document.getElementById("lost");
-  //     //   // finalDom.classList.add("lost");
-  //     //   // document.getElementById("lost").innerHTML = " Lost";
-  //     //   // document.getElementById("lost").style.color = '#7c4c23'
-  //     //   // console.log("Losttttt")
-  //     // }
-
-  //   } else{
-  //     score = score
-  //   }
-  //   return match !== undefined;
-  };
 
 </script>
 <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro
index df4d83b..9ec13ff 100644
--- a/src/pages/drag/v2.astro
+++ b/src/pages/drag/v2.astro
@@ -76,6 +76,9 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let blockMatches;
+  let resultView;
+  let scoreTotal = 0; // scoreTotal resultView
+
   gameResult = [];
   window.onload = function() {
     // Get the current date and time
@@ -469,60 +472,6 @@ import Layout from '../../layouts/Layout.astro';
                 displayResult(droppedBlocks);
             }
         });
-
-          // newBlock.on("dragend", () => {
-          //   newBlock.setScale(1.0);
-          //   let droppedOnTargetZone = false;
-          //   targetZones.forEach((targetZone, targetIndex) => {
-          //     if (
-          //       Phaser.Geom.Intersects.RectangleToRectangle(
-          //         newBlock.getBounds(),
-          //         new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
-          //       )
-          //     ) {
-          //       if (targetZone.block === null) {
-          //         newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
-          //         newBlock.disableInteractive();
-          //         targetZone.block = newBlock;
-          //         droppedBlocks.push(newBlock);
-          //         if (isMatch(newBlock.texture.key, targetZone.name)) {
-          //           // console.log(isMatch(newBlock.texture.key, targetZone.name))
-                    
-          //           // if(isMatch(newBlock.texture.key, targetZone.name)){
-          //           //   score++;
-          //           //   // console.log(score);
-          //           //   if(score === 4){
-          //           //       const overlap = document.getElementById("overlap");
-          //           //       overlap.style.display = "block";
-          //           //       let finalDom;
-          //           //   }
-          //           //   console.log(score)
-          //           //   if(score >= 2){
-          //           //     console.log("Win")
-          //           //   } else{
-          //           //     console.log("Loose")
-          //           //   }
-          //           // }
-          //           //counter++; // Increment the counter when a match is found
-          //         }
-          //       } else {
-          //         newBlock.setPosition(block.x, block.y);
-          //       }
-          //       droppedOnTargetZone = true;
-          //       targetZoneBorders[targetIndex].setVisible(true);
-          //       targetZoneBorders[targetIndex].setAlpha(1);
-          //       return;
-          //     }
-          //   });
-
-          //   if (!droppedOnTargetZone) {
-          //     newBlock.setPosition(block.x, block.y);
-          //   }
-          //   if (droppedBlocks.length === targetZones.length) 
-          //   {
-          //     displayResult(droppedBlocks);
-          //   }
-          // });
         }); 
         let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
           font: '600 30px Quicksand',
@@ -533,6 +482,29 @@ import Layout from '../../layouts/Layout.astro';
         retryButton.setInteractive().on('pointerdown', () => {
           window.location.reload();
         })
+        let score = 0;
+        let counter = 0;
+
+        const isMatch = (blockName, targetName) => {
+          if(isMatch){
+            counter++;
+            // console.log(counter)
+          }
+          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+          console.log(match)
+          if(match !== undefined){
+            scoreTotal++;
+            console.log("Score Total", scoreTotal)
+            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
+          }
+          if(counter === 4){
+              const overlap = document.getElementById("overlap");
+              overlap.style.display = "block";
+              // console.log(counter)
+              submitButton.setVisible(true);
+              resultView.setVisible(true);
+          }
+        };
     }
   }
 // let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
@@ -557,82 +529,6 @@ import Layout from '../../layouts/Layout.astro';
       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 === 4){
-        const overlap = document.getElementById("overlap");
-        overlap.style.display = "block";
-        // console.log(counter)
-        submitButton.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)
-  }
-  //   console.log(scoreTotal)
-  //   // console.log(match)
-  //   if(match){
-  //     score++;
-  //     console.log(score)
-  //     let day;
-  //     switch (score) {
-  //       case 0:
-  //         day = "Points - 1";
-  //         break;
-  //       case 2:
-  //         day = "Points - 2";
-  //         break;
-  //       case 4:
-  //         day = "Points - 4";
-
-  //     }
-  //     console.log(day)
-  //       finalDom = document.getElementById("good");
-  //       finalDom.classList.add("good");
-  //       document.getElementById("good").innerHTML = day;
-  //       document.getElementById("good").style.color = '#7c4c23'
-  // // console.log(totalScore)
-  //     // if(score === 2){
-  //     //   finalDom = document.getElementById("good");
-  //     //   finalDom.classList.add("good");
-  //     //   document.getElementById("good").innerHTML = " Good";
-  //     //   document.getElementById("good").style.color = '#7c4c23'
-
-
-  //     //   // let img = document.createElement("img");
-  //     //   // img.src = "/assets/party-feestje.gif";
-  //     //   // img.width = 100;
-  //     //   // document.getElementById('win').appendChild(img);
-  //     // }
-  //     // else if(score === 4) {
-  //     //   finalDom = document.getElementById("verryGood");
-  //     //   finalDom.classList.add("verryGood");
-  //     //   document.getElementById("verryGood").innerHTML = "Verry Good";
-  //     //   document.getElementById("verryGood").style.color = '#7c4c23'
-  //     // }
-  //     // else {
-  //     //   // finalDom = document.getElementById("lost");
-  //     //   // finalDom.classList.add("lost");
-  //     //   // document.getElementById("lost").innerHTML = " Lost";
-  //     //   // document.getElementById("lost").style.color = '#7c4c23'
-  //     //   // console.log("Losttttt")
-  //     // }
-
-  //   } else{
-  //     score = score
-  //   }
-  //   return match !== undefined;
-  };
 
 </script>
 <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro
index 6b4fce0..a5b72bc 100644
--- a/src/pages/drag/v3.astro
+++ b/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" >
diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro
index 7d6d773..c296345 100644
--- a/src/pages/drag/v4.astro
+++ b/src/pages/drag/v4.astro
@@ -81,6 +81,8 @@ import Layout from '../../layouts/Layout.astro';
   let shortUniqueID;
   let retryButton;
   let blockMatches;
+  let scoreTotal  = 0;
+  let resultView; // scoreTotal resultView
   gameResult = [];
   window.onload = function() {
     // Get the current date and time
@@ -513,6 +515,27 @@ import Layout from '../../layouts/Layout.astro';
           window.location.reload();
         })
         retryButton.setVisible(false);
+        let score = 0;
+        let counter = 0;
+        const isMatch = (blockName, targetName) => {
+          if(isMatch){
+            counter++;
+            // console.log(counter)
+          }
+          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+          // console.log(match)
+          if(match !== undefined){
+            scoreTotal++;
+            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
+            console.log("Score Total", scoreTotal)
+          }
+          if(counter === 8){
+              // console.log(counter)
+              submitButton.setVisible(true);
+              retryButton.setVisible(true);
+              resultView.setVisible(true);
+          }
+        };
     }
   }
   const displayResult = (droppedBlocks) => {
@@ -520,30 +543,6 @@ import Layout from '../../layouts/Layout.astro';
       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 !== undefined){
-      scoreTotal++;
-      console.log("Score Total", scoreTotal)
-    }
-  };
 
 </script>
 <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >