new options for screenshot

swaroopg92 · Sep 24, 2023 · 64edad5 · 64edad5
1 parent 9937fd9
commit 64edad5
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## History
-* Unreleased
+* 2023/09/24 ver 3.0.9
+    * New options in Screenshot to include Author and Rules for png and jpeg. svg support not included.
     * Use new clipboard API when able. (Fixes Copy on iOS.)
+    * Minor bug fixes and code refactoring.
 * 2023/07/28 ver 3.0.8
 	* Updated jquery, sweetalert to latest.
 	* Fixed the bug of correctly deleteing cagearrays.

diff --git a/docs/index.html b/docs/index.html
@@ -31,7 +31,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <!-- Local styles -->
     <script>
-        var ver = "3.0.8"; // Also defined in class_p.js
+        var ver = "3.0.9"; // Also defined in class_p.js
         let style_sources = [
             "./css/light_theme.css",
             "./css/base-structure.css",
@@ -926,6 +926,18 @@ <h4><label class="label_imagespace" id="nb_type_lb">File Type:</label></h4>
                 <label for="nb_type2" class="label" id="nb_type2_lb">jpeg</label>
                 <input type="radio" name="nb_type" value="3" id="nb_type3">
                 <label for="nb_type3" class="label" id="nb_type3_lb">svg</label>
+                <br>
+                <h4><label class="label_imagespace" id="nb_title_lb">Title &amp; Author:</label></h4>
+                <input type="radio" name="nb_title" value="1" id="nb_title1">
+                <label for="nb_title1" class="label" id="nb_title1_lb">Yes</label>
+                <input type="radio" name="nb_title" value="2" id="nb_title2" checked="checked">
+                <label for="nb_title2" class="label" id="nb_title2_lb">No</label>
+                <br>
+                <h4><label class="label_imagespace" id="nb_rules_lb">Rules:</label></h4>
+                <input type="radio" name="nb_rules" value="1" id="nb_rules1">
+                <label for="nb_rules1" class="label" id="nb_rules1_lb">Yes</label>
+                <input type="radio" name="nb_rules" value="2" id="nb_rules2" checked="checked">
+                <label for="nb_rules2" class="label" id="nb_rules2_lb">No</label>
                 <br><br>
                 <span id="saveimagename_lb">File name:<input type="text" placeholder="sample_name" id="saveimagename"></span>
             </div>

diff --git a/docs/js/class_p.js b/docs/js/class_p.js
@@ -162,7 +162,7 @@ class Puzzle {
             ["\"__a\"", "z_"],
             ["null", "zO"],
         ];
-        this.version = [3, 0, 8]; // Also defined in HTML Script Loading in header tag to avoid Browser Cache Problems
+        this.version = [3, 0, 9]; // Also defined in HTML Script Loading in header tag to avoid Browser Cache Problems
         this.undoredo_disable = false;
         this.comp = false;
         this.multisolution = false;
@@ -2094,8 +2094,14 @@ class Puzzle {
 
         resizedContext.drawImage(this.canvas, 0, 0, resizedCanvas.width, resizedCanvas.height);
         if (document.getElementById("nb_type1").checked) {
+            if (document.getElementById("nb_title1").checked || document.getElementById("nb_rules1").checked) {
+                resizedCanvas = this.canvaswithinfo();
+            }
             var canvastext = resizedCanvas.toDataURL("image/png");
         } else if (document.getElementById("nb_type2").checked) {
+            if (document.getElementById("nb_title1").checked || document.getElementById("nb_rules1").checked) {
+                resizedCanvas = this.canvaswithinfo();
+            }
             var canvastext = resizedCanvas.toDataURL("image/jpeg");
         } else if (document.getElementById("nb_type3").checked) {
             var svg_canvas = new C2S(this.canvasx, this.canvasy);
@@ -2160,6 +2166,70 @@ class Puzzle {
         return canvastext;
     }
 
+    canvaswithinfo() {
+        //put the title text on the top
+        let main_c = $('#canvas')[0];
+        let main_ctx = main_c.getContext("2d");
+
+        let gif_c = document.createElement('canvas');
+        let gif_ctx = gif_c.getContext("2d");
+
+        let fontSize = 16;
+        let fontLineSize = fontSize * 1.2;
+        gif_ctx.font = "bold " + fontSize + "px sans-serif";
+        let puzzleTitle = 'Title: ' + document.getElementById("saveinfotitle").value;
+        let puzzleRules = document.getElementById("saveinforules").value;
+        let puzzleTitleLines = this.splitTextLines(gif_ctx, puzzleTitle, main_c.offsetWidth);
+        let puzzleRulesLines = this.splitTextLines(gif_ctx, puzzleRules, main_c.offsetWidth);
+        let puzzleAuthor = ('Author: ' + document.getElementById("saveinfoauthor").value).split(",");
+        if (document.getElementById("nb_title1").checked && document.getElementById("nb_rules1").checked) {
+            let puzzletext = puzzleTitleLines.concat(puzzleAuthor.concat(puzzleRulesLines));
+        } else if (document.getElementById("nb_title1").checked) {
+            let puzzletext = puzzleTitleLines.concat(puzzleAuthor);
+        } else {
+            let puzzletext = puzzleRulesLines;
+        }
+
+        let gif_vertical_offset = puzzletext.length * fontLineSize;
+        gif_c.width = main_c.offsetWidth;
+        gif_c.height = main_c.offsetHeight + gif_vertical_offset;
+        gif_ctx.font = "bold " + fontSize + "px sans-serif";
+
+        //clear the gif canvas
+        gif_ctx.fillStyle = "#fff";
+        gif_ctx.fillRect(0, 0, gif_c.width, gif_c.height);
+
+        //draw the title text.
+        gif_ctx.fillStyle = "#0000ff";
+        let textY = fontSize;
+        for (let textLine of puzzletext) {
+            gif_ctx.fillText(textLine, (gif_c.width - gif_ctx.measureText(textLine).width) / 2, textY);
+            textY += fontLineSize;
+        }
+
+        gif_ctx.drawImage(main_c, 0, 0, main_c.width, main_c.height, 0, gif_vertical_offset, gif_c.width, gif_c.height - gif_vertical_offset);
+        return gif_c;
+    }
+
+    splitTextLines(ctx, text, maxWidth) {
+        var words = text.split(" ");
+        var lines = [];
+        var currentLine = words[0];
+
+        for (var i = 1; i < words.length; i++) {
+            var word = words[i];
+            var width = ctx.measureText(currentLine + " " + word).width;
+            if (width < maxWidth) {
+                currentLine += " " + word;
+            } else {
+                lines.push(currentLine);
+                currentLine = word;
+            }
+        }
+        lines.push(currentLine);
+        return lines;
+    }
+
     gridspace_calculate() {
         this.redraw();
         // ピクセルデータから計算

diff --git a/docs/js/main.js b/docs/js/main.js
@@ -1750,25 +1750,6 @@ onload = function() {
                     document.getElementById("replay_message").innerHTML = "Preparing your download";
 
                     setTimeout(function() {
-                        function splitTextLines(ctx, text, maxWidth) {
-                            var words = text.split(" ");
-                            var lines = [];
-                            var currentLine = words[0];
-
-                            for (var i = 1; i < words.length; i++) {
-                                var word = words[i];
-                                var width = ctx.measureText(currentLine + " " + word).width;
-                                if (width < maxWidth) {
-                                    currentLine += " " + word;
-                                } else {
-                                    lines.push(currentLine);
-                                    currentLine = word;
-                                }
-                            }
-                            lines.push(currentLine);
-                            return lines;
-                        }
-
                         //put the title text on the top
                         let main_c = $('#canvas')[0];
                         let main_ctx = main_c.getContext("2d");
@@ -1876,6 +1857,25 @@ onload = function() {
         }
     }
 
+    function splitTextLines(ctx, text, maxWidth) {
+        var words = text.split(" ");
+        var lines = [];
+        var currentLine = words[0];
+
+        for (var i = 1; i < words.length; i++) {
+            var word = words[i];
+            var width = ctx.measureText(currentLine + " " + word).width;
+            if (width < maxWidth) {
+                currentLine += " " + word;
+            } else {
+                lines.push(currentLine);
+                currentLine = word;
+            }
+        }
+        lines.push(currentLine);
+        return lines;
+    }
+
     //panel(drag_window)
     var x_window;
     var y_window;