From 369bc538c738326173436add024e41c0022a9e81 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sun, 27 Aug 2023 16:32:14 +0200
Subject: [PATCH] faster loading, broken interface

---
 index.html  | 82 +++++++++++++++++++----------------------------------
 src/main.ts | 53 ++++++----------------------------
 2 files changed, 38 insertions(+), 97 deletions(-)

diff --git a/index.html b/index.html
index 66816e4..dd2cd5d 100644
--- a/index.html
+++ b/index.html
@@ -49,46 +49,44 @@
           <svg id="share_button" title="Share button" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-black p-2 bg-white rounded-full" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
           </svg>
+
           <span id="universe-viewer" class="hidden xl:block ml-4 text-2xl text-white">Topos</span>
 
+
         </a>
         <nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
          <a title="Play button (Ctrl+P)" id="play-button-1" class="flex flex-row hover:bg-gray-800 px-2 py-2 rounded-lg">
-							<p class="text-xl pr-2 text-white inline-block">Play</p>
+							<p class="hidden lg:block text-xl pr-2 text-white inline-block">Play</p>
 							<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16">
 								<path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>
 							</svg>
           </a>
-          <a title="Pause button (Ctrl+S)" id="pause-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
-							<p class="text-xl pr-2 text-white inline-block">Pause</p>
-							<svg class="fill-orange-300 w-7 h-7 text-gray-800 text-white" fill="currentColor" viewBox="0 0 20 20">
-								<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 13a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Zm4 0a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Z"/>
-							</svg>
-          </a>
           <a title="Stop button (Ctrl+R)" id="stop-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
-						<p class="text-xl pr-2 text-white inline-block">Stop</p>
-            <svg class="w-7 h-7 text-gray-800 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 12 16">
-              <path d="M10.819.4a1.974 1.974 0 0 0-2.147.33l-6.5 5.773A2.014 2.014 0 0 0 2 6.7V1a1 1 0 0 0-2 0v14a1 1 0 1 0 2 0V9.3c.055.068.114.133.177.194l6.5 5.773a1.982 1.982 0 0 0 2.147.33A1.977 1.977 0 0 0 12 13.773V2.227A1.977 1.977 0 0 0 10.819.4Z"/>
-            </svg>
+						<p class="hidden lg:block text-xl pr-2 text-white inline-block">Stop</p>
+						<svg class="w-7 h-7 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+  <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
+  <rect x="6.5" y="6.5" width="7" height="7" fill="black" rx="1" ry="1"/>
+</svg>
           </a>
           <a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
-						<p class="text-xl pr-2 text-white inline-block">Eval</p>
+						<p class="hidden lg:block text-xl pr-2 text-white inline-block">Eval</p>
 						<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
   </svg>
           </a>
 
           <a title="Clear button" id="clear-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
-						<p class="text-xl pr-2 text-white inline-block">Clear</p>
-            <svg class="w-7 h-7 text-gray-800 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 17 20">
-              <path d="M7.958 19.393a7.7 7.7 0 0 1-6.715-3.439c-2.868-4.832 0-9.376.944-10.654l.091-.122a3.286 3.286 0 0 0 .765-3.288A1 1 0 0 1 4.6.8c.133.1.313.212.525.347A10.451 10.451 0 0 1 10.6 9.3c.5-1.06.772-2.213.8-3.385a1 1 0 0 1 1.592-.758c1.636 1.205 4.638 6.081 2.019 10.441a8.177 8.177 0 0 1-7.053 3.795Z"/>
+						<p class="hidden lg:block text-xl pr-2 text-white inline-block">Clear</p>
+						<svg class="w-7 h-7 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+    <path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/>
+  </svg>
             </svg>
           </a>
           <a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
-						<p class="text-xl pr-2 text-white inline-block">Docs</p>
-            <svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
-              <path d="M9 1.334C7.06.594 1.646-.84.293.653a1.158 1.158 0 0 0-.293.77v13.973c0 .193.046.383.134.55.088.167.214.306.366.403a.932.932 0 0 0 .5.147c.176 0 .348-.05.5-.147 1.059-.32 6.265.851 7.5 1.65V1.334ZM19.707.653C18.353-.84 12.94.593 11 1.333V18c1.234-.799 6.436-1.968 7.5-1.65a.931.931 0 0 0 .5.147.931.931 0 0 0 .5-.148c.152-.096.279-.235.366-.403.088-.167.134-.357.134-.55V1.423a1.158 1.158 0 0 0-.293-.77Z"/>
-            </svg>
+						<p class="hidden lg:block text-xl pr-2 text-white inline-block">Docs</p>
+						<svg class="w-7 h-7 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+  </svg>
           </a>
  
         </nav>
@@ -118,7 +116,7 @@
               </div>
             </div>
             <div class="space-y-2">
-              <h2 class="font-semibold dark:text-gray-400">More</h2>
+              <h2 class="font-semibold text-gray-400">More</h2>
               <div class="flex flex-col">
                 <a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">About Topos</a>
               </div>
@@ -174,8 +172,8 @@
                   <input id="bordered-radio-1" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600">
                   <label id="normal-mode" for="bordered-radio-1" class="w-full py-4 ml-2 text-sm font-medium text-black">Normal Mode</label>
                 </div>
-                <div class="flex items-center pl-4 border border-gray-200 rounded dark:border-gray-700 w-full">
-                  <input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                <div class="flex items-center pl-4 border rounded border-gray-700 w-full">
+                  <input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                   <label id="vim-mode" for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Mode</label>
                 </div>
               </div>
@@ -202,25 +200,6 @@
           </div>
         </div>
 
-
-      <!-- This modal pops up when the page is first loaded and then disappears forever -->
-      <div id="modal-container" class="motion-safe:animate-pulse flex min-h-screen flex flex-col">
-      <div id="modal" class="bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
-        <div id="start-button" class="bg-white px-2 py-2 lg:px-12 lg:py-12 rounded-md text-center">
-         <h1 class="text-xl mb-4 font-bold text-white rounded bg-gray-800 py-4 mb-6">Topos Alpha v0.1</h1>
-          <div class="flex ml-0 lg:flex-row landscape:space-y-0 portrait:space-y-2 lg:space-y-4 lg:space-y-0 portrait:flex-col landscape:flex-row lg:flex-col w-auto min-w-screen px-0 lg:space-x-8 landscape:space-x-2">
-            <a href="https://github.com/Bubobubobubobubo/Topos" class="block max-w-sm lg:p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
-              <h5 class="sm:pt-2 mb-2 lg:text-2xl text-xl font-bold tracking-tight text-white">GitHub</h5>
-              <p class="sm:pb-2 font-normal text-white">Get involved in the dev process and or file an issue for a broken feature</p>
-            </a>
-            <a href="https://discord.gg/aPgV7mSFZh" class="block max-w-sm lg:p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
-              <h5 class="sm:pt-2 mb-2 lg:text-2xl text-xl font-bold tracking-tight text-white">Discord</h5>
-              <p class="sm:pb-2 font-normal text-white">Join the community on the official Topos/Sardine Discord Server.</p>
-            </a>
-         </div>
-        </div>
-      </div>
-
       <div class="flex flex-row max-h-fit">
 
 				<!-- This is a lateral bar that will inherit the header buttons if the window is too small. -->
@@ -232,16 +211,13 @@
 					dark:border-neutral-700 border-none"
 				>
         <nav class="flex flex-col space-y-6">
-            <a title="Local Scripts (Ctrl + L)" id="local-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 hover:bg-gray-800">
-							<!--
-							<p class="grid font-mono font-semibold text-4xl content-center justify-center">L</p>
-							-->
+            <a title="Local Scripts (Ctrl + L)" id="local-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
               <svg class="w-8 h-8 text-orange-300" fill="currentColor" viewBox="0 0 20 20">
                 <path d="M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-11a1 1 0 0 0 1-1V1a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1Zm0 12a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1ZM4.343 5.757a1 1 0 0 0 1.414-1.414L4.343 2.929a1 1 0 0 0-1.414 1.414l1.414 1.414Zm11.314 8.486a1 1 0 0 0-1.414 1.414l1.414 1.414a1 1 0 0 0 1.414-1.414l-1.414-1.414ZM4 10a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h2a1 1 0 0 0 1-1Zm15-1h-2a1 1 0 1 0 0 2h2a1 1 0 0 0 0-2ZM4.343 14.243l-1.414 1.414a1 1 0 1 0 1.414 1.414l1.414-1.414a1 1 0 0 0-1.414-1.414ZM14.95 6.05a1 1 0 0 0 .707-.293l1.414-1.414a1 1 0 1 0-1.414-1.414l-1.414 1.414a1 1 0 0 0 .707 1.707Z"/>
               </svg>
             </a>
           
-            <a title="Global Script (Ctrl + G)" id="global-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 hover:bg-gray-800">
+            <a title="Global Script (Ctrl + G)" id="global-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
 							<!--
 							<p class="grid font-mono font-semibold text-4xl content-center justify-center">G</p>
 							-->
@@ -250,7 +226,7 @@
               </svg>
             </a>
           
-            <a title="Initialisation Script (Ctrl + I)" id="init-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 bg-gray-800">
+            <a title="Initialisation Script (Ctrl + I)" id="init-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg text-white bg-gray-800">
 							<!--
 							<p class="grid font-mono font-semibold text-4xl content-center justify-center">I</p>
 							-->
@@ -259,11 +235,11 @@
               </svg>
             </a>
 
-            <a title="Project notes (Ctrl + N)" id="note-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 hover:bg-gray-800">
-              <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 16 20">
-                <path d="M16 14V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 0 0 0-2h-1v-2a2 2 0 0 0 2-2ZM4 2h2v12H4V2Zm8 16H3a1 1 0 0 1 0-2h9v2Z"/>
-              </svg>
-            </a>
+            <a title="Project notes (Ctrl + N)" id="note-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
+							<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <path d="m13.835 7.578-.005.007-7.137 7.137 2.139 2.138 7.143-7.142-2.14-2.14Zm-10.696 3.59 2.139 2.14 7.138-7.137.007-.005-2.141-2.141-7.143 7.143Zm1.433 4.261L2 12.852.051 18.684a1 1 0 0 0 1.265 1.264L7.147 18l-2.575-2.571Zm14.249-14.25a4.03 4.03 0 0 0-5.693 0L11.7 2.611 17.389 8.3l1.432-1.432a4.029 4.029 0 0 0 0-5.689Z"/>
+  </svg>
+			      </a>
 
             <a title="Open settings" id="settings-button" class="lg:block sm:hidden p-2 text-gray-200 ml-1 absolute bottom-2 focus:outline-nones transition-colors duration-200 rounded-lg text-gray-200 bg-gray-800">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
@@ -306,7 +282,7 @@
  
          </ul>
          <!-- Here comes the editor itself -->
-          <div id="editor" class="invisible relative flex flex-row h-screen overflow-y-hidden">
+          <div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
 					</div>
           <p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
         </div>
diff --git a/src/main.ts b/src/main.ts
index 78aebf0..7eb136f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -84,6 +84,7 @@ export class Editor {
   view: EditorView;
   clock: Clock;
   manualPlay: boolean = false;
+	isPlaying: boolean = false;
 
   // Mouse position
   public _mouseX: number = 0;
@@ -92,11 +93,6 @@ export class Editor {
   // Transport elements
   play_buttons: HTMLButtonElement[] = [
     document.getElementById("play-button-1") as HTMLButtonElement,
-    //document.getElementById("play-button-2") as HTMLButtonElement,
-  ];
-  pause_buttons: HTMLButtonElement[] = [
-    document.getElementById("pause-button-1") as HTMLButtonElement,
-    //document.getElementById("pause-button-2") as HTMLButtonElement,
   ];
   stop_buttons: HTMLButtonElement[] = [
     document.getElementById("stop-button-1") as HTMLButtonElement,
@@ -414,9 +410,14 @@ export class Editor {
 
     this.play_buttons.forEach((button) => {
       button.addEventListener("click", () => {
-        this.setButtonHighlighting("play", true);
-        this.clock.start();
-      });
+				if (this.isPlaying) {
+      	  this.setButtonHighlighting("pause", true);
+      	  this.clock.pause();
+				} else {
+      	  this.setButtonHighlighting("play", true);
+      	  this.clock.start();
+				}
+			});
     });
 
     this.clear_buttons.forEach((button) => {
@@ -450,12 +451,6 @@ export class Editor {
       this.flashBackground("#2d313d", 200);
     });
 
-    this.pause_buttons.forEach((button) => {
-      button.addEventListener("click", () => {
-        this.setButtonHighlighting("pause", true);
-        this.clock.pause();
-      });
-    });
 
     this.stop_buttons.forEach((button) => {
       button.addEventListener("click", () => {
@@ -965,36 +960,6 @@ export class Editor {
 // Creating the application
 const app = new Editor();
 
-// Starting the clock after displaying a modal
-function startClock() {
-  document.getElementById("editor")!.classList.remove("invisible");
-  document.getElementById("modal")!.classList.add("hidden");
-  document
-    .getElementById("modal-container")!
-    .classList.remove("motion-safe:animate-pulse");
-  document
-    .getElementById("start-button")!
-    .removeEventListener("click", startClock);
-  document.removeEventListener("click", startClock);
-  document.removeEventListener("keydown", startOnEnter);
-  document.removeEventListener("click", startOnClick);
-  app.clock.start();
-  app.view.focus();
-  app.setButtonHighlighting("play", true);
-}
-
-function startOnEnter(e: KeyboardEvent) {
-  if (e.code === "Enter" || e.code === "Space") startClock();
-}
-
-function startOnClick(e: MouseEvent) {
-  if (e.button === 0) startClock();
-}
-
-document.addEventListener("keydown", startOnEnter);
-document.addEventListener("click", startOnClick);
-// document.getElementById("start-button")!.addEventListener("click", startClock);
-
 /**
  * @param event The mouse event
  */