From 615ef04e7e37a165b2fb8bfc2645b580b4666af7 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Wed, 30 Aug 2023 02:14:47 +0200
Subject: [PATCH] Cosmetic fixes

---
 index.html           | 35 +++++++++++++++++++++++------------
 src/Documentation.ts |  5 ++---
 src/main.ts          | 28 +++++++++++++++++-----------
 3 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 5b8f529..ded7025 100644
--- a/index.html
+++ b/index.html
@@ -104,30 +104,41 @@
 
     <div id="documentation" class="hidden">
       <div id="documentation-page" class="flex flex-row">
-        <aside class="h-fit p-1 lg:p-8 bg-neutral-900 text-white">
-          <nav class="space-y-0 text-xl sm:text-sm">
-            <div class="space-y-2">
-              <h2 class="font-semibold text-gray-400">Basics</h2>
+        <aside class="h-fit p-1 lg:p-6 bg-neutral-900 text-white">
+          <nav class="text-xl sm:text-sm overflow-y-scroll">
+            <div class="">
+              <h2 class="font-semibold lg:text-xl text-gray-400">Basics</h2>
               <div class="flex flex-col">
                 <p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Introduction </p>
                 <p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p>
-                <p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Code</p>
-                <p rel="noopener noreferrer" id="docs_time" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time</p>
-                <p rel="noopener noreferrer" id="docs_sound" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Sound</p>
+                <p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Keyboard</p>
+                <p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Coding</p>
+							</div>
+						</div>
+            <div class="space-y-2">
+              <h2 class="font-semibold lg:text-xl pb-1 pt-1 text-gray-400">Learning</h2>
+              <div class="flex flex-col">
+                <p rel="noopener noreferrer" id="docs_time" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time/Rhythm</p>
+                <p rel="noopener noreferrer" id="docs_sound" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Audio Engine</p>
                 <p rel="noopener noreferrer" id="docs_samples" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Samples</p>
                 <p rel="noopener noreferrer" id="docs_synths" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synths</p>
                 <p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>
-                <p rel="noopener noreferrer" id="docs_chaining" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Chaining</p>
-
+							</div>
+						</div>
+            <div class="space-y-2">
+              <h2 class="font-semibold lg:text-xl pb-1 pt-1 text-gray-400">Patterns</h2>
+              <div class="flex flex-col">
                 <p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Patterns</p>
-                <p rel="noopener noreferrer" id="docs_ziffers" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Ziffers</p>
+                <p rel="noopener noreferrer" id="docs_chaining" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Chaining</p>
                 <p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</p>
-                <p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Shortcuts</p>
+                <p rel="noopener noreferrer" id="docs_ziffers" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Ziffers</p>
+								<!--
                 <p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Reference</p>
+								-->
               </div>
             </div>
             <div class="space-y-2">
-              <h2 class="font-semibold text-gray-400">More</h2>
+              <h2 class="font-semibold lg:text-xl 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>
diff --git a/src/Documentation.ts b/src/Documentation.ts
index fee8a6a..ee874bf 100644
--- a/src/Documentation.ts
+++ b/src/Documentation.ts
@@ -1900,9 +1900,8 @@ Topos is made to be controlled entirely with a keyboard. It is recommanded to st
 
 | Shortcut | Key   | Description                                                |
 |----------|-------|------------------------------------------------------------|
-|**Start** transport|${key_shortcut("Ctrl + P")}|Start audio playback|
-|**Pause** the transport |${key_shortcut("Ctrl + S")}|Pause audio playback|
-|**Rewind** the transport|${key_shortcut("Ctrl + R")}|Rewind audio playback|
+|**Start/Pause** transport|${key_shortcut("Ctrl + P")}|Start or pause audio playback|
+|**Stop** the transport |${key_shortcut("Ctrl + S")}|Stop and rewind audio playback|
 	
 ## Moving in the interface
 
diff --git a/src/main.ts b/src/main.ts
index 9e58c11..5bb79fa 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -27,6 +27,7 @@ import {
   template_universes,
 } from "./AppSettings";
 import { tryEvaluate } from "./Evaluator";
+// @ts-ignore
 import { gzipSync, decompressSync, strFromU8 } from 'fflate';
 
 // Importing showdown and setting up the markdown converter
@@ -263,19 +264,13 @@ export class Editor {
     // Application event listeners
     // ================================================================================
 
-    document.addEventListener("keydown", (event: KeyboardEvent) => {
-      // TAB should do nothing
+    window.addEventListener("keydown", (event: KeyboardEvent) => {
+
       if (event.key === "Tab") {
         event.preventDefault();
       }
 
       if (event.ctrlKey && event.key === "s") {
-        event.preventDefault();
-        this.setButtonHighlighting("pause", true);
-        this.clock.pause();
-      }
-
-      if (event.ctrlKey && event.key === "r") {
         event.preventDefault();
         this.setButtonHighlighting("stop", true);
         this.clock.stop();
@@ -283,8 +278,15 @@ export class Editor {
 
       if (event.ctrlKey && event.key === "p") {
         event.preventDefault();
-        this.setButtonHighlighting("play", true);
-        this.clock.start();
+				if (this.isPlaying) {
+					this.isPlaying = false;
+					this.setButtonHighlighting("pause", true);
+					this.clock.pause();
+				} else {
+					this.isPlaying = true;
+					this.setButtonHighlighting("play", true);
+					this.clock.start();
+				}
       }
 
       // Ctrl + Shift + V: Vim Mode
@@ -370,8 +372,10 @@ export class Editor {
           if (event.keyCode === keycode) {
             event.preventDefault();
             if (event.ctrlKey) {
+							event.preventDefault();
               this.api.script(keycode - 111);
             } else {
+							event.preventDefault();
               this.changeModeFromInterface("local");
               this.changeToLocalBuffer(index);
               this.hideDocumentation();
@@ -381,10 +385,12 @@ export class Editor {
       );
 
       if (event.keyCode == 121) {
+				event.preventDefault();
         this.changeModeFromInterface("global");
         this.hideDocumentation();
       }
       if (event.keyCode == 122) {
+				event.preventDefault();
         this.changeModeFromInterface("init");
         this.hideDocumentation();
       }
@@ -591,7 +597,7 @@ export class Editor {
       "ziffers",
       "midi",
       "functions",
-      "reference",
+      // "reference",
       "shortcuts",
       "about",
     ].forEach((e) => {