500 lines
28 KiB
Plaintext
500 lines
28 KiB
Plaintext
---
|
|
import Layout from '../../layouts/Layout.astro';
|
|
---
|
|
<Layout title='Drawing Game'>
|
|
<main>
|
|
<div>
|
|
</div>
|
|
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
|
</main>
|
|
</Layout>
|
|
<script is:inline>
|
|
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
|
// const drawingZone = {
|
|
// x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
|
|
// y: window.innerHeight / 1,
|
|
// width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
|
// height: window.innerHeight / 2,
|
|
// };
|
|
if(isMobile){
|
|
submitWidth = 250;
|
|
submitHeight = 110;
|
|
noticeWidth = 100;
|
|
noticeHeight = 0;
|
|
downloadWidth = 67;
|
|
downloadHeight = 200;
|
|
learningWidth = 200;
|
|
learningHeight = 365
|
|
image1Width = 3.7;
|
|
image1Height = 2.5;
|
|
image2Width = 2;
|
|
image2Right = 65;
|
|
image2Height = 2;
|
|
image2Bottom = 110;
|
|
} else {
|
|
submitWidth = 380;
|
|
submitHeight = 95;
|
|
noticeWidth = 0;
|
|
noticeHeight = 0;
|
|
downloadWidth = 180;
|
|
downloadHeight = 70;
|
|
learningWidth = 450;
|
|
learningHeight = 350;
|
|
image1Width = 4;
|
|
image1Height = 1.8;
|
|
image2Width = 2;
|
|
image2Right = 400;
|
|
image2Height = 1.8;
|
|
image2Bottom = 0;
|
|
}
|
|
var assetsList = {}
|
|
var snapshotButton;
|
|
let submitButton;
|
|
let formattedDateTime;
|
|
let shortUniqueID;
|
|
let defaultColor;
|
|
gameResult = [];
|
|
window.onload = function() {
|
|
currentDate = new Date();
|
|
formattedDateTime = currentDate.toLocaleString();
|
|
// console.log("Page loaded on: " + formattedDateTime);
|
|
};
|
|
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 params = new URLSearchParams(window.location.search);
|
|
const paramsID = params.get('id');
|
|
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
|
.then(response => response.json())
|
|
.then(({data}) => {
|
|
colorList = data.colors;
|
|
defaultColor = colorList[0];
|
|
const {image1, image2} = data;
|
|
assetsList.image1 = "https://game-du.teachertrainingkolkata.in/assets/" + image1; // + "?width=450";
|
|
assetsList.image2 = "https://game-du.teachertrainingkolkata.in/assets/" + image2; // + "?width=450";
|
|
// console.log('Here is image -1', "https://game-du.teachertrainingkolkata.in/assets/" + image1)
|
|
const config = {
|
|
type: Phaser.AUTO,
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
backgroundColor: '#ffffff',
|
|
scale: {
|
|
mode: Phaser.Scale.FIT,
|
|
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
|
},
|
|
scene: {
|
|
preload: preload,
|
|
create: create,
|
|
update: update,
|
|
},
|
|
};
|
|
const game = new Phaser.Game(config);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching initial data:', error);
|
|
});
|
|
const customWidth = window.innerWidth;
|
|
const customHeight = window.innerHeight;
|
|
let graphics;
|
|
let isDrawing = false;
|
|
let selectedColor = '#FF0000'; // Default
|
|
// console.log(colorList)
|
|
let brushSize = 10; // Default brush size
|
|
let customCursor;
|
|
const cursorSizeMultiplier = 1;
|
|
let isErasing = false;
|
|
let snapNotice;
|
|
let colorList;
|
|
|
|
function preload() {
|
|
this.load.image('image1', assetsList.image1);
|
|
this.load.image('image2', assetsList.image2);
|
|
this.load.image('topLogo', '/assets/top_logo.png');
|
|
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
|
|
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
|
|
this.load.image('waxTexture', '/assets/texture.png');
|
|
|
|
}
|
|
|
|
function create() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const paramsID = params.get('id');
|
|
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
|
.then(response => response.json())
|
|
.then(({ data }) => {
|
|
// console.log(data.colors)
|
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
|
const baseFontSize = 22;
|
|
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
|
|
const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).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 + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching initial data:', error);
|
|
});
|
|
const URL = window.location.href;
|
|
const gameName = URL.split('/');
|
|
let userData = {
|
|
'user': 'drawing@beanstalkedu.com',
|
|
'game_name': gameName[3],
|
|
'starts': formattedDateTime,
|
|
// 'game_start' : gameStartTime,
|
|
};
|
|
function submitUserData() {
|
|
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
|
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)
|
|
});
|
|
};
|
|
// window.load
|
|
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
|
|
font: '600 20px Quicksand',
|
|
fill: 'blue'
|
|
}).setDepth(1);
|
|
submitNotic.setVisible(false);
|
|
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
|
|
font: '600 30px Quicksand',
|
|
fill: '#fff',
|
|
backgroundColor: 'blue',
|
|
padding: { x: 20, y: 10 },
|
|
});
|
|
submitButton.setVisible(true);
|
|
submitButton.setInteractive().on('pointerdown', () => {
|
|
// console.log('Clicked');
|
|
submitButton.setVisible(false);
|
|
submitNotic.setVisible(true);
|
|
// windowLoad();
|
|
submitUserData();
|
|
})
|
|
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
|
if(!isMobile){
|
|
// this.add.text(customWidth / 10, 20, "Drawing", textStyle);
|
|
// this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
|
} else {
|
|
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
|
|
// 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){
|
|
outlineImage1.setDepth(1).setScale(0.28);
|
|
outlineImage2.setDepth(1).setScale(0.28);
|
|
} else{
|
|
outlineImage1.setDepth(1).setScale(0.65);
|
|
outlineImage2.setDepth(1).setScale(0.65);
|
|
}
|
|
graphics = this.add.graphics();
|
|
const colorContainer = document.createElement('div');
|
|
colorContainer.style.position = 'absolute';
|
|
colorContainer.style.top = '13%';
|
|
colorContainer.style.left = '10px';
|
|
colorContainer.style.display = 'flex';
|
|
colorContainer.style.marginBottom = '15px';
|
|
if(!isMobile){
|
|
colorContainer.style.top = '25%';
|
|
colorContainer.style.flexDirection = 'column';
|
|
}
|
|
var colors = colorList;
|
|
const buttonSize = 60;
|
|
const buttonSpacing = 15;
|
|
const colorButtonsContainer = document.createElement('div');
|
|
colorButtonsContainer.style.display = 'flex';
|
|
if(!isMobile){
|
|
colorButtonsContainer.style.flexDirection = 'column';
|
|
}
|
|
const buttonX = 300;
|
|
// const colorPaletteY = drawingZone.y - 20;
|
|
let selectedButton = null;
|
|
|
|
colors.forEach((color, index) => {
|
|
const x = buttonX + index * (buttonSize + buttonSpacing);
|
|
const button = document.createElement('button');
|
|
|
|
button.style.backgroundColor = 'transparent';
|
|
|
|
button.style.border = 'none';
|
|
button.style.outline = 'none';
|
|
if (!isMobile) {
|
|
pencilSize = '40px';
|
|
button.style.width = `${buttonSize}px`;
|
|
button.style.height = `${buttonSize}px`;
|
|
} else {
|
|
pencilSize = '40px';
|
|
button.style.width = `45px`;
|
|
button.style.height = `45px`;
|
|
}
|
|
if(isMobile){
|
|
button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
|
|
button.style.boxShadow = '5px 10px 30px #7c4c2390';
|
|
button.style.borderRadius = '20%';
|
|
} else{
|
|
button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`
|
|
}
|
|
button.style.marginRight = `${buttonSpacing}px`;
|
|
button.addEventListener('click', () => {
|
|
if (selectedButton) {
|
|
selectedButton.style.border = 'none';
|
|
selectedButton.style.scale = '1';
|
|
selectedButton.style.transform = 'translateX(0px)';
|
|
selectedButton.style.marginTop = '0px';
|
|
selectedButton.style.marginBottom = '0px';
|
|
}
|
|
if(isMobile){
|
|
button.style.border = "2px solid";
|
|
button.style.borderColor = color;
|
|
}
|
|
defaultColor = color;
|
|
button.style.scale = '1.1';
|
|
if(!isMobile){
|
|
button.style.transform = 'translateX(0.75rem)';
|
|
button.style.transition = 'transform 0.6s ease';
|
|
// button.style.marginTop = '5px';
|
|
// button.style.marginBottom = '5px';
|
|
}
|
|
selectedButton = button;
|
|
});
|
|
colorButtonsContainer.appendChild(button);
|
|
});
|
|
const colorPreview = document.createElement('div');
|
|
colorPreview.style.width = '40px';
|
|
colorPreview.style.height = '40px';
|
|
colorPreview.style.backgroundColor = 'blue';
|
|
// Append the color buttons container to the color container
|
|
colorContainer.appendChild(colorButtonsContainer);
|
|
// Append the color container to the document body
|
|
document.body.appendChild(colorContainer);
|
|
// Create a container div for both buttons
|
|
const buttonsContainer = document.createElement('div');
|
|
buttonsContainer.style.position = 'absolute';
|
|
buttonsContainer.style.display = 'flex';
|
|
buttonsContainer.style.flexDirection = 'row';
|
|
buttonsContainer.style.top = '0%';
|
|
buttonsContainer.style.marginTop = '30px';
|
|
if(!isMobile){
|
|
// buttonsContainer.style.position = 'fixed';
|
|
buttonsContainer.style.top = '13%';
|
|
buttonsContainer.style.flexDirection = 'column';
|
|
buttonsContainer.style.marginLeft = '-20px';
|
|
buttonsContainer.style.marginTop = '0%';
|
|
} else{
|
|
buttonsContainer.style.left = '-20px';
|
|
}
|
|
|
|
document.body.appendChild(buttonsContainer);
|
|
// Create the Clear button
|
|
const clearButton = document.createElement('button');
|
|
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
|
|
// clearButton.style.border = '3px solid blue';
|
|
clearButton.style.color = 'blue';
|
|
clearButton.style.width = 'fit-content';
|
|
clearButton.style.marginLeft = '30px';
|
|
if(isMobile){
|
|
clearButton.style.padding = '2px 8px';
|
|
buttonsContainer.style.top = '17%';
|
|
} else {
|
|
clearButton.style.padding = '5px 10px';
|
|
}
|
|
clearButton.style.fontWeight = 'bold';
|
|
clearButton.style.borderRadius = '20%';
|
|
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
|
|
clearButton.addEventListener('click', () => {
|
|
clearDrawing();
|
|
});
|
|
// Create the Eraser button
|
|
const eraserButton = document.createElement('button');
|
|
// eraserButton.textContent = 'Eraser';
|
|
eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
|
|
eraserButton.style.color = 'blue';
|
|
eraserButton.style.width = 'fit-content';
|
|
eraserButton.style.marginRight = '15px';
|
|
// eraserButton.style.marginTop = '0px';
|
|
eraserButton.style.marginBottom = '0px';
|
|
if(isMobile){
|
|
eraserButton.style.padding = '4px 4px';
|
|
} else {
|
|
eraserButton.style.padding = '5px 5px';
|
|
eraserButton.style.marginTop = '15px';
|
|
eraserButton.style.marginBottom = '15px';
|
|
eraserButton.style.marginLeft = '30px';
|
|
}
|
|
eraserButton.style.fontWeight = 'bold';
|
|
eraserButton.style.borderRadius = '20%';
|
|
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
|
|
eraserButton.addEventListener('click', () => {
|
|
isErasing = !isErasing;
|
|
if (isErasing) {
|
|
// eraserButton.style.backgroundColor = 'red';
|
|
eraserButton.style.color = 'red';
|
|
eraserButton.style.border = '3px solid red';
|
|
} else {
|
|
// Return to drawing mode
|
|
// eraserButton.style.backgroundColor = 'green';
|
|
eraserButton.style.color = 'blue';
|
|
eraserButton.style.border = 'none';
|
|
}
|
|
});
|
|
// Add the Clear and Eraser buttons to the container
|
|
buttonsContainer.appendChild(clearButton);
|
|
buttonsContainer.appendChild(eraserButton);
|
|
|
|
const sliderContainer = document.createElement('div');
|
|
sliderContainer.className = 'slider-container';
|
|
// sliderContainer.style.position = 'absolute';
|
|
if(isMobile){
|
|
sliderContainer.style.marginTop = '10px';
|
|
} else{
|
|
sliderContainer.style.marginLeft = '20px';
|
|
}
|
|
sliderContainer.style.left = '100%';
|
|
|
|
// Create the slider
|
|
const slider = document.createElement('input');
|
|
slider.type = 'range';
|
|
slider.min = '2';
|
|
slider.max = '80';
|
|
slider.value = brushSize.toString();
|
|
slider.className = 'slider';
|
|
// slider.style.width = `${window.innerWidth / 2}px`;
|
|
slider.addEventListener('input', (event) => {
|
|
brushSize = parseInt(event.target.value);
|
|
slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
|
|
slider.style.backgroundColor = '#05b3a4';
|
|
});
|
|
|
|
sliderContainer.appendChild(slider);
|
|
buttonsContainer.appendChild(sliderContainer);
|
|
|
|
this.input.on('pointerdown', () => {
|
|
isDrawing = true;
|
|
startDrawing(this.input.x, this.input.y);
|
|
});
|
|
|
|
this.input.on('pointermove', () => {
|
|
if (isDrawing) {
|
|
continueDrawing(this.input.x, this.input.y);
|
|
}
|
|
});
|
|
this.input.on('pointerup', () => {
|
|
if (isDrawing) {
|
|
finishDrawing();
|
|
}
|
|
isDrawing = false;
|
|
});
|
|
customCursor = this.add.graphics();
|
|
customCursor.setDepth(2)
|
|
this.input.setDefaultCursor('none');
|
|
const borderThickness = 0;
|
|
const borderColor = 0xffffff; // White color (you can customize this)
|
|
const borderGraphics = this.add.graphics();
|
|
borderGraphics.lineStyle(borderThickness, borderColor);
|
|
if(isMobile){
|
|
snapWidth = 50;
|
|
snapHeight = 70;
|
|
} else {
|
|
snapWidth = 200;
|
|
snapHeight = 70;
|
|
}
|
|
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
|
|
snapshotButton.setInteractive();
|
|
snapshotButton.on('pointerdown', () => {
|
|
captureSnapshot(this);
|
|
});
|
|
snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
|
|
snapNotice.setVisible(false);
|
|
}
|
|
function captureSnapshot(drawingZone) {
|
|
// snapNotice.setVisible(true);
|
|
submitButton.setVisible(false);
|
|
snapshotButton.setVisible(false);
|
|
customCursor.setVisible(false);
|
|
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);
|
|
// Clear the drawing
|
|
// graphics.clear();
|
|
});
|
|
}
|
|
|
|
function startDrawing(x, y, t) {
|
|
if (!isErasing) {
|
|
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(defaultColor).color);
|
|
} else {
|
|
graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
|
|
}
|
|
graphics.beginPath();
|
|
graphics.moveTo(x, y);
|
|
}
|
|
|
|
function continueDrawing(x, y) {
|
|
if (!isErasing) {
|
|
graphics.lineTo(x, y); // Drawing
|
|
} else {
|
|
graphics.lineTo(x, y); // Erasing by drawing with a white line
|
|
}
|
|
graphics.strokePath();
|
|
}
|
|
|
|
function finishDrawing() {
|
|
// No need for additional actions here
|
|
}
|
|
|
|
function clearDrawing() {
|
|
graphics.clear();
|
|
}
|
|
function update() {
|
|
const slider = document.querySelector('input[type="range"]');
|
|
if (slider && !isDrawing) {
|
|
const sliderValue = parseInt(slider.value);
|
|
const max = parseInt(slider.max);
|
|
const width = slider.offsetWidth;
|
|
const offsetX = (sliderValue - 2) / (max - 2) * width;
|
|
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
|
|
};
|
|
const cursorSize = brushSize * cursorSizeMultiplier;
|
|
customCursor.clear(); // Clear the previous frame
|
|
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
|
|
customCursor.strokeCircle(0, 0, cursorSize);
|
|
// Position the cursor at the current mouse pointer coordinates
|
|
customCursor.x = this.input.x;
|
|
customCursor.y = this.input.y;
|
|
}
|
|
</script>
|
|
<style>
|
|
.clear-button {
|
|
background-color: blue;
|
|
}
|
|
</style>
|