From aa659478a18a9b63594e8d6991ec1646b745127a Mon Sep 17 00:00:00 2001
From: Dev 1 <dev@siliconpin.com>
Date: Fri, 1 Sep 2023 20:35:27 +0530
Subject: [PATCH] all_likes_good

---
 src/pages/drawing/index.astro | 355 +++++++++++++++++++---------------
 1 file changed, 200 insertions(+), 155 deletions(-)

diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 32ffba2..c4a1403 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -10,29 +10,28 @@ import Layout from '../../layouts/Layout.astro';
 </Layout>
 <script is:inline>
     var assetsList = {}
-const params = new URLSearchParams(window.location.search);
+    const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
     const data =       fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
     .then(response => response.json())
     .then(({data}) => {
-      const {image} = data;
-      assetsList.image = "https://management.beanstalkedu.com/assets/" + image ;
-
-      const config = {
-    type: Phaser.AUTO,
-    width: window.innerWidth,
-    height: window.innerHeight,
-    backgroundColor: '#05b3a4',
-    scale: {
-        mode: Phaser.Scale.FIT,
-        autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
-    },
-    scene: {
-        preload: preload,
-        create: create,
-        update: update,
-    },
-};
+    const {image} = data;
+    assetsList.image = "https://management.beanstalkedu.com/assets/" + image ; //+ "?width=450";
+    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);    
       
     })
@@ -40,146 +39,192 @@ const params = new URLSearchParams(window.location.search);
 
       console.error('Error fetching initial data:', error);
     });
-//  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);
-const displayW = window.innerWidth;
-const displayH = window.innerHeight;
+    const displayW = window.innerWidth;
+    const displayH = window.innerHeight;
 
-let graphics;
-let outlineImage;
-let isDrawing = false;
-let selectedColor = '#ff0000'; // Default color
-let brushSize = 1; // Default brush size
+    let graphics;
+    let isDrawing = false;
+    let selectedColor = '#f00f0f'; // Default color
+    let brushSize = 40; // Default brush size
+    let customCursor;
+    const cursorSizeMultiplier = 1;
 
-function preload() {
-    // this.load.image('outline', '/assets/cow.png');
-    this.load.image('outline', assetsList.image);
-}
-
-function create() {
-    outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
-
-    graphics = this.add.graphics();
-
-    const colorPicker = document.createElement('input');
-    
-    colorPicker.type = 'color';
-    colorPicker.value = selectedColor;
-    colorPicker.className = 'color-picker';
-    document.body.appendChild(colorPicker);
-    colorPicker.style.position = 'absolute';
-    // colorPicker.textContent = 'Clear';
-    colorPicker.style.top = '30px';
-    colorPicker.style.left = '20px';
-
-    colorPicker.addEventListener('input', (event) => {
-        selectedColor = event.target.value; // Update selectedColor
-    });
-
-    const sliderContainer = document.createElement('div');
-    sliderContainer.className = 'slider-container';
-    document.body.appendChild(sliderContainer);
-
-    sliderContainer.style.position = 'absolute';
-    sliderContainer.style.top = '20px';
-    sliderContainer.style.right = '20px';
-
-    const slider = document.createElement('input');
-    slider.type = 'range';
-    slider.min = '2';
-    slider.max = '20';
-    slider.value = brushSize.toString();
-    slider.className = 'slider';
-    sliderContainer.appendChild(slider);
-
-    slider.addEventListener('input', (event) => {
-        brushSize = parseInt(event.target.value);
-        slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
-    });
-
-    const clearButton = document.createElement('button');
-    clearButton.textContent = 'Clear';
-    // clearButton.className = 'clear-button';
-    document.body.appendChild(clearButton);
-
-    clearButton.style.position = 'absolute';
-    clearButton.style.top = '20px';
-    clearButton.style.left = '120px';
-    clearButton.style.backgroundColor = 'blue';
-    clearButton.style.color = 'white';
-    clearButton.style.padding = '10px 30px';
-    clearButton.style.fontSize = '20px';
-    clearButton.style.fontWeight = 'bold';
-    clearButton.style.borderRadius = '50%';
-    clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
-
-    clearButton.addEventListener('click', () => {
-        clearDrawing();
-    });
-
-    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;
-    });
-}
-
-function startDrawing(x, y) {
-    graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
-    graphics.beginPath();
-    graphics.moveTo(x, y);
-}
-
-function continueDrawing(x, y) {
-    graphics.lineTo(x, y);
-    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%)`;
+    function preload() {
+        this.load.image('outline', assetsList.image);
     }
-}
 
+    function create() {
+        const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
+            .then(response => response.json())
+            .then(({ data }) => {
+
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            const baseFontSize = 60;
+            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize;
+            const descrptText = this.add.text(screenCenterX, 20, data.description, {
+                font: `${responsiveFontSize}px quicksand`,
+                fill: '#7c4c23',
+            }).setOrigin(0.5);
+        
+            })
+            .catch(error => {
+            console.error('Error fetching initial data:', error);
+            });
+        outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline').setScale(0.5);
+        graphics = this.add.graphics();
+
+        const colorPicker = document.createElement('input');
+        colorPicker.type = 'color';
+        colorPicker.value = selectedColor;
+        colorPicker.className = 'color-picker';
+        document.body.appendChild(colorPicker);
+        colorPicker.style.position = 'absolute';
+        // colorPicker.textContent = 'Clear';
+        colorPicker.style.top = '10%';
+        colorPicker.style.left = '20px';
+        colorPicker.style.width = '38px';
+        colorPicker.style.height = '38px';
+        // colorPicker.style.borderRadius = '50%';
+        colorPicker.addEventListener('input', (event) => {
+            selectedColor = event.target.value; // Update selectedColor
+        });
+            const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
+            const buttonSize = 40;
+            const buttonSpacing = 10;
+
+            // Define the horizontal position for the vertical palette
+            const colorPaletteX = 40; // Adjusted position
+
+            // Define the starting position for the vertical palette
+            const paletteY = displayH / 1.9 - (colors.length / 1 * (buttonSize + buttonSpacing));
+
+            // Keep track of the selected color
+            let selectedButton = null;
+
+            colors.forEach((color, index) => {
+                const y = paletteY + index * (buttonSize + buttonSpacing);
+                const button = this.add.circle(colorPaletteX, y, buttonSize / 2, Phaser.Display.Color.HexStringToColor(color).color);
+
+                button.setInteractive();
+                button.on('pointerdown', function () {
+                    // Remove the mark from the previously selected button, if any
+                    if (selectedButton) {
+                        selectedButton.setStrokeStyle(0); // Remove the border
+                    }
+                    // Set the new selected color
+                    selectedColor = color;
+
+                    // Add a border or tick mark to indicate the selected color
+                    button.setStrokeStyle(3, 0x000000); // Add a white border (you can customize this)
+
+                    // Update the selectedButton variable to the current button
+                    selectedButton = button;
+                });
+            });
+        const sliderContainer = document.createElement('div');
+        sliderContainer.className = 'slider-container';
+        document.body.appendChild(sliderContainer);
+
+        sliderContainer.style.position = 'absolute';
+        sliderContainer.style.top = '10%';
+        sliderContainer.style.right = '20px';
+
+        const slider = document.createElement('input');
+        slider.type = 'range';
+        slider.min = '2';
+        slider.max = '80';
+        slider.value = brushSize.toString();
+        slider.className = 'slider';
+        sliderContainer.appendChild(slider);
+
+        slider.addEventListener('input', (event) => {
+            brushSize = parseInt(event.target.value);
+            slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
+        });
+
+        const clearButton = document.createElement('button');
+        clearButton.textContent = 'Clear';
+        // clearButton.className = 'clear-button';
+        document.body.appendChild(clearButton);
+
+        clearButton.style.position = 'absolute';
+        clearButton.style.top = '10%';
+        clearButton.style.left = '120px';
+        clearButton.style.backgroundColor = 'blue';
+        clearButton.style.color = 'white';
+        clearButton.style.padding = '10px 30px';
+        clearButton.style.fontSize = '20px';
+        clearButton.style.fontWeight = 'bold';
+        clearButton.style.borderRadius = '50%';
+        clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
+
+        clearButton.addEventListener('click', () => {
+            clearDrawing();
+        });
+
+        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();
+        
+        // Disable the default cursor
+        this.input.setDefaultCursor('none');
+    }
+
+    function startDrawing(x, y) {
+        graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
+        graphics.beginPath();
+        graphics.moveTo(x, y);
+    }
+
+    function continueDrawing(x, y) {
+        graphics.lineTo(x, y);
+        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.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color); // Use the selected drawing color
+        // customCursor.setStrokeStyle(0xff0000); // Color of the cursor outline
+        customCursor.fillCircle(0, 0, cursorSize);
+
+        // Position the cursor at the current mouse pointer coordinates
+        customCursor.x = this.input.x;
+        customCursor.y = this.input.y;
+    }