diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro index 79104df..87c8720 100644 --- a/src/pages/drag/dragdrop_phonics.astro +++ b/src/pages/drag/dragdrop_phonics.astro @@ -56,6 +56,9 @@ import Layout from '../../layouts/Layout.astro'; let cancelIconWidth; let retryButton; let blockMatches; + let audioData; + let audioFileId = false; + let isPlaying = false; if(isMobile){ topLogoWidth = 4.5; @@ -142,6 +145,10 @@ import Layout from '../../layouts/Layout.astro'; const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_drop_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { + if(data.instruction){ + audioFileId = true; + } + audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`; const {image1, image2, image3, image4, image5, image6, image7, image8} = data; if(isMobile){ imageCustomWidth = "?width=80"; @@ -239,6 +246,9 @@ import Layout from '../../layouts/Layout.astro'; for (var i = 0; i < 5; i++) { this.load.image('logo'+i, '/assets/background.jpg'); } + if(audioFileId === true){ + this.load.audio('instructAudio', audioData) + } this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg'); @@ -410,7 +420,7 @@ import Layout from '../../layouts/Layout.astro'; // window.load this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); - this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale(); + let soundButton = 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(); @@ -432,7 +442,19 @@ import Layout from '../../layouts/Layout.astro'; showAnimation(); }) let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8; + if(audioFileId === true){ + let instructionAudio = this.sound.add('instructAudio') + soundButton.setInteractive().on('pointerdown', () => { + if(isPlaying === false){ + instructionAudio.play() + isPlaying = true + } else if(isPlaying === true) { + instructionAudio.stop(); + isPlaying = false + } + }) + } if(isMobile){ blocks1Width1 = 180; diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index c595b70..63c3b84 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -59,6 +59,9 @@ const numberOfTimes = starNumberOfTime; let resetIconWidth; let tickIconWidth; let cancelIconWidth; + let audioData; + let audioFileId = false; + let isPlaying = false; if(isMobile){ topLogoWidth = 4.5; @@ -168,6 +171,11 @@ const numberOfTimes = starNumberOfTime; const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { + if(data.instruction){ + audioFileId = true; + } + audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`; + // console.log(audioData) const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data; if(isMobile){ imageCustomWidth = "?width=100"; @@ -264,6 +272,9 @@ const numberOfTimes = starNumberOfTime; for (var i = 0; i < 5; i++) { this.load.image('logo'+i, '/assets/background.jpg'); } + if(audioFileId === true){ + this.load.audio('instructAudio', audioData) + } this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg'); @@ -397,15 +408,8 @@ const numberOfTimes = starNumberOfTime; graphics.strokePath(); submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false); - // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { - // font: '600 30px Quicksand', - // fill: '#fff', - // backgroundColor: 'blue', - // padding: { x: 20, y: 10 }, - // }).setDepth(1); - this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); - this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale(); + let soundButton = 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(); @@ -417,6 +421,20 @@ const numberOfTimes = starNumberOfTime; // 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); + if(audioFileId === true){ + let instructionAudio = this.sound.add('instructAudio') + soundButton.setInteractive().on('pointerdown', () => { + if(isPlaying === false){ + instructionAudio.play() + isPlaying = true + } else if(isPlaying === true) { + instructionAudio.stop(); + isPlaying = false + } + + }) + } + const blocks = [ { diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro index a03e7ce..dccc0bc 100644 --- a/src/pages/drag/match_phonics.astro +++ b/src/pages/drag/match_phonics.astro @@ -55,6 +55,9 @@ import Layout from '../../layouts/Layout.astro'; let resetIconWidth; let tickIconWidth; let cancelIconWidth; + let audioData; + let audioFileId = false; + let isPlaying = false; if(isMobile){ topLogoWidth = 4.5; @@ -147,6 +150,10 @@ import Layout from '../../layouts/Layout.astro'; const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { + if(data.instruction){ + audioFileId = true; + } + audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`; const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data; if(isMobile){ imageCustomWidth = "?width=100"; @@ -243,6 +250,9 @@ import Layout from '../../layouts/Layout.astro'; for (var i = 0; i < 5; i++) { this.load.image('logo'+i, '/assets/background.jpg'); } + if(audioFileId === true){ + this.load.audio('instructAudio', audioData) + } this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image("tick", '/assets/tick.png'); @@ -372,7 +382,7 @@ import Layout from '../../layouts/Layout.astro'; // }); // }; this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); - this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale(); + let soundButton = 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(); @@ -385,6 +395,19 @@ import Layout from '../../layouts/Layout.astro'; this.add.image(displayW * 0.9-32, 680, "target4"); // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1); + if(audioFileId === true){ + let instructionAudio = this.sound.add('instructAudio') + soundButton.setInteractive().on('pointerdown', () => { + if(isPlaying === false){ + instructionAudio.play() + isPlaying = true + } else if(isPlaying === true) { + instructionAudio.stop(); + isPlaying = false + } + + }) + } const graphics = this.add.graphics(); const x = 0; const y = 54; diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro index 0ea2d63..02eb515 100644 --- a/src/pages/drag/v2.astro +++ b/src/pages/drag/v2.astro @@ -56,6 +56,10 @@ import Layout from '../../layouts/Layout.astro'; let tickIconWidth; let cancelIconWidth; + let audioData; + let audioFileId = false; + let isPlaying = false; + if(isMobile){ topLogoWidth = 4.5; muteIconWidth = 1.8; @@ -147,6 +151,11 @@ import Layout from '../../layouts/Layout.astro'; const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { + + if(data.instruction){ + audioFileId = true; + } + audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`; const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data; if(isMobile){ imageCustomWidth = "?width=100"; @@ -243,6 +252,9 @@ import Layout from '../../layouts/Layout.astro'; for (var i = 0; i < 5; i++) { this.load.image('logo'+i, '/assets/background.jpg'); } + if(audioFileId === true){ + this.load.audio('instructAudio', audioData) + } this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image("tick", '/assets/tick.png'); @@ -372,7 +384,7 @@ import Layout from '../../layouts/Layout.astro'; // }); // }; this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); - this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale(); + let soundButton = 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(); @@ -384,7 +396,19 @@ import Layout from '../../layouts/Layout.astro'; // 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); + if(audioFileId === true){ + let instructionAudio = this.sound.add('instructAudio') + soundButton.setInteractive().on('pointerdown', () => { + if(isPlaying === false){ + instructionAudio.play() + isPlaying = true + } else if(isPlaying === true) { + instructionAudio.stop(); + isPlaying = false + } + }) + } const graphics = this.add.graphics(); const x = 0; const y = 54; diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro index 4eb9e8a..52fbed8 100644 --- a/src/pages/drag/v3.astro +++ b/src/pages/drag/v3.astro @@ -59,6 +59,9 @@ import Layout from '../../layouts/Layout.astro'; let blockMatches; let retryButtonWidth; let leftTargetZoneW; + let audioData; + let audioFileId = false; + let isPlaying = false; if(isMobile){ topLogoWidth = 4.5; @@ -179,6 +182,10 @@ import Layout from '../../layouts/Layout.astro'; const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { + if(data.instruction){ + audioFileId = true; + } + audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`; const {image1, image2, image3, image4, image5, image6, image7, image8} = data; if(isMobile){ imageCustomWidth = "?width=100"; @@ -274,6 +281,9 @@ import Layout from '../../layouts/Layout.astro'; for (var i = 0; i < 5; i++) { this.load.image('logo'+i, '/assets/background.jpg'); } + if(audioFileId === true){ + this.load.audio('instructAudio', audioData) + } this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image("tick", '/assets/tick.png'); @@ -422,12 +432,25 @@ import Layout from '../../layouts/Layout.astro'; graphics.strokePath(); this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); - this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale(); + let soundButton = 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(); submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false); + if(audioFileId === true){ + let instructionAudio = this.sound.add('instructAudio') + soundButton.setInteractive().on('pointerdown', () => { + if(isPlaying === false){ + instructionAudio.play() + isPlaying = true + } else if(isPlaying === true) { + instructionAudio.stop(); + isPlaying = false + } + + }) + } // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // font: '600 30px Quicksand', // fill: '#fff', diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro index ce5f969..13dc7d6 100644 --- a/src/pages/drag/v4.astro +++ b/src/pages/drag/v4.astro @@ -59,6 +59,9 @@ import Layout from '../../layouts/Layout.astro'; let leftTargetZoneW; let rightTargetZoneW; let retryButtonWidth; + let audioData; + let audioFileId = false; + let isPlaying = false; if(isMobile){ topLogoWidth = 4.5; @@ -145,6 +148,10 @@ import Layout from '../../layouts/Layout.astro'; const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { + if(data.instruction){ + audioFileId = true; + } + audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`; const {image1, image2, image3, image4, image5, image6, image7, image8} = data; if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";}; const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/" @@ -238,6 +245,9 @@ import Layout from '../../layouts/Layout.astro'; for (var i = 0; i < 5; i++) { this.load.image('logo'+i, '/assets/background.jpg'); } + if(audioFileId === true){ + this.load.audio('instructAudio', audioData) + } this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image('topLogo', '/assets/top_logo.svg'); // this.load.image("tick", '/assets/tick.png'); @@ -249,8 +259,6 @@ import Layout from '../../layouts/Layout.astro'; // this.load.image("retryIcon", "/assets/svg/retry.svg") this.load.image("border", '/assets/squar.png'); - - this.load.spritesheet("blocks1", assetsList.element5,{ frameWidth: 100, frameHeight: 100, @@ -405,10 +413,23 @@ import Layout from '../../layouts/Layout.astro'; graphics.strokePath(); this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); - this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale(); + let soundButton = 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(); + if(audioFileId === true){ + let instructionAudio = this.sound.add('instructAudio') + soundButton.setInteractive().on('pointerdown', () => { + if(isPlaying === false){ + instructionAudio.play() + isPlaying = true + } else if(isPlaying === true) { + instructionAudio.stop(); + isPlaying = false + } + + }) + } // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // font: '600 30px Quicksand', // fill: '#fff', diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro index 07f858e..ab1c6cb 100644 --- a/src/pages/drawing/drawing_phonics.astro +++ b/src/pages/drawing/drawing_phonics.astro @@ -90,6 +90,10 @@ import Layout from '../../layouts/Layout.astro'; let scoreTotal = 0; let maxScore; let erase; + let audioData; + let audioFileId = false; + let isPlaying = false; + if(isMobile){ topLogoWidth = 4.5; muteIconWidth = 1.8; @@ -152,6 +156,10 @@ import Layout from '../../layouts/Layout.astro'; const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { + if(data.instruction){ + audioFileId = true; + } + audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`; // console.log(data) // colorList = data.colors; const {image} = data; @@ -191,6 +199,9 @@ import Layout from '../../layouts/Layout.astro'; let colorList; function preload() { + if(audioFileId === true){ + this.load.audio('instructAudio', audioData) + } this.load.image('outline', assetsList.image); this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg'); @@ -247,6 +258,19 @@ import Layout from '../../layouts/Layout.astro'; retryButton.setInteractive().on('pointerdown', () => { graphics.clear(); }); + if(audioFileId === true){ + let instructionAudio = this.sound.add('instructAudio') + muteIcon.setInteractive().on('pointerdown', () => { + if(isPlaying === false){ + instructionAudio.play() + isPlaying = true + } else if(isPlaying === true) { + instructionAudio.stop(); + isPlaying = false + } + + }) + } submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false); // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { // font: '600 30px Quicksand', diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro index b8a3213..c1cbe49 100644 --- a/src/pages/drawing/drawing_writo.astro +++ b/src/pages/drawing/drawing_writo.astro @@ -90,6 +90,9 @@ import Layout from '../../layouts/Layout.astro'; let scoreTotal = 0; let maxScore; let erase; + let audioData; + let audioFileId = false; + let isPlaying = false; if(isMobile){ topLogoWidth = 4.5; muteIconWidth = 1.8; @@ -153,6 +156,10 @@ import Layout from '../../layouts/Layout.astro'; const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { + if(data.instruction){ + audioFileId = true; + } + audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`; // console.log(data) // colorList = data.colors; const {image} = data; @@ -192,6 +199,9 @@ import Layout from '../../layouts/Layout.astro'; let colorList; function preload() { + if(audioFileId === true){ + this.load.audio('instructAudio', audioData) + } this.load.image('outline', assetsList.image); this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg'); @@ -246,6 +256,19 @@ import Layout from '../../layouts/Layout.astro'; retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon"); submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); + if(audioFileId === true){ + let instructionAudio = this.sound.add('instructAudio') + muteIcon.setInteractive().on('pointerdown', () => { + if(isPlaying === false){ + instructionAudio.play() + isPlaying = true + } else if(isPlaying === true) { + instructionAudio.stop(); + isPlaying = false + } + + }) + } retryButton.setInteractive().on('pointerdown', () => { graphics.clear(); diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index add25aa..e8698ec 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -143,6 +143,9 @@ import Layout from '../../layouts/Layout.astro'; let retryButton; let maxScore; let erase; + let audioData; + let audioFileId = false; + let isPlaying = false; if(isMobile){ topLogoWidth = 4.5; muteIconWidth = 1.65; @@ -209,6 +212,10 @@ import Layout from '../../layouts/Layout.astro'; const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { + if(data.instruction){ + audioFileId = true; + } + audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`; // console.log(data) // colorList = data.colors; const {image} = data; @@ -249,6 +256,9 @@ import Layout from '../../layouts/Layout.astro'; let colorList; function preload() { + if(audioFileId === true){ + this.load.audio('instructAudio', audioData) + } this.load.image('outline', assetsList.image); this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg'); @@ -298,6 +308,19 @@ import Layout from '../../layouts/Layout.astro'; submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons"); + if(audioFileId === true){ + let instructionAudio = this.sound.add('instructAudio') + muteIcon.setInteractive().on('pointerdown', () => { + if(isPlaying === false){ + instructionAudio.play() + isPlaying = true + } else if(isPlaying === true) { + instructionAudio.stop(); + isPlaying = false + } + + }) + } retryButton.setInteractive().on('pointerdown', () => { // window.location.reload(); diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro index baebea6..71334e8 100644 --- a/src/pages/drawing/v2.astro +++ b/src/pages/drawing/v2.astro @@ -98,6 +98,9 @@ import Layout from '../../layouts/Layout.astro'; let noticeHeight; let maxScore; let erase; + let audioData; + let audioFileId = false; + let isPlaying = false; if(isMobile){ topLogoWidth = 4.5; muteIconWidth = 1.8; @@ -170,6 +173,10 @@ import Layout from '../../layouts/Layout.astro'; const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { + if(data.instruction){ + audioFileId = true; + } + audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`; colorList = data.colors; defaultColor = colorList[0]; const {image1, image2} = data; @@ -210,6 +217,9 @@ import Layout from '../../layouts/Layout.astro'; let colorList; function preload() { + if(audioFileId === true){ + this.load.audio('instructAudio', audioData) + } this.load.image('image1', assetsList.image1); this.load.image('image2', assetsList.image2); this.load.image('topLogo', '/assets/top_logo.svg'); @@ -297,6 +307,19 @@ import Layout from '../../layouts/Layout.astro'; retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon"); submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); + if(audioFileId === true){ + let instructionAudio = this.sound.add('instructAudio') + muteIcon.setInteractive().on('pointerdown', () => { + if(isPlaying === false){ + instructionAudio.play() + isPlaying = true + } else if(isPlaying === true) { + instructionAudio.stop(); + isPlaying = false + } + + }) + } retryButton.setInteractive().on('pointerdown', ()=>{ graphics.clear(); }) diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro index 1e018e6..5f0b323 100644 --- a/src/pages/drawing/v3.astro +++ b/src/pages/drawing/v3.astro @@ -90,6 +90,9 @@ import Layout from '../../layouts/Layout.astro'; let cancelIconWidth; let maxScore; let erase; + let audioData; + let audioFileId = false; + let isPlaying = false; if(isMobile){ topLogoWidth = 4.5; @@ -154,6 +157,10 @@ import Layout from '../../layouts/Layout.astro'; const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({data}) => { + if(data.instruction){ + audioFileId = true; + } + audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`; // console.log(data) // colorList = data.colors; const {image} = data; @@ -193,6 +200,9 @@ import Layout from '../../layouts/Layout.astro'; let colorList; function preload() { + if(audioFileId === true){ + this.load.audio('instructAudio', audioData) + } this.load.image('outline', assetsList.image); this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg'); @@ -279,6 +289,19 @@ import Layout from '../../layouts/Layout.astro'; submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); // galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons"); + if(audioFileId === true){ + let instructionAudio = this.sound.add('instructAudio') + muteIcon.setInteractive().on('pointerdown', () => { + if(isPlaying === false){ + instructionAudio.play() + isPlaying = true + } else if(isPlaying === true) { + instructionAudio.stop(); + isPlaying = false + } + + }) + } retryButton.setInteractive().on('pointerdown', () => { graphics.clear(); }) diff --git a/src/pages/tick/tick_phonics_v1.astro b/src/pages/tick/tick_phonics_v1.astro index 7d05055..2bf0c62 100644 --- a/src/pages/tick/tick_phonics_v1.astro +++ b/src/pages/tick/tick_phonics_v1.astro @@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
- + @@ -111,6 +111,14 @@ import Layout from "../../layouts/Layout.astro"; Clip Art
+
+ +
+