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

s2

pull/15/head
Suvodip 2024-06-15 19:29:27 +05:30
parent a8277e9aad
commit 2d6dbbf2b7
6 changed files with 230 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
public/saveGameData.js Normal file
View File

@ -0,0 +1,64 @@
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('userid');
const gameId = urlParams.get('id');
const url = window.location.href;
const gameName = url.split('/');
const gameType = gameName[3].split('?id=');
const gameVersion = gameType[0] + '-' + gameName[4];
function submitUserData(drawingZone) {
let imageCode;
// console.log(drawingZone);
drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true);
snapshotButton.setVisible(true);
customCursor.setVisible(true);
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';
document.body.appendChild(image);
// Download the snapshot as an image
const link = document.createElement('a');
link.href = image.src;
link.download = 'my_drawing.png';
link.click();
document.body.removeChild(image);
imageCode = image.src;
let userData = {
'gameType': gameVersion,
'gameID': gameId,
'screenShot': imageCode,
'userId' : userId
// 'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
console.log(userData);
fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
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)
});
// Clear the drawing
// graphics.clear();
});
};

57
src/pages/drawing/drawing_phonics.astro
View File

@ -9,6 +9,7 @@ import Layout from '../../layouts/Layout.astro';
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@ -149,33 +150,33 @@ import Layout from '../../layouts/Layout.astro';
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const borderBottom = this.add.graphics(); const borderBottom = this.add.graphics();
@ -213,7 +214,7 @@ import Layout from '../../layouts/Layout.astro';
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){

57
src/pages/drawing/drawing_writo.astro
View File

@ -9,6 +9,7 @@ import Layout from '../../layouts/Layout.astro';
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@ -150,33 +151,33 @@ import Layout from '../../layouts/Layout.astro';
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const borderBottom = this.add.graphics(); const borderBottom = this.add.graphics();
@ -212,7 +213,7 @@ import Layout from '../../layouts/Layout.astro';
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){

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

@ -9,6 +9,7 @@ import Layout from '../../layouts/Layout.astro';
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@ -514,58 +515,58 @@ import Layout from '../../layouts/Layout.astro';
const url = window.location.href; const url = window.location.href;
const gameName = url.split('/'); const gameName = url.split('/');
const gameType = gameName[3].split('?id='); const gameType = gameName[3].split('?id=');
function submitUserData(drawingZone) { // function submitUserData(drawingZone) {
let imageCode; // let imageCode;
// console.log(drawingZone); // // console.log(drawingZone);
drawingZone.renderer.snapshot((image) => { // drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true); // submitButton.setVisible(true);
snapshotButton.setVisible(true); // snapshotButton.setVisible(true);
customCursor.setVisible(true); // customCursor.setVisible(true);
image.style.width = '160px'; // image.style.width = '160px';
image.style.height = '120px'; // image.style.height = '120px';
image.style.paddingLeft = '2px'; // image.style.paddingLeft = '2px';
document.body.appendChild(image); // document.body.appendChild(image);
// Download the snapshot as an image // // Download the snapshot as an image
const link = document.createElement('a'); // const link = document.createElement('a');
link.href = image.src; // link.href = image.src;
link.download = 'my_drawing.png'; // link.download = 'my_drawing.png';
link.click(); // link.click();
document.body.removeChild(image); // document.body.removeChild(image);
imageCode = image.src; // imageCode = image.src;
let userData = { // let userData = {
'userID': 'drawing@beanstalkedu.com', // 'userID': 'drawing@beanstalkedu.com',
'gameType': gameType[0], // 'gameType': gameType[0],
'gameID': gameType[1], // 'gameID': gameType[1],
'screenShot': imageCode // 'screenShot': imageCode
// 'starts': formattedDateTime, // // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
console.log(userData); // console.log(userData);
fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, { // fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
console.log('Data Saved', response) // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
// Clear the drawing // // Clear the drawing
// graphics.clear(); // // graphics.clear();
}); // });
}; // };
// function captureSnapshot(drawingZone) { // function captureSnapshot(drawingZone) {
// submitButton.setVisible(false); // submitButton.setVisible(false);
// // snapNotice.setVisible(true); // // snapNotice.setVisible(true);

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

@ -9,6 +9,7 @@ import Layout from '../../layouts/Layout.astro';
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@ -168,33 +169,33 @@ import Layout from '../../layouts/Layout.astro';
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const URL = window.location.href;
const gameName = URL.split('/'); // console.log(gameType[0]);
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const borderBottom = this.add.graphics(); const borderBottom = this.add.graphics();
const x = 0; const y = 54; const x = 0; const y = 54;
@ -231,7 +232,8 @@ import Layout from '../../layouts/Layout.astro';
// console.log('Clicked'); // console.log('Clicked');
submitNotic.setVisible(true); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(); // submitUserData();
submitUserData(this);
}) })
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){

57
src/pages/drawing/v3.astro
View File

@ -9,6 +9,7 @@ import Layout from '../../layouts/Layout.astro';
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@ -155,33 +156,33 @@ import Layout from '../../layouts/Layout.astro';
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const borderBottom = this.add.graphics(); const borderBottom = this.add.graphics();
const x = 0; const y = 54; const x = 0; const y = 54;
@ -218,7 +219,7 @@ import Layout from '../../layouts/Layout.astro';
// submitButton.setVisible(false); // submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
// const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; // const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
// if(!isMobile){ // if(!isMobile){