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

Merge pull request 'fetch2' (#16) from fetch2 into master 

Reviewed-on: #16
pull/18/head
Kar 2024-06-17 13:55:00 +00:00
parent d22a4da6d6 9de26f9ce0
commit cee3680942
29 changed files with 1383 additions and 1064 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/svg/button-icon.svg
View File

@ -1 +1 @@
<svg width="64px" height="64px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#eceaea" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#ff0000" stroke-width="0.048"></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#0000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
<svg width="50px" height="50px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="2" stroke-width=""></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#BB4D6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 683 B

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

@ -0,0 +1,4 @@
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#F5F5F5"/>
<path d="M13.0528 5.25134C9.23531 5.14634 6.10781 8.21384 6.10781 12.0013H4.76531C4.42781 12.0013 4.26281 12.4063 4.50281 12.6388L6.59531 14.7313C6.74531 14.8813 6.97781 14.8813 7.12781 14.7313L9.22031 12.6388C9.45281 12.4063 9.28781 12.0013 8.95031 12.0013H7.60781C7.60781 9.07634 9.99281 6.71384 12.9328 6.75134C15.7228 6.78884 18.0703 9.13634 18.1078 11.9263C18.1453 14.8588 15.7828 17.2513 12.8578 17.2513C11.9203 17.2513 11.0428 16.9963 10.2778 16.5688C9.98531 16.4038 9.62531 16.4638 9.39281 16.7038C9.04781 17.0488 9.11531 17.6413 9.54281 17.8813C10.5253 18.4288 11.6503 18.7513 12.8578 18.7513C16.6453 18.7513 19.7128 15.6238 19.6078 11.8063C19.5103 8.28884 16.5703 5.34884 13.0528 5.25134Z" fill="#8D8D8D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 868 B

3
public/assets/svg/pointer.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#D9D9D9"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 151 B

85
public/saveGameData.js Normal file
View File

@ -0,0 +1,85 @@
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('userid');
const gameId = urlParams.get('id');
let startTime = Date.now();
const url = window.location.href;
const gameName = url.split('/');
const gameType = gameName[3].split('?id=');
const gameVersion = gameType[0] + '-' + gameName[4];
function submitUserData(drawingZone) {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
let imageCode;
let gameScore;
let scoreTotal=0;
if(scoreTotal){
gameScore = scoreTotal;
}else{
gameScore = 0;
}
// console.log('This is from main point', scoreTotal);
drawingZone.renderer.snapshot((image) => {
if(gameType[0] == 'drawing'){
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 = {
'gameName': gameVersion,
'gameID': gameId,
'screenShot': imageCode,
'userId' : userId,
'gameTime' : timeDifferenceInSeconds,
'score' : scoreTotal
// 'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
console.log(userData);
fetch(`http://192.168.0.166:3000/save-data`, {
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();
});
};

23
src/pages/cross/cross_phonics_v1.astro
View File

@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<!-- <div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
@ -59,7 +69,7 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>
@ -191,12 +201,11 @@ import Layout from "../../layouts/Layout.astro";
input[type="checkbox"]{
-webkit-appearance: initial;
appearance: initial;
border: 1px solid gray;
border: 1px solid rgb(128, 128, 128);
border-radius: 5px;
/* background: gray; */
width: 40px;
height: 40px;
position: relative;
}
input[type="checkbox"]:checked {

20
src/pages/cross/cross_phonics_v2.astro
View File

@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<!-- <div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
@ -77,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>

20
src/pages/cross/v1.astro
View File

@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<!-- <div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
@ -59,7 +69,7 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>

18
src/pages/cross/v2.astro
View File

@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<!-- <div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>

20
src/pages/cross/v3.astro
View File

@ -6,11 +6,21 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div class="">
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-2">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> -->
@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col place-items-center justify-center pt-4">
<p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>

156
src/pages/drag/dragdrop_phonics.astro
View File

@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
@ -57,7 +58,24 @@ 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;
let retryButton;
let blockMatches;
if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 67;
@ -67,6 +85,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 100;
@ -76,13 +99,6 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = [];
window.onload = function() {
// Get the current date and time
@ -228,8 +244,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("retryIcon", "/assets/svg/retry.svg")
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/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100,
@ -326,6 +345,16 @@ import Layout from '../../layouts/Layout.astro';
}
];
// console.log(data)
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();
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`})
@ -337,78 +366,79 @@ import Layout from '../../layouts/Layout.astro';
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`});
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
} 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`});
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
}
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
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, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).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)
});
};
// 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
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();
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 = 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);
// submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData();
submitUserData(this);
})
// 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 - 200,
@ -465,7 +495,7 @@ 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, targetZone.y, "border").setAlpha(0).setScale(borderScale);
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.05).setScale(borderScale);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
@ -524,11 +554,11 @@ import Layout from '../../layouts/Layout.astro';
});
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
// retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
retryButton.setVisible(false);
// retryButton.setVisible(false);
let score = 0;
let counter = 0;
const isMatch = (blockName, targetName) => {

69
src/pages/drag/index.astro
View File

@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
@ -85,7 +86,7 @@ import Layout from '../../layouts/Layout.astro';
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185
cancelIconWidth = 1.185;
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 100;
@ -312,11 +313,11 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => {
// 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, 85, data.description, {font: ` ${responsiveFontSize}px Quicksand`, fill: '#60C6CB',}).setOrigin(0.5);
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
blockMatches = [
{
blockName: "blocks1",
@ -353,33 +354,33 @@ import Layout from '../../layouts/Layout.astro';
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)
});
};
// 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 graphics = this.add.graphics();
@ -449,7 +450,7 @@ import Layout from '../../layouts/Layout.astro';
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData();
submitUserData(this);
});
const droppedBlocks = [];

189
src/pages/drag/match_phonics.astro
View File

@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
@ -57,7 +58,22 @@ 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,13 +93,6 @@ import Layout from '../../layouts/Layout.astro';
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
@ -100,6 +114,7 @@ import Layout from '../../layouts/Layout.astro';
return result;
};
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [
{
@ -233,12 +248,13 @@ 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("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg");
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/pointer.svg');
this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
frameHeight: 100,
@ -298,15 +314,12 @@ import Layout from '../../layouts/Layout.astro';
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 = 20
// 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 screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).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
@ -325,104 +338,122 @@ import Layout from '../../layouts/Layout.astro';
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 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)
// });
// };
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 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 = 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);
// submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData();
submitUserData(this);
})
// 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",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 280,
textureKey: "blocks2",
id: "block2",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 460,
textureKey: "blocks3",
id: "block3",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 640,
textureKey: "blocks4",
id: "block4",
blockPointer: 'border',
},
];
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);
// const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").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+100, block.y+35, block.blockPointer, 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);
@ -451,7 +482,7 @@ import Layout from '../../layouts/Layout.astro';
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.moveTo(block.x + 105, block.y + 47);
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath();
@ -473,12 +504,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();
})

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

@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
@ -57,7 +58,22 @@ 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,13 +93,6 @@ import Layout from '../../layouts/Layout.astro';
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
@ -100,6 +114,7 @@ import Layout from '../../layouts/Layout.astro';
return result;
};
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [
{
@ -233,12 +248,13 @@ 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("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg");
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/pointer.svg');
this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
frameHeight: 100,
@ -298,15 +314,12 @@ import Layout from '../../layouts/Layout.astro';
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 = 20
// 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 screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).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
@ -325,104 +338,122 @@ import Layout from '../../layouts/Layout.astro';
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 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)
// });
// };
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 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 = 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);
// submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData();
submitUserData(this);
})
// 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",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 280,
textureKey: "blocks2",
id: "block2",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 460,
textureKey: "blocks3",
id: "block3",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 640,
textureKey: "blocks4",
id: "block4",
blockPointer: 'border',
},
];
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);
// const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").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+100, block.y+35, block.blockPointer, 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);
@ -451,7 +482,7 @@ import Layout from '../../layouts/Layout.astro';
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.moveTo(block.x + 105, block.y + 47);
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath();
@ -473,12 +504,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();
})

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

@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
@ -57,7 +58,24 @@ 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;
let retryButton;
let blockMatches;
if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 67;
@ -67,6 +85,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth * 0.9 - 40;
rightTargetZoneW = window.innerWidth / 6;
} else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 100;
@ -76,13 +99,7 @@ import Layout from '../../layouts/Layout.astro';
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
@ -260,8 +277,13 @@ 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("retryIcon", "/assets/svg/retry.svg")
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("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/svg/border.svg');
this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100,
frameHeight: 100,
@ -339,71 +361,81 @@ import Layout from '../../layouts/Layout.astro';
];
// 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);
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).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)
});
};
// 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 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();
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();
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 = 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.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData();
submitUserData(this);
})
// 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,
@ -459,8 +491,8 @@ import Layout from '../../layouts/Layout.astro';
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)
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.7).setScale(1);
const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#60C6CB`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
@ -508,11 +540,11 @@ import Layout from '../../layouts/Layout.astro';
}
});
});
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
// retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
retryButton.setVisible(false);
// retryButton.setVisible(false);
let score = 0;
let counter = 0;

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

@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
@ -57,7 +58,24 @@ 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;
let retryButton;
let blockMatches;
if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 67;
@ -67,6 +85,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 100;
@ -76,13 +99,6 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = [];
window.onload = function() {
// Get the current date and time
@ -228,9 +244,17 @@ 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("retryIcon", "/assets/svg/retry.svg")
// this.load.image("tick", '/assets/tick.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("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100,
frameHeight: 100,
@ -266,25 +290,6 @@ import Layout from '../../layouts/Layout.astro';
}
create() {
// const borderGraphics = this.add.graphics();
// const borderThickness = 6;
// 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 borderGraphicsX = this.add.graphics();
// const borderThicknessX = 6;
// borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
// const borderY = window.innerHeight / 5 - borderThickness / 2; // 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');
@ -337,78 +342,90 @@ import Layout from '../../layouts/Layout.astro';
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`});
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
} 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`});
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
}
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
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, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).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)
});
};
// 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 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();
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();
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 = 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.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData();
submitUserData(this);
})
// 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 - 200,
@ -486,7 +503,7 @@ import Layout from '../../layouts/Layout.astro';
if (
Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 50, 25)
)
) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
@ -524,11 +541,10 @@ import Layout from '../../layouts/Layout.astro';
});
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
// 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) => {

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

@ -9,15 +9,32 @@ 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" />
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
x: 0,
y: 0,
width: window.innerWidth,
height: window.innerHeight,
};
};
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250;
submitHeight = 110;
noticeWidth = 100;
@ -27,6 +44,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 200;
learningHeight = 400
} else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380;
submitHeight = 95;
noticeWidth = 0;
@ -36,11 +58,7 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450;
learningHeight = 400
}
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
gameResult = [];
window.onload = function() {
currentDate = new Date();
@ -105,6 +123,10 @@ import Layout from '../../layouts/Layout.astro';
function preload() {
this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.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('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
}
@ -117,61 +139,82 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => {
// console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
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)
});
};
// 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 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();
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
});
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
});
// submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// });
submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData();
submitUserData(this);
})
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){
@ -181,12 +224,16 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
}
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
let outlineImagePosition;
isMobile ? outlineImagePosition = 0 : outlineImagePosition = 45;
const outlineImage = this.add.image(customWidth / 2 + outlineImagePosition, customHeight / 2, 'outline');
if(isMobile){
outlineImage.setDepth(1).setScale(0.31);
outlineImage.setDepth(1).setScale(0.33);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.38);
} else{
outlineImage.setDepth(1).setScale(0.5);
}
}
graphics = this.add.graphics();
const colorContainer = document.createElement('div');
@ -227,9 +274,10 @@ import Layout from '../../layouts/Layout.astro';
});
// Append the color picker to the color container data
colorContainer.appendChild(colorPicker);
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
// const colors = data.colors;
// var colors = colorList;
var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60;
const buttonSpacing = 5;
@ -331,20 +379,20 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer);
// Create the Clear button
const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px';
// clearButton.style.color = 'blue';
// clearButton.style.width = 'fit-content';
// clearButton.style.marginRight = '10px';
if(isMobile){
clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%';
} else {
clearButton.style.padding = '5px 10px';
}
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
// clearButton.style.fontWeight = 'bold';
// clearButton.style.borderRadius = '20%';
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => {
clearDrawing();
});
@ -453,13 +501,13 @@ import Layout from '../../layouts/Layout.astro';
};
// Add a "Save Snapshot" button
if(isMobile){
snapWidth = 50;
snapWidth = 70;
snapHeight = 70;
} else {
snapWidth = 200;
snapHeight = 70;
}
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => {

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

@ -9,15 +9,33 @@ 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" />
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
x: 0,
y: 0,
width: window.innerWidth,
height: window.innerHeight,
};
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250;
submitHeight = 110;
noticeWidth = 100;
@ -27,6 +45,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 200;
learningHeight = 400
} else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380;
submitHeight = 95;
noticeWidth = 0;
@ -36,11 +59,7 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450;
learningHeight = 400
}
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
gameResult = [];
window.onload = function() {
currentDate = new Date();
@ -105,6 +124,10 @@ import Layout from '../../layouts/Layout.astro';
function preload() {
this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.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('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
}
@ -117,61 +140,80 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => {
// console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 18;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 50, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
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)
});
};
// 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 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();
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
});
// submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// });
submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData();
submitUserData(this);
})
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){
@ -181,12 +223,15 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
}
const outlineImage = this.add.image(customWidth / 2, customHeight / 2+0, 'outline');
let outlineImagePosition; isMobile ? outlineImagePosition = 0 : outlineImagePosition = 45;
const outlineImage = this.add.image(customWidth / 2 + outlineImagePosition, customHeight / 2+0, 'outline');
if(isMobile){
outlineImage.setDepth(1).setScale(0.33);
outlineImage.setDepth(1).setScale(0.21);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.32);
} else{
outlineImage.setDepth(1).setScale(0.45);
}
}
graphics = this.add.graphics();
const colorContainer = document.createElement('div');
@ -205,7 +250,7 @@ import Layout from '../../layouts/Layout.astro';
colorPicker.value = selectedColor;
colorPicker.className = 'color-picker';
colorPicker.style.marginBottom = '0px';
colorPicker.style.marginTop = '-0px';
colorPicker.style.marginTop = '25px';
colorPicker.style.marginRight = '15px';
// colorPicker.style.padding = '1px 1px';
// colorPicker.style.outline = 'none';
@ -227,9 +272,10 @@ import Layout from '../../layouts/Layout.astro';
});
// Append the color picker to the color container data
colorContainer.appendChild(colorPicker);
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
// const colors = data.colors;
// var colors = colorList;
var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60;
const buttonSpacing = 5;
@ -293,7 +339,7 @@ import Layout from '../../layouts/Layout.astro';
button.style.marginTop = '5px';
button.style.marginBottom = '5px';
} else{
button.style.border = "2px solid";
button.style.border = "2px solid";
button.style.borderColor = color;
button.style.boxShadow = '5px 10px 30px #7c4c2390';
button.style.borderRadius = '20%';
@ -321,7 +367,7 @@ import Layout from '../../layouts/Layout.astro';
buttonsContainer.style.marginTop = '30px';
if(!isMobile){
// buttonsContainer.style.position = 'fixed';
buttonsContainer.style.top = '10%';
buttonsContainer.style.top = '12%';
buttonsContainer.style.flexDirection = 'column';
buttonsContainer.style.marginLeft = '60px';
buttonsContainer.style.marginTop = '0%';
@ -331,20 +377,20 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer);
// Create the Clear button
const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px';
// clearButton.style.color = 'blue';
// clearButton.style.width = 'fit-content';
// clearButton.style.marginRight = '10px';
if(isMobile){
clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%';
} else {
clearButton.style.padding = '5px 10px';
}
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
// clearButton.style.fontWeight = 'bold';
// clearButton.style.borderRadius = '20%';
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => {
clearDrawing();
});
@ -453,13 +499,13 @@ import Layout from '../../layouts/Layout.astro';
};
// Add a "Save Snapshot" button
if(isMobile){
snapWidth = 50;
snapWidth = 70;
snapHeight = 70;
} else {
snapWidth = 200;
snapHeight = 70;
}
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => {

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

@ -9,15 +9,34 @@ 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" />
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
x: 0,
y: 0,
width: window.innerWidth,
height: window.innerHeight,
};
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250;
submitHeight = 110;
noticeWidth = 100;
@ -27,6 +46,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 200;
learningHeight = 400
} else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380;
submitHeight = 95;
noticeWidth = 0;
@ -36,11 +60,7 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450;
learningHeight = 400
}
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
gameResult = [];
window.onload = function() {
currentDate = new Date();
@ -105,6 +125,10 @@ import Layout from '../../layouts/Layout.astro';
function preload() {
this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.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('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
}
@ -117,9 +141,11 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => {
// console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
})
@ -127,21 +153,41 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error);
});
// window.load
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();
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
});
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
});
// submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// });
submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => {
submitButton.setVisible(false);
submitNotic.setVisible(true);
submitNotic.setVisible(false);
// windowLoad();
submitUserData(this);
});
@ -157,10 +203,11 @@ import Layout from '../../layouts/Layout.astro';
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
if(isMobile){
outlineImage.setDepth(1).setScale(0.33);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.40);
} else{
outlineImage.setDepth(1).setScale(0.65);
}
}
graphics = this.add.graphics();
const colorContainer = document.createElement('div');
colorContainer.style.position = 'absolute';
@ -202,7 +249,8 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.appendChild(colorPicker);
// const colors = data.colors;
// var colors = colorList;
var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
// var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60;
const buttonSpacing = 5;
@ -304,20 +352,20 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer);
// Create the Clear button
const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px';
// clearButton.style.color = 'blue';
// clearButton.style.width = 'fit-content';
// clearButton.style.marginRight = '10px';
if(isMobile){
clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%';
} else {
clearButton.style.padding = '5px 10px';
}
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
// clearButton.style.fontWeight = 'bold';
// clearButton.style.borderRadius = '20%';
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => {
clearDrawing();
});
@ -426,27 +474,26 @@ import Layout from '../../layouts/Layout.astro';
};
// Add a "Save Snapshot" button
if(isMobile){
snapWidth = 50;
snapWidth = 70;
snapHeight = 70;
} else {
snapWidth = 200;
snapHeight = 70;
}
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => {
// submitUserData(this);
captureSnapshot(this);
});
snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
snapNotice.setVisible(false);
}
const url = window.location.href;
const gameName = url.split('/');
const gameType = gameName[3].split('?id=');
function submitUserData(drawingZone) {
let imageCode;
console.log(drawingZone);
function captureSnapshot(drawingZone) {
// snapNotice.setVisible(true);
submitButton.setVisible(false);
snapshotButton.setVisible(false);
customCursor.setVisible(false);
drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true);
snapshotButton.setVisible(true);
@ -461,41 +508,66 @@ import Layout from '../../layouts/Layout.astro';
link.download = 'my_drawing.png';
link.click();
document.body.removeChild(image);
imageCode = image.src;
// Clear the drawing
// graphics.clear();
});
}
// const url = window.location.href;
// const gameName = url.split('/');
// const gameType = gameName[3].split('?id=');
// 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 = {
'userID': 'drawing@beanstalkedu.com',
'gameType': gameType[0],
'gameID': gameType[1],
'screenShot': imageCode
// 'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
console.log(userData);
// let userData = {
// 'userID': 'drawing@beanstalkedu.com',
// 'gameType': gameType[0],
// 'gameID': gameType[1],
// 'screenShot': imageCode
// // '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)
});
// 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();
});
};
// // Clear the drawing
// // graphics.clear();
// });
// };
// function captureSnapshot(drawingZone) {
// submitButton.setVisible(false);
// // snapNotice.setVisible(true);

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

@ -9,15 +9,34 @@ 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" />
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
// const drawingZone = {
// x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
// y: window.innerHeight / 1,
// width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
// height: window.innerHeight / 2,
// };
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
let defaultColor;
if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250;
submitHeight = 110;
noticeWidth = 100;
@ -33,6 +52,11 @@ import Layout from '../../layouts/Layout.astro';
image2Height = 2;
image2Bottom = 110;
} else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380;
submitHeight = 95;
noticeWidth = 0;
@ -41,19 +65,14 @@ import Layout from '../../layouts/Layout.astro';
downloadHeight = 70;
learningWidth = 450;
learningHeight = 350;
image1Width = 4;
image1Width = 3;
image1Height = 1.8;
image2Width = 2;
image2Right = 400;
image2Right = 250;
image2Height = 1.8;
image2Bottom = 0;
}
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
let defaultColor;
gameResult = [];
window.onload = function() {
currentDate = new Date();
@ -118,10 +137,13 @@ import Layout from '../../layouts/Layout.astro';
this.load.image('image1', assetsList.image1);
this.load.image('image2', assetsList.image2);
this.load.image('topLogo', '/assets/top_logo.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('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('waxTexture', '/assets/texture.png');
}
function create() {
@ -132,61 +154,86 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => {
// console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){
wrapWidth = 10;
} else{
wrapWidth = 200;
}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
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)
});
};
// console.log(gameType[0]);
// 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 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();
const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
retryButton.setInteractive().on('pointerdown', ()=>{
window.location.reload();
})
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
});
submitButton.setVisible(true);
// submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// });
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData();
// submitUserData();
submitUserData(this);
})
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){
@ -196,14 +243,16 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
}
const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
if(isMobile){
outlineImage1.setDepth(1).setScale(0.28);
outlineImage2.setDepth(1).setScale(0.28);
}else if(isTab){
outlineImage1.setDepth(1).setScale(0.34);
outlineImage2.setDepth(1).setScale(0.34);
} else{
outlineImage1.setDepth(1).setScale(0.65);
outlineImage2.setDepth(1).setScale(0.65);
outlineImage1.setDepth(1).setScale(0.60);
outlineImage2.setDepth(1).setScale(0.60);
}
graphics = this.add.graphics();
const colorContainer = document.createElement('div');
@ -305,10 +354,10 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer);
// Create the Clear button
const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
// clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content';
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// // clearButton.style.border = '3px solid blue';
// clearButton.style.color = 'blue';
// clearButton.style.width = 'fit-content';
clearButton.style.marginLeft = '30px';
if(isMobile){
clearButton.style.padding = '2px 8px';
@ -316,9 +365,9 @@ import Layout from '../../layouts/Layout.astro';
} else {
clearButton.style.padding = '5px 10px';
}
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
// clearButton.style.fontWeight = 'bold';
// clearButton.style.borderRadius = '20%';
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => {
clearDrawing();
});
@ -410,13 +459,14 @@ import Layout from '../../layouts/Layout.astro';
const borderGraphics = this.add.graphics();
borderGraphics.lineStyle(borderThickness, borderColor);
if(isMobile){
snapWidth = 50;
snapWidth = 70;
snapHeight = 70;
} else {
snapWidth = 200;
snapHeight = 70;
}
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
// snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => {
captureSnapshot(this);

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

File diff suppressed because one or more lines are too long

20
src/pages/tick/tick_phonics_v1.astro
View File

@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<!-- <div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
@ -71,7 +81,7 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>

20
src/pages/tick/tick_phonics_v2.astro
View File

@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<!-- <div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
@ -95,7 +105,7 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>

20
src/pages/tick/tick_phonics_v3.astro
View File

@ -6,11 +6,21 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div class="">
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-2">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> -->
@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col place-items-center justify-center pt-4">
<p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>

5
src/pages/tick/v1.astro
View File

@ -83,6 +83,11 @@ import Layout from "../../layouts/Layout.astro";
</form>
</div>
</section>
<section class="">
<div class="container mx-auto px-4 flex flex-row place-content-between">
<p>All rights reserved. Copyright@akademy.interakto2024</p>
</div>
</section>
</div>
</main>
</Layout>

139
src/pages/tick/v12.astro
View File

@ -1,139 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body {
font-family: Quicksand;
}
input.largerCheckbox {
width: 40px;
height: 40px;
cursor: pointer;
accent-color: red; /* Change the accent color to red */
}
.greenBorder {
border: 4px solid #008000;
border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
}
.redBorder {
border: 4px solid red;
border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
}
#image1, #image2, #image3, #image4, #image5, #image6 {
width: 150px;
}
#label1, #label2, #label3, #label4, #label5, #label6 {
text-align: center;
font-weight: bold;
color: #17A1A7;
font-size: 20px;
padding-top: 10px;
}
#LearningArea, #LearningSubArea_copy {
font-size: 20px;
color: #7C4C23;
font-weight: bold;
}
.round-checkbox-label {
display: inline-block;
cursor: pointer;
position: relative;
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
width: 150px; /* Adjust to the width of your images */
text-align: center;
}
.round-checkbox-label::before {
content: "";
display: inline-block;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.5); /* Red background with 0.5 opacity */
position: absolute;
top: 0;
left: 0;
border-radius: 30%;
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
}
input.round-checkbox-input:checked + .round-checkbox-label::before {
opacity: 1;
}
</style>
</head>
<body>
<form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p>
</div>
</label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p>
</div>
</label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p>
</div>
</label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p>
</div>
</label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p>
</div>
</label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p>
</div>
</label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div>
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p>
</div>
</form>
</body>
</html>

187
src/pages/tick/v2.astro
View File

@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<!-- <div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
@ -95,7 +105,7 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>
@ -238,173 +248,6 @@ import Layout from "../../layouts/Layout.astro";
});
});
</script>
<!-- <script is:inline>
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://management.beanstalkedu.com/items/game_tick_variant2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json())
.then(data => {
gameData = data.data;
// console.log(gameData);
document.getElementById("gameDescription").innerHTML = gameData.description;
const assetsURL = 'https://management.beanstalkedu.com/assets/';
document.getElementById("image1").src = assetsURL + gameData.image1;
document.getElementById("image2").src = assetsURL + gameData.image2;
document.getElementById("image3").src = assetsURL + gameData.image3;
document.getElementById("image4").src = assetsURL + gameData.image4;
document.getElementById("image5").src = assetsURL + gameData.image5;
document.getElementById("image6").src = assetsURL + gameData.image6;
document.getElementById("image7").src = assetsURL + gameData.image7;
document.getElementById("image8").src = assetsURL + gameData.image8;
document.getElementById("image9").src = assetsURL + gameData.image9;
});
function checkResult2(id){
// alert("Matched")
if(id == 'image1'){
// console.log(gameData.a1)
if(gameData.a1 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image2'){
if(gameData.a2 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image3'){
if(gameData.a3 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image4'){
if(gameData.a4 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image5'){
if(gameData.a5 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image6'){
if(gameData.a6 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image7'){
if(gameData.a7 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image8'){
if(gameData.a8 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image9'){
if(gameData.a9 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
};
let url = window.location.href;
let urlSplit = url.split('/')
let gameName = urlSplit[3] +`-`+ urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
// console.log(formatedDateTime);
// Create userData object inside the onload event
let userData = {
'f2': formatedDateTime,
};
// console.log(userData); // Now, f1 and f2 should have values
};
function generateShortUniqueID(length) {
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;
}
const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
// console.log(shortUniqueID);
function saveUserData() {
let userData = {
'status' : 'published',
'user_id': 'tick-v2@beanstalkedu.com',
'game_name': gameName,
'game_open': formatedDateTime,
};
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if (response.ok) {
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
// console.log('Data Saved', response);
} else {
// console.log('Something Wrong', response);
}
})
.catch(error => {
console.error('An error occurred', error);
});
}
document.addEventListener('DOMContentLoaded', function () {
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', async function (event) {
event.preventDefault();
});
});
</script> -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body{

20
src/pages/tick/v3.astro
View File

@ -6,11 +6,21 @@ import Layout from "../../layouts/Layout.astro";
<main>
<div class="">
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-2">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> -->
@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col place-items-center justify-center pt-4">
<p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>

25
src/pages/tst.astro Normal file
View File

@ -0,0 +1,25 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="">
<div>
<a id="fullscreen-btn" href="/tst2" target="_blank">Next</a>
</div>
</Layout>
<script is:inline>
document.getElementById('fullscreen-btn').addEventListener('click', function() {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) { // Firefox
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari, and Opera
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) { // IE/Edge
document.documentElement.msRequestFullscreen();
}
});
window.addEventListener('load', function() {
alert('Please click the button to go fullscreen.');
});
</script>

0
src/pages/tst2.astro Normal file
View File