diff --git a/public/assets/animated-letter/small_t.mp4 b/public/assets/animated-letter/small_t.mp4 old mode 100755 new mode 100644 index 3cb4e47..f1ee3a1 Binary files a/public/assets/animated-letter/small_t.mp4 and b/public/assets/animated-letter/small_t.mp4 differ diff --git a/public/assets/small-letter/as.svg b/public/assets/small-letter/as.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/as_l1.svg b/public/assets/small-letter/as_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/as_l2.svg b/public/assets/small-letter/as_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/bs.svg b/public/assets/small-letter/bs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/bs_l1.svg b/public/assets/small-letter/bs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/bs_l2.svg b/public/assets/small-letter/bs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/cs.svg b/public/assets/small-letter/cs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ds.svg b/public/assets/small-letter/ds.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ds_l1.svg b/public/assets/small-letter/ds_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ds_l2.svg b/public/assets/small-letter/ds_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/es.svg b/public/assets/small-letter/es.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/es_l1.svg b/public/assets/small-letter/es_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/es_l2.svg b/public/assets/small-letter/es_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/fs.svg b/public/assets/small-letter/fs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/fs_l1.svg b/public/assets/small-letter/fs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/fs_l2.svg b/public/assets/small-letter/fs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/gs.svg b/public/assets/small-letter/gs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/gs_l1.svg b/public/assets/small-letter/gs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/gs_l2.svg b/public/assets/small-letter/gs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/hs.svg b/public/assets/small-letter/hs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/hs_l1.svg b/public/assets/small-letter/hs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/hs_l2.svg b/public/assets/small-letter/hs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/is.svg b/public/assets/small-letter/is.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/is_l1.svg b/public/assets/small-letter/is_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/is_l2.svg b/public/assets/small-letter/is_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/js.svg b/public/assets/small-letter/js.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/js_l1.svg b/public/assets/small-letter/js_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/js_l2.svg b/public/assets/small-letter/js_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ks.svg b/public/assets/small-letter/ks.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ks_l1.svg b/public/assets/small-letter/ks_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ks_l2.svg b/public/assets/small-letter/ks_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ks_l3.svg b/public/assets/small-letter/ks_l3.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ls.svg b/public/assets/small-letter/ls.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ms _l1.svg b/public/assets/small-letter/ms _l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ms.svg b/public/assets/small-letter/ms.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ms_l1.svg b/public/assets/small-letter/ms_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ms_l2.svg b/public/assets/small-letter/ms_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ms_l3.svg b/public/assets/small-letter/ms_l3.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ns.svg b/public/assets/small-letter/ns.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ns_l1.svg b/public/assets/small-letter/ns_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ns_l2.svg b/public/assets/small-letter/ns_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/os.svg b/public/assets/small-letter/os.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ps.svg b/public/assets/small-letter/ps.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ps_l1.svg b/public/assets/small-letter/ps_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ps_l2.svg b/public/assets/small-letter/ps_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/qs.svg b/public/assets/small-letter/qs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/qs_l1.svg b/public/assets/small-letter/qs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/qs_l2.svg b/public/assets/small-letter/qs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/rs.svg b/public/assets/small-letter/rs.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/rs_l1.svg b/public/assets/small-letter/rs_l1.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/rs_l2.svg b/public/assets/small-letter/rs_l2.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ss.svg b/public/assets/small-letter/ss.svg old mode 100755 new mode 100644 diff --git a/public/assets/small-letter/ts.svg b/public/assets/small-letter/ts.svg old mode 100755 new mode 100644 index 02345f1..7ea5d57 --- a/public/assets/small-letter/ts.svg +++ b/public/assets/small-letter/ts.svg @@ -7,10 +7,11 @@ viewBox="0 0 100 100" version="1.1" id="svg5" - sodipodi:docname="as.svg" - inkscape:export-filename="ts.svg" + sodipodi:docname="ts_l2.svg" + inkscape:export-filename="ts_l2.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96" + inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -28,12 +29,12 @@ showgrid="false" showguides="true" inkscape:zoom="1.6295423" - inkscape:cx="47.252532" - inkscape:cy="206.19287" + inkscape:cx="125.49536" + inkscape:cy="151.88314" inkscape:window-width="1920" - inkscape:window-height="1007" - inkscape:window-x="0" - inkscape:window-y="0" + inkscape:window-height="1027" + inkscape:window-x="-8" + inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg5"> - - + + 1 - - + y="26.370642" + id="text9342" + transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)">1 + + + + transform="translate(-1.0583333,-0.52916667)" + style="display:inline"> + transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)" + style="display:inline"> - - - + id="g18882" + style="display:inline"> + d="m 50.08549,24.331693 c 0.276649,8.508821 -0.204874,28.733484 -0.204874,37.237207 0,4.994314 10.537236,5.173737 10.111561,-3.778473" + id="path127" + sodipodi:nodetypes="ccc" /> - diff --git a/public/assets/small-letter/ts_l2.svg b/public/assets/small-letter/ts_l2.svg old mode 100755 new mode 100644 index 5bb0835..220fef0 --- a/public/assets/small-letter/ts_l2.svg +++ b/public/assets/small-letter/ts_l2.svg @@ -7,10 +7,11 @@ viewBox="0 0 100 100" version="1.1" id="svg5" - sodipodi:docname="as.svg" - inkscape:export-filename="ts-l2.svg" + sodipodi:docname="ts_l2.svg" + inkscape:export-filename="ts-l3.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96" + inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -28,12 +29,12 @@ showgrid="false" showguides="true" inkscape:zoom="1.6295423" - inkscape:cx="47.252532" - inkscape:cy="206.19287" + inkscape:cx="125.49536" + inkscape:cy="151.88314" inkscape:window-width="1920" - inkscape:window-height="1007" - inkscape:window-x="0" - inkscape:window-y="0" + inkscape:window-height="1027" + inkscape:window-x="-8" + inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg5"> + d="m 50.08549,24.331693 c 0.276649,8.508821 -0.204874,28.733484 -0.204874,37.237207 0,4.994314 10.537236,5.173737 10.111561,-3.778473" + id="path127" + sodipodi:nodetypes="ccc" /> + transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)" + style="display:inline"> response.json()) .then(({data}) => { - colorList = data.colors; + // colorList = data.colors; const {image} = data; assetsList.image = "https://management.beanstalkedu.com/assets/" + image; // + "?width=450"; const config = { @@ -225,9 +225,8 @@ import Layout from '../../layouts/Layout.astro'; // Append the color picker to the color container data colorContainer.appendChild(colorPicker); // const colors = data.colors; - // console.log(colorList) - var colors = colorList; - // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; + // var colors = colorList; + const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; const buttonSize = 50; const buttonSpacing = 15; // Create a container div for the color buttons diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro index d0d68b0..5c2cb9a 100644 --- a/src/pages/drawing/v2.astro +++ b/src/pages/drawing/v2.astro @@ -1,25 +1,84 @@ --- -import Layout from "../../layouts/Layout.astro"; +import Layout from '../../layouts/Layout.astro'; --- - +
-
+
+
+ +
- \ No newline at end of file + + 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)}`) + .then(response => response.json()) + .then(({ data }) => { + // console.log(data.colors) + const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; + const baseFontSize = 15; + const responsiveFontSize = (window.innerWidth / 280) * 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'); + } + // image1Width + // image1Height + // image2Width + // image2Height + const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1'); + if(isMobile){ + outlineImage1.setDepth(-1).setScale(0.33); + } else{ + outlineImage1.setDepth(-1).setScale(0.65); + } + const outlineImage2 = this.add.image(customWidth / image2Width, customHeight / image2Height, 'image2'); + if(isMobile){ + outlineImage2.setDepth(-1).setScale(0.33); + } else{ + 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 = 50; + const buttonSpacing = 15; + const colorButtonsContainer = document.createElement('div'); + colorButtonsContainer.style.display = 'flex'; + if(!isMobile){ + colorButtonsContainer.style.flexDirection = 'column'; + } + const buttonX = 30; + // 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`; + } + button.innerHTML = ` `; + button.style.boxShadow = '5px 10px 30px #7c4c2390'; + button.style.borderRadius = '20%'; + 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'; + } + defaultColor = color; + button.style.border = "2px solid"; + button.style.borderColor = 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 = '25%'; + buttonsContainer.style.flexDirection = 'column'; + buttonsContainer.style.marginLeft = '60px'; + buttonsContainer.style.marginTop = '0%'; + } + buttonsContainer.style.left = '20px'; + document.body.appendChild(buttonsContainer); + // Create the Clear button + const clearButton = document.createElement('button'); + clearButton.innerHTML =''; + // 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 = ' '; + 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.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'; + // sliderContainer.style.top = '25%'; + 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) + // 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) { + // 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 = 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); + snapshotButton.setVisible(false); + customCursor.setVisible(false); + drawingZone.renderer.snapshot((image) => { + 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, 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; + } + +