diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 598682a..29b9f93 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -20,11 +20,11 @@ import Layout from '../../layouts/Layout.astro';
-
-

Congratulations!

-

You win the Game!

+
+ -
+
-
-

Oops!

+
+
+
@@ -309,21 +310,17 @@ class MyGame extends Phaser.Scene { 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; @@ -332,7 +329,6 @@ class MyGame extends Phaser.Scene { newBlock.on("dragend", () => { newBlock.setScale(1.0); let droppedOnTargetZone = false; - targetZones.forEach((targetZone, targetIndex) => { if ( Phaser.Geom.Intersects.RectangleToRectangle( @@ -380,7 +376,6 @@ class MyGame extends Phaser.Scene { } if (droppedBlocks.length === targetZones.length) { - displayResult(droppedBlocks); } }); @@ -395,8 +390,8 @@ const displayResult = (droppedBlocks) => { const targetZone = targetZones.find((zone) => zone.name === block.texture.key); }); }; -score = 0; -counter = 0; +let score = 0; +let counter = 0; const isMatch = (blockName, targetName) => { if(isMatch){ counter++; @@ -407,30 +402,53 @@ if(isMatch){ // console.log("Done") } } -const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); - // console.log(match) + const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); + console.log(match) if(match){ 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 { - // console.log("2") - finalDom = document.getElementById("lost"); - finalDom.classList.add("lost"); - // console.log("Loose") + console.log(score) + switch (score) { + case 1: + day = "Points - 1"; + break; + case 2: + day = "Points - 2"; + break; + case 4: + day = "Points - 4"; } + 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") + // } + } - // console.log("Result", result) return match !== undefined; }; @@ -470,7 +488,7 @@ user-select: none; text-align: center; margin-top: 7%; } - #overlap .win{ + #overlap .verryGood{ display: flex; flex-direction: column; place-items: center; @@ -478,6 +496,14 @@ user-select: none; 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; diff --git a/src/pages/drag/font-size.js b/src/pages/drag/test.js similarity index 100% rename from src/pages/drag/font-size.js rename to src/pages/drag/test.js