add option to show qr code for playground

Playground/index-local.html

@@ -97,6 +97,12 @@
                     <div class="option" id="minimapToggle1600">Minimap
                         <i class="far fa-square" aria-hidden="true"></i>
                     </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -443,6 +449,9 @@
     </div>
 
     <script src="https://code.jquery.com/jquery.js"></script>
+    <script src="https://jeromeetienne.github.io/jquery-qrcode/src/jquery.qrcode.js"></script>
+    <script src="https://jeromeetienne.github.io/jquery-qrcode/src/qrcode.js"></script>
+    
 
     <script src="js/actions.js"></script>
     <script src="js/pbt.js"></script>

Playground/index.html

@@ -115,6 +115,12 @@
                     <div class="option" id="minimapToggle1600">Minimap
                         <i class="far fa-square" aria-hidden="true"></i>
                     </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -461,6 +467,8 @@
     </div>
 
     <script src="js/libs/jquery.min.js"></script>
+    <script src="https://jeromeetienne.github.io/jquery-qrcode/src/jquery.qrcode.js"></script>
+    <script src="https://jeromeetienne.github.io/jquery-qrcode/src/qrcode.js"></script>
 
     <script src="js/actions.js"></script>
     <script src="js/pbt.js"></script>

Playground/indexStable.html

@@ -207,6 +207,12 @@
                             <div class="option" onclick="setVersion('stable');">Stable</div>
                         </div>
                     </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -442,6 +448,8 @@
     </div>
 
     <script src="https://code.jquery.com/jquery.js"></script>
+    <script src="https://jeromeetienne.github.io/jquery-qrcode/src/jquery.qrcode.js"></script>
+    <script src="https://jeromeetienne.github.io/jquery-qrcode/src/qrcode.js"></script>
 
     <script>
         Split(['#jsEditor', '#canvasZone']);

Playground/js/index.js

@@ -848,6 +848,11 @@ function showError(errorMessage, errorEvent) {
             setToMultipleID("currentFontSize", "innerHTML", "Font: " + size);
         };
 
+        showQRCode = function() {
+            $("#qrCodeImage").empty();
+            $("#qrCodeImage").qrcode({text: window.location.href});
+        };
+
         // Fullscreen
         document.getElementById("renderCanvas").addEventListener("webkitfullscreenchange", function() {
             if (document.webkitIsFullScreen) goFullPage();

Playground/ts.html

@@ -388,6 +388,12 @@
                                 <div class="option" onclick="setVersion('stable');">Stable</div>
                             </div>
                         </div>
+                        <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
+                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                            <div class="toDisplaySub">
+                                <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -466,6 +472,8 @@
         </div>
 
         <script src="js/libs/jquery.min.js"></script>
+        <script src="https://jeromeetienne.github.io/jquery-qrcode/src/jquery.qrcode.js"></script>
+        <script src="https://jeromeetienne.github.io/jquery-qrcode/src/qrcode.js"></script>
 
         <script src="js/actions.js"></script>
         <script src="js/pbt.js"></script>