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

Merge pull request 'game name from get parameter' (#26) from b4 into master 

Reviewed-on: #26
master
Subhodip Ghosh 2024-10-18 11:29:41 +00:00
parent 9c4e7f184d ff80faaf7d
commit 2f29d13432
7 changed files with 175 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/svg/cancel.svg
View File

@ -1,4 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="19.5" fill="white" stroke="#BB4D6A"/>
<circle cx="20" cy="20" r="19.5" fill="#FFFFFF" stroke="#BB4D6A"/>
<path d="M26.3002 13.71C26.1134 13.5227 25.8597 13.4175 25.5952 13.4175C25.3307 13.4175 25.077 13.5227 24.8902 13.71L20.0002 18.59L15.1102 13.7C14.9234 13.5127 14.6697 13.4075 14.4052 13.4075C14.1407 13.4075 13.887 13.5127 13.7002 13.7C13.3102 14.09 13.3102 14.72 13.7002 15.11L18.5902 20L13.7002 24.89C13.3102 25.28 13.3102 25.91 13.7002 26.3C14.0902 26.69 14.7202 26.69 15.1102 26.3L20.0002 21.41L24.8902 26.3C25.2802 26.69 25.9102 26.69 26.3002 26.3C26.6902 25.91 26.6902 25.28 26.3002 24.89L21.4102 20L26.3002 15.11C26.6802 14.73 26.6802 14.09 26.3002 13.71Z" fill="#BB4D6A"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 749 B

After

Width:  |  Height:  |  Size: 751 B

4
public/assets/svg/help_icon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20.9062" r="20" fill="#472DAC"/>
<path d="M15.4956 16.4422C14.7066 16.1069 14.3713 15.1305 14.8447 14.4205C15.8013 13.0003 17.3989 11.9648 19.5094 11.9648C21.8269 11.9648 23.4147 13.0201 24.2234 14.3416C24.9137 15.4757 25.3181 17.596 24.253 19.1739C23.0695 20.9195 21.9354 21.452 21.324 22.5763C21.176 22.8426 21.0873 23.0595 21.0281 23.5033C20.9393 24.2232 20.3476 24.7854 19.6178 24.7854C18.7599 24.7854 18.0597 24.0457 18.1583 23.1877C18.2175 22.6848 18.3358 22.1621 18.6119 21.669C19.3713 20.2982 20.8309 19.4895 21.679 18.2765C22.5764 17.0043 22.0735 14.6276 19.5291 14.6276C18.3752 14.6276 17.6257 15.2291 17.1622 15.9491C16.8171 16.5112 16.0971 16.6887 15.4956 16.4422ZM21.4916 28.7302C21.4916 29.815 20.604 30.7026 19.5192 30.7026C18.4344 30.7026 17.5468 29.815 17.5468 28.7302C17.5468 27.6453 18.4344 26.7578 19.5192 26.7578C20.604 26.7578 21.4916 27.6453 21.4916 28.7302Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1021 B

37
public/saveGameAI.js
View File

@ -5,6 +5,7 @@
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('userId');
const gameVersion = urlParams.get('gameName');
let gameId;
let submitNotic;
@ -15,25 +16,25 @@
const url = window.location.href;
const gameName = url.split('/');
const gameType = gameName[3].split('?id=');
let gameVersion;
if(gameType[0] == "guided-tracing"){
gameVersion = gameType[0].split('?')[0];
gameId = gameName[4];
console.log('Type - 1');
// let gameVersion;
// if(gameType[0] == "guided-tracing"){
// gameVersion = gameType[0].split('?')[0];
// gameId = gameName[4];
// console.log('Type - 1');
} else if(gameName.length == 4){
gameVersion = gameName[3].split('?')[0];
gameId = urlParams.get('id');
}
else if(gameName.length == 5){
gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
gameId = urlParams.get('id');
console.log('Type - 2');
}else if(gameName.length == 6){
gameVersion = gameType[0] + '-' + gameName[4];
gameId = urlParams.get('id');
console.log('Type - 3');
}
// } else if(gameName.length == 4){
// gameVersion = gameName[3].split('?')[0];
// gameId = urlParams.get('id');
// }
// else if(gameName.length == 5){
// gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
// gameId = urlParams.get('id');
// console.log('Type - 2');
// }else if(gameName.length == 6){
// gameVersion = gameType[0] + '-' + gameName[4];
// gameId = urlParams.get('id');
// console.log('Type - 3');
// }
// console.log("Here is game name ", gameType[0])
// console.log(gameVersion)

37
public/saveGameData.js
View File

@ -5,6 +5,7 @@ function retryGame(){
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('userId');
const gameVersion = urlParams.get('gameName');
let gameId;
let submitNotic;
@ -15,28 +16,28 @@ let startTime = Date.now();
const url = window.location.href;
const gameName = url.split('/');
const gameType = gameName[3].split('?id=');
let gameVersion;
// let gameVersion;
// console.log("Here is game name ", gameType[0])
if(gameType[0] == "guided-tracing"){
gameVersion = gameType[0].split('?')[0];
gameId = gameName[4];
console.log('Type - 1');
// if(gameType[0] == "guided-tracing"){
// gameVersion = gameType[0].split('?')[0];
// gameId = gameName[4];
// console.log('Type - 1');
} else if(gameName.length == 4){
gameVersion = gameName[3].split('?')[0];
gameId = urlParams.get('id');
}
else if(gameName.length == 5){
gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
gameId = urlParams.get('id');
console.log('Type - 2');
}else if(gameName.length == 6){
gameVersion = gameType[0] + '-' + gameName[4];
gameId = urlParams.get('id');
console.log('Type - 3');
}
// } else if(gameName.length == 4){
// gameVersion = gameName[3].split('?')[0];
// gameId = urlParams.get('id');
// }
// else if(gameName.length == 5){
// gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
// gameId = urlParams.get('id');
// console.log('Type - 2');
// }else if(gameName.length == 6){
// gameVersion = gameType[0] + '-' + gameName[4];
// gameId = urlParams.get('id');
// console.log('Type - 3');
// }
console.log(gameVersion)

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

@ -573,7 +573,7 @@ import Layout from '../../layouts/Layout.astro';
// console.log(match)
if(match !== undefined){
scoreTotal++;
// console.log("Score Total", scoreTotal)
console.log("Score Total", scoreTotal)
}
if(counter === 8){
// console.log(counter)

2
src/pages/drawing/index.astro
View File

@ -254,8 +254,8 @@ import Layout from '../../layouts/Layout.astro';
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.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('colorButton', '/assets/color_button.png');
}

238
src/pages/guided-tracing/0.astro
View File

@ -10,7 +10,9 @@ import Layout from "../../layouts/Layout.astro";
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
@ -22,7 +24,7 @@ import Layout from "../../layouts/Layout.astro";
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
backgroundColor: 0xebedea,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -44,10 +46,65 @@ import Layout from "../../layouts/Layout.astro";
let animatedLetter;
let scoreTotal = 0;
// const urls = window.location.href;
// const gameNames = urls.split('/');
// const gameTypes = gameNames[3].split('?id=');
// console.log(gameTypes[0]);
let topLogoWidth;
let muteIconWidth;
let galleryIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let demoButtonButton;
let shortUniqueID;
let noticeWidth;
let noticeHeight;
let muteIcon;
let retryButton;
let maxScore;
let cancelIcon;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.65;
resetIconWidth = 1.40;
tickIconWidth = 1.21;
cancelIconWidth = 1.08;
galleryIconWidth = 2;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
galleryIconWidth = 1.81;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
galleryIconWidth = 1.345;
}
if(isMobile){
submitWidth = 250;
submitHeight = 110;
noticeWidth = 100;
noticeHeight = 0;
downloadWidth = 67;
downloadHeight = 200;
learningWidth = 200;
learningHeight = 400
}else {
submitWidth = 380;
submitHeight = 95;
noticeWidth = 0;
noticeHeight = 0;
downloadWidth = 180;
downloadHeight = 70;
learningWidth = 450;
learningHeight = 400
}
if(isMobile){
@ -56,13 +113,13 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14
canvasHeight = 35;
letterHeight = 30;
letterScale = 1.1;
letterScale = 1.8;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated0videoScale = 0.6;
animated0videoScale = 1;
animated0Height = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
@ -73,20 +130,19 @@ import Layout from "../../layouts/Layout.astro";
submitHeight = customHeight / 1.1;
noticeWidth = window.innerWidth * 0.5 - 100;
noticeHeight = window.innerHeight * 0.38;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 10;
letterScale = 1.2;
letterScale = 1.8;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated0videoScale = 0.70;
animated0videoScale = 1;
animated0Height = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
@ -119,16 +175,31 @@ import Layout from "../../layouts/Layout.astro";
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
}
function create() {
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
const borderBottom = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
borderBottom.lineStyle(1, 0x0348A8);
borderBottom.setAlpha(0.2);
borderBottom.beginPath();
borderBottom.moveTo(x, y);
borderBottom.lineTo(x + lineWidth, y);
borderBottom.strokePath();
submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
font: '900 24px Quicksand',
@ -149,103 +220,39 @@ import Layout from "../../layouts/Layout.astro";
// console.log('Clicked');
submitUserData(this);
})
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const number0 = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated0').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
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)
}
});
hideButton.setInteractive().on('pointerdown', () => {
animatedLetter.stop();
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
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)
}
});
demoButton.setInteractive().on('pointerdown', () => {
animatedLetter.setCurrentTime(0);
animatedLetter.play(true);
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
// animatedLetter.setVisible(true);
if(animatedLetter.visible){
animatedLetter.setVisible(false);
graphics.setVisible(true);
} else{
graphics.setVisible(false);
animatedLetter.setVisible(true);
}
// animatedLetter.visible ? animatedLetter.setVisible(false): animatedLetter.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
// const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// const baseFontSize = 16;
// const responsiveFontSize = (window.innerWidth / 550) * baseFontSize;
let responsiveFontSize = isMobile ? 16 : 32;
this.add.text(window.innerWidth / 2, 80, 'Number: 0', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 0', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);
animatedLetter.setLoop(true);
// Play the video
@ -261,11 +268,13 @@ import Layout from "../../layouts/Layout.astro";
});
let textX, textY;
let stepTextSize = isMobile ? 12 : 16;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'});
const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around Close',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
const audioOneAudio = this.sound.add('audioOne');
// audioOneAudio.play();
firstLayer.setDepth(1);
@ -288,7 +297,7 @@ import Layout from "../../layouts/Layout.astro";
if (distance >= 0) {
firstTextLayer.setVisible(false);
// firstTextLayer.setVisible(false);
firstLayer.setAlpha(1);
} else {
firstLayer.setAlpha(0.5);
@ -298,7 +307,7 @@ import Layout from "../../layouts/Layout.astro";
graphics = this.add.graphics();
graphics.setMask(mask);
// graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
@ -328,22 +337,21 @@ import Layout from "../../layouts/Layout.astro";
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
// gmStartTime();
gamestart = new Date();
gameStartTime = gamestart.toLocaleString();
// console.log("Page loaded on: " + gameStartTime);
firstTextLayer.setVisible(true);
animatedLetter.setVisible(false);
firstScreen.setVisible(false);
graphics.setVisible(true);
hideButton.setVisible(false);
demoButton.setVisible(true);
startButton.setVisible(false);
submitButton.setVisible(true);
})
// startButton.setInteractive().on('pointerdown', () => {
// audioOneAudio.play();
// // gmStartTime();
// gamestart = new Date();
// gameStartTime = gamestart.toLocaleString();
// // console.log("Page loaded on: " + gameStartTime);
// firstTextLayer.setVisible(true);
// animatedLetter.setVisible(false);
// firstScreen.setVisible(false);
// graphics.setVisible(true);
// demoButton.setVisible(true);
// startButton.setVisible(false);
// submitButton.setVisible(true);
// })
}