import { assetsList, submitButton, targetZones, isMatch, displayResult } from "./index.astro.inline.mjs";

export class MyGame extends Phaser.Scene {
constructor() {
super();
}
preload() {
var progressBar = this.add.graphics();
var progressBox = this.add.graphics();
progressBox.fillStyle(2236962, 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(16777215, 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("bg", '/assets/bgwhite.jpg');
// this.load.image("target1", assetsList.right_image1);
// this.load.image("target2", '/assets/hay.png');
// this.load.image("target3", '/assets/mat.png');
// this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("target1", assetsList.right_image1, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("target2", assetsList.right_image2, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("target3", assetsList.right_image3, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("target4", assetsList.right_image4, {
frameWidth: 100,
frameHeight: 100,
});

this.load.spritesheet("blocks1", assetsList.left_image1, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks2", assetsList.left_image2, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks3", assetsList.left_image3, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks4", assetsList.left_image4, {
frameWidth: 100,
frameHeight: 100,
});
}
create() {
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(({ data }) => {
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
const baseFontSize = 20;
// 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, 70, data.description, {
font: `600 ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
// Left Image Name
this.add.text(displayW / 14, 240, data.left_image1_name).setTint(8145955);
this.add.text(displayW / 14, 409, data.left_image2_name).setTint(8145955);
this.add.text(displayW / 14, 579, data.left_image3_name).setTint(8145955);
this.add.text(displayW / 14, 750, data.left_image4_name).setTint(8145955);

//Right Image Name
this.add.text(displayW * 0.9 - 50, 240, data.right_image1_name).setTint(8145955);
this.add.text(displayW * 0.9 - 50, 409, data.right_image2_name).setTint(8145955);
this.add.text(displayW * 0.9 - 50, 579, data.right_image3_name).setTint(8145955);
this.add.text(displayW * 0.9 - 50, 750, data.right_image4_name).setTint(8145955);
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
const displayW = window.innerWidth;
async; submitUserData(); {
try {
const response = await fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify('Test submission')
});

if (response.ok) {
// console.log('Data Saved', response);
} else {
// console.log('Something Wrong', response);
}
} catch (error) {
console.error('An error occurred', error);
}
}
submitButton = this.add.text(window.innerWidth / 2, window.innerHeight / 2, "Submit", {
font: '600 40px Quicksand',
fill: '#fff',
backgroundColor: '#05b3a4',
});
submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
});
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.8 - 5, 30, "topLogo").setScale();
this.add.image(displayW * 0.9 - 32, 170, "target1"),
this.add.image(displayW * 0.9 - 32, 170, "border").setAlpha(0.4).setScale(0.7),
this.add.image(displayW * 0.9 - 32, 340, "target2"),
this.add.image(displayW * 0.9 - 32, 340, "border").setAlpha(0.4).setScale(0.7),
this.add.image(displayW * 0.9 - 32, 510, "target3"),
this.add.image(displayW * 0.9 - 32, 510, "border").setAlpha(0.4).setScale(0.7),
this.add.image(displayW * 0.9 - 32, 680, "target4"),
this.add.image(displayW * 0.9 - 32, 680, "border").setAlpha(0.4).setScale(0.7);
const blocks = [
{
x: displayW / 15 - 10,
y: 120,
textureKey: "blocks1",
id: "block1",
},
{
x: displayW / 15 - 10,
y: 280,
textureKey: "blocks2",
id: "block2",
},
{
x: displayW / 15 - 10,
y: 460,
textureKey: "blocks3",
id: "block3",
},
{
x: displayW / 15 - 10,
y: 640,
textureKey: "blocks4",
id: "block4",
},
];
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 = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.7);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),

blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
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);
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);
}
});
});
}
}