626 lines
38 KiB
Plaintext
626 lines
38 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 src="/saveGameData.js" is:inline></script>
|
|
<script is:inline>
|
|
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
|
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
|
const drawingZone = {
|
|
// x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
|
|
// y: window.innerHeight / 4,
|
|
// width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
|
// height: window.innerHeight / 2,
|
|
};
|
|
var assetsList = {}
|
|
var snapshotButton;
|
|
let submitButton;
|
|
let formattedDateTime;
|
|
let shortUniqueID;
|
|
let scoreTotal = 0;
|
|
let resultView;
|
|
let topLogoWidth;
|
|
let muteIconWidth;
|
|
let resetIconWidth;
|
|
let tickIconWidth;
|
|
let cancelIconWidth;
|
|
if(isMobile){
|
|
topLogoWidth = 4.5;
|
|
muteIconWidth = 1.8;
|
|
resetIconWidth = 1.47;
|
|
tickIconWidth = 1.24;
|
|
cancelIconWidth = 1.08;
|
|
submitWidth = 250;
|
|
submitHeight = 110;
|
|
noticeWidth = 100;
|
|
noticeHeight = 0;
|
|
downloadWidth = 67;
|
|
downloadHeight = 160;
|
|
learningWidth = 200;
|
|
learningHeight = 400
|
|
} else {
|
|
topLogoWidth = 6;
|
|
muteIconWidth = 1.3;
|
|
resetIconWidth = 1.26;
|
|
tickIconWidth = 1.222;
|
|
cancelIconWidth = 1.185;
|
|
submitWidth = 380;
|
|
submitHeight = 95;
|
|
noticeWidth = 0;
|
|
noticeHeight = 0;
|
|
downloadWidth = 180;
|
|
downloadHeight = 70;
|
|
learningWidth = 450;
|
|
learningHeight = 400
|
|
}
|
|
|
|
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;
|
|
}
|
|
// shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
|
|
// console.log(shortUniqueID);
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const paramsID = params.get('id');
|
|
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
|
.then(response => response.json())
|
|
.then(({data}) => {
|
|
// console.log(data)
|
|
// colorList = data.colors;
|
|
const {image} = data;
|
|
assetsList.image = "https://game-du.teachertrainingkolkata.in/assets/" + image; // + "?width=450";
|
|
// console.log(assetsList)
|
|
|
|
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 = '#f00f0f'; // Default color
|
|
let brushSize = 10; // Default brush size
|
|
let customCursor;
|
|
const cursorSizeMultiplier = 1;
|
|
let isErasing = false;
|
|
let snapNotice;
|
|
let colorList;
|
|
|
|
function preload() {
|
|
this.load.image('outline', assetsList.image);
|
|
this.load.image('topLogo', '/assets/top_logo.png');
|
|
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
|
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
|
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
|
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
|
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
|
|
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
|
|
}
|
|
|
|
function create() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const paramsID = params.get('id');
|
|
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${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 = 24;
|
|
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
|
|
let wrapWidth;
|
|
if(isMobile){
|
|
wrapWidth = 10;
|
|
} else{
|
|
wrapWidth = 200;
|
|
}
|
|
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).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 borderBottom = this.add.graphics();
|
|
const x = 0; const y = 54;
|
|
const lineWidth = window.innerWidth;
|
|
borderBottom.lineStyle(1, 0x0348A8);
|
|
borderBottom.setAlpha(0.2);
|
|
borderBottom.beginPath();
|
|
borderBottom.moveTo(x, y);
|
|
borderBottom.lineTo(x + lineWidth, y);
|
|
borderBottom.strokePath();
|
|
|
|
const outlineImage = this.add.image(customWidth / 2, customHeight / 2 + 20, 'outline');
|
|
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
|
|
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
|
|
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
|
|
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
|
|
retryButton.setInteractive().on('pointerdown', () => {
|
|
window.location.reload();
|
|
})
|
|
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(this);
|
|
})
|
|
// 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');
|
|
// }
|
|
if(isMobile){
|
|
outlineImage.setDepth(-1).setScale(0.5);
|
|
}else if(isTab){
|
|
outlineImage.setDepth(-1).setScale(0.90);
|
|
} else{
|
|
outlineImage.setDepth(-1).setScale(1);
|
|
}
|
|
|
|
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';
|
|
}
|
|
// Create the color picker
|
|
const colorPicker = document.createElement('input');
|
|
colorPicker.type = 'color';
|
|
colorPicker.value = selectedColor;
|
|
colorPicker.className = 'color-picker';
|
|
colorPicker.style.marginBottom = '0px';
|
|
colorPicker.style.marginTop = '-0px';
|
|
colorPicker.style.marginRight = '15px';
|
|
// colorPicker.style.padding = '1px 1px';
|
|
// colorPicker.style.outline = 'none';
|
|
if (!isMobile) {
|
|
colorPicker.style.marginBottom = '15px';
|
|
colorPicker.style.width = '46px';
|
|
colorPicker.style.height = '46px';
|
|
} else {
|
|
colorPicker.style.width = '40px';
|
|
colorPicker.style.height = '40px';
|
|
}
|
|
colorPicker.style.border = '3px solid #05b3a4';
|
|
colorPicker.style.borderRadius = '20%';
|
|
colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390';
|
|
colorPicker.addEventListener('input', (event) => {
|
|
if (!isErasing) {
|
|
selectedColor = event.target.value; // Update selectedColor if not erasing
|
|
}
|
|
});
|
|
// Append the color picker to the color container data
|
|
colorContainer.appendChild(colorPicker);
|
|
// const colors = data.colors;
|
|
// var colors = colorList;
|
|
let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
|
|
// const colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
|
|
// const colors = ['#ff0000'];
|
|
const buttonSize = 60;
|
|
const buttonSpacing = 15;
|
|
// Create a container div for the color buttons
|
|
const colorButtonsContainer = document.createElement('div');
|
|
colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
|
|
if(!isMobile){
|
|
colorButtonsContainer.style.flexDirection = 'column';
|
|
}
|
|
// Align the color buttons to the left of the viewport
|
|
const buttonX = 30; // Adjusted position (e.g., 10px from the left)
|
|
const colorPaletteY = drawingZone.y - 20; // Position it at the top of the drawing zone
|
|
// Keep track of the selected color
|
|
let selectedButton = null;
|
|
|
|
colors.forEach((color, index) => {
|
|
const x = buttonX + index * (buttonSize + buttonSpacing);
|
|
const button = document.createElement('button');
|
|
|
|
// Make the button transparent
|
|
button.style.backgroundColor = 'transparent';
|
|
|
|
// Remove any border or outline styles
|
|
button.style.border = 'none';
|
|
button.style.outline = 'none';
|
|
|
|
// Other button styles remain the same
|
|
// ${color}
|
|
// Create the SVG element with dynamic fill color
|
|
if (!isMobile) {
|
|
pencilSize = '150px';
|
|
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>`;
|
|
} else{
|
|
// button.innerHTML = `<svg height="100px" width="100px" version="1.1" id="Layer_1" 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(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:#EDF0F2;" d="M448.017,158.39l-47.207,47.207c-6.488,6.487-17.064,6.541-23.603,0l-70.81-70.81 c-6.57-6.569-6.57-17.146,0-23.603l47.207-47.207L448.017,158.39z"></path> <path style="fill:#DAE1E6;" d="M448.017,158.39l-47.207-47.207l-59.008,59.009l35.404,35.405c6.54,6.541,17.115,6.486,23.603,0 L448.017,158.39z"></path> <path style="fill:#61DAF2;" d="M75.704,507.103L4.889,436.295c-6.493-6.493-6.535-17.086,0.011-23.632l47.318-47.209 c6.523-6.502,17.081-6.508,23.605,0.017l70.815,70.809c6.493,6.493,6.535,17.086-0.011,23.632l-47.318,47.209 C92.774,513.633,82.229,513.627,75.704,507.103z"></path> <path style="fill:#45C7E6;" d="M75.704,507.103c6.523,6.523,17.07,6.529,23.605,0.017l47.318-47.209 c6.547-6.547,6.504-17.139,0.011-23.632l-35.463-35.46l-70.879,70.879L75.704,507.103z"></path> <path style="fill:${color};" d="M134.833,471.704l-94.431-94.424L318.197,99.367l94.418,94.425L134.833,471.704z"></path> <polygon style="fill:#05b3a470;" points="134.833,471.703 412.616,193.792 365.412,146.584 87.56,424.434 "></polygon> <path style="fill:${color};" d="M511.925,18.105c-0.223,3.451-8.016,84.393-63.907,140.285l-94.414-94.414 C409.495,8.085,490.437,0.291,493.888,0.067c5.011-0.445,9.798,1.337,13.25,4.789C510.7,8.307,512.37,13.206,511.925,18.105z"></path> <path style="fill:#05b3a40;" d="M448.017,158.39c55.891-55.891,63.685-136.833,63.907-140.285c0.445-4.899-1.225-9.798-4.786-13.249 L400.812,111.183L448.017,158.39z"></path> </g></svg>`;
|
|
|
|
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', () => {
|
|
// Remove the border from the previously selected button, if any
|
|
if (selectedButton) {
|
|
selectedButton.style.border = 'none';
|
|
selectedButton.style.scale = '1';
|
|
selectedButton.style.transform = 'translateX(0px)';
|
|
selectedButton.style.marginTop = '0px';
|
|
selectedButton.style.marginBottom = '0px';
|
|
}
|
|
// Set the new selected color
|
|
selectedColor = color;
|
|
// Add a border or tick mark to indicate the selected color to the current button
|
|
button.style.scale = '1.1';
|
|
if(!isMobile){
|
|
button.style.transform = 'translateX(0.75rem)';
|
|
button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
|
|
button.style.marginTop = '5px';
|
|
button.style.marginBottom = '5px';
|
|
} else{
|
|
button.style.border = "2px solid";
|
|
button.style.borderColor = color;
|
|
button.style.boxShadow = '5px 10px 30px #7c4c2390';
|
|
button.style.borderRadius = '20%';
|
|
}
|
|
// Update the selectedButton variable to the current button
|
|
selectedButton = button;
|
|
});
|
|
// Append the color button to the color buttons container
|
|
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 = '25%';
|
|
buttonsContainer.style.flexDirection = 'column';
|
|
buttonsContainer.style.marginLeft = '60px';
|
|
buttonsContainer.style.marginTop = '0%';
|
|
}
|
|
buttonsContainer.style.left = '20px';
|
|
// buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
|
|
document.body.appendChild(buttonsContainer);
|
|
// Create the Clear button
|
|
const clearButton = document.createElement('button');
|
|
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
|
|
// clearButton.style.border = '3px solid blue';
|
|
// clearButton.style.color = 'blue';
|
|
// clearButton.style.width = 'fit-content';
|
|
// clearButton.style.marginRight = '10px';
|
|
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.border = '3px solid blue';
|
|
// eraserButton.style.color = 'white';
|
|
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.fontWeight = 'bold';
|
|
eraserButton.style.borderRadius = '20%';
|
|
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
|
|
eraserButton.addEventListener('click', () => {
|
|
isErasing = !isErasing;
|
|
if (isErasing) {
|
|
// eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
|
|
eraserButton.style.color = 'red';
|
|
eraserButton.style.border = '3px solid red';
|
|
} else {
|
|
// Return to drawing mode
|
|
// eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
|
|
eraserButton.style.color = 'blue';
|
|
eraserButton.style.border = 'none';
|
|
}
|
|
});
|
|
// Add the Clear and Eraser buttons to the container
|
|
buttonsContainer.appendChild(clearButton);
|
|
// buttonsContainer.appendChild(eraserButton).setVisible;
|
|
|
|
const sliderContainer = document.createElement('div');
|
|
sliderContainer.className = 'slider-container';
|
|
// sliderContainer.style.position = 'absolute';
|
|
// sliderContainer.style.top = '25%';
|
|
sliderContainer.style.left = '100%';
|
|
if(!isMobile){
|
|
sliderContainer.style.marginLeft = '-75px'
|
|
sliderContainer.style.marginTop = '15px'
|
|
}
|
|
|
|
// 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)
|
|
// Disable the default cursor
|
|
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);
|
|
// borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
|
|
// function continueDrawing(x, y) {
|
|
// // Check if the pointer coordinates are within the drawing zone
|
|
// if (
|
|
// x >= drawingZone.x &&
|
|
// x <= drawingZone.x + drawingZone.width &&
|
|
// y >= drawingZone.y &&
|
|
// y <= drawingZone.y + drawingZone.height
|
|
// ) {
|
|
// // The pointer is within the drawing zone, so continue drawing
|
|
// graphics.lineTo(x, y);
|
|
// graphics.strokePath();
|
|
// }
|
|
// };
|
|
// Add a "Save Snapshot" button
|
|
if(isMobile){
|
|
snapWidth = 70;
|
|
snapHeight = 70;
|
|
} else {
|
|
snapWidth = 200;
|
|
snapHeight = 70;
|
|
}
|
|
// snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
|
|
snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
|
|
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
|
|
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) {
|
|
submitButton.setVisible(false);
|
|
// snapNotice.setVisible(true);
|
|
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) {
|
|
if (!isErasing) {
|
|
// graphics.lineStyle(brushSize * 2, selectedColor, 1);
|
|
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).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;
|
|
}
|
|
|
|
// 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;
|
|
// const cursorScale = 1; // Adjust this value to increase/decrease the cursor size
|
|
|
|
// // Assuming 'this' refers to your Phaser.Scene instance
|
|
// if (!this.customCursor) {
|
|
// // Create the custom cursor sprite
|
|
// this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image
|
|
// this.customCursor.setOrigin(0.3, 0.8);
|
|
// }
|
|
|
|
// // Set the tint or fill color dynamically based on the selectedColor
|
|
// const color = Phaser.Display.Color.HexStringToColor(selectedColor).color;
|
|
// this.customCursor.setTint(color);
|
|
|
|
// // Resize the cursor
|
|
// this.customCursor.setScale( cursorScale);
|
|
|
|
// // Position the cursor at the current mouse pointer coordinates
|
|
// this.customCursor.x = this.input.x;
|
|
// this.customCursor.y = this.input.y;
|
|
// }
|
|
</script>
|
|
<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> --> |