working conditions save button

public/assets/svg/button-icon.svg

@@ -0,0 +1 @@
+<svg fill="#0000FF" width="40px" height="40px" viewBox="0 0 1920 1920" 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="M790.706 338.824v112.94H395.412c-31.06 0-56.47 25.3-56.47 56.471v744.509c17.73-6.325 36.592-10.391 56.47-10.391h1129.412c19.877 0 38.738 4.066 56.47 10.39V508.236c0-31.171-25.412-56.47-56.47-56.47h-395.295V338.824h395.295c93.402 0 169.411 76.009 169.411 169.411v1242.353c0 93.403-76.01 169.412-169.411 169.412H395.412C302.009 1920 226 1843.99 226 1750.588V508.235c0-93.402 76.01-169.411 169.412-169.411h395.294Zm734.118 1016.47H395.412c-31.06 0-56.47 25.299-56.47 56.47v338.824c0 31.172 25.41 56.47 56.47 56.47h1129.412c31.058 0 56.47-25.298 56.47-56.47v-338.823c0-31.172-25.412-56.47-56.47-56.47ZM1016.622-.023v880.151l246.212-246.325 79.85 79.85-382.532 382.644-382.645-382.644 79.85-79.85L903.68 880.128V-.022h112.941ZM564.824 1468.235c-62.344 0-112.942 50.71-112.942 112.941s50.598 112.942 112.942 112.942c62.343 0 112.94-50.71 112.94-112.942 0-62.23-50.597-112.94-112.94-112.94Z" fill-rule="evenodd"></path> </g></svg>

src/pages/drawing/index.astro

@@ -18,6 +18,7 @@ import Layout from '../../layouts/Layout.astro';
         height: window.innerHeight / 2,
     };
     var assetsList = {}
+    var snapshotButton;
 
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
@@ -59,6 +60,7 @@ import Layout from '../../layouts/Layout.astro';
     function preload() {
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
     }
 
     function create() {
@@ -339,6 +341,31 @@ import Layout from '../../layouts/Layout.astro';
                         graphics.strokePath();
                     }
                 };
+                // Add a "Save Snapshot" button
+                snapshotButton = this.add.image(window.innerWidth / 20, window.innerHeight / 2.3, '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);
+                });
+    }
+    function captureSnapshot(game) {
+        game.renderer.snapshot((image) => {
+            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 = 'snapshot.png';
+            link.click();
+            document.body.removeChild(image);
+
+            // Clear the drawing
+            // graphics.clear();
+        });
     }
 
     function startDrawing(x, y) {

src/pages/tracing/index.astro

@@ -4,42 +4,11 @@ import Layout from "../../layouts/Layout.astro";
 <Layout title="">
     <main>
         <div>
-            <canvas id="myCanvas" width="578" height="200"></canvas>
-            <button id="download">download</button>
         </div>
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-        <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
-
       </main>
 </Layout>
 <script is:inline>
-    var canvas = document.getElementById('myCanvas');
-    var context = canvas.getContext('2d');
-
-    // draw a blue cloud
-    context.beginPath();
-    context.moveTo(170, 80);
-    context.bezierCurveTo(130, 100, 130, 150, 230, 150);
-    context.bezierCurveTo(250, 180, 320, 180, 340, 150);
-    context.bezierCurveTo(420, 150, 420, 120, 390, 100);
-    context.bezierCurveTo(430, 40, 370, 30, 340, 50);
-    context.bezierCurveTo(320, 5, 250, 20, 250, 50);
-    context.bezierCurveTo(200, 5, 150, 20, 170, 80);
-    context.closePath();
-    context.lineWidth = 5;
-    context.fillStyle = '#8ED6FF';
-    context.fill();
-    context.strokeStyle = '#0000ff';
-    context.stroke();
-
-    download.addEventListener("click", function() {
-    // only jpeg is supported by jsPDF
-    var imgData = canvas.toDataURL("image/jpeg", 1.0);
-    var pdf = new jsPDF();
-
-    pdf.addImage(imgData, 'JPEG', 0, 0);
-    pdf.save("download.pdf");
-    }, false);
 const isMobile = window.innerWidth <= 768;
 const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
@@ -48,6 +17,8 @@ import Layout from "../../layouts/Layout.astro";
     height: window.innerHeight / 2,
 };
 var assetsList = {}
+var snapshotButton;
+
 
 const params = new URLSearchParams(window.location.search);
 const paramsID = params.get('id');
@@ -73,7 +44,6 @@ import Layout from "../../layouts/Layout.astro";
                 update: update,
             },
         };
-
         const game = new Phaser.Game(config);
     })
     .catch(error => {
@@ -83,9 +53,8 @@ import Layout from "../../layouts/Layout.astro";
 var graphics;
 var isDragging = false;
 var image;
-        var letter_img;
+var customWidth = window.innerWidth;
-        const customWidth = window.innerWidth;
+var customHeight = window.innerHeight;
-        const customHeight = window.innerHeight;
 
 function preload() {
     this.load.image('letter_img', assetsList.letter_img);
@@ -102,10 +71,10 @@ import Layout from "../../layouts/Layout.astro";
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
             const baseFontSize = 20;
             const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-                    const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23' }).setOrigin(0.5);
+            const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-                    const textStyle = { font: 'bold 40px quicksand', fill: '#05b3a4' };
+            const textStyle = { font: 'bold 40px quicksand', fill: '#05b3a4', };
             this.add.text(customWidth / 10, 20, data.letter_text, textStyle);
-                    const textStyle2 = { font: 'bold 40px quicksand', fill: '#5e17eb' };
+            const textStyle2 = { font: 'bold 40px quicksand', fill: '#5e17eb', };
             if (!isMobile) {
                 image = this.add.image(customWidth / 4, customHeight / 2, 'letter_img');
                 image.setInteractive().setDepth(1).setScale(0.6);
@@ -153,35 +122,34 @@ import Layout from "../../layouts/Layout.astro";
         graphics.closePath();
     }, this);
 
-        //     const saveButton = this.add.text(20, 20, 'Save', {
+    // Add a "Save Snapshot" button
-        //         font: '24px Arial',
+    snapshotButton = this.add.text(customWidth - 150, customHeight - 80, 'SAVE', { fill: '#fff', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
-        //         fill: '#ffffff',
+    snapshotButton.setInteractive();
-        //         backgroundColor: '#05b3a4',
+    snapshotButton.on('pointerdown', () => {
-        //         padding: {
+        captureSnapshot(this);
-        //             x: 10,
+    });
-        //             y: 5
-        //         },
-        //         borderRadius: 5
-        //     });
-
-        //     saveButton.setInteractive();
-
-        //     saveButton.on('pointerdown', () => {
-        //         takeSnapshot(this);
-        //     });
-
-        //     function takeSnapshot(scene) {
-        //     const snapshot = scene.sys.canvas.toDataURL('image/png');
-        //     const a = document.createElement('a');
-        //     a.style.display = 'none';
-        //     document.body.appendChild(a);
-        //     a.href = snapshot;
-        //     a.download = 'traced_letter.png';
-        //     a.click();
-        //     document.body.removeChild(a);
-        // }
 }
 
 function update() {}
 
+function captureSnapshot(game) {
+    game.renderer.snapshot((image) => {
+        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 = 'snapshot.png';
+        link.click();
+        document.body.removeChild(image);
+
+        // Clear the drawing
+        // graphics.clear();
+    });
+}
+
+
 </script>

src/pages/tracing/snapshot.astro

@@ -0,0 +1,136 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+      </main>
+</Layout>
+<script is:inline>
+  class Example extends Phaser.Scene {
+    isKeyDown = false;
+    isMouseDown = false;
+    graphicsPath = [];
+    graphics;
+    snapHistory = [];
+    time = 0;
+    div = document.createElement('div');
+
+    preload() {
+        this.load.image('myImage', 'assets/sprites/phaser1.png');
+        this.load.glsl('shader0', 'assets/shaders/shader0.frag');
+    }
+
+    create() {
+        this.div.innerHTML = 'PRESS SPACE TO TAKE SNAPSHOT<br>';
+        document.body.appendChild(this.div);
+
+        for (let i = 0; i < 5; ++i) {
+            const image = this.add.image(Math.random() * 800, Math.random() * 600, 'myImage');
+        }
+
+        this.graphics = this.add.graphics({ x: 0, y: 0 });
+
+        game.canvas.onmousedown = (e) => {
+            this.isMouseDown = true;
+            this.graphics.clear();
+            this.graphicsPath.length = 0;
+        };
+        game.canvas.onmouseup = (e) => {
+            this.isMouseDown = false;
+        };
+        game.canvas.onmousemove = (e) => {
+            const mouseX = e.clientX - game.canvas.offsetLeft;
+            const mouseY = e.clientY - game.canvas.offsetTop;
+            if (this.isMouseDown) {
+                this.graphicsPath.push({ x: mouseX, y: mouseY });
+            }
+        };
+        window.onkeydown = (e) => {
+            if (e.keyCode === 32 && !this.isKeyDown) {
+                game.renderer.snapshot((image) => {
+                    image.style.width = '160px';
+                    image.style.height = '120px';
+                    image.style.paddingLeft = '2px';
+                    this.snapHistory.push(image);
+                    console.log('snap!');
+                    document.body.appendChild(image);
+                });
+                this.isKeyDown = true;
+            }
+        };
+        window.onkeyup = (e) => {
+            if (e.keyCode === 32) {
+                this.isKeyDown = false;
+            }
+        };
+
+        // Create a "Save Now" button
+        const saveButton = this.add.text(650, 10, 'Save Now', { fill: '#05b3a4' });
+        saveButton.setInteractive();
+        saveButton.on('pointerdown', () => {
+            // Hide the "Save Now" text
+            saveButton.visible = false;
+
+            // Trigger the snapshot
+            game.renderer.snapshot((image) => {
+                image.style.width = '160px';
+                image.style.height = '120px';
+                image.style.paddingLeft = '2px';
+                this.snapHistory.push(image);
+                console.log('snap!');
+                document.body.appendChild(image);
+
+                // Download the snapshot as an image
+                const link = document.createElement('a');
+                link.href = image.src;
+                link.download = 'snapshot.png';
+                link.click();
+                document.body.removeChild(image);  // Remove the image after download
+
+                // Disable snapshot preview
+                this.graphics.clear();
+                this.graphicsPath = [];
+
+                // Show the "Save Now" text again
+                saveButton.visible = true;
+            });
+        });
+    }
+
+    update() {
+        const length = this.graphicsPath.length;
+
+        this.graphics.clear();
+        this.graphics.lineStyle(10.0, 0xffff00, 1.0);
+        this.graphics.beginPath();
+        for (let i = 0; i < length; ++i) {
+            const node = this.graphicsPath[i];
+
+            if (i !== 0) {
+                this.graphics.lineTo(node.x, node.y);
+            } else {
+                this.graphics.moveTo(node.x, node.y);
+            }
+        }
+        this.graphics.strokePath();
+        this.graphics.closePath();
+
+        this.time += 0.01;
+    }
+}
+
+const config = {
+    type: Phaser.WEBGL,
+    width: 800,
+    height: 600,
+    backgroundColor: '#2d2d2d',
+    parent: 'phaser-example',
+    scene: Example,
+};
+
+const game = new Phaser.Game(config);
+
+</script>