shithub: puzzles

Info  •  Files  •  Log  •  Branches

js: Add an SVG resize handle to the HTML

This is more compact than carefully drawing it on a canvas in
JavaScript.  More importantly, the SVG resize handle scales nicely as
the page is zoomed, or on high-DPI screens.

At the moment, the nice SVG resize handle is removed by JavaScript,
but we need to wait a little while for everyone to get the new HTML
cached before changing that.

--- a/html/jspage.pl

+++ b/html/jspage.pl

@@ -357,6 +357,9 @@

   <div id="resizable">

   <canvas id="puzzlecanvas" tabindex="0"></canvas>

   <div id="statusbar"></div>

+  <img id="resizehandle" alt="resize"

+       title="Drag to resize the puzzle. Right-click to restore the default size."

+       src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Cpath%20d='M8.5,1.5l-7,7m7,-4l-4,4m4,-1l-1,1'%20stroke='black'%20stroke-linecap='round'/%3E%3C/svg%3E">

   </div>

   <p>

     Link to this puzzle: