Support flipx and flipy

Author: Perlkonig

package-lock.json

@@ -31,7 +31,7 @@
         "vite": "^4.4.5"
     },
     "dependencies": {
-        "@abstractplay/renderer": "^1.0.0-ci-21051058249.0",
+        "@abstractplay/renderer": "latest",
         "@types/html2canvas": "^0.5.35",
         "@zerodevx/svelte-toast": "^0.9.6",
         "gif.js.optimized": "^1.0.1",

package.json

@@ -126,6 +126,20 @@
         glyphObj = glyphObj;
     };
 
+    let flipx = false;
+    const handleFlipXChange = () => {
+        flipx = !flipx;
+        glyphObj.flipx = flipx;
+        glyphObj = glyphObj;
+    };
+
+    let flipy = false;
+    const handleFlipYChange = () => {
+        flipy = !flipy;
+        glyphObj.flipy = flipy;
+        glyphObj = glyphObj;
+    };
+
     const addToLegend = () => {
         const id = nanoid();
         if (
@@ -207,6 +221,24 @@
                     />
                 </div>
             </div>
+            <div class="field">
+                <label class="checkbox">
+                    <input
+                        type="checkbox"
+                        bind:checked="{flipx}"
+                        on:input="{handleFlipXChange}"
+                    />
+                    Flip x coordinates
+                </label>
+                <label class="checkbox">
+                    <input
+                        type="checkbox"
+                        bind:checked="{flipy}"
+                        on:input="{handleFlipYChange}"
+                    />
+                    Flip y coordinates
+                </label>
+            </div>
             <div class="field">
                 <label class="label" for="addOverlay">Overlay text</label>
                 <div class="control">