diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro index d8c8946..3e62ac7 100644 --- a/src/pages/drawing/drawing_phonics.astro +++ b/src/pages/drawing/drawing_phonics.astro @@ -23,9 +23,9 @@ import Layout from '../../layouts/Layout.astro';

-
- -

+
+ +

@@ -83,6 +83,7 @@ import Layout from '../../layouts/Layout.astro'; const imgElement = document.getElementById('clipArtWithHand'); document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`; if (imgElement) { + document.getElementById('starClipart').src = `/assets/${spriteNames}.gif` imgElement.src = `/assets/hand-${spriteNames}.svg`; console.log(imgElement.src) } else { @@ -133,7 +134,9 @@ import Layout from '../../layouts/Layout.astro'; } function showAnimation() { const clipArt = document.querySelector('.clip-art'); - clipArt.classList.add('show'); + setTimeout(() => { + clipArt.classList.add('show'); + }, 100); } const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro index d2cd2ac..3516b67 100644 --- a/src/pages/drawing/drawing_writo.astro +++ b/src/pages/drawing/drawing_writo.astro @@ -23,9 +23,9 @@ import Layout from '../../layouts/Layout.astro';

-
- -

+
+ +

@@ -82,6 +82,7 @@ import Layout from '../../layouts/Layout.astro'; const imgElement = document.getElementById('clipArtWithHand'); document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`; if (imgElement) { + document.getElementById('starClipart').src = `/assets/${spriteNames}.gif` imgElement.src = `/assets/hand-${spriteNames}.svg`; console.log(imgElement.src) } else { @@ -131,7 +132,9 @@ import Layout from '../../layouts/Layout.astro'; } function showAnimation() { const clipArt = document.querySelector('.clip-art'); - clipArt.classList.add('show'); + setTimeout(() => { + clipArt.classList.add('show'); + }, 100); } const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index 7dea0e3..528185c 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -23,9 +23,9 @@ import Layout from '../../layouts/Layout.astro';

-
- -

+
+ +

@@ -76,14 +76,16 @@ import Layout from '../../layouts/Layout.astro'; const akademyUserId = params.get('childId'); const akademyGameName = params.get('gameName'); const spriteNames = params.get('spriteName'); - let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ] + let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]; + // starClipart function displaySprite() { if (buddiesList.includes(spriteNames)) { const imgElement = document.getElementById('clipArtWithHand'); document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`; if (imgElement) { + document.getElementById('starClipart').src = `/assets/${spriteNames}.gif` imgElement.src = `/assets/hand-${spriteNames}.svg`; - console.log(imgElement.src) + // console.log(imgElement.src) } else { console.log('Element with ID "clipArtWithHand" not found.'); } @@ -146,11 +148,9 @@ import Layout from '../../layouts/Layout.astro'; } function showAnimation() { const clipArt = document.querySelector('.clip-art'); - - // Initially set the clip-art to show after 2 seconds with a slide effect setTimeout(() => { - clipArt.classList.add('show'); // Add the show class to trigger animation - }, 2000); // Delay animation by 2 seconds + clipArt.classList.add('show'); + }, 100); } const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro index 4d29305..4487ca3 100644 --- a/src/pages/drawing/v2.astro +++ b/src/pages/drawing/v2.astro @@ -23,9 +23,9 @@ import Layout from '../../layouts/Layout.astro';

-
- -

+
+ +

@@ -82,6 +82,7 @@ import Layout from '../../layouts/Layout.astro'; const imgElement = document.getElementById('clipArtWithHand'); document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`; if (imgElement) { + document.getElementById('starClipart').src = `/assets/${spriteNames}.gif` imgElement.src = `/assets/hand-${spriteNames}.svg`; console.log(imgElement.src) } else { @@ -131,7 +132,9 @@ import Layout from '../../layouts/Layout.astro'; } function showAnimation() { const clipArt = document.querySelector('.clip-art'); - clipArt.classList.add('show'); + setTimeout(() => { + clipArt.classList.add('show'); + }, 100); } const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro index 0fdd37b..ad0ed3e 100644 --- a/src/pages/drawing/v3.astro +++ b/src/pages/drawing/v3.astro @@ -23,9 +23,9 @@ import Layout from '../../layouts/Layout.astro';

-
- -

+
+ +

@@ -82,6 +82,7 @@ import Layout from '../../layouts/Layout.astro'; const imgElement = document.getElementById('clipArtWithHand'); document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`; if (imgElement) { + document.getElementById('starClipart').src = `/assets/${spriteNames}.gif` imgElement.src = `/assets/hand-${spriteNames}.svg`; console.log(imgElement.src) } else { @@ -131,7 +132,9 @@ import Layout from '../../layouts/Layout.astro'; } function showAnimation() { const clipArt = document.querySelector('.clip-art'); - clipArt.classList.add('show'); + setTimeout(() => { + clipArt.classList.add('show'); + }, 100); } const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;