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

s1

Browse Source
This commit is contained in:
Suvodip
2024-12-12 16:36:08 +05:30
parent 8e96e7b4ba
commit cedb4ad01e
6 changed files with 247 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
</div>
</div>
<div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
<div class="w-full max-w-6xl bg-white rounded-lg">
<div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
<div class="flex justify-between p-3">
<p class="text-[19px] font-[700]">Attempt 2</p>
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
@@ -49,11 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<button id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
<button id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
<div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
<h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
<p class="text-sm" id="imageDescription">Description goes here.</p>
</div>
</div>
</div>
</div>
@@ -64,6 +59,42 @@ import Layout from '../../layouts/Layout.astro';
</Layout>
<script src="/saveGameAI.js" is:inline></script>
<script is:inline>
const jsonData = [
{
"src": "/assets/back.jpeg"
},
{
"src": "/assets/background.jpg"
},
{
"src": "/assets/backgroundImage.png"
},
{
"src": "/assets/beanieImage.png"
}
];
let currentSlide = 0;
function updateSlide(){
const slide = jsonData[currentSlide];
document.getElementById('slideImage').src = slide.src;
}
document.getElementById('nextButton').addEventListener('click', () => {
currentSlide = (currentSlide + 1) % jsonData.length;
console.log(currentSlide)
updateSlide();
})
document.getElementById('prevButton').addEventListener('click', () => {
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
updateSlide();
})
updateSlide();
let parentMainContainer = document.getElementById('parentMainContainer');
let gallerySliderId = document.getElementById('gallerySliderId');
function closeGallery(){
parentMainContainer.classList.add('hidden');
gallerySliderId.classList.add('hidden');
}
function showAnimation() {
const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show');
@@ -101,24 +132,30 @@ import Layout from '../../layouts/Layout.astro';
let audioData;
let audioFileId = false;
let isPlaying = false;
let galleryIconWidth;
let galleryButton;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
galleryIconWidth = 2;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
galleryIconWidth = 1.81;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
galleryIconWidth = 1.345;
}
if(isMobile){
submitWidth = 250;
@@ -231,6 +268,7 @@ import Layout from '../../layouts/Layout.astro';
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('waxTexture', '/assets/texture.png');
this.load.image('colorButton', '/assets/color_button.png');
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
}
function create() {
@@ -306,6 +344,7 @@ import Layout from '../../layouts/Layout.astro';
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
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')
@@ -340,6 +379,10 @@ import Layout from '../../layouts/Layout.astro';
// parentMainContainer.classList.remove('hidden');
}
});
galleryButton.setInteractive().on('pointerdown', () => {
parentMainContainer.classList.remove('hidden');
gallerySliderId.classList.remove('hidden');
});
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(isMobile){
@@ -738,10 +781,17 @@ import Layout from '../../layouts/Layout.astro';
submitButton.setVisible(false);
snapshotButton.setVisible(false);
customCursor.setVisible(false);
muteIcon.setVisible(false);
retryButton.setVisible(false);
galleryButton.setVisible(false);
drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true);
snapshotButton.setVisible(true);
customCursor.setVisible(true);
muteIcon.setVisible(true);
retryButton.setVisible(true);
galleryButton.setVisible(true);
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';