Make embed view responsive to viewport width

Show only one of code or game view, show a toggle to switch between
YarnSpinnerTool · Dec 9, 2024 · 81784ca · 81784ca
1 parent 71515e1
commit 81784ca
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 2 deletions.
diff --git a/src/embed.html b/src/embed.html
@@ -150,12 +150,16 @@ <h1>Try Yarn Spinner</h1>
           </div>
         </div>
       </div>
+
       <div class="row flex-fill d-none" id="app" style="min-height: 0">
-        <div class="col-6 mh-100">
+        <div id="pane-editor" class="col-12 d-sm-block col-sm-6 mh-100">
           <div id="editor" class="h-100"></div>
         </div>
 
-        <div class="col-6 pt-2 mh-100">
+        <div
+          id="pane-game"
+          class="col-12 d-none d-sm-block col-sm-6 pt-2 mh-100"
+        >
           <div class="container h-100 d-flex flex-column">
             <div class="row flex-fill mh-100" style="overflow-y: scroll">
               <div class="col-12">
@@ -186,6 +190,20 @@ <h1>Try Yarn Spinner</h1>
           </div>
         </div>
       </div>
+      <div class="row d-sm-none">
+        <div class="col d-flex justify-content-center p-2">
+          <div class="btn-group">
+            <button
+              id="set-view-code"
+              class="btn btn-primary active"
+              aria-current="page"
+            >
+              Code
+            </button>
+            <button id="set-view-game" class="btn btn-primary">Preview</button>
+          </div>
+        </div>
+      </div>
       <div class="d-none row flex-shrink-0" id="app-footer">
         <div class="col-12">
           <p>

diff --git a/src/playground.ts b/src/playground.ts
@@ -295,6 +295,36 @@ export async function load(script: string) {
     console.error(error.message);
   };
 
+  const setViewGameButton = document.getElementById("set-view-game");
+  const setViewCodeButton = document.getElementById("set-view-code");
+  const paneGame = document.getElementById("pane-game");
+  const paneEditor = document.getElementById("pane-editor");
+
+  function setMode(mode: "game" | "code") {
+    switch (mode) {
+      case "game":
+        paneEditor?.classList.add("d-none");
+        paneGame?.classList.remove("d-none");
+        setViewGameButton?.classList.add("active");
+        setViewCodeButton?.classList.remove("active");
+        break;
+      case "code":
+        paneGame?.classList.add("d-none");
+        paneEditor?.classList.remove("d-none");
+        setViewCodeButton?.classList.add("active");
+        setViewGameButton?.classList.remove("active");
+        editor.layout();
+        break;
+    }
+  }
+
+  setViewGameButton?.addEventListener("click", () => {
+    setMode("game");
+  });
+  setViewCodeButton?.addEventListener("click", () => {
+    setMode("code");
+  });
+
   const playButton = document.getElementById("button-test");
 
   if (playButton) {
@@ -303,6 +333,8 @@ export async function load(script: string) {
         return;
       }
 
+      setMode("game");
+
       clearLog();
       hideVariableStorageDisplay();