kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change drawing v2, drag v2, drag v3

pull/2/head
dev sp 2024-01-23 13:24:00 +00:00
parent a3ad792a96
commit a65cee3ba9
7 changed files with 1447 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/pages/drag/v2.astro
View File

@ -86,9 +86,6 @@ import Layout from '../../layouts/Layout.astro';
// 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);
};
function generateShortUniqueID(length) {14
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@ -233,11 +230,6 @@ import Layout from '../../layouts/Layout.astro';
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,
@ -301,7 +293,6 @@ import Layout from '../../layouts/Layout.astro';
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
const baseFontSize = 30;
// 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, 76, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
@ -310,16 +301,21 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name
this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23);
let customWidth = window.innerWidth;
let customHeight = window.innerHeight;
let nameTextSize;
let namePosition;
if(isMobile){nameTextSize = `10px`; namePosition = 30}else{nameTextSize = `15px`; namePosition = 0}
this.add.text(customWidth / 20, 240, data.left_image1_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 20, 409, data.left_image2_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 20, 579, data.left_image3_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 20, 750, data.left_image4_name, {font : nameTextSize, fill: `#7c4c23`});
//Right Image Name
this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 750, data.right_image4_name).setTint(0x7c4c23);
this.add.text(customWidth / 1.3 - namePosition, 240, data.right_image1_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 1.3 - namePosition, 409, data.right_image2_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 1.3 - namePosition, 579, data.right_image3_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 1.3 - namePosition, 750, data.right_image4_name, {font: nameTextSize, fill: `#7c4c23`});
})
.catch(error => {
console.error('Error fetching initial data:', error);
@ -375,16 +371,16 @@ import Layout from '../../layouts/Layout.astro';
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-43, 170, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 340, "target2"),
this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 510, "target3"),
this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 680, "target4"),
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
// 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-43, 170, "border").setAlpha(0.4).setScale(0.65),
// this.add.image(displayW * 0.9-32, 340, "target2"),
// this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
// this.add.image(displayW * 0.9-32, 510, "target3"),
// this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
// this.add.image(displayW * 0.9-32, 680, "target4"),
// this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [
{
x: displayW / 15 - 15,
@ -416,15 +412,16 @@ import Layout from '../../layouts/Layout.astro';
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.65);
const targetBorder = this.add.image(targetZone.x = displayW / 1.25, targetZone.y, targetZone.name).setAlpha(1).setScale(1);
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);
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(1);
newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setAlpha(0)
newBlock.setScale(1.3);
newBlock.x = dragX;
newBlock.y = dragY;
@ -533,11 +530,11 @@ import Layout from '../../layouts/Layout.astro';
</script>
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
* {
margin: 0;
padding: 0;
cursor: -webkit-grab; cursor: grab;
font-family: quicksand;
}
margin: 0;
padding: 0;
cursor: -webkit-grab; cursor: grab;
font-family: quicksand;
}
/* body {
margin: 0;
background: #020202;

601
src/pages/drag/v20.astro Normal file
View File

@ -0,0 +1,601 @@
---
import Layout from '../../layouts/Layout.astro';
---
<Layout title="Drag Game">
<main>
<div>
<div>
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
<div class="flex justify-center">
<div class="container mx-auto px-4">
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
<img src="/assets/top_match.jpg" alt="" />
<img src="/assets/top_logo.jpg" alt="" />
</div> -->
</div>
<!-- <h2>{data.name}</h2> -->
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
</div>
</div>
<div id="overlap">
<!-- <div id="result"></div> -->
<div id="verryGood" class="displayNone ">
<!-- <p>Congratulations!</p>
<p>You win the Game!</p> -->
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
<!-- <div class="flex flex-row">
<a href="" >
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
</a>
<a href="" >
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</a>
</div>
<div>
</div> -->
</div>
<div id="good" class="displayNone">
<!-- <p>Oops!</p>
<p>You Lost the Game!</p>
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
<a href="" >
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
</a> -->
</div>
<div id="lost" class="displayNone"></div>
</div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2,
};
if(isMobile){
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 67;
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
} else {
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 100;
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let blockMatches;
let resultView;
let scoreTotal = 0;
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);
};
function generateShortUniqueID(length) {14
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
result += characters.charAt(randomIndex);
}
return result;
};
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
const targetZones = [
{
x: 0,
y: 170,
name: "target1",
block: null,
},
{
x: 0,
y: 340,
name: "target2",
block: null,
},
{
x: 0,
y: 510,
name: "target3",
block: null,
},
{
x: 0,
y: 680,
name: "target4",
block: null,
},
];
// console.log(blockMatches.blockName, blockMatches.targetName)
var assetsList = {}
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({data}) => {
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
if(isMobile){
imageCustomWidth = "?width=100";
} else{
imageCustomWidth = "?width=100";
}
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
assetsList.left_image1 = assetsURL + left_image1 + imageCustomWidth;
assetsList.left_image2 = assetsURL + left_image2 + imageCustomWidth;
assetsList.left_image3 = assetsURL + left_image3 + imageCustomWidth;
assetsList.left_image4 = assetsURL + left_image4 + imageCustomWidth;
assetsList.right_image1 = assetsURL + right_image1 + imageCustomWidth;
assetsList.right_image2 = assetsURL + right_image2 + imageCustomWidth;
assetsList.right_image3 = assetsURL + right_image3 + imageCustomWidth;
assetsList.right_image4 = assetsURL + right_image4 + imageCustomWidth;
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: '#ffffff',
parent: "phaser-example",
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: MyGame,
};
const game = new Phaser.Game(config);
})
.catch(error => {
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');
}
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://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({ data }) => {
// console.log(data) right_match
blockMatches = [
{
blockName: "blocks1",
targetName: `target${data.right_match1}`,
},
{
blockName: "blocks2",
targetName: `target${data.right_match2}`,
},
{
blockName: "blocks3",
targetName: `target${data.right_match3}`,
},
{
blockName: "blocks4",
targetName: `target${data.right_match4}`,
},
];
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
const baseFontSize = 30;
// 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, 76, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name
this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23);
//Right Image Name
this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 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('/');
let userData = {
'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3],
'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.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-43, 170, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 340, "target2"),
this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 510, "target3"),
this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 680, "target4"),
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [
{
x: displayW / 15 - 15,
y: 120,
textureKey: "blocks1",
id: "block1",
},
{
x: displayW / 15 - 15,
y: 280,
textureKey: "blocks2",
id: "block2",
},
{
x: displayW / 15 - 15,
y: 460,
textureKey: "blocks3",
id: "block3",
},
{
x: displayW / 15 - 15,
y: 640,
textureKey: "blocks4",
id: "block4",
},
];
this.graphics = this.add.graphics();
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.65);
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;
let targetZoneMatched = null;
targetZones.forEach((targetZone, targetIndex) => {
if (
Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
)
) {
droppedOnTargetZone = true;
targetZoneMatched = targetZone;
targetZoneBorders[targetIndex].setAlpha(1);
return;
}
});
if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color
this.graphics.moveTo(block.x + 50, block.y + 50);
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath();
newBlock.setPosition(targetZoneMatched.x - 50, targetZoneMatched.y - 50);
newBlock.disableInteractive();
targetZoneMatched.block = newBlock;
droppedBlocks.push(newBlock);
if (isMatch(newBlock.texture.key, targetZoneMatched.name)) {
// Handle matching logic
}
} else {
newBlock.setPosition(block.x, block.y);
}
if (droppedBlocks.length === targetZones.length) {
// Display result or perform any other actions
displayResult(droppedBlocks);
}
});
});
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
})
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
let score = 0;
let counter = 0;
const isMatch = (blockName, targetName) => {
if(isMatch){
counter++;
// console.log(counter)
}
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match)
if(match !== undefined){
scoreTotal++;
console.log("Score Total", scoreTotal)
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
}
if(counter === 4){
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
// console.log(counter)
submitButton.setVisible(true);
resultView.setVisible(true);
}
};
}
}
// 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);
});
};
</script>
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
* {
margin: 0;
padding: 0;
cursor: -webkit-grab; cursor: grab;
font-family: quicksand;
}
/* body {
margin: 0;
background: #020202;
cursor: crosshair;
} */
/* canvas{display:block} */
/* h1 {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: "Source Sans Pro";
font-size: 5em;
font-weight: 900;
-webkit-user-select: none;
user-select: none;
} */
#overlap {
display: none;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #7c4c23;
text-align: center;
margin-top: 7%;
}
#overlap .verryGood{
display: flex;
flex-direction: column;
place-items: center;
font-size: 40px;
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;
justify-content: center;
place-items: center;
font-size: 40px;
font-weight: bolder;
}
.displayNone {
display: none;
}
#result {
font-size: 30px;
font-weight: bold;
}
</style>

336
src/pages/drag/v3.astro
View File

@ -64,8 +64,8 @@ import Layout from '../../layouts/Layout.astro';
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 140;
retryButtonHeight = window.innerHeight - 50;
leftTargetZoneW = window.innerWidth * 0.9 - 40;
rightTargetZoneW = window.innerWidth / 6;
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else {
noticeWidth = 100;
noticeHeight = 0;
@ -73,26 +73,23 @@ import Layout from '../../layouts/Layout.astro';
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
leftTargetZoneW = window.innerWidth * 0.9 - 172;
rightTargetZoneW = window.innerWidth / 6;
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let resultView;
let scoreTotal = 0; // resultView scoreTotal
let scoreTotal = 0;
let resultView; // scoreTotal resultView
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);
};
function generateShortUniqueID(length) {14
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@ -104,62 +101,41 @@ import Layout from '../../layouts/Layout.astro';
return result;
};
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172
const leftTargetZones = [
{
x: window.innerWidth / 4,
y: window.innerHeight / 2.5,
name: "target1",
block: null,
},
// Add more left target zones as needed
];
const centerTargetZones = [
{
x: window.innerWidth / 2,
y: window.innerHeight / 2.5,
name: "target2",
block: null,
},
// Add more right target zones as needed
];
const targetZones = [
{
x: rightTargetZoneW,
y: 170,
name: "target1",
block: null,
},
{
x: rightTargetZoneW,
y: 340,
name: "target2",
block: null,
},
{
x: rightTargetZoneW,
y: 510,
name: "target3",
block: null,
},
{
x: rightTargetZoneW,
y: 680,
name: "target4",
block: null,
},
{
x: leftTargetZoneW,
y: 170,
name: "target5",
block: null,
},
{
x: leftTargetZoneW,
y: 340,
name: "target6",
block: null,
},
{
x: leftTargetZoneW,
y: 510,
name: "target7",
block: null,
},
{
x: leftTargetZoneW,
y: 680,
name: "target8",
block: null,
},
];
const rightTargetZones = [
{
x: window.innerWidth / 1.33,
y: window.innerHeight / 2.5,
name: "target3",
block: null,
},
// Add more right target zones as needed
];
const targetZones = [...leftTargetZones, ...centerTargetZones, ...rightTargetZones];
// console.log(blockMatches.blockName, blockMatches.targetName)
var assetsList = {};
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v03/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({data}) => {
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
@ -177,6 +153,7 @@ import Layout from '../../layouts/Layout.astro';
assetsList.element6 = assetsURL + image6 + imageCustomWidth;
assetsList.element7 = assetsURL + image7 + imageCustomWidth;
assetsList.element8 = assetsURL + image8 + imageCustomWidth;
// console.log(assetsList.left_image1)
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
@ -254,6 +231,7 @@ import Layout from '../../layouts/Layout.astro';
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');
}
@ -297,50 +275,85 @@ import Layout from '../../layouts/Layout.astro';
}
create() {
// const borderGraphics = this.add.graphics();
// borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
// const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
// borderGraphics.beginPath();
// borderGraphics.moveTo(borderX, 130);
// borderGraphics.lineTo(borderX, window.innerHeight - 260);
// borderGraphics.strokePath();
// borderGraphics.closePath();
const borderThickness = 6;
const borderGraphicsX = this.add.graphics();
const borderThicknessX = 6;
borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
const borderY = window.innerHeight / 1.5; // Center the border vertically on the screen
borderGraphicsX.beginPath();
borderGraphicsX.moveTo(0, borderY);
borderGraphicsX.lineTo(window.innerWidth, borderY);
borderGraphicsX.strokePath();
borderGraphicsX.closePath();
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v03/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({ data }) => {
console.log(data)
blockMatches = [
{
blockName: "blocks1",
targetName: `target${data.match_with1}`,
},
{
blockName: "blocks2",
targetName: `target${data.match_with2}`,
},
{
blockName: "blocks3",
targetName: `target${data.match_with3}`,
},
{
blockName: "blocks4",
targetName: `target${data.match_with4}`,
},
{
blockName: "blocks5",
targetName: `target${data.match_with5}`,
},
{
blockName: "blocks6",
targetName: `target${data.match_with6}`,
},
{
blockName: "blocks7",
targetName: `target${data.match_with7}`,
},
{
blockName: "blocks8",
targetName: `target${data.match_with8}`,
}
{
blockName: "blocks1",
targetName: `target${data.match_with1}`,
},
{
blockName: "blocks2",
targetName: `target${data.match_with2}`,
},
{
blockName: "blocks3",
targetName: `target${data.match_with3}`,
},
{
blockName: "blocks4",
targetName: `target${data.match_with4}`,
},
{
blockName: "blocks5",
targetName: `target${data.match_with5}`,
},
{
blockName: "blocks6",
targetName: `target${data.match_with6}`,
},
{
blockName: "blocks7",
targetName: `target${data.match_with7}`,
},
{
blockName: "blocks8",
targetName: `target${data.match_with8}`,
}
];
// console.log(data)
if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
}
if(isMobile){
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
} else{
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
}
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
const baseFontSize = 30;
const baseFontSize = 22;
// 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, 95, data.description, {
@ -406,61 +419,61 @@ import Layout from '../../layouts/Layout.astro';
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
const blocks = [
{
x: displayW / 2-400,
y: window.innerHeight - 120,
x: displayW / 2 - 200,
y: window.innerHeight - 250,
textureKey: "blocks1",
id: "block1",
},
{
x: displayW / 2-300,
y: window.innerHeight - 120,
x: displayW / 2-100,
y: window.innerHeight - 250,
textureKey: "blocks2",
id: "block2",
},
{
x: displayW / 2-200,
y: window.innerHeight - 120,
x: displayW / 2,
y: window.innerHeight - 250,
textureKey: "blocks3",
id: "block3",
},
{
x: displayW / 2 - 100,
y: window.innerHeight - 120,
x: displayW / 2+100,
y: window.innerHeight - 250,
textureKey: "blocks4",
id: "block4",
},
{
x: displayW / 2,
x: displayW / 2-200,
y: window.innerHeight - 120,
textureKey: "blocks5",
id: "block5",
},
{
x: displayW / 2+100,
x: displayW / 2-100,
y: window.innerHeight - 120,
textureKey: "blocks6",
id: "block6",
},
{
x: displayW / 2+200,
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks7",
id: "block7",
},
{
x: displayW / 2+300,
x: displayW / 2+100,
y: window.innerHeight - 120,
textureKey: "blocks8",
id: "block8",
},
];
// console.log('test blocks',blocks[0])
let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.2;}
const droppedBlocks = [];
const targetZoneBorders = [];
targetZones.forEach((targetZone, index) => {
targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
@ -471,42 +484,51 @@ import Layout from '../../layouts/Layout.astro';
newBlock.setScale(1.3);
newBlock.x = dragX;
newBlock.y = dragY;
});
newBlock.on("dragend", () => {
newBlock.setScale(1.0);
});
newBlock.on("dragend", () => {
newBlock.setScale(1.0).setDepth(-2);
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)) {
}
} else {
newBlock.setPosition(block.x, block.y);
}
droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(1);
return;
}
if (
Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
)
) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
const col = counter % 2;
const row = Math.floor(counter / 2);
newBlock.setPosition(targetZone.x - col * (newBlock.width + 10), targetZone.y - row * (newBlock.height + 10));
newBlock.disableInteractive();
targetZone.block = newBlock;
droppedBlocks.push(newBlock);
// Adjust isMatch function based on your requirements
if (isMatch(newBlock.texture.key, targetZone.name)) {
// Handle match logic if needed
}
droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(1);
return;
}
});
if (!droppedOnTargetZone) {
newBlock.setPosition(block.x, block.y);
newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
}
if (droppedBlocks.length === targetZones.length)
{
displayResult(droppedBlocks);
// Check if all blocks have been dropped on target zones
if (droppedBlocks.length === targetZones.length) {
displayResult(droppedBlocks);
}
});
});
});
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => {
@ -515,26 +537,24 @@ import Layout from '../../layouts/Layout.astro';
retryButton.setVisible(false);
let score = 0;
let counter = 0;
const isMatch = (blockName, targetName) => {
if(isMatch){
counter++;
// console.log(counter)
}
//resultView scoreTotal
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match)
if(match){
scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
// console.log(scoreTotal)
}
if(counter === 8){
if(isMatch){
counter++;
// console.log(counter)
submitButton.setVisible(true);
retryButton.setVisible(true);
resultView.setVisible(true);
}
}
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match)
if(match !== undefined){
scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
console.log("Score Total", scoreTotal)
}
if(counter === 8){
// console.log(counter)
submitButton.setVisible(true);
retryButton.setVisible(true);
resultView.setVisible(true);
}
};
}
}

615
src/pages/drag/v30.astro Normal file
View File

@ -0,0 +1,615 @@
---
import Layout from '../../layouts/Layout.astro';
---
<Layout title="Drag Game">
<main>
<div>
<div>
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
<div class="flex justify-center">
<div class="container mx-auto px-4">
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
<img src="/assets/top_match.jpg" alt="" />
<img src="/assets/top_logo.jpg" alt="" />
</div> -->
</div>
<!-- <h2>{data.name}</h2> -->
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
</div>
</div>
<div id="overlap">
<!-- <div id="result"></div> -->
<div id="verryGood" class="displayNone ">
<!-- <p>Congratulations!</p>
<p>You win the Game!</p> -->
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
<!-- <div class="flex flex-row">
<a href="" >
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
</a>
<a href="" >
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</a>
</div>
<div>
</div> -->
</div>
<div id="good" class="displayNone">
<!-- <p>Oops!</p>
<p>You Lost the Game!</p>
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
<a href="" >
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
</a> -->
</div>
<div id="lost" class="displayNone"></div>
</div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2,
};
if(isMobile){
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 67;
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 140;
retryButtonHeight = window.innerHeight - 50;
leftTargetZoneW = window.innerWidth * 0.9 - 40;
rightTargetZoneW = window.innerWidth / 6;
} else {
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 100;
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
leftTargetZoneW = window.innerWidth * 0.9 - 172;
rightTargetZoneW = window.innerWidth / 6;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let resultView;
let scoreTotal = 0; // resultView scoreTotal
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);
};
function generateShortUniqueID(length) {14
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
result += characters.charAt(randomIndex);
}
return result;
};
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172
const targetZones = [
{
x: rightTargetZoneW,
y: 170,
name: "target1",
block: null,
},
{
x: rightTargetZoneW,
y: 340,
name: "target2",
block: null,
},
{
x: rightTargetZoneW,
y: 510,
name: "target3",
block: null,
},
{
x: rightTargetZoneW,
y: 680,
name: "target4",
block: null,
},
{
x: leftTargetZoneW,
y: 170,
name: "target5",
block: null,
},
{
x: leftTargetZoneW,
y: 340,
name: "target6",
block: null,
},
{
x: leftTargetZoneW,
y: 510,
name: "target7",
block: null,
},
{
x: leftTargetZoneW,
y: 680,
name: "target8",
block: null,
},
];
// console.log(blockMatches.blockName, blockMatches.targetName)
var assetsList = {};
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({data}) => {
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
if(isMobile){
imageCustomWidth = "?width=100";
} else{
imageCustomWidth = "?width=100";
}
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
assetsList.element1 = assetsURL + image1 + imageCustomWidth;
assetsList.element2 = assetsURL + image2 + imageCustomWidth;
assetsList.element3 = assetsURL + image3 + imageCustomWidth;
assetsList.element4 = assetsURL + image4 + imageCustomWidth;
assetsList.element5 = assetsURL + image5 + imageCustomWidth;
assetsList.element6 = assetsURL + image6 + imageCustomWidth;
assetsList.element7 = assetsURL + image7 + imageCustomWidth;
assetsList.element8 = assetsURL + image8 + imageCustomWidth;
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: '#ffffff',
parent: "phaser-example",
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: MyGame,
};
const game = new Phaser.Game(config);
})
.catch(error => {
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();
});
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("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks2", assetsList.element6,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks3", assetsList.element7,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks4", assetsList.element8,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks5", assetsList.element1,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks6", assetsList.element2, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks7", assetsList.element3, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks8", assetsList.element4, {
frameWidth: 100,
frameHeight: 100,
});
}
create() {
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({ data }) => {
console.log(data)
blockMatches = [
{
blockName: "blocks1",
targetName: `target${data.match_with1}`,
},
{
blockName: "blocks2",
targetName: `target${data.match_with2}`,
},
{
blockName: "blocks3",
targetName: `target${data.match_with3}`,
},
{
blockName: "blocks4",
targetName: `target${data.match_with4}`,
},
{
blockName: "blocks5",
targetName: `target${data.match_with5}`,
},
{
blockName: "blocks6",
targetName: `target${data.match_with6}`,
},
{
blockName: "blocks7",
targetName: `target${data.match_with7}`,
},
{
blockName: "blocks8",
targetName: `target${data.match_with8}`,
}
];
// console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
const baseFontSize = 30;
// 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, 95, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
const displayW = window.innerWidth;
const URL = window.location.href;
const gameName = URL.split('/');
let userData = {
'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3],
'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.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();
const blocks = [
{
x: displayW / 2-400,
y: window.innerHeight - 120,
textureKey: "blocks1",
id: "block1",
},
{
x: displayW / 2-300,
y: window.innerHeight - 120,
textureKey: "blocks2",
id: "block2",
},
{
x: displayW / 2-200,
y: window.innerHeight - 120,
textureKey: "blocks3",
id: "block3",
},
{
x: displayW / 2 - 100,
y: window.innerHeight - 120,
textureKey: "blocks4",
id: "block4",
},
{
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks5",
id: "block5",
},
{
x: displayW / 2+100,
y: window.innerHeight - 120,
textureKey: "blocks6",
id: "block6",
},
{
x: displayW / 2+200,
y: window.innerHeight - 120,
textureKey: "blocks7",
id: "block7",
},
{
x: displayW / 2+300,
y: window.innerHeight - 120,
textureKey: "blocks8",
id: "block8",
},
];
// console.log('test blocks',blocks[0])
const droppedBlocks = [];
const targetZoneBorders = [];
targetZones.forEach((targetZone, index) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
// 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)) {
}
} 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);
}
});
});
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
retryButton.setVisible(false);
let score = 0;
let counter = 0;
const isMatch = (blockName, targetName) => {
if(isMatch){
counter++;
// console.log(counter)
}
//resultView scoreTotal
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match)
if(match){
scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
// console.log(scoreTotal)
}
if(counter === 8){
// console.log(counter)
submitButton.setVisible(true);
retryButton.setVisible(true);
resultView.setVisible(true);
}
};
}
}
const displayResult = (droppedBlocks) => {
droppedBlocks.forEach((block) => {
const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
});
};
</script>
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
* {
margin: 0;
padding: 0;
cursor: -webkit-grab; cursor: grab;
font-family: quicksand;
}
/* body {
margin: 0;
background: #020202;
cursor: crosshair;
} */
/* canvas{display:block} */
/* h1 {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: "Source Sans Pro";
font-size: 5em;
font-weight: 900;
-webkit-user-select: none;
user-select: none;
} */
#overlap {
display: none;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #7c4c23;
text-align: center;
margin-top: 7%;
}
#overlap .verryGood{
display: flex;
flex-direction: column;
place-items: center;
font-size: 40px;
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;
justify-content: center;
place-items: center;
font-size: 40px;
font-weight: bolder;
}
.displayNone {
display: none;
}
#result {
font-size: 30px;
font-weight: bold;
}
</style>

30
src/pages/drag/v4.astro
View File

@ -480,7 +480,6 @@ import Layout from '../../layouts/Layout.astro';
newBlock.on("dragend", () => {
newBlock.setScale(1.0).setDepth(-2);
let droppedOnTargetZone = false;
targetZones.forEach((targetZone, targetIndex) => {
@ -490,21 +489,24 @@ import Layout from '../../layouts/Layout.astro';
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
)
) {
newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
newBlock.disableInteractive();
targetZone.block = newBlock;
droppedBlocks.push(newBlock);
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
const col = counter % 2;
const row = Math.floor(counter / 2);
newBlock.setPosition(targetZone.x - col * (newBlock.width + 10), targetZone.y - row * (newBlock.height + 10));
newBlock.disableInteractive();
targetZone.block = newBlock;
droppedBlocks.push(newBlock);
// Adjust isMatch function based on your requirements
if (isMatch(newBlock.texture.key, targetZone.name)) {
// Handle match logic if needed
// Adjust isMatch function based on your requirements
if (isMatch(newBlock.texture.key, targetZone.name)) {
// Handle match logic if needed
}
droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(1);
return;
}
droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(1);
return;
}
});
if (!droppedOnTargetZone) {

1
src/pages/drag/tmp2.astro → src/pages/drag/v40.astro
View File

@ -480,7 +480,6 @@ import Layout from '../../layouts/Layout.astro';
newBlock.on("dragend", () => {
newBlock.setScale(1.0).setDepth(-2);
let droppedOnTargetZone = false;
targetZones.forEach((targetZone, targetIndex) => {

23
src/pages/drawing/v2.astro
View File

@ -69,8 +69,6 @@ import Layout from '../../layouts/Layout.astro';
}
return result;
}
// shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
// console.log(shortUniqueID);
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
@ -406,26 +404,11 @@ import Layout from '../../layouts/Layout.astro';
});
customCursor = this.add.graphics();
customCursor.setDepth(2)
// Disable the default cursor
this.input.setDefaultCursor('none');
const borderThickness = 0;
const borderColor = 0xffffff; // White color (you can customize this)
const borderGraphics = this.add.graphics();
borderGraphics.lineStyle(borderThickness, borderColor);
// borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
// function continueDrawing(x, y) {
// if (
// x >= drawingZone.x &&
// x <= drawingZone.x + drawingZone.width &&
// y >= drawingZone.y &&
// y <= drawingZone.y + drawingZone.height
// ) {
// // The pointer is within the drawing zone, so continue drawing
// graphics.lineTo(x, y);
// graphics.strokePath();
// }
// };
// Add a "Save Snapshot" button
if(isMobile){
snapWidth = 50;
snapHeight = 70;
@ -491,6 +474,7 @@ import Layout from '../../layouts/Layout.astro';
function clearDrawing() {
graphics.clear();
}
let alertTriggered = false;
function update() {
const slider = document.querySelector('input[type="range"]');
if (slider && !isDrawing) {
@ -507,6 +491,11 @@ import Layout from '../../layouts/Layout.astro';
// Position the cursor at the current mouse pointer coordinates
customCursor.x = this.input.x;
customCursor.y = this.input.y;
// Check the condition for triggering the alert
if (!alertTriggered && game.input.x > game.scale.width / 2 + 200) {
alert('Alert triggered!');
alertTriggered = true; // Ensure the alert is triggered only once
}
}
</script>
<style>