From 1253dd5911c67b05f6621b802665f11632721942 Mon Sep 17 00:00:00 2001 From: dev sp Date: Mon, 4 Dec 2023 15:58:30 +0000 Subject: [PATCH] add submit options --- package.json | 4 +- src/pages/drag/MyGame.mjs | 272 +++++++++++++ src/pages/drag/index.astro | 711 +++++++++++++++++++--------------- src/pages/drawing/index.astro | 70 +++- 4 files changed, 739 insertions(+), 318 deletions(-) create mode 100644 src/pages/drag/MyGame.mjs diff --git a/package.json b/package.json index 1dede21..663a662 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,8 @@ "version": "0.0.1", "private": true, "scripts": { - "dev": "astro dev --host --port 2008", - "start": "astro dev --host --port 2008", + "dev": "astro dev --host --port 2022", + "start": "astro dev --host --port 2022", "build": "astro build", "preview": "astro preview", "astro": "astro" diff --git a/src/pages/drag/MyGame.mjs b/src/pages/drag/MyGame.mjs new file mode 100644 index 0000000..8882c36 --- /dev/null +++ b/src/pages/drag/MyGame.mjs @@ -0,0 +1,272 @@ +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://management.beanstalkedu.com/items/game_result`, { +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); +} +}); +}); +} +} diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 8fb0ea9..9482136 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -57,6 +57,31 @@ import Layout from '../../layouts/Layout.astro'; width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width height: window.innerHeight / 2, }; + let submitButton; + let formattedDateTime; + gameResult = []; + window.onload = function() { + // Get the current date and time + currentDate = new Date(); + + // Format the date and time as a string + formattedDateTime = currentDate.toLocaleString(); + + // Log the formatted date and time to the console + console.log("Page loaded on: " + formattedDateTime); + }; + if(isMobile){ + noticeWidth = 100; + noticeHeight = 0; + buttonWidth = 67; + buttonHeight = 0; + } else { + noticeWidth = 100; + noticeHeight = 0; + buttonWidth = 100; + buttonHeight = 0; + } + const targetZones = [ { x: 0, @@ -142,341 +167,397 @@ import Layout from '../../layouts/Layout.astro'; 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'); + 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' } - 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(0x7c4c23); - this.add.text(displayW / 14, 409, data.left_image2_name).setTint(0x7c4c23); - this.add.text(displayW / 14, 579, data.left_image3_name).setTint(0x7c4c23); - this.add.text(displayW / 14, 750, data.left_image4_name).setTint(0x7c4c23); - - //Right Image Name - this.add.text(displayW * 0.9-50, 240, data.right_image1_name).setTint(0x7c4c23); - this.add.text(displayW * 0.9-50, 409, data.right_image2_name).setTint(0x7c4c23); - this.add.text(displayW * 0.9-50, 579, data.right_image3_name).setTint(0x7c4c23); - this.add.text(displayW * 0.9-50, 750, data.right_image4_name).setTint(0x7c4c23); - }) - .catch(error => { - console.error('Error fetching initial data:', error); }); - const displayW = window.innerWidth; - // 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(); - 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; - }), + 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("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, + }); - 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.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 + 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(0x7c4c23); + this.add.text(displayW / 14, 409, data.left_image2_name).setTint(0x7c4c23); + this.add.text(displayW / 14, 579, data.left_image3_name).setTint(0x7c4c23); + this.add.text(displayW / 14, 750, data.left_image4_name).setTint(0x7c4c23); + + //Right Image Name + this.add.text(displayW * 0.9-50, 240, data.right_image1_name).setTint(0x7c4c23); + this.add.text(displayW * 0.9-50, 409, data.right_image2_name).setTint(0x7c4c23); + this.add.text(displayW * 0.9-50, 579, data.right_image3_name).setTint(0x7c4c23); + this.add.text(displayW * 0.9-50, 750, data.right_image4_name).setTint(0x7c4c23); + }) + .catch(error => { + console.error('Error fetching initial data:', error); + }); + const displayW = window.innerWidth; + const URL = window.location.href; + const gameName = URL.split('/'); + var gameResult = { + 'f1' : gameName[3], + 'f2' : formattedDateTime, + } + function submitUserData() { + fetch(`https://management.beanstalkedu.com/items/game_result`, { + method: 'POST', + headers: { + 'Content-Type' : 'application/json' + }, + body: JSON.stringify(gameResult) + }) + .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(); + 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.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; } - } else { + }); + + if (!droppedOnTargetZone) { 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); - } - }); - }) + if (droppedBlocks.length === targetZones.length) + { + displayResult(droppedBlocks); + } + }); + }); + } } -} -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; +// let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", { +// font: '900 24px quicksand', +// fill: '#05b3a4', +// backgroundColor: '#7c4c23', +// padding: { x: 20, y: 10 }, +// borderRadius: '15px', // Border radius +// shadow: { +// offsetX: 2, // X offset for the shadow +// offsetY: 2, // Y offset for the shadow +// color: '#000', // Shadow color +// blur: 5, // Shadow blur +// fill: true // Apply shadow to fill (background color) +// } +// }); + 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) + const isMatch = (blockName, targetName) => { + if(isMatch){ + counter++; + // console.log(counter) - - if(counter === 4){ - - const overlap = document.getElementById("overlap"); - overlap.style.display = "block"; - // console.log("Done") + 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); - 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(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' + // } + // 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") - // } + // // // 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; + }; - } else{ - score = score - } - return match !== undefined; -};