From 62565a5bf278e4de4a76ef3c44408cdec9bf8d7e Mon Sep 17 00:00:00 2001
From: dev sp <dev2@ns1.cicdhosting.com>
Date: Wed, 17 Jan 2024 08:45:14 +0000
Subject: [PATCH] work on score calculations

---
 src/pages/drag/index.astro    | 63 +++++++++++++++++++++++------------
 src/pages/drawing/index.astro | 18 +++++-----
 src/pages/drawing/v2.astro    |  4 ++-
 src/pages/drawing/v3.astro    | 12 ++++---
 4 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index 8f11a0d..83446a5 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -96,7 +96,7 @@ import Layout from '../../layouts/Layout.astro';
       return result;
   };
   shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
-
+  let blockMatches;
   const targetZones = [
     {
       x: 0,
@@ -123,24 +123,24 @@ import Layout from '../../layouts/Layout.astro';
       block: null,
     },
   ];
-  const blockMatches = [
-    {
-      blockName: "blocks1",
-      targetName: "target1",
-    },
-    {
-      blockName: "blocks2",
-      targetName: "target2",
-    },
-    {
-      blockName: "blocks3",
-      targetName: "target3",
-    },
-    {
-      blockName: "blocks4",
-      targetName: "target4",
-    },
-  ];
+  // const blockMatches = [
+  //   {
+  //     blockName: "blocks1",
+  //     targetName: "target1",
+  //   },
+  //   {
+  //     blockName: "blocks2",
+  //     targetName: "target2",
+  //   },
+  //   {
+  //     blockName: "blocks3",
+  //     targetName: "target3",
+  //   },
+  //   {
+  //     blockName: "blocks4",
+  //     targetName: "target4",
+  //   },
+  // ];
   // console.log(blockMatches.blockName, blockMatches.targetName)
   var assetsList = {}
   const params = new URLSearchParams(window.location.search);
@@ -303,6 +303,24 @@ import Layout from '../../layouts/Layout.astro';
               font: ` ${responsiveFontSize}px Quicksand`,
               fill: '#7c4c23',
             }).setOrigin(0.5);
+             blockMatches = [
+              {
+                blockName: "blocks1",
+                targetName: `target${data.answer1}`,
+              },
+              {
+                blockName: "blocks2",
+                targetName: `target${data.answer2}`,
+              },
+              {
+                blockName: "blocks3",
+                targetName: `target${data.answer3}`,
+              },
+              {
+                blockName: "blocks4",
+                targetName: `target${data.answer4}`,
+              },
+            ];
             // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
             // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
@@ -526,11 +544,12 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(true);
     }
   }
+  let scoreTotal = 0;
   const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-  let scoreTotal=0;
-  if(match){
+  console.log(match)
+  if(match !== undefined){
     scoreTotal++;
-    // console.log(scoreTotal)
+    console.log(scoreTotal)
   }
   //   console.log(scoreTotal)
   //   // console.log(match)
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 14abdd6..aea961f 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -12,10 +12,10 @@ import Layout from '../../layouts/Layout.astro';
 <script is:inline>
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const drawingZone = {
-        x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
-        y: window.innerHeight / 4,
-        width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
-        height: window.innerHeight / 2,
+        x: 0,
+        y: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
     };
     if(isMobile){
         submitWidth = 250;
@@ -117,8 +117,8 @@ import Layout from '../../layouts/Layout.astro';
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 15;
-                const responsiveFontSize = (window.innerWidth / 280) * baseFontSize;
+                const baseFontSize = 22;
+                const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
                 const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
@@ -230,8 +230,8 @@ import Layout from '../../layouts/Layout.astro';
             // const colors = data.colors;
             // var colors = colorList;
             const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
-            const buttonSize = 50;
-            const buttonSpacing = 15;
+            const buttonSize = 60;
+            const buttonSpacing = 5;
             // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
@@ -468,10 +468,12 @@ import Layout from '../../layouts/Layout.astro';
             snapNotice.setVisible(false);
     }
     function captureSnapshot(drawingZone) {
+        submitButton.setVisible(false);
         // snapNotice.setVisible(true);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
         drawingZone.renderer.snapshot((image) => {
+            submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
             image.style.width = '160px';
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index 3f458b1..3402267 100644
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@@ -219,7 +219,7 @@ import Layout from '../../layouts/Layout.astro';
                 colorContainer.style.flexDirection = 'column'; 
             }
                 var colors = colorList;
-            const buttonSize = 50;
+            const buttonSize = 60;
             const buttonSpacing = 15;
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex';
@@ -443,9 +443,11 @@ import Layout from '../../layouts/Layout.astro';
     }
     function captureSnapshot(drawingZone) {
         // snapNotice.setVisible(true);
+        submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
         drawingZone.renderer.snapshot((image) => {
+            submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
             image.style.width = '160px';
diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro
index 49c9ae7..db53b96 100644
--- a/src/pages/drawing/v3.astro
+++ b/src/pages/drawing/v3.astro
@@ -23,7 +23,7 @@ import Layout from '../../layouts/Layout.astro';
         noticeWidth = 100;
         noticeHeight = 0;
         downloadWidth = 67;
-        downloadHeight = 200;
+        downloadHeight = 160;
         learningWidth = 200;
         learningHeight = 400
     } else {
@@ -117,8 +117,8 @@ import Layout from '../../layouts/Layout.astro';
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 15;
-                const responsiveFontSize = (window.innerWidth / 280) * baseFontSize;
+                const baseFontSize = 22;
+                const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
                 const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
@@ -230,7 +230,7 @@ import Layout from '../../layouts/Layout.astro';
             // const colors = data.colors;
             // var colors = colorList;
             const colors = ['#ff0000'];
-            const buttonSize = 50;
+            const buttonSize = 60;
             const buttonSpacing = 15;
             // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
@@ -452,7 +452,7 @@ import Layout from '../../layouts/Layout.astro';
             // };
             // Add a "Save Snapshot" button
             if(isMobile){
-                snapWidth = 50;
+                snapWidth = 70;
                 snapHeight = 70;
             } else {
                 snapWidth = 200;
@@ -468,10 +468,12 @@ import Layout from '../../layouts/Layout.astro';
             snapNotice.setVisible(false);
     }
     function captureSnapshot(drawingZone) {
+        submitButton.setVisible(false);
         // snapNotice.setVisible(true);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
         drawingZone.renderer.snapshot((image) => {
+            submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
             image.style.width = '160px';