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

Compare commits

base: kar:455393f2fad2255bf00af4cacbef320edb4d29bc
Branches Tags
kar:master
kar:newb2
kar:newb
kar:b4
kar:fetch2
kar:b3
kar:b2
..
compare: kar:65aa08bfb6a082eec289915c20008f5e81ad1e52
Branches Tags
kar:master
kar:newb2
kar:newb
kar:b4
kar:fetch2
kar:b3
kar:b2

No commits in common. "455393f2fad2255bf00af4cacbef320edb4d29bc" and "65aa08bfb6a082eec289915c20008f5e81ad1e52" have entirely different histories.
455393f2fa ... 65aa08bfb6

5 changed files with 25 additions and 37 deletions
Show Stats Expand all files Collapse all files

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

@ -23,9 +23,9 @@ import Layout from '../../layouts/Layout.astro';
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p> <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
</div> </div>
</div> </div>
<div class="flex flex-row items-center" style=""> <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
<img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" /> <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p> <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
<button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button> <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
@ -83,7 +83,6 @@ import Layout from '../../layouts/Layout.astro';
const imgElement = document.getElementById('clipArtWithHand'); const imgElement = document.getElementById('clipArtWithHand');
document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`; document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
if (imgElement) { if (imgElement) {
document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
imgElement.src = `/assets/hand-${spriteNames}.svg`; imgElement.src = `/assets/hand-${spriteNames}.svg`;
console.log(imgElement.src) console.log(imgElement.src)
} else { } else {
@ -134,9 +133,7 @@ import Layout from '../../layouts/Layout.astro';
} }
function showAnimation() { function showAnimation() {
const clipArt = document.querySelector('.clip-art'); const clipArt = document.querySelector('.clip-art');
setTimeout(() => {
clipArt.classList.add('show'); clipArt.classList.add('show');
}, 100);
} }
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;

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

@ -23,9 +23,9 @@ import Layout from '../../layouts/Layout.astro';
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p> <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
</div> </div>
</div> </div>
<div class="flex flex-row items-center" style=""> <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
<img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" /> <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p> <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
<button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button> <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
@ -82,7 +82,6 @@ import Layout from '../../layouts/Layout.astro';
const imgElement = document.getElementById('clipArtWithHand'); const imgElement = document.getElementById('clipArtWithHand');
document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`; document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
if (imgElement) { if (imgElement) {
document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
imgElement.src = `/assets/hand-${spriteNames}.svg`; imgElement.src = `/assets/hand-${spriteNames}.svg`;
console.log(imgElement.src) console.log(imgElement.src)
} else { } else {
@ -132,9 +131,7 @@ import Layout from '../../layouts/Layout.astro';
} }
function showAnimation() { function showAnimation() {
const clipArt = document.querySelector('.clip-art'); const clipArt = document.querySelector('.clip-art');
setTimeout(() => {
clipArt.classList.add('show'); clipArt.classList.add('show');
}, 100);
} }
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;

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

@ -23,9 +23,9 @@ import Layout from '../../layouts/Layout.astro';
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p> <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
</div> </div>
</div> </div>
<div class="flex flex-row items-center" style=""> <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
<img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" /> <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p> <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
<button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button> <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
@ -76,16 +76,14 @@ import Layout from '../../layouts/Layout.astro';
const akademyUserId = params.get('childId'); const akademyUserId = params.get('childId');
const akademyGameName = params.get('gameName'); const akademyGameName = params.get('gameName');
const spriteNames = params.get('spriteName'); const spriteNames = params.get('spriteName');
let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]; let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
// starClipart
function displaySprite() { function displaySprite() {
if (buddiesList.includes(spriteNames)) { if (buddiesList.includes(spriteNames)) {
const imgElement = document.getElementById('clipArtWithHand'); const imgElement = document.getElementById('clipArtWithHand');
document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`; document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
if (imgElement) { if (imgElement) {
document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
imgElement.src = `/assets/hand-${spriteNames}.svg`; imgElement.src = `/assets/hand-${spriteNames}.svg`;
// console.log(imgElement.src) console.log(imgElement.src)
} else { } else {
console.log('Element with ID "clipArtWithHand" not found.'); console.log('Element with ID "clipArtWithHand" not found.');
} }
@ -148,9 +146,11 @@ import Layout from '../../layouts/Layout.astro';
} }
function showAnimation() { function showAnimation() {
const clipArt = document.querySelector('.clip-art'); const clipArt = document.querySelector('.clip-art');
// Initially set the clip-art to show after 2 seconds with a slide effect
setTimeout(() => { setTimeout(() => {
clipArt.classList.add('show'); clipArt.classList.add('show'); // Add the show class to trigger animation
}, 100); }, 2000); // Delay animation by 2 seconds
} }
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed

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

@ -23,9 +23,9 @@ import Layout from '../../layouts/Layout.astro';
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p> <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
</div> </div>
</div> </div>
<div class="flex flex-row items-center" style=""> <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
<img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" /> <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p> <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
<button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button> <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
@ -82,7 +82,6 @@ import Layout from '../../layouts/Layout.astro';
const imgElement = document.getElementById('clipArtWithHand'); const imgElement = document.getElementById('clipArtWithHand');
document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`; document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
if (imgElement) { if (imgElement) {
document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
imgElement.src = `/assets/hand-${spriteNames}.svg`; imgElement.src = `/assets/hand-${spriteNames}.svg`;
console.log(imgElement.src) console.log(imgElement.src)
} else { } else {
@ -132,9 +131,7 @@ import Layout from '../../layouts/Layout.astro';
} }
function showAnimation() { function showAnimation() {
const clipArt = document.querySelector('.clip-art'); const clipArt = document.querySelector('.clip-art');
setTimeout(() => {
clipArt.classList.add('show'); clipArt.classList.add('show');
}, 100);
} }
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;

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

@ -23,9 +23,9 @@ import Layout from '../../layouts/Layout.astro';
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p> <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
</div> </div>
</div> </div>
<div class="flex flex-row items-center" style=""> <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
<img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" /> <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
<p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p> <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
<button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button> <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
@ -82,7 +82,6 @@ import Layout from '../../layouts/Layout.astro';
const imgElement = document.getElementById('clipArtWithHand'); const imgElement = document.getElementById('clipArtWithHand');
document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`; document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
if (imgElement) { if (imgElement) {
document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
imgElement.src = `/assets/hand-${spriteNames}.svg`; imgElement.src = `/assets/hand-${spriteNames}.svg`;
console.log(imgElement.src) console.log(imgElement.src)
} else { } else {
@ -132,9 +131,7 @@ import Layout from '../../layouts/Layout.astro';
} }
function showAnimation() { function showAnimation() {
const clipArt = document.querySelector('.clip-art'); const clipArt = document.querySelector('.clip-art');
setTimeout(() => {
clipArt.classList.add('show'); clipArt.classList.add('show');
}, 100);
} }
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;