diff --git a/public/assets/top_logo.jpg b/public/assets/top_logo.jpg new file mode 100755 index 0000000..2dab0c7 Binary files /dev/null and b/public/assets/top_logo.jpg differ diff --git a/public/assets/top_match.jpg b/public/assets/top_match.jpg new file mode 100755 index 0000000..f41e74d Binary files /dev/null and b/public/assets/top_match.jpg differ diff --git a/src/pages/drag/font-size.js b/src/pages/drag/font-size.js new file mode 100644 index 0000000..4333fc9 --- /dev/null +++ b/src/pages/drag/font-size.js @@ -0,0 +1,30 @@ +const config = { + type: Phaser.AUTO, + width: 800, + height: 600, + scene: { + create: create + } +}; + +const game = new Phaser.Game(config); + +function create() { + const text = this.add.text(0, 0, 'Responsive Font', { + fontSize: getResponsiveFontSize(game.scale.width, game.scale.height, 40),}); + + // Center the text + text.setPosition(game.scale.width / 2 - text.width / 2, game.scale.height / 2 - text.height / 2); +} + +function getResponsiveFontSize(baseWidth, baseHeight, baseSize) { + // You can tweak these values as per your requirements + const minWidth = 400; + const maxWidth = 1200; + const minFontSize = 20; + const maxFontSize = 60; + + // Calculate the font size based on the screen width + const ratio = Phaser.Math.Clamp(baseWidth, minWidth, maxWidth) / maxWidth; + return minFontSize + (maxFontSize - minFontSize) * ratio; +} diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 20f2335..132c281 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -1,29 +1,36 @@ --- import Layout from '../../layouts/Layout.astro'; -// const data = await fetch('https://management.beanstalkedu.com/items/game_drag'); +// const data = await fetch(`https://management.beanstalkedu.com/items/game_drag`); // const dataJson = await data.json(); // const description = dataJson.data[2].description; // console.log(description) -// const search = Astro.url.searchParams.get('search')! || ''; +// const search = Astro.url.searchParams.get('id')! || ''; // console.log("ID Search",search) ---
+
+
+ +
-
+

Congratulations!

You win the Game!

- -
+ +
@@ -51,25 +58,25 @@ import Layout from '../../layouts/Layout.astro'; const targetZones = [ { x: 0, - y: 160, + y: 150, name: "target1", block: null, }, { x: 0, - y: 340, + y: 320, name: "target2", block: null, }, { x: 0, - y: 540, + y: 490, name: "target3", block: null, }, { x: 0, - y: 730, + y: 660, name: "target4", block: null, }, @@ -94,13 +101,14 @@ const blockMatches = [ ]; // console.log(blockMatches.blockName, blockMatches.targetName) var assetsList = {} +var assetsName = {} const params = new URLSearchParams(window.location.search); const paramsID = params.get('id'); const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`) .then(response => response.json()) .then(({data}) => { - // console.log(data) - const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data + const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data; + // const {left_image1_name, left_image2_name, left_image3_name, left_image4_name, right_image1_name, right_image2_name, right_image3_name, right_image4_name} = data assetsList.left_image1 = "https://management.beanstalkedu.com/assets/" + left_image1 + "?width=100"; assetsList.left_image2 = "https://management.beanstalkedu.com/assets/" + left_image2 + "?width=100"; assetsList.left_image3 = "https://management.beanstalkedu.com/assets/" + left_image3 + "?width=100"; @@ -109,7 +117,6 @@ const params = new URLSearchParams(window.location.search); assetsList.right_image2 = "https://management.beanstalkedu.com/assets/" + right_image2 + "?width=100"; assetsList.right_image3 = "https://management.beanstalkedu.com/assets/" + right_image3 + "?width=100"; assetsList.right_image4 = "https://management.beanstalkedu.com/assets/" + right_image4 + "?width=100"; - const config = { type: Phaser.AUTO, width: window.innerWidth, @@ -121,10 +128,13 @@ const params = new URLSearchParams(window.location.search); }, scene: MyGame, }; + const name1 = data.left_image1_name + console.log(name1) const game = new Phaser.Game(config); - + }) .catch(error => { + console.error('Error fetching initial data:', error); }); class MyGame extends Phaser.Scene { @@ -192,8 +202,10 @@ class MyGame extends Phaser.Scene { 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/background.jpg'); + 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'); @@ -235,19 +247,49 @@ class MyGame extends Phaser.Scene { }); } create() { + const params = new URLSearchParams(window.location.search); + const paramsID = params.get('id'); + const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`) + .then(response => response.json()) + .then(({data}) => { + // const name1 = data.left_image1_name + // console.log(name1) - const displayW = window.innerWidth; - const displayH = window.innerHeight; - + //Description Text + const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; + const loadingText = this.add.text(screenCenterX, 60, data.description).setTint(0x7c4c23).setOrigin(0.5); + // this.add.text(0, 0, data.description).setFontSize(20).setTint(0x7c4c23); + + // Left Image Name + this.add.text(displayW / 18 + 10, 220, data.left_image1_name).setTint(0x7c4c23); + this.add.text(displayW / 18 + 10, 389, data.left_image2_name).setTint(0x7c4c23); + this.add.text(displayW / 18 + 10, 559, data.left_image3_name).setTint(0x7c4c23); + this.add.text(displayW / 18 + 10, 730, data.left_image4_name).setTint(0x7c4c23); + + //Right Image Name + this.add.text(displayW * 0.832-32, 220, data.right_image1_name).setTint(0x7c4c23); + this.add.text(displayW * 0.832-32, 389, data.right_image2_name).setTint(0x7c4c23); + this.add.text(displayW * 0.832-32, 559, data.right_image3_name).setTint(0x7c4c23); + this.add.text(displayW * 0.832-32, 730, data.right_image4_name).setTint(0x7c4c23); + }) + .catch(error => { + + console.error('Error fetching initial data:', error); + }); + + const displayW = window.innerWidth; + const displayH = window.innerHeight; this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); - this.add.image(displayW * 0.9-32, 160, "target1"), - this.add.image(displayW * 0.9-32, 160, "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, 540, "target3"), - this.add.image(displayW * 0.9-32, 540, "border").setAlpha(0.4).setScale(0.7), - this.add.image(displayW * 0.9-32, 730, "target4"), - this.add.image(displayW * 0.9-32, 730, "border").setAlpha(0.4).setScale(0.7); + 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, 150, "target1"), + this.add.image(displayW * 0.9-32, 150, "border").setAlpha(0.4).setScale(0.7), + this.add.image(displayW * 0.9-32, 320, "target2"), + this.add.image(displayW * 0.9-32, 320, "border").setAlpha(0.4).setScale(0.7), + this.add.image(displayW * 0.9-32, 490, "target3"), + this.add.image(displayW * 0.9-32, 490, "border").setAlpha(0.4).setScale(0.7), + this.add.image(displayW * 0.9-32, 660, "target4"), + this.add.image(displayW * 0.9-32, 660, "border").setAlpha(0.4).setScale(0.7); // { // this.group = this.add.group(); // Phaser.Math.Distance.Squared; @@ -262,26 +304,26 @@ class MyGame extends Phaser.Scene { // this.add.image(1570, 730, "target4"); const blocks = [ { - x: displayW / 15, - y: 90, + x: displayW / 15 - 10, + y: 100, textureKey: "blocks1", id: "block1", }, { - x: displayW / 15, - y: 270, + x: displayW / 15 - 10, + y: 260, textureKey: "blocks2", id: "block2", }, { - x: displayW / 15, - y: 470, + x: displayW / 15 - 10, + y: 440, textureKey: "blocks3", id: "block3", }, { - x: displayW / 15, - y: 660, + x: displayW / 15 - 10, + y: 620, textureKey: "blocks4", id: "block4", }, @@ -380,69 +422,41 @@ const displayResult = (droppedBlocks) => { } } }); - // if (points >= droppedBlocks.length / 2) { - // finalDom = document.getElementById("win"); - // finalDom.classList.add("win"); - // } else { - // finalDom = document.getElementById("lost"); - // finalDom.classList.add("lost"); - // } - // document.getElementById("result").innerHTML = "Points: " + points; - // finalDom.classList.add("result"); }; -let score = 0; +score = 0; counter = 0; const isMatch = (blockName, targetName) => { -// if(isMatch){ -// counter++; -// if(counter === 4){ -// const overlap = document.getElementById("overlap"); -// overlap.style.display = "block"; -// console.log("Done") -// } - -// } - - const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); +if(isMatch){ + counter++; + // console.log(counter) + if(counter === 4){ + const overlap = document.getElementById("overlap"); + overlap.style.display = "block"; + // console.log("Done") + } +} +const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); // console.log(match) if(match){ - score++; - // console.log("Score:", score) + score ++; + // console.count(score) + let totalPoints = score +// let totalPoints = score.length; +console.log(totalPoints) +// let totalPoints = {}; + if(score === 4){ + finalDom = document.getElementById("win"); + finalDom.classList.add("win"); + // let img = document.createElement("img"); + // img.src = "/assets/party-feestje.gif"; + // img.width = 100; + // document.getElementById('win').appendChild(img); + } else { + finalDom = document.getElementById("lost"); + finalDom.classList.add("lost"); + // console.log("Loose") + } } - // if(match){ - // score++; - // // if(score === 4){ - // // const overlap = document.getElementById("overlap"); - // // overlap.style.display = "block"; - // // } - // console.log(score.length) - // if(score >= 4){ - // console.log("win") - // } else{ - // console.log("Loose") - // } - // } - // if(match){ - // score++ - // console.log(score) - // if(score.length >= 4){ - // const overlap = document.getElementById("overlap"); - // overlap.style.display = "block"; - // let resultt; - // if (resultt >= 2){ - // // result - // finalDom = document.getElementById("win"); - // finalDom.classList.add("win"); - // console.log("Win") - // } else { - // finalDom = document.getElementById("lost"); - // finalDom.classList.add("lost"); - // console.log("Loose") - // } - // } - // } - - // console.log("Result", result) return match !== undefined; }; @@ -476,9 +490,6 @@ user-select: none; } */ #overlap { display: none; - /* width: 800px; - height: 600px; */ - margin: 0; position: absolute; top: 50%; @@ -511,8 +522,4 @@ user-select: none; font-size: 30px; font-weight: bold; } - /* .try{ - font-size: 20px; - color: white; - } */ \ No newline at end of file