diff --git a/public/assets/animated-letter/small_d.mp4 b/public/assets/animated-letter/small_d.mp4
index 29a18dd..efb8ae1 100644
Binary files a/public/assets/animated-letter/small_d.mp4 and b/public/assets/animated-letter/small_d.mp4 differ
diff --git a/public/assets/small-letter/ds.svg b/public/assets/small-letter/ds.svg
index e6634ee..27477ff 100644
--- a/public/assets/small-letter/ds.svg
+++ b/public/assets/small-letter/ds.svg
@@ -196,8 +196,34 @@
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" />11
+ ry="2.0528049" />
diff --git a/public/assets/small-letter/ds_l1.svg b/public/assets/small-letter/ds_l1.svg
index 6c424a5..846221e 100644
--- a/public/assets/small-letter/ds_l1.svg
+++ b/public/assets/small-letter/ds_l1.svg
@@ -196,8 +196,35 @@
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" />11
+ ry="2.0528049" />
diff --git a/public/assets/small-letter/ds_l2.svg b/public/assets/small-letter/ds_l2.svg
index bf4b7b8..9e9a6ce 100644
--- a/public/assets/small-letter/ds_l2.svg
+++ b/public/assets/small-letter/ds_l2.svg
@@ -196,9 +196,36 @@
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" />11
+ ry="2.0528049" />
diff --git a/public/assets/svg/border.svg b/public/assets/svg/border.svg
new file mode 100644
index 0000000..f58204e
--- /dev/null
+++ b/public/assets/svg/border.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/assets/svg/cancel.svg b/public/assets/svg/cancel.svg
new file mode 100644
index 0000000..45697ea
--- /dev/null
+++ b/public/assets/svg/cancel.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/assets/svg/mute.svg b/public/assets/svg/mute.svg
new file mode 100644
index 0000000..23fcef8
--- /dev/null
+++ b/public/assets/svg/mute.svg
@@ -0,0 +1,5 @@
+
diff --git a/public/assets/svg/reset.svg b/public/assets/svg/reset.svg
new file mode 100644
index 0000000..3631211
--- /dev/null
+++ b/public/assets/svg/reset.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/assets/svg/tick2.svg b/public/assets/svg/tick2.svg
new file mode 100644
index 0000000..0569572
--- /dev/null
+++ b/public/assets/svg/tick2.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index aefc90a..0047571 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -57,7 +57,23 @@ 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;
+ let shortUniqueID;
+ let scoreTotal = 0;
+ let resultView;
+ let topLogoWidth;
+ let muteIconWidth;
+ let resetIconWidth;
+ let tickIconWidth;
+ let cancelIconWidth;
+
if(isMobile){
+ topLogoWidth = 5;
+ muteIconWidth = 2;
+ resetIconWidth = 1.6;
+ tickIconWidth = 1.34;
+ cancelIconWidth = 1.16;
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 67;
@@ -65,6 +81,11 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
} else {
+ topLogoWidth = 6;
+ muteIconWidth = 1.3;
+ resetIconWidth = 1.26;
+ tickIconWidth = 1.222;
+ cancelIconWidth = 1.185
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 100;
@@ -72,11 +93,7 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
}
- let submitButton;
- let formattedDateTime;
- let shortUniqueID;
- let scoreTotal = 0;
- let resultView;
+
gameResult = [];
window.onload = function() {
// Get the current date and time
@@ -248,13 +265,11 @@ 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.image("tickIcon", '/assets/svg/tick2.svg');
+ this.load.image("muteIcon", '/assets/svg/mute.svg');
+ this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+ this.load.image("resetIcon", '/assets/svg/reset.svg');
+ this.load.image("border", '/assets/svg/border.svg');
this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
frameHeight: 100,
@@ -290,7 +305,7 @@ import Layout from '../../layouts/Layout.astro';
});
}
create() {
- const params = new URLSearchParams(window.location.search);
+ const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
@@ -301,10 +316,7 @@ import Layout from '../../layouts/Layout.astro';
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);
+ const descrptText = this.add.text(screenCenterX, 85, data.description, {font: ` ${responsiveFontSize}px Quicksand`, fill: '#60C6CB',}).setOrigin(0.5);
blockMatches = [
{
blockName: "blocks1",
@@ -370,37 +382,41 @@ import Layout from '../../layouts/Layout.astro';
};
// window.load
+ const graphics = this.add.graphics();
+ const x = 0; const y = 54;
+ const lineWidth = window.innerWidth;
+ graphics.lineStyle(1, 0x0348A8);
+ graphics.setAlpha(0.2);
+ graphics.beginPath();
+ graphics.moveTo(x, y);
+ graphics.lineTo(x + lineWidth, y);
+ graphics.strokePath();
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);
+ // 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);
+
+ this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
+ this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+ const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
+ submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
+ this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+ this.add.image(displayW * 0.9-32, 170, "target1");
+ // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
+ this.add.image(displayW * 0.9-32, 340, "target2");
+ // this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1);
+ this.add.image(displayW * 0.9-32, 510, "target3");
+ // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
+ this.add.image(displayW * 0.9-32, 680, "target4");
+ // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
+
const blocks = [
{
x: displayW / 15 - 15,
@@ -427,11 +443,20 @@ import Layout from '../../layouts/Layout.astro';
id: "block4",
},
];
+ // submitButton.setVisible(false);
+ submitButton.setInteractive().on('pointerdown', () => {
+ // submitButton.setVisible(false);
+ submitNotic.setVisible(true);
+ // window.location.reload();
+ // windowLoad();
+ submitUserData();
+ });
+
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);
+ const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.5).setScale(1);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
@@ -498,12 +523,12 @@ import Layout from '../../layouts/Layout.astro';
}
});
});
- let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
- font: '600 30px Quicksand',
- fill: '#fff',
- backgroundColor: 'blue',
- padding: { x: 20, y: 10 },
- })
+ // 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();
})
@@ -530,7 +555,23 @@ import Layout from '../../layouts/Layout.astro';
resultView.setVisible(true);
}
};
-
+ const footerBorder = this.add.graphics();
+ const footerX = 0; const footerY = window.innerHeight / 1.07;
+ const footerLineWidth = window.innerWidth;
+ footerBorder.lineStyle(1, 0x0348A8);
+ footerBorder.setAlpha(0.2);
+ footerBorder.beginPath();
+ footerBorder.moveTo(footerX, footerY);
+ footerBorder.lineTo(footerX + footerLineWidth, footerY);
+ footerBorder.strokePath();
+ let textSize;
+ if(isMobile){
+ textSize = 10;
+ }else{
+ textSize = 20;
+ }
+ this.add.text(displayW / 20, window.innerHeight / 1.05, 'All rights reserved. Copyright@akademy.interakto2024', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
+ this.add.text(displayW / 1.36, window.innerHeight / 1.05, 'Privacy • Terms of use', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
}
}
// let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
@@ -560,28 +601,28 @@ import Layout from '../../layouts/Layout.astro';
+
+
+
+
+