From a589286fc31d212a33e6dd081962f1660e65415d Mon Sep 17 00:00:00 2001 From: kar Date: Wed, 10 Jan 2024 09:09:26 +0000 Subject: [PATCH] Delete src/pages/drag/MyGame.mjs --- src/pages/drag/MyGame.mjs | 272 -------------------------------------- 1 file changed, 272 deletions(-) delete mode 100644 src/pages/drag/MyGame.mjs diff --git a/src/pages/drag/MyGame.mjs b/src/pages/drag/MyGame.mjs deleted file mode 100644 index 6b6809f..0000000 --- a/src/pages/drag/MyGame.mjs +++ /dev/null @@ -1,272 +0,0 @@ -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); -} -}); -}); -} -}