From c75b6845a6e48ca70ba71b5568ca2bc4ce1fa7cf Mon Sep 17 00:00:00 2001
From: Thomas Weber <weber_t@mailbox.org>
Date: Fri, 18 Jun 2021 18:27:30 -0500
Subject: [PATCH] Add controls to scaffolding example

---
 src/scaffolding/example.html | 84 ++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/src/scaffolding/example.html b/src/scaffolding/example.html
index 6844fc8..e3030d4 100644
--- a/src/scaffolding/example.html
+++ b/src/scaffolding/example.html
@@ -67,6 +67,27 @@
         width: 0;
         background-color: currentColor;
       }
+      .control-button {
+        width: 2rem;
+        height: 2rem;
+        padding: 0.375rem;
+        border-radius: 0.25rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+        user-select: none;
+        cursor: pointer;
+        border: 0;
+        border-radius: 4px;
+      }
+      .control-button:hover {
+        background: hsla(0, 100%, 65%, 0.15);
+      }
+      .control-button.active {
+        background: hsla(0, 100%, 65%, 0.35);
+      }
+      .fullscreen-button {
+        background: white !important;
+      }
     </style>
   </head>
   <body>
@@ -127,6 +148,69 @@
       };
       setProgress(0.1);
 
+      const greenFlagButton = document.createElement("img");
+      greenFlagButton.src = 'data:image/svg+xml,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.63 17.5"><path d="M.75 2a6.44 6.44 0 017.69 0h0a6.44 6.44 0 007.69 0v10.4a6.44 6.44 0 01-7.69 0h0a6.44 6.44 0 00-7.69 0" fill="#4cbf56" stroke="#45993d" stroke-linecap="round" stroke-linejoin="round"/><path stroke-width="1.5" fill="#4cbf56" stroke="#45993d" stroke-linecap="round" stroke-linejoin="round" d="M.75 16.75v-16"/></svg>`);
+      greenFlagButton.className = 'control-button';
+      greenFlagButton.addEventListener('click', () => {
+        scaffolding.greenFlag();
+      });
+      scaffolding.addEventListener('PROJECT_RUN_START', () => {
+        greenFlagButton.classList.add('active');
+      });
+      scaffolding.addEventListener('PROJECT_RUN_STOP', () => {
+        greenFlagButton.classList.remove('active');
+      });
+      scaffolding.addControlButton({
+        element: greenFlagButton,
+        where: 'top-left'
+      });
+
+      const stopAllButton = document.createElement("img");
+      stopAllButton.src = 'data:image/svg+xml,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="#ec5959" stroke="#b84848" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M4.3.5h5.4l3.8 3.8v5.4l-3.8 3.8H4.3L.5 9.7V4.3z"/></svg>`);
+      stopAllButton.className = 'control-button';
+      stopAllButton.addEventListener('click', () => {
+        scaffolding.stopAll();
+      });
+      scaffolding.addControlButton({
+        element: stopAllButton,
+        where: 'top-left'
+      });
+
+      if (document.fullscreenEnabled) {
+        let isFullScreen = !!document.fullscreenElement;
+        const fullscreenButton = document.createElement("img");
+        fullscreenButton.className = 'control-button fullscreen-button';
+        fullscreenButton.addEventListener('click', () => {
+          if (isFullScreen) {
+            document.exitFullscreen().then(() => {
+              isFullScreen = false;
+              updateFullscreenImage();
+            });
+          } else {
+            document.body.requestFullscreen().then(() => {
+              isFullScreen = true;
+              updateFullscreenImage();
+            });
+          }
+        });
+        const updateFullscreenImage = () => {
+          if (isFullScreen) {
+            fullscreenButton.src = 'data:image/svg+xml,' + encodeURIComponent(`<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><g fill="#575E75" fill-rule="evenodd"><path d="M12.662 3.65l.89.891 3.133-2.374a.815.815 0 011.15.165.819.819 0 010 .986L15.467 6.46l.867.871c.25.25.072.664-.269.664L12.388 8A.397.397 0 0112 7.611V3.92c0-.341.418-.514.662-.27M7.338 16.35l-.89-.89-3.133 2.374a.817.817 0 01-1.15-.166.819.819 0 010-.985l2.37-3.143-.87-.871a.387.387 0 01.27-.664L7.612 12a.397.397 0 01.388.389v3.692a.387.387 0 01-.662.27M7.338 3.65l-.89.891-3.133-2.374a.815.815 0 00-1.15.165.819.819 0 000 .986l2.37 3.142-.87.871a.387.387 0 00.27.664L7.612 8A.397.397 0 008 7.611V3.92a.387.387 0 00-.662-.27M12.662 16.35l.89-.89 3.133 2.374a.817.817 0 001.15-.166.819.819 0 000-.985l-2.368-3.143.867-.871a.387.387 0 00-.269-.664L12.388 12a.397.397 0 00-.388.389v3.692c0 .342.418.514.662.27"/></g></svg>`);
+          } else {
+            fullscreenButton.src = 'data:image/svg+xml,' + encodeURIComponent(`<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><g fill="#575E75" fill-rule="evenodd"><path d="M16.338 7.35l-.89-.891-3.133 2.374a.815.815 0 01-1.15-.165.819.819 0 010-.986l2.368-3.142-.867-.871a.387.387 0 01.269-.664L16.612 3a.397.397 0 01.388.389V7.08a.387.387 0 01-.662.27M3.662 12.65l.89.89 3.133-2.374a.817.817 0 011.15.166.819.819 0 010 .985l-2.37 3.143.87.871c.248.25.071.664-.27.664L3.388 17A.397.397 0 013 16.611V12.92c0-.342.418-.514.662-.27M3.662 7.35l.89-.891 3.133 2.374a.815.815 0 001.15-.165.819.819 0 000-.986L6.465 4.54l.87-.871a.387.387 0 00-.27-.664L3.388 3A.397.397 0 003 3.389V7.08c0 .341.418.514.662.27M16.338 12.65l-.89.89-3.133-2.374a.817.817 0 00-1.15.166.819.819 0 000 .985l2.368 3.143-.867.871a.387.387 0 00.269.664l3.677.005a.397.397 0 00.388-.389V12.92a.387.387 0 00-.662-.27"/></g></svg>`);
+          }
+        };
+        updateFullscreenImage();
+        document.addEventListener('fullscreenchange', () => {
+          isFullScreen = !!document.fullscreenElement;
+          updateFullscreenImage();
+        });
+        scaffolding.addControlButton({
+          element: fullscreenButton,
+          where: 'top-right'
+        });
+      }
+
       scaffolding.addCloudProvider(new Scaffolding.Cloud.WebSocketProvider('wss://clouddata.turbowarp.org', PROJECT_ID));
 
       const getProjectJSON = async () => {