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> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-6"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <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> </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"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
@ -59,7 +69,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-8"> <div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p> <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> </div>
</form> </form>
</div> </div>
@ -191,12 +201,11 @@ import Layout from "../../layouts/Layout.astro";
input[type="checkbox"]{ input[type="checkbox"]{
-webkit-appearance: initial; -webkit-appearance: initial;
appearance: initial; appearance: initial;
border: 1px solid gray; border: 1px solid rgb(128, 128, 128);
border-radius: 5px; border-radius: 5px;
/* background: gray; */ /* background: gray; */
width: 40px; width: 40px;
height: 40px; height: 40px;
position: relative; position: relative;
} }
input[type="checkbox"]:checked { 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> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-6"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <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> </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"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
@ -77,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col justify-center place-items-center pt-8"> <div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p> <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> </div>
</form> </form>
</div> </div>

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

@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-6"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <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> </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"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
@ -59,7 +69,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-8"> <div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p> <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> </div>
</form> </form>
</div> </div>

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

@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-6"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <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> </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"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></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> <main>
<div class=""> <div class="">
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-2"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <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> </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"> <div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p> <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> --> <!-- <p id="LearningSubArea"></p> -->
@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-4"> <div class="flex flex-col place-items-center justify-center pt-4">
<p id="savedMessage"></p> <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> </div>
</form> </form>
</div> </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> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { 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 width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -67,6 +85,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40; rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@ -76,13 +99,6 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172; rightTargetZoneW = window.innerWidth * 0.9 - 172;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // 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("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image("retryIcon", "/assets/svg/retry.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.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
@ -326,6 +345,16 @@ import Layout from '../../layouts/Layout.astro';
} }
]; ];
// console.log(data) // 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){ 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 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 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`}) this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
} }
if(isMobile){ if(isMobile){
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_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: `#7C4C23`}); this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
} else{ } else{
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_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: `#7C4C23`}); 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; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 22; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 95, data.description, { 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);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const url = window.location.href;
const gameName = URL.split('/'); // const gameName = url.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
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', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false); // submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); // submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // 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 = [ const blocks = [
{ {
x: displayW / 2 - 200, x: displayW / 2 - 200,
@ -465,7 +495,7 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); 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); targetZoneBorders.push(targetBorder);
targetZone.block = null; 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', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false); // retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 0; let counter = 0;
const isMatch = (blockName, targetName) => { 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> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@ -85,7 +86,7 @@ import Layout from '../../layouts/Layout.astro';
muteIconWidth = 1.3; muteIconWidth = 1.3;
resetIconWidth = 1.26; resetIconWidth = 1.26;
tickIconWidth = 1.222; tickIconWidth = 1.222;
cancelIconWidth = 1.185 cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@ -312,11 +313,11 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data) // console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 30; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 85, data.description, {font: ` ${responsiveFontSize}px Quicksand`, fill: '#60C6CB',}).setOrigin(0.5); 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 = [ blockMatches = [
{ {
blockName: "blocks1", blockName: "blocks1",
@ -353,33 +354,33 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const graphics = this.add.graphics(); const graphics = this.add.graphics();
@ -449,7 +450,7 @@ import Layout from '../../layouts/Layout.astro';
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}); });
const droppedBlocks = []; 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> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { 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 width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -65,6 +81,11 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@ -72,13 +93,6 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let blockMatches;
let resultView;
let scoreTotal = 0;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@ -100,6 +114,7 @@ import Layout from '../../layouts/Layout.astro';
return result; return result;
}; };
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [ const targetZones = [
{ {
@ -233,12 +248,13 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
// this.load.image("bg", '/assets/bgwhite.jpg'); this.load.image("topMatch", "/assets/top_match.jpg");
// this.load.image("target1", assetsList.right_image1); this.load.image("topLogo", "/assets/top_logo.jpg");
// this.load.image("target2", '/assets/hay.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
// this.load.image("target3", '/assets/mat.png'); this.load.image("muteIcon", '/assets/svg/mute.svg');
// this.load.image("target4", '/assets/star.png'); this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("border", '/assets/squar.png'); this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.image("border", '/assets/svg/pointer.svg');
this.load.spritesheet("target1", assetsList.right_image1,{ this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@ -298,15 +314,12 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`, targetName: `target${data.right_match4}`,
}, },
]; ];
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 20 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 76, data.description, { 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);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name
@ -325,104 +338,122 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const url = window.location.href;
const gameName = URL.split('/'); // const gameName = url.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load 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', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false); // submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); // submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // 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 = [ const blocks = [
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 120, y: 120,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 280, y: 280,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 460, y: 460,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 640, y: 640,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
blockPointer: 'border',
}, },
]; ];
this.graphics = this.add.graphics(); this.graphics = this.add.graphics();
const droppedBlocks = []; const droppedBlocks = [];
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); // const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65); const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); 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); this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3); newBlock.setScale(1.3);
@ -451,7 +482,7 @@ import Layout from '../../layouts/Layout.astro';
if (droppedOnTargetZone) { if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone // Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color 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.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath(); this.graphics.strokePath();
@ -473,12 +504,12 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}) // })
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); 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> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { 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 width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -65,6 +81,11 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@ -72,13 +93,6 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let blockMatches;
let resultView;
let scoreTotal = 0;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@ -100,6 +114,7 @@ import Layout from '../../layouts/Layout.astro';
return result; return result;
}; };
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [ const targetZones = [
{ {
@ -233,12 +248,13 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
// this.load.image("bg", '/assets/bgwhite.jpg'); this.load.image("topMatch", "/assets/top_match.jpg");
// this.load.image("target1", assetsList.right_image1); this.load.image("topLogo", "/assets/top_logo.jpg");
// this.load.image("target2", '/assets/hay.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
// this.load.image("target3", '/assets/mat.png'); this.load.image("muteIcon", '/assets/svg/mute.svg');
// this.load.image("target4", '/assets/star.png'); this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("border", '/assets/squar.png'); this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.image("border", '/assets/svg/pointer.svg');
this.load.spritesheet("target1", assetsList.right_image1,{ this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@ -298,15 +314,12 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`, targetName: `target${data.right_match4}`,
}, },
]; ];
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 20 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 76, data.description, { 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);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name
@ -325,104 +338,122 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const url = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load 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', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false); // submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); // submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // 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 = [ const blocks = [
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 120, y: 120,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 280, y: 280,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 460, y: 460,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 640, y: 640,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
blockPointer: 'border',
}, },
]; ];
this.graphics = this.add.graphics(); this.graphics = this.add.graphics();
const droppedBlocks = []; const droppedBlocks = [];
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); // const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65); const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); 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); this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3); newBlock.setScale(1.3);
@ -451,7 +482,7 @@ import Layout from '../../layouts/Layout.astro';
if (droppedOnTargetZone) { if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone // Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color 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.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath(); this.graphics.strokePath();
@ -473,12 +504,12 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}) // })
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); 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> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { 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 width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -67,6 +85,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth * 0.9 - 40; leftTargetZoneW = window.innerWidth * 0.9 - 40;
rightTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth / 6;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@ -76,13 +99,7 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth * 0.9 - 172; leftTargetZoneW = window.innerWidth * 0.9 - 172;
rightTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth / 6;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let resultView;
let scoreTotal = 0; // resultView scoreTotal
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // 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("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); 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("border", '/assets/squar.png'); 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,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@ -339,71 +361,81 @@ import Layout from '../../layouts/Layout.astro';
]; ];
// console.log(data) // console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 30; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 95, data.description, { 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);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const 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', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // 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 = [ const blocks = [
{ {
x: displayW / 2-400, x: displayW / 2-400,
@ -459,8 +491,8 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone, index) => { targetZones.forEach((targetZone, index) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); 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 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: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7) 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); targetZoneBorders.push(targetBorder);
targetZone.block = null; 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', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false); // retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 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> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { 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 width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -67,6 +85,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40; rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@ -76,13 +99,6 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172; rightTargetZoneW = window.innerWidth * 0.9 - 172;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // 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("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); // 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("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/squar.png'); this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@ -266,25 +290,6 @@ import Layout from '../../layouts/Layout.astro';
} }
create() { 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 params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); 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`}) this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
} }
if(isMobile){ if(isMobile){
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_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: `#7C4C23`}); this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
} else{ } else{
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_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: `#7C4C23`}); 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; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 20;
const baseFontSize = 22; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 95, data.description, { 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);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const 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', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); // 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 = [ const blocks = [
{ {
x: displayW / 2 - 200, x: displayW / 2 - 200,
@ -486,7 +503,7 @@ import Layout from '../../layouts/Layout.astro';
if ( if (
Phaser.Geom.Intersects.RectangleToRectangle( Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(), 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` // 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', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 0; let counter = 0;
const isMatch = (blockName, targetName) => { 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" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: 0, x: 0,
y: 0, y: 0,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@ -27,6 +44,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 200; learningWidth = 200;
learningHeight = 400 learningHeight = 400
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;
@ -36,11 +58,7 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450; learningWidth = 450;
learningHeight = 400 learningHeight = 400
} }
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
@ -105,6 +123,10 @@ import Layout from '../../layouts/Layout.astro';
function preload() { function preload() {
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.png'); 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('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
} }
@ -117,61 +139,82 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); 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, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const borderBottom = this.add.graphics();
const 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', { const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}); // });
submitButton.setVisible(true); submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){
@ -181,12 +224,16 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle); // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); // 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){ if(isMobile){
outlineImage.setDepth(1).setScale(0.31); outlineImage.setDepth(1).setScale(0.33);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.38);
} else{ } else{
outlineImage.setDepth(1).setScale(0.5); outlineImage.setDepth(1).setScale(0.5);
} }
graphics = this.add.graphics(); graphics = this.add.graphics();
const colorContainer = document.createElement('div'); const colorContainer = document.createElement('div');
@ -227,9 +274,10 @@ import Layout from '../../layouts/Layout.astro';
}); });
// Append the color picker to the color container data // Append the color picker to the color container data
colorContainer.appendChild(colorPicker); 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; // const colors = data.colors;
// var colors = colorList; // 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 colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60; const buttonSize = 60;
const buttonSpacing = 5; const buttonSpacing = 5;
@ -331,20 +379,20 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer); document.body.appendChild(buttonsContainer);
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('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.border = '3px solid blue';
clearButton.style.color = 'blue'; // clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content'; // clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px'; // clearButton.style.marginRight = '10px';
if(isMobile){ if(isMobile){
clearButton.style.padding = '2px 8px'; clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%'; buttonsContainer.style.top = '17%';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
} }
clearButton.style.fontWeight = 'bold'; // clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%'; // clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => { clearButton.addEventListener('click', () => {
clearDrawing(); clearDrawing();
}); });
@ -453,13 +501,13 @@ import Layout from '../../layouts/Layout.astro';
}; };
// Add a "Save Snapshot" button // Add a "Save Snapshot" button
if(isMobile){ if(isMobile){
snapWidth = 50; snapWidth = 70;
snapHeight = 70; snapHeight = 70;
} else { } else {
snapWidth = 200; snapWidth = 200;
snapHeight = 70; 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 = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive(); snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => { 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" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: 0, x: 0,
y: 0, y: 0,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@ -27,6 +45,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 200; learningWidth = 200;
learningHeight = 400 learningHeight = 400
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;
@ -36,11 +59,7 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450; learningWidth = 450;
learningHeight = 400 learningHeight = 400
} }
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
@ -105,6 +124,10 @@ import Layout from '../../layouts/Layout.astro';
function preload() { function preload() {
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.png'); 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('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
} }
@ -117,61 +140,80 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 18; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 50, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); 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, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const borderBottom = this.add.graphics();
const 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', { const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}); // });
submitButton.setVisible(true); submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){
@ -181,12 +223,15 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle); // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); // 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){ if(isMobile){
outlineImage.setDepth(1).setScale(0.33); outlineImage.setDepth(1).setScale(0.21);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.32);
} else{ } else{
outlineImage.setDepth(1).setScale(0.45); outlineImage.setDepth(1).setScale(0.45);
} }
graphics = this.add.graphics(); graphics = this.add.graphics();
const colorContainer = document.createElement('div'); const colorContainer = document.createElement('div');
@ -205,7 +250,7 @@ import Layout from '../../layouts/Layout.astro';
colorPicker.value = selectedColor; colorPicker.value = selectedColor;
colorPicker.className = 'color-picker'; colorPicker.className = 'color-picker';
colorPicker.style.marginBottom = '0px'; colorPicker.style.marginBottom = '0px';
colorPicker.style.marginTop = '-0px'; colorPicker.style.marginTop = '25px';
colorPicker.style.marginRight = '15px'; colorPicker.style.marginRight = '15px';
// colorPicker.style.padding = '1px 1px'; // colorPicker.style.padding = '1px 1px';
// colorPicker.style.outline = 'none'; // colorPicker.style.outline = 'none';
@ -227,9 +272,10 @@ import Layout from '../../layouts/Layout.astro';
}); });
// Append the color picker to the color container data // Append the color picker to the color container data
colorContainer.appendChild(colorPicker); 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; // const colors = data.colors;
// var colors = colorList; // 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 colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60; const buttonSize = 60;
const buttonSpacing = 5; const buttonSpacing = 5;
@ -293,7 +339,7 @@ import Layout from '../../layouts/Layout.astro';
button.style.marginTop = '5px'; button.style.marginTop = '5px';
button.style.marginBottom = '5px'; button.style.marginBottom = '5px';
} else{ } else{
button.style.border = "2px solid"; button.style.border = "2px solid";
button.style.borderColor = color; button.style.borderColor = color;
button.style.boxShadow = '5px 10px 30px #7c4c2390'; button.style.boxShadow = '5px 10px 30px #7c4c2390';
button.style.borderRadius = '20%'; button.style.borderRadius = '20%';
@ -321,7 +367,7 @@ import Layout from '../../layouts/Layout.astro';
buttonsContainer.style.marginTop = '30px'; buttonsContainer.style.marginTop = '30px';
if(!isMobile){ if(!isMobile){
// buttonsContainer.style.position = 'fixed'; // buttonsContainer.style.position = 'fixed';
buttonsContainer.style.top = '10%'; buttonsContainer.style.top = '12%';
buttonsContainer.style.flexDirection = 'column'; buttonsContainer.style.flexDirection = 'column';
buttonsContainer.style.marginLeft = '60px'; buttonsContainer.style.marginLeft = '60px';
buttonsContainer.style.marginTop = '0%'; buttonsContainer.style.marginTop = '0%';
@ -331,20 +377,20 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer); document.body.appendChild(buttonsContainer);
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('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.border = '3px solid blue';
clearButton.style.color = 'blue'; // clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content'; // clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px'; // clearButton.style.marginRight = '10px';
if(isMobile){ if(isMobile){
clearButton.style.padding = '2px 8px'; clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%'; buttonsContainer.style.top = '17%';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
} }
clearButton.style.fontWeight = 'bold'; // clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%'; // clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => { clearButton.addEventListener('click', () => {
clearDrawing(); clearDrawing();
}); });
@ -453,13 +499,13 @@ import Layout from '../../layouts/Layout.astro';
}; };
// Add a "Save Snapshot" button // Add a "Save Snapshot" button
if(isMobile){ if(isMobile){
snapWidth = 50; snapWidth = 70;
snapHeight = 70; snapHeight = 70;
} else { } else {
snapWidth = 200; snapWidth = 200;
snapHeight = 70; 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 = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive(); snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => { 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" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: 0, x: 0,
y: 0, y: 0,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@ -27,6 +46,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 200; learningWidth = 200;
learningHeight = 400 learningHeight = 400
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;
@ -36,11 +60,7 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450; learningWidth = 450;
learningHeight = 400 learningHeight = 400
} }
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
@ -105,6 +125,10 @@ import Layout from '../../layouts/Layout.astro';
function preload() { function preload() {
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.png'); 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('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
} }
@ -117,9 +141,11 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); 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, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {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); console.error('Error fetching initial data:', error);
}); });
// window.load // 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', { const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}); // });
submitButton.setVisible(true); submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
submitNotic.setVisible(false);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData(this);
}); });
@ -157,10 +203,11 @@ import Layout from '../../layouts/Layout.astro';
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
if(isMobile){ if(isMobile){
outlineImage.setDepth(1).setScale(0.33); outlineImage.setDepth(1).setScale(0.33);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.40);
} else{ } else{
outlineImage.setDepth(1).setScale(0.65); outlineImage.setDepth(1).setScale(0.65);
} }
graphics = this.add.graphics(); graphics = this.add.graphics();
const colorContainer = document.createElement('div'); const colorContainer = document.createElement('div');
colorContainer.style.position = 'absolute'; colorContainer.style.position = 'absolute';
@ -202,7 +249,8 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.appendChild(colorPicker); colorContainer.appendChild(colorPicker);
// const colors = data.colors; // const colors = data.colors;
// var colors = colorList; // 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 colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60; const buttonSize = 60;
const buttonSpacing = 5; const buttonSpacing = 5;
@ -304,20 +352,20 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer); document.body.appendChild(buttonsContainer);
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('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.border = '3px solid blue';
clearButton.style.color = 'blue'; // clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content'; // clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px'; // clearButton.style.marginRight = '10px';
if(isMobile){ if(isMobile){
clearButton.style.padding = '2px 8px'; clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%'; buttonsContainer.style.top = '17%';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
} }
clearButton.style.fontWeight = 'bold'; // clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%'; // clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => { clearButton.addEventListener('click', () => {
clearDrawing(); clearDrawing();
}); });
@ -426,27 +474,26 @@ import Layout from '../../layouts/Layout.astro';
}; };
// Add a "Save Snapshot" button // Add a "Save Snapshot" button
if(isMobile){ if(isMobile){
snapWidth = 50; snapWidth = 70;
snapHeight = 70; snapHeight = 70;
} else { } else {
snapWidth = 200; snapWidth = 200;
snapHeight = 70; 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 = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive(); snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => { snapshotButton.on('pointerdown', () => {
// submitUserData(this); captureSnapshot(this);
}); });
snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'}); snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
snapNotice.setVisible(false); snapNotice.setVisible(false);
} }
const url = window.location.href; function captureSnapshot(drawingZone) {
const gameName = url.split('/'); // snapNotice.setVisible(true);
const gameType = gameName[3].split('?id='); submitButton.setVisible(false);
function submitUserData(drawingZone) { snapshotButton.setVisible(false);
let imageCode; customCursor.setVisible(false);
console.log(drawingZone);
drawingZone.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true); submitButton.setVisible(true);
snapshotButton.setVisible(true); snapshotButton.setVisible(true);
@ -461,41 +508,66 @@ import Layout from '../../layouts/Layout.astro';
link.download = 'my_drawing.png'; link.download = 'my_drawing.png';
link.click(); link.click();
document.body.removeChild(image); document.body.removeChild(image);
imageCode = image.src; // 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 = { // let userData = {
'userID': 'drawing@beanstalkedu.com', // 'userID': 'drawing@beanstalkedu.com',
'gameType': gameType[0], // 'gameType': gameType[0],
'gameID': gameType[1], // 'gameID': gameType[1],
'screenShot': imageCode // 'screenShot': imageCode
// 'starts': formattedDateTime, // // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
console.log(userData); // console.log(userData);
fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, { // fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
console.log('Data Saved', response) // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
// Clear the drawing // // Clear the drawing
// graphics.clear(); // // graphics.clear();
}); // });
}; // };
// function captureSnapshot(drawingZone) { // function captureSnapshot(drawingZone) {
// submitButton.setVisible(false); // submitButton.setVisible(false);
// // snapNotice.setVisible(true); // // snapNotice.setVisible(true);

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" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
// const drawingZone = { // const drawingZone = {
// x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width // x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
// y: window.innerHeight / 1, // y: window.innerHeight / 1,
// width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width // width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
// height: window.innerHeight / 2, // 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){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@ -33,6 +52,11 @@ import Layout from '../../layouts/Layout.astro';
image2Height = 2; image2Height = 2;
image2Bottom = 110; image2Bottom = 110;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;
@ -41,19 +65,14 @@ import Layout from '../../layouts/Layout.astro';
downloadHeight = 70; downloadHeight = 70;
learningWidth = 450; learningWidth = 450;
learningHeight = 350; learningHeight = 350;
image1Width = 4; image1Width = 3;
image1Height = 1.8; image1Height = 1.8;
image2Width = 2; image2Width = 2;
image2Right = 400; image2Right = 250;
image2Height = 1.8; image2Height = 1.8;
image2Bottom = 0; image2Bottom = 0;
} }
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
let defaultColor;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
@ -118,10 +137,13 @@ import Layout from '../../layouts/Layout.astro';
this.load.image('image1', assetsList.image1); this.load.image('image1', assetsList.image1);
this.load.image('image2', assetsList.image2); this.load.image('image2', assetsList.image2);
this.load.image('topLogo', '/assets/top_logo.png'); 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('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('waxTexture', '/assets/texture.png'); this.load.image('waxTexture', '/assets/texture.png');
} }
function create() { function create() {
@ -132,61 +154,86 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); 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, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const URL = window.location.href;
const gameName = URL.split('/'); // console.log(gameType[0]);
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const borderBottom = this.add.graphics();
const 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', { const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}); // });
submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(); // submitUserData();
submitUserData(this);
}) })
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){
@ -196,14 +243,16 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle); // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); // 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){ if(isMobile){
outlineImage1.setDepth(1).setScale(0.28); outlineImage1.setDepth(1).setScale(0.28);
outlineImage2.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{ } else{
outlineImage1.setDepth(1).setScale(0.65); outlineImage1.setDepth(1).setScale(0.60);
outlineImage2.setDepth(1).setScale(0.65); outlineImage2.setDepth(1).setScale(0.60);
} }
graphics = this.add.graphics(); graphics = this.add.graphics();
const colorContainer = document.createElement('div'); const colorContainer = document.createElement('div');
@ -305,10 +354,10 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer); document.body.appendChild(buttonsContainer);
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('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.border = '3px solid blue';
clearButton.style.color = 'blue'; // clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content'; // clearButton.style.width = 'fit-content';
clearButton.style.marginLeft = '30px'; clearButton.style.marginLeft = '30px';
if(isMobile){ if(isMobile){
clearButton.style.padding = '2px 8px'; clearButton.style.padding = '2px 8px';
@ -316,9 +365,9 @@ import Layout from '../../layouts/Layout.astro';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
} }
clearButton.style.fontWeight = 'bold'; // clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%'; // clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => { clearButton.addEventListener('click', () => {
clearDrawing(); clearDrawing();
}); });
@ -410,13 +459,14 @@ import Layout from '../../layouts/Layout.astro';
const borderGraphics = this.add.graphics(); const borderGraphics = this.add.graphics();
borderGraphics.lineStyle(borderThickness, borderColor); borderGraphics.lineStyle(borderThickness, borderColor);
if(isMobile){ if(isMobile){
snapWidth = 50; snapWidth = 70;
snapHeight = 70; snapHeight = 70;
} else { } else {
snapWidth = 200; snapWidth = 200;
snapHeight = 70; 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.setInteractive();
snapshotButton.on('pointerdown', () => { snapshotButton.on('pointerdown', () => {
captureSnapshot(this); 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> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-6"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <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> </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"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
@ -71,7 +81,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-8"> <div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p> <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> </div>
</form> </form>
</div> </div>

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

@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-6"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <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> </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"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
@ -95,7 +105,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col justify-center place-items-center pt-8"> <div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p> <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> </div>
</form> </form>
</div> </div>

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

@ -6,11 +6,21 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div class=""> <div class="">
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-2"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <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> </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"> <div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p> <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> --> <!-- <p id="LearningSubArea"></p> -->
@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-4"> <div class="flex flex-col place-items-center justify-center pt-4">
<p id="savedMessage"></p> <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> </div>
</form> </form>
</div> </div>

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

@ -83,6 +83,11 @@ import Layout from "../../layouts/Layout.astro";
</form> </form>
</div> </div>
</section> </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> </div>
</main> </main>
</Layout> </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> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-6"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <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> </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"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
@ -95,7 +105,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col justify-center place-items-center pt-8"> <div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p> <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> </div>
</form> </form>
</div> </div>
@ -238,173 +248,6 @@ import Layout from "../../layouts/Layout.astro";
}); });
}); });
</script> </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> <style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body{ body{

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

@ -6,11 +6,21 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div class=""> <div class="">
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-2"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <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> </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"> <div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p> <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> --> <!-- <p id="LearningSubArea"></p> -->
@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-4"> <div class="flex flex-col place-items-center justify-center pt-4">
<p id="savedMessage"></p> <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> </div>
</form> </form>
</div> </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