---
import Layout from '../../layouts/Layout.astro';
---
<Layout title="Drag Game">
	<main>
		<div>
      <div>
        
        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
        <div class="flex justify-center">
          <div class="container mx-auto px-4">
            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
              <img src="/assets/top_match.jpg" alt="" />
              <img src="/assets/top_logo.jpg" alt="" />
            </div> -->
          </div>
          <!-- <h2>{data.name}</h2> -->
          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
        </div>
      </div>
      <div id="overlap">
        <!-- <div id="result"></div> -->
        <div id="verryGood" class="displayNone "> 
          <!-- <p>Congratulations!</p>
          <p>You win the Game!</p> -->
          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
          <!-- <div class="flex flex-row">
            <a href="" >
              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
            </a>
            <a href="" >
              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
            </a>
          </div>
          <div>
          </div> -->
        </div>
        <div id="good" class="displayNone">
          <!-- <p>Oops!</p>
          <p>You Lost the Game!</p>
          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
          <a href="" >
            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
          </a> -->
        </div>
        <div id="lost" class="displayNone"></div>
      </div>
		</div>
		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
	</main>
</Layout>
<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,
  };
  if(isMobile){
      noticeWidth = 100;
      noticeHeight = 0;
      buttonWidth = 67;
      buttonHeight = 0;
      retryButtonWidth = window.innerWidth / 2 - 140;
      retryButtonHeight = window.innerHeight - 50;
      leftTargetZoneW = window.innerWidth / 6;
      rightTargetZoneW = window.innerWidth * 0.9 - 40;
    } else {
      noticeWidth = 100;
      noticeHeight = 0;
      buttonWidth = 100;
      buttonHeight = 0;
      retryButtonWidth = window.innerWidth / 2 - 50;
      retryButtonHeight = window.innerHeight - 70;
      leftTargetZoneW = window.innerWidth / 6;
      rightTargetZoneW = window.innerWidth * 0.9 - 172;
    }
  let submitButton;
  let formattedDateTime;
  let shortUniqueID;
  let retryButton;
  let blockMatches;
  let scoreTotal  = 0;
  let resultView; // scoreTotal resultView
  gameResult = [];
  window.onload = function() {
    // Get the current date and time
    currentDate = new Date();
    
   formattedDateTime = currentDate.toLocaleString();

  };
  function generateShortUniqueID(length) {14
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let result = '';
      for (let i = 0; i < length; i++) {
          const randomIndex = Math.floor(Math.random() * characters.length);
          result += characters.charAt(randomIndex);
      }
      return result;
  };
  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172 
  const leftTargetZones = [
        {
            x: leftTargetZoneW + 30,
            y: window.innerHeight / 2.5,
            name: "target1",
            block: null,
        },
        // Add more left target zones as needed
    ];

    const rightTargetZones = [
        {
            x: rightTargetZoneW - 30,
            y: window.innerHeight / 2.5,
            name: "target2",
            block: null,
        },
        // Add more right target zones as needed
    ];

    const targetZones = [...leftTargetZones, ...rightTargetZones];
  // console.log(blockMatches.blockName, blockMatches.targetName)
  var assetsList = {};
  const params = new URLSearchParams(window.location.search);
  const paramsID = params.get('id');
  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
      .then(response => response.json())
      .then(({data}) => {
        const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
        if(isMobile){
          imageCustomWidth = "?width=100";
        } else{
          imageCustomWidth = "?width=100";
        }
        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
        assetsList.element1 = assetsURL + image1   + imageCustomWidth;
        assetsList.element2 = assetsURL + image2   + imageCustomWidth;
        assetsList.element3 = assetsURL + image3   + imageCustomWidth;
        assetsList.element4 = assetsURL + image4   + imageCustomWidth;
        assetsList.element5 = assetsURL + image5   + imageCustomWidth;
        assetsList.element6 = assetsURL + image6   + imageCustomWidth;
        assetsList.element7 = assetsURL + image7   + imageCustomWidth;
        assetsList.element8 = assetsURL + image8   + imageCustomWidth;
        // console.log(assetsList.left_image1)
        const config = {
          type: Phaser.AUTO,
          width: window.innerWidth,
          height: window.innerHeight,
          backgroundColor: '#ffffff',
          parent: "phaser-example",
          scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
            },
          scene: MyGame,
        };
        const game = new Phaser.Game(config);    
        
      })
      .catch(error => {

        console.error('Error fetching initial data:', error);
      });
  class MyGame extends Phaser.Scene {
    constructor() {
      super();
    }
    preload() {
        var progressBar = this.add.graphics();
        var progressBox = this.add.graphics();
        progressBox.fillStyle(0x222222, 0.8);
        progressBox.fillRect(240, 270, 320, 50);
        
        var width = this.cameras.main.width;
        var height = this.cameras.main.height;
        var loadingText = this.make.text({
            x: width / 2,
            y: height / 2 - 50,
            text: 'Loading...',
            style: {
                font: '20px monospace',
                fill: '#ffffff'
            }
        });
        loadingText.setOrigin(0.5, 0.5);
        var percentText = this.make.text({
            x: width / 2,
            y: height / 2 - 5,
            text: '0%',
            style: {
                font: '18px monospace',
                fill: '#ffffff'
            }
        });
        percentText.setOrigin(0.5, 0.5);
        var assetText = this.make.text({
            x: width / 2,
            y: height / 2 + 50,
            text: '',
            style: {
                font: '18px monospace',
                fill: '#ffffff'
            }
        });
        assetText.setOrigin(0.5, 0.5);
        this.load.on('progress', function (value) {
            percentText.setText(parseInt(value * 100) + '%');
            progressBar.clear();
            progressBar.fillStyle(0xffffff, 1);
            progressBar.fillRect(250, 280, 300 * value, 30);
        });
        this.load.on('fileprogress', function (file) {
            assetText.setText('Loading asset: ' + file.key);
        });
        this.load.on('complete', function () {
            progressBar.destroy();
            progressBox.destroy();
            loadingText.destroy();
            percentText.destroy();
            assetText.destroy();
        });
        // this.load.image('logo', 'zenvalogo.png');
        for (var i = 0; i < 5; i++) {
            this.load.image('logo'+i, '/assets/background.jpg');
        }
        this.load.image("topMatch", "/assets/top_match.jpg");
        this.load.image("topLogo", "/assets/top_logo.jpg");
        this.load.image("tick", '/assets/tick.png');
        this.load.image("retryIcon", "/assets/svg/retry.svg")
        this.load.image("border", '/assets/squar.png');
          this.load.spritesheet("blocks1", assetsList.element5,{
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks2", assetsList.element6,{
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks3", assetsList.element7,{
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks4", assetsList.element8,{
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks5", assetsList.element1,{
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks6", assetsList.element2, {
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks7", assetsList.element3, {
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks8", assetsList.element4, {
          frameWidth: 100,
          frameHeight: 100,
        });
    }
    
    create() {
        // const borderGraphics = this.add.graphics();
        // const borderThickness = 6;
        // borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
        // const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
        // borderGraphics.beginPath();
        // borderGraphics.moveTo(borderX, 130);
        // borderGraphics.lineTo(borderX, window.innerHeight - 260);
        // borderGraphics.strokePath();
        // borderGraphics.closePath();

        // const borderGraphicsX = this.add.graphics();
        // const borderThicknessX = 6;
        // borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
        // const borderY = window.innerHeight / 5 - borderThickness / 2; // Center the border vertically on the screen
        // borderGraphicsX.beginPath();
        // borderGraphicsX.moveTo(0, borderY);
        // borderGraphicsX.lineTo(window.innerWidth, borderY);
        // borderGraphicsX.strokePath();
        // borderGraphicsX.closePath();

      const params = new URLSearchParams(window.location.search);
        const paramsID = params.get('id');
        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
          .then(response => response.json())
          .then(({ data }) => {
            blockMatches = [
                {
                  blockName: "blocks1",
                  targetName: `target${data.match1}`,
                },
                {
                  blockName: "blocks2",
                  targetName: `target${data.match2}`,
                },
                {
                  blockName: "blocks3",
                  targetName: `target${data.match3}`,
                },
                {
                  blockName: "blocks4",
                  targetName: `target${data.match4}`,
                },
                {
                  blockName: "blocks5",
                  targetName: `target${data.match5}`,
                },
                {
                  blockName: "blocks6",
                  targetName: `target${data.match6}`,
                },
                {
                  blockName: "blocks7",
                  targetName: `target${data.match7}`,
                },
                {
                  blockName: "blocks8",
                  targetName: `target${data.match8}`,
                }
            ];
            // console.log(data)
            if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
                this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
                this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
            }
            if(isMobile){
                this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
                this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
            } else{
                this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
                this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
            }
            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
            // Base font size for your text
            const baseFontSize = 22;
            // Calculate responsive font size based on screen width
            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
            const descrptText = this.add.text(screenCenterX, 95, data.description, {
              font: ` ${responsiveFontSize}px Quicksand`,
              fill: '#7c4c23',
            }).setOrigin(0.5);
          })
          .catch(error => {
            console.error('Error fetching initial data:', error);
          });
        const displayW = window.innerWidth;
        const URL = window.location.href;
        const gameName = URL.split('/');
        let userData = {
          'user': 'drawing@beanstalkedu.com',
                'game_name': gameName[3],
                'starts': formattedDateTime,
                // 'game_start' : gameStartTime,
        };
        function submitUserData() {
          fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
            method: 'POST',
            headers: {
              'Content-Type' : 'application/json'
            },
            body: JSON.stringify(userData)
          })
          .then(response => {
            if(response.ok){
              // console.log('Data Saved', response)
            } else{
              // console.log('Something Wrong', response)
            }
          })
          .catch(error => {
            console.error('An error occured', error)
          }); 
        };
        // window.load

        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
            font: '600 20px Quicksand',
            fill: 'blue'
          }).setDepth(1);
          submitNotic.setVisible(false);
        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
          font: '600 30px Quicksand',
          fill: '#fff',
          backgroundColor: 'blue',
          padding: { x: 20, y: 10 },
        }).setDepth(1);
        submitButton.setVisible(false);
        submitButton.setInteractive().on('pointerdown', () => {
          // console.log('Clicked');
          submitButton.setVisible(false);
          submitNotic.setVisible(true);
          // window.location.reload();
          // windowLoad();
          submitUserData();
        })
        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
        this.add.image(displayW / 6, 30, "topMatch").setScale();
        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
        const blocks = [
            {
                x: displayW / 2 - 200,
                y: window.innerHeight - 250,
                textureKey: "blocks1",
                id: "block1",
            },
            {
                x: displayW / 2-100,
                y: window.innerHeight - 250,
                textureKey: "blocks2",
                id: "block2",
            },
            {
                x: displayW / 2,
                y: window.innerHeight - 250,
                textureKey: "blocks3",
                id: "block3",
            },
            {
                x: displayW / 2+100,
                y: window.innerHeight - 250,
                textureKey: "blocks4",
                id: "block4",
            },
            {
                x: displayW / 2-200,
                y: window.innerHeight - 120,
                textureKey: "blocks5",
                id: "block5",
            },
            {
                x: displayW / 2-100,
                y: window.innerHeight - 120,
                textureKey: "blocks6",
                id: "block6",
            },
            {
                x: displayW / 2,
                y: window.innerHeight - 120,
                textureKey: "blocks7",
                id: "block7",
            },
            {
                x: displayW / 2+100,
                y: window.innerHeight - 120,
                textureKey: "blocks8",
                id: "block8",
            },
        ];
        // console.log('test blocks',blocks[0])
        let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.5;}
        const droppedBlocks = [];
        const targetZoneBorders = [];
        targetZones.forEach((targetZone) => {
          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale);
          targetZoneBorders.push(targetBorder);
          targetZone.block = null;
        }),
        blocks.forEach((block, index) => {
          const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
          // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
          newBlock.on("drag", (pointer, dragX, dragY) => {
            newBlock.setScale(1.3);
            newBlock.x = dragX;
            newBlock.y = dragY;
        });

        newBlock.on("dragend", () => {
            newBlock.setScale(1.0).setDepth(-2);
            let droppedOnTargetZone = false;

            targetZones.forEach((targetZone, targetIndex) => {
                if (
                    Phaser.Geom.Intersects.RectangleToRectangle(
                        newBlock.getBounds(),
                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
                    )
                ) {
                    // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
                    const col = counter % 2;
                    const row = Math.floor(counter / 2);
                        newBlock.setPosition(targetZone.x - col * (newBlock.width + 10), targetZone.y - row * (newBlock.height + 10));
                        newBlock.disableInteractive();
                        targetZone.block = newBlock;
                        droppedBlocks.push(newBlock);

                        // Adjust isMatch function based on your requirements
                        if (isMatch(newBlock.texture.key, targetZone.name)) {
                            // Handle match logic if needed
                        }

                        droppedOnTargetZone = true;
                        targetZoneBorders[targetIndex].setVisible(true);
                        targetZoneBorders[targetIndex].setAlpha(1);
                        return;
                    }
            });

            if (!droppedOnTargetZone) {
                newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
            }

            // Check if all blocks have been dropped on target zones
            if (droppedBlocks.length === targetZones.length) {
                displayResult(droppedBlocks);
            }
        });



        });
        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)
          }
          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) => {
    droppedBlocks.forEach((block) => {
      const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
    });
  };

</script>
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
  * {
margin: 0;
padding: 0;
cursor: -webkit-grab; cursor: grab;
font-family: quicksand;
}
/* body {
margin: 0;
background: #020202;
cursor: crosshair;
} */
/* canvas{display:block} */
/* h1 {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: "Source Sans Pro";
font-size: 5em;
font-weight: 900;
-webkit-user-select: none;
user-select: none;
} */
  #overlap {       
    display: none;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #7c4c23;
    text-align: center;
    margin-top: 7%;
  }
  #overlap .verryGood{
    display: flex;
    flex-direction: column;
    place-items: center;
    font-size: 40px;
    font-weight: bolder;
    height: fit-content;
  }
  #overlap .good{
    display: flex;
    flex-direction: column;
    justify-content: center;
    place-items: center;
    font-size: 40px;
    font-weight: bolder;
  }
  #overlap .lost{
    display: flex;
    flex-direction: column;
    justify-content: center;
    place-items: center;
    font-size: 40px;
    font-weight: bolder;
  }
  .displayNone {
    display: none;
  }
  #result {
    font-size: 30px;
    font-weight: bold;
  }
</style>